- ベストアンサー
CSSでレイアウト（絵参照）を組むにはどうすればいいですか？
CSS勉強中のものです。 よく見かけるこのような感じのレイアウトで配置したいんですが・・・ ■■■■ □□□タイトル□□□ ■画像■ ○○○テキスト○○○ ■■■■ ○○○テキスト○○○ どうすればいいのでしょうか？ 初心者の私が思いつくのは、「画像」と「タイトル」と「テキスト」それぞれを一つの大枠で囲んで、 画像を「フロート：left」 タイトルを「フロート：right」 テキストを「フロート：right、マージン：タイトル分のpx」 このようにすればできるとは思うんですが、なにか面倒なような気がします。 また、あまり複雑にしてしまうとIE以外のブラウザなどで問題が起きそうな気がしますし・・・ いろいろ方法はあるとは思うのですが、最適なやり方を教えていただけないでしょうか？ どうかよろしくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こういうのは、画像があってその題名や説明を書いていることが多 いので、DLを使うのがいいでしょう。 とすると、HTMLは <dl class="hoge"> <dt><img src="gebo.gif"> <dd>title<br>text </dl> で、CSSは DL.hoge dt { clear: both; } DL.hoge img { float:left; max-width: 100px; } DL.hoge dd{ margin-left: 110px; } みたいな感じで済むんじゃないでしょうか。
その他の回答 (1)
とても古典的な書き方になるかもしれませんがご参考までに。 画像の大きさを「200×200」とした場合で書いてみました。 <head> <title></title> <style type="text/css"> <!-- .t1{ float: left; width: 200px ;/*画像の幅*/ height: 220px ;/*画像の高さ＋20pxに指定します*/ background-image : url(sample.gif);/*画像ファイル名は任意*/ } .t2{ width: 200px ;/*タイトル枠の幅*/ height: 10px ;/*タイトル枠の高さ*/ background-color: #ffffff;/*タイトル背景の色*/ text-align: center;/*タイトル文字のセンタリング*/ font-weight: bold;/*タイトル文字を太くする*/ padding: 0.5em;/*タイトル周りの余白*/ } .t3{ width: 200px ;/*テキスト枠の幅*/ height: 190px ;/*テキスト枠の高さ*/ background-color: #ffffff;/*テキスト背景の色*/ text-align: center;/*テキスト文字のセンタリング*/ padding: 0.5em;/*テキスト周りの余白*/ } --> </style> </head> <body> <div class="t1">画像ファイル</div> <div class="t2">タイトル</div> <div class="t3">テキスト<br>テキスト</div> </body> 本来ならばNo.1さんの書き方が一番適切だと思いますよ。
お礼
ありがとうございます。 ひょっとすると、タグに直接CSSを指定するやり方でしょうか？ まだまだ勉強中でして、ひとまずクラスとIDだけしか知らず、正直これをこのままコピーする以外にできそうにないかもです・・・ ちなみに「DL hoge ○○」というのはどういった使い方をすればいいのでしょうか？ DLとhogeと○○の関係、といいますか書き方が全く見当もつきません。 できればこの際に覚えようかとも思うのですが、どこか参考サイトのようなものはありますでしょうか？ お礼の欄なのにすみません・・・ もしご存知でしたらお願いいたします。