スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

横並びのボックスの左右を親ボックスの幅ピッタリに収める

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第16回目の授業です。

今日は、コーディングの際のちょっとした小技を紹介します。

幅を決めたdivの中に、いくつかのボックスを横並びにします。
その際、並んだボックスの左右を、親divの幅ぴったりにしたいという条件です。

横並びのボックスの左右を親ボックスの幅ピッタリに収める

それでは見てみましょう!

INDEX

  1. 基本的な考え方
  2. 実践:divを使う場合
  3. 実践:リストを使う場合

基本的な考え方

幅の決まったdivがあります。ここでは640px。

横並びのボックスの左右を親ボックスの幅ピッタリに収める

その中に、幅200pxのボックスを横に並べます。
その際、ボックスとボックスの間は20pxあけます。

横並びのボックスの左右を親ボックスの幅ピッタリに収める

ここまでのCSS。

#wrapper {
	width: 640px;
	margin: 0 auto;/*ブラウザの中央に配置*/
}
.box {
	width: 180px;/*内容領域の幅。下の左右のpaddingを合わせてボックスが200pxになります。*/
	padding: 10px;/*上下左右に10pxの内余白*/
	float: left;/*横並びにしています*/
	margin-right: 20px;/*各ボックスの右側に20pxの外余白*/
	background: #fff;
}

さて、これで表示させると、下のようになります。

横並びのボックスの左右を親ボックスの幅ピッタリに収める

200pxのボックスの右に20pxのマージンがあるので、それが3つ並ぶと220px×3=660pxとなり、親divの幅640pxに収まらないからです。

これを解決するのが、下のようなイメージです。

横並びのボックスの左右を親ボックスの幅ピッタリに収める

横並びのボックスを包むボックスに、子ボックスが並ぶ幅を指定してやります。親divより大きくなってますが、これでOK。

そして、そのボックスにoverflow:hidden;を指定します。

これだけ!

.container {
	width: 660px;
	overflow: hidden;
}

これで、親のdivの幅からはみ出た部分が非表示になります。

横並びのボックスの左右を親ボックスの幅ピッタリに収める

次に、具体的なコードを示します。

実践:divを使う場合

まずは、並べるボックスをdivで作る場合です。

HTML
<div id="wrapper">
  <h1>横並びのボックスを幅ピッタリに収める</h1>
 <div class="container">
  
  <div class="box">boxの内容がここに入ります。</div>
  <div class="box">boxの内容がここに入ります。</div>
  <div class="box">boxの内容がここに入ります。</div>
  
  </div>
</div>
CSS
#wrapper {
	width: 640px;
	margin: 0 auto;/*ブラウザの中央に配置*/
}
.container {
	width: 660px;/*boxが横に並ぶだけの幅を確保*/
	overflow: hidden;/*wrapperからはみ出る部分を非表示にする*/
}
.box {
	width: 180px;/*内容領域の幅。下の左右のpaddingを合わせてボックスが200pxになります。*/
	padding: 10px;/*上下左右に10pxの内余白*/
	float: left;/*横並びにしています*/
	margin-right: 20px;/*各ボックスの右側に20pxの外余白*/
	background: #fff;
}

ポイントは、並べる子ボックスを包むdiv(ここではcontainer)を設けてやることです。
そしてそのdivに、マージンを含めて一列にした時の幅と、overflow: hidden;を指定してやること。

実践:リストを使う場合

続いて、リストで子ボックスを構成する場合です。

HTML
<div id="wrapper">
  <h1>横並びのボックスを幅ピッタリに収める</h1>
<ul>
  <li>boxの内容がここに入ります。</li>
  <li>boxの内容がここに入ります。</li>
  <li>boxの内容がここに入ります。</li>
</ul>
</div>
CSS
#wrapper {
	width: 640px;
	margin: 0 auto;/*ブラウザの中央に配置*/
}
ul {
	width: 660px;/*(liの幅+margin-rightの値)×列数*/
	overflow: hidden;/*wrapperからはみ出る部分を非表示にする*/
	list-style: none;
	padding: 0;
}
li {
	width: 180px;/*内容領域の幅。下の左右のpaddingを合わせてボックスが200pxになります。*/
	padding: 10px;/*上下左右に10pxの内余白*/
	float: left;/*横並びにしています*/
	margin-right: 20px;/*各ボックスの右側に20pxの外余白*/
	background: #fff;
}

子ボックスを包む親ボックスが、リストの場合だとulがそのまま利用できるのですね。
CSSの内容はほとんど一緒です。

divを使った方法との違いは、ulに「list-style: none;padding: 0;」を指定していることです。
ulには元々、ブラウザ規定の余白等がありますので、それをなくしてやりましょう。

どうでしたか?
このあたりが理解できると、ちょっと初心者からは一歩出られそうです。
思い通りのコーディングができるようになってくると、ますます楽しいですね!

それでは、お疲れさまでした!

関連記事
このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

コメントの投稿

非公開コメント

お久しぶりです。

先生お元気ですか?お久しぶりです。

参考にさせてもらいながら書き直して、
やっとと言うか今さらなんですが結構思った形になってきました。
バナーやボタンに時間が掛かったんですが作ってると楽しいですね。

ショートカット物凄く助かりました!!ありがとうございます。
寒くなってきたので風邪には気をつけてくださいね。


ありがとうございます♪

うなぎさんお久しぶりです^^

ホームページ、さらにカッコ良くなりましたね!
お役に立てて嬉しいです。
これからも楽しみにしています!

うなぎさんもお身体には気を付けてくださいねー(^o^)/
ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。