2005/07/24 08:59


ちょっとだけCSS

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

会長は画像の隣にテキストを書きたいコトがあって、でもテーブル組んだりするのがめんどくさくて…
とのことですが、画像を回り込ませたいときはfloatというプロパティを設定します。

ポップンミュージック11

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

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

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

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

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

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

HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る?

なまえ:部長
こめんと
会長。 2005年07月24日 17:51

試しにやってみた。でけたッ!
コレで画像の隣にテキスト書けるよエヘエヘ。
よーし…また一つ賢くなったぞ。

こめんとを書く












このページのトップへ