3つ並べたら改行したいから3つおきにclassをつけたいけどシステム屋さんに吐き出してもらう部分だし・・・どうしよう!そんな時に押さえておくべき組み方を紹介します。駆け出しの時によくやる組み方ネガティブマージンを使った方法nth-childを使った方法(1)nth-childを使った方法(2)まずは完成イメージの確認うぇぶの人オススメの方法はこちらIE8まで対応が必要な方はこちらブロックをひたすら並べたいけど何個になるかわからない。640px)、子要素の幅が200px、要素と要素の間の余白が20pxこのデザインは3つで折り返しになってます。0;}#sampleの全体の幅はぴったり640(divが200pxが3つ,余白が20pxが2つ)classをつけたところのmargin-rightだけ0に戻してます。見た目はできてますが、プログラムで繰り返し処理で出すとすると3つおきにclassをつける処理が必要になります。1つ目と2つ目の間に新しい要素を追加する時にも、classを付け直さないといけません。プログラム経験がないとこういう組み方をしたりしてしまうことがありますよね。ネガティブマージンを使った方法html上のclassをなくしてしまえれば、動的に繰り返し処理で出しても、要素の間に新しい要素を追加しても順番を並び替えても特にきにすることがありません。200px;}ポイントは親要素の#sampleのmargin-rightとwidthです。#sampleの全体の幅は660(divが200pxが3つ,余白が20pxが3つ分の幅)この指定だけだと想定している幅より溢れてしまいます。そこで指定しているのがmargin-rightの値をマイナス指定。(余分な分の20pxをマイナスします)nth-childを使った方法(1)IE8の対応が不要な場合、nth-child(3)にmargin-rightを指定してしまえば、classをつけていた時と同じ指定でclassを減らすことができます。20px;}この記述で真ん中の列だけ左右に余白を取ってしまえば問題ありません。色々なやり方があると思いますが、対応ブラウザ・組織でのルールを決めも考えると、一度指定したものを上書きする指定をするものより、オススメはこのやり方が良いかな?と思ってます。60ビューaboutはむすけ自然と動物が大好きなWebクリエイター。front-endが専門領域ですが動物の知識はそれ以上。