左右二段組の記事を作成する方法（回り込みの方法）

今回はブログやホームページで左右二段組の記事を作成する方法を紹介します。

これを使うとこんなことができます。

左側の記事はここに書かれたものが表示されます。

右側の記事はここに書かれたものが表示されます。

あらら…左右の記事の位置がずれてますね。wordpressだとうまくいったんですが…
この辺りはブログによるのかもしれません。

二段組を作るには、二つの方法があります。

• テーブルを使う


• スタイルシートを使う

このうち、テーブルを使う方法はお行儀が悪いとされています。ここでは、スタイルシートを使う方法を説明します。

スタイルシートについては以下のページが詳しいです。
とほほのスタイルシート入門
http://www.tohoho-web.com/css/index.htm

上の例は以下のように作りました。
＜div style="width:200px; float:left;"＞
左側の記事はここに書かれたものが表示されます。
＜/div＞
＜div style="width:200px; float:left;"＞
右側の記事はここに書かれたものが表示されます。
＜/div＞
＜div style="clear:both;"＞＜/div＞

(HTML編集ができるブログを使う必要があります。＜＞は<>に変えてください)
widthは横幅です。このブログの記事が400px強ぐらいなので、200pxに設定しました。この幅はブログによって違うので試行錯誤でブログに合う幅を見つけてみてください。

float:leftは「左側に寄せる」命令です。floatを使うことで記事を回り込ませることができます。

最後のclear:bothはfloatを解除する命令です。


この方法を、別ファイルのスタイルシートを使って行うこともできます。

wordpressの場合はテーマフォルダ「wp-content/themes」の中の現在使っているテーマのフォルダの中に「style.css」というものがあると思います。（テーマによって名前が異なるかもしれません。なんとか.cssというファイルです。）そのファイルに、以下のような文を追加します。

div.halfsize{
width: 200px;
float: left;
}

div.clear{
clear: both;
}

ブログ記事はこのように書きます。
＜div class="halfsize"＞
左側の記事はここに書かれたものが表示されます。
＜/div＞
＜div class="halfsize"＞
右側の記事はここに書かれたものが表示されます。
＜/div＞
＜div class="clear"＞＜/div＞


僕はwordpressでは下の方法を使っています。