ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
QNo.4017216 cssでのレイアウト
質問者：snyuki 下をピッタリそろえて「Ｌ」のような形にしたいのですが、簡単な方法を教えてください。下がそろっていませんが、イメージは↓のような感じです。もっと簡単に下揃えをつくる基本的な方法があったような気がするのですが分かりません。
宜しくお願いします。

■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;
}
困り度：
  • すぐに回答を！
質問投稿日時：
08/05/12 19:22
最新から表示｜回答順に表示

回答
ANo.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するとインライン要素として振舞うようになります。
何でインラインなら横に並ぶのか、というのは両者の違いについて調べれば分かってくると思います。
回答者：tenderfeel
種類：回答
どんな人：経験者
自信：参考意見
回答日時：
08/05/14 01:39
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答
ANo.1 div { width: 3cm;height:4em;
}

widthを指定した目的は横の配置をそろえるためだったのではないでしょうか。
それと同じ要領でheightを指定してたての大きさを固定してあげるといいと思いますよ。
（もともと使われていた4emをそのまま使ってみましたが、ちょっと狭すぎる気がします）


div.a, div.ka, div.sa{display:inline;}

もういっそのことインライン要素として横に並んでもらう、という方法です。


画面下端でそろえるのでしたらまた違う方法を使うのですが・・・

＞もっと簡単に下揃えをつくる基本的な方法があったような気がするのですが
<table>を使ったレイアウトですと、内容が増えても横幅、縦幅を自動で適当な大きさに変えてくれますよ。
回答者：15mm
種類：回答
どんな人：一般人
自信：参考意見
回答日時：
08/05/12 21:50
この回答への補足ありがとうございます。いろいろな書き方があるんですね。CSS初心者なので感心してしまいました。

>heightを指定してたての大きさを固定してあげる
のやり方でうまくいきました。

>インライン要素として横に並んでもらう
このやり方がうまくいかないのですが、書き方をもう少し詳しく教えては頂けないでしょうか？よろしくお願い致します。
「インライン要素として」で思い出したのですが、spanをつかって並ばせる事も出来たような気がするのですが…可能でしょうか？
何度も申し訳ありませんが、よろしくお願いします。
この回答へのお礼この回答にお礼をつける(質問者のみ)
最新から表示｜回答順に表示
このページのトップへ