システム屋さんが喜ぶ！？プログラムを意識した組み方
要素を繰り返して並べたい！ そして３つ並べたら改行したいから３つおきにclassをつけたいけどシステム屋さんに吐き出してもらう部分だし・・・どうしよう！
そんな時に押さえておくべき組み方を紹介します。
目次
まずは完成イメージの確認
うぇぶの人オススメの方法はこちらIE8まで対応が必要な方はこちら
ブロックをひたすら並べたいけど何個になるかわからない。そんなデザインです。
白いエリアの全体幅が680px(padding 20px 実質width 640px)、子要素の幅が200px、要素と要素の間の余白が20px
このデザインは３つで折り返しになってます。
駆け出しの時によくやる組み方
駆け出しの頃やりがちな組み方ですが、こんな風に組んでませんか？
完成イメージはこんな感じ
サンプルを別画面で開くHTMLはこんな感じ
1 | <div id="sample"> |
2 | <div>1つ目</div> |
3 | <div>2つ目</div> |
4 | <div class="no-margin">3つ目</div> |
5 | <div>4つ目</div> |
6 | <div>5つ目</div> |
7 | <div class="no-margin">6つ目</div> |
8 | </div> |
CSSはこんな感じ
1 | #sample { |
2 | width: 640px; |
3 | } |
4 | #sample div { |
5 | margin:0 20px 20px 0; |
6 | float: left; |
7 | width: 200px; |
8 | } |
9 | #sample div.no-margin { |
10 | margin-right: 0; |
11 | } |
#sampleの全体の幅はぴったり６４０（divが200pxが3つ,余白が20pxが2つ)
classをつけたところのmargin-rightだけ０に戻してます。
見た目はできてますが、プログラムで繰り返し処理で出すとすると３つおきにclassをつける処理が必要になります。
１つ目と２つ目の間に新しい要素を追加する時にも、classを付け直さないといけません。
ついついプログラム経験がないとこういう組み方をしたりしてしまうことがありますよね。
ネガティブマージンを使った方法
html上のclassをなくしてしまえれば、動的に繰り返し処理で出しても、要素の間に新しい要素を追加しても順番を並び替えても特にきにすることがありません。
サンプルを別画面で開くHTMLはこんな感じ
1 | <div id="sample"> |
2 | <div>1つ目</div> |
3 | <div>2つ目</div> |
4 | <div>3つ目</div> |
5 | <div>4つ目</div> |
6 | <div>5つ目</div> |
7 | <div>6つ目</div> |
8 | </div> |
CSSはこんな感じ
1 | #sample { |
2 | margin-right: -20px; |
3 | width: 660px; |
4 | } |
5 | #sample div { |
6 | margin:0 20px 20px 0; |
7 | float: left; |
8 | width: 200px; |
9 | } |
ポイントは親要素の#sampleのmargin-rightとwidthです。
#sampleの全体の幅は６6０（divが200pxが3つ,余白が20pxが3つ分の幅)
この指定だけだと想定している幅より溢れてしまいます。
そこで指定しているのがmargin-rightの値をマイナス指定。（余分な分の20pxをマイナスします)
nth-childを使った方法(1)
IE8の対応が不要な場合、nth-child(3)にmargin-rightを指定してしまえば、classをつけていた時と同じ指定でclassを減らすことができます。
サンプルを別画面で開くHTMLはこんな感じ
1 | <div id="sample"> |
2 | <div>1つ目</div> |
3 | <div>2つ目</div> |
4 | <div>3つ目</div> |
5 | <div>4つ目</div> |
6 | <div>5つ目</div> |
7 | <div>6つ目</div> |
8 | </div> |
CSSはこんな感じ
1 | #sample { |
2 | width: 640px; |
3 | } |
4 | #sample div { |
5 | margin-bottom: 20px; |
6 | float: left; |
7 | width: 200px; |
8 | } |
9 | #sample div:nth-child(3n) { |
10 | margin-right: 0; |
11 | } |
nth-childを使った方法(2)
一度指定したものを上書きするのに抵抗がある方はこんな記述も
サンプルを別画面で開くHTMLはこんな感じ
1 | <div id="sample"> |
2 | <div>1つ目</div> |
3 | <div>2つ目</div> |
4 | <div>3つ目</div> |
5 | <div>4つ目</div> |
6 | <div>5つ目</div> |
7 | <div>6つ目</div> |
8 | </div> |
CSSはこんな感じ
1 | #sample { |
2 | width: 640px; |
3 | } |
4 | #sample div { |
5 | margin-bottom: 20px; |
6 | float: left; |
7 | width: 200px; |
8 | } |
9 | #sample div:nth-child(3n+2) { |
10 | margin: 0 20px 20px; |
11 | } |
この記述で真ん中の列だけ左右に余白を取ってしまえば問題ありません。
色々なやり方があると思いますが、対応ブラウザ・組織でのルールを決めも考えると、一度指定したものを上書きする指定をするものより、オススメはこのやり方が良いかな？と思ってます。
