Pop'n music Training Association - PTA

2005/07/24 08:59

ちょっとだけCSS

会長さんからCSSの質問があったのでちょっとがんばって答えてみようと思います。

会長は画像の隣にテキストを書きたいコトがあって、でもテーブル組んだりするのがめんどくさくて…

とのことですが、画像を回り込ませたいときはfloatというプロパティを設定します。

<imgsrc = "画像のURL" style="float:left" >

という風うにfloat:leftと書くと、画像が左側に回り込んでくれます。

これをfloat:rightとすると右に回り込んでくれます。
これをstyle="float:left"とか一々書くのも面倒、エントリーに書いた画像に関しては常に左に回りこんで欲しいという場合は、サイトに読み込んでいるCSSファイルを編集すると常に左に回りこんでくれるようになります。
MovableTypeを使っている場合は、「Templateの編集」から、インデックステンプレートに含まれているスタイルシートを変更します。

MovableTypeを使っている場合は、「Templateの編集」から、インデックステンプレートに含まれているスタイルシートを変更します。
いろいろな呪文が書かれていますが、その辺はざっくり無視して、一番下のほうに

.content img {
  float:left;
}

と書き、保存して再構築をします。
このとき再構築するのはスタイルシートのテンプレートだけで、サイト全体を再構築をする必要はありません。

これで、エントリーで書いた画像は全部左に回りこんでくれるようになります。
ちょっと画像と文字の間隔が狭いなぁという場合は

.content img {
  float:left;
  margin-right:10px;
}

と記述すると、右側に10ピクセルの余白が空きます。ここをmargin-leftと書くと左側に空くわけですね。
という感じでよろしいでしょうか。
.contentって何？という疑問もあると思いますが、その辺はまた今度触れていければと思います。

やー、解説をするエントリーを書くって言うのは大変ですね。
たくさんの解説サイトのありがたみが身にしみてわかりました。