- ベストアンサー
cssでのレイアウト
下をピッタリそろえて「Ｌ」のような形にしたいのですが、簡単な方法を教えてください。下がそろっていませんが、イメージは↓のような感じです。もっと簡単に下揃えをつくる基本的な方法があったような気がするのですが分かりません。 宜しくお願いします。 ■html■ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional1//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>CSS練習</title> <link href="def2.css" rel="stylesheet" type="text/css"> </head> <body> <div class="blue"> <h1>あ行</h1> あいうえお </div> <div class="red"> <h1>か行</h1> かきくけこ </div> <div class="blue"> <h1>さ行</h1> さしすせそ </div> <div class="a"> <h1>あ行</h1> あいうえお </div> <div class="ka"> <h1>か行</h1> かきくけこ </div> <div class="sa"> <h1>さ行</h1> さしすせそ </div> </body> </html> ■CSS■ body { font-size: 12px; color: #333333; background-color: #FFFFFF; } h1 { color: #000000; font-size: 16px; } div.red { background-color: #ff3333; } div.blue { background-color: #3333ff; } div { width: 3cm; } div.a { background-color: #ff7777; } div.ka { margin-top: -4em; margin-left: 3cm; background-color: #ff7777; } div.sa { margin-top: -4em; margin-left: 6cm; background-color: #77ff77; }
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
一つ入れ物追加して高さ指定、中をheight100%にする、なんてのはどうでしょう。 高さの数値は相対指定になる単位がいいと思います。 横並びはfloatが早いです。 <div id="sample"> <div class="a"> <h1>あ行</h1> あいうえお<br /> あいうえお<br /> あいうえお<br /> </div> <div class="ka"> <h1>か行</h1> かきくけこ </div> <div class="sa"> <h1>さ行</h1> さしすせそ<br /> さしすせそ<br /> </div> </div> div.a { background-color: #ff7777; float:left; height:100%; } div.ka { float:left; background-color: #ff7777; height:100%; } div.sa { float:left; background-color: #77ff77; height:100%; } #sample { float:left; width:auto; height:7em; ←emは相対 } 背景は画像にしてもいいのではないかと。 質問のソースではインライン化しての横並びは無理です。 HTML変えればやれないことはないですが、floatの方が楽だと思います ＞「インライン要素として」で思い出したのですが... spanは元々インライン要素でdivはブロック要素です。 Divにdisplay:inlineするとインライン要素として振舞うようになります。 何でインラインなら横に並ぶのか、というのは両者の違いについて調べれば分かってくると思います。
その他の回答 (1)
- 15mm
- ベストアンサー率65% (65/100)
div { width: 3cm;height:4em; } widthを指定した目的は横の配置をそろえるためだったのではないでしょうか。 それと同じ要領でheightを指定してたての大きさを固定してあげるといいと思いますよ。 （もともと使われていた4emをそのまま使ってみましたが、ちょっと狭すぎる気がします） div.a, div.ka, div.sa{display:inline;} もういっそのことインライン要素として横に並んでもらう、という方法です。 画面下端でそろえるのでしたらまた違う方法を使うのですが・・・ ＞もっと簡単に下揃えをつくる基本的な方法があったような気がするのですが <table>を使ったレイアウトですと、内容が増えても横幅、縦幅を自動で適当な大きさに変えてくれますよ。
補足
ありがとうございます。いろいろな書き方があるんですね。CSS初心者なので感心してしまいました。 >heightを指定してたての大きさを固定してあげる のやり方でうまくいきました。 >インライン要素として横に並んでもらう このやり方がうまくいかないのですが、書き方をもう少し詳しく教えては頂けないでしょうか？よろしくお願い致します。 「インライン要素として」で思い出したのですが、spanをつかって並ばせる事も出来たような気がするのですが…可能でしょうか？ 何度も申し訳ありませんが、よろしくお願いします。
お礼
floatが一番実用的ですね。ありがとうございました。