遅ればせながら、新年明けましておめでとうございます。
デザイナーの虎澤です。
本年もどうぞよろしくお願いいたします。

みなさま、弊社の年賀コンテンツはもう遊んでいただけましたでしょうか？
弊社の若手メンバー（年齢はそうでもないが私含め）が中心となって制作いたしました。
ランキング上位の方々には、期間限定で景品もご用意しておりますので、ぜひ一度遊んでみてください！

私が担当させていただいたのはデザインなのですが、それはもう日々作っては直して、作っては直しての繰り返しで。
目にする度にあの時のあんなことやこんなこと、鮮明に思い出します。

そう、忘れもしない。あれは…………なんだっけ。

☆案外めんどくさい？！横並びBOXのコーディング☆
さて、そんなわけで目下デザイン勉強中の私ですが…。
「このデザイン、コーディングする時どうやるんだろう？」
備忘録も兼ねて、今回はこちらをテーマにお話をさせていただこうかと思います。

ショッピングサイトなどの、商品リストなどでよく見かける「横並びBOX」。
デザイン的には、一度完成した一つの要素を横にポンポンとコピペして余白を調整すれば綺麗に、簡単にできますが、これがコーディングだとそうそう簡単にはいかないのです。

とりあえず簡単に作ってみました。
見やすくするため、敢えて背景や枠に色をつけています。

一般に、リストを表現するのに使われるのが<ul><li>タグです。
このタグはブロックレベル要素と呼ばれ、連続して記述すると、「縦並び」に要素が表現されます。
試しにやってみます。
（リストの中身自体は、コードをシンプルにするためにあえて画像にしています）

□サンプルコード
<div id=”container”>
    <ul>
        <li><img src=”img/A.jpg” alt=”商品A”></li>
        <li><img src=”img/B.jpg” alt=”商品B”></li>
    </ul>
</div>

#container{
    width: 580px;
    background: #ffd9df;
    padding-top: 20px;
}

□サンプルイメージ

CSSでレイアウト調整をしないとこんな感じになります。
これがリストタグのデフォルトの状態なんですね〜。

リストを横並びにする方法はいろいろあります。
display:inline-block;を使ったり、display:flex;を使ったり…。
今回は、おそらく今もっともメジャーと思われる「float」プロパティを使用します。

□サンプルコード
<div id=”container”>
   <ul class=”list_box clearfix”>
        <li><img src=”img/A.jpg” alt=”商品A”></li>
        <li><img src=”img/B.jpg” alt=”商品B”></li>
    </ul>
</div>

ul.list_box li{
    float: left;
}

□サンプルイメージ

横並びになりました。
ちなみに、このfloatを使用するときは、必ずその親要素に対して「clearfix」を使用します。
この子の説明に関しては少し長くなりそうなので、今回は割愛させていただくとして…。
これだと余白がなくて隣同士がくっついてしまうので、デザインにならってマージンを指定してあげます。

□サンプルコード
ul.list_box li{
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

□サンプルイメージ

いい感じに並んできました！
では、元のデザイン通りになるよう要素をもっと入れていきましょう。

□サンプルコード
<div id=”container”>
    <ul class=”list_box clearfix”>
        <li><img src=”img/A.jpg” alt=”商品A”></li>
        <li><img src=”img/B.jpg” alt=”商品B”></li>
        <li><img src=”img/C.jpg” alt=”商品C”></li>
        <li><img src=”img/D.jpg” alt=”商品D”></li>
        <li><img src=”img/E.jpg” alt=”商品E”></li>
        <li><img src=”img/F.jpg” alt=”商品F”></li>
    </ul>
</div>

□サンプルイメージ

…あれ？３つ目の要素で折り返してしまいました。
本当なら４つ目の要素で折り返すはずが…なぜでしょう？

邪魔しているのは３つ目の要素の右マージン。
これがあるせいで、３つ目の要素が親要素…この場合、div要素内に入りきらず、折り返されてしまうんですね。
さてどうしましょう。親要素の幅をその分だけ増やせば折り返されずに済むかな？

□サンプルコード
#container{
    width: 600px;
    background: #ffd9df;
    padding-top: 20px;
}

□サンプルイメージ

右端にいらない余白ができちゃいました。かっこわるい。

悩ましいこのマージン、必要ない要素にだけクラス名をつけてマージンを消してしまえば綺麗になりますが…。
静的なページならまだしも、動的に生成される、それこそまさに商品リストなどではコードが複雑になってしまいますよね。
CSSには、

ul.list_box li:nth-of-type(3n){
    margin-right: 0;
}

と書けばn番目の要素にだけ適応させるという便利な機能がありますが、ブラウザによっては処理されませんので汎用的とは言えず…。
実は個別にマージンを消さなくても、綺麗にレイアウトできる方法があります。

□サンプルコード
ul.list_box{
    margin-left: -20px;
}

ul.list_box li{
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}

□サンプルイメージ

デザイン通りになりました！

li要素にかかるmargin-right: 20pxをmargin-left: 20pxに変え、li要素を抱えたul要素ごとよっこいしょと左に寄せるだけです。
個別にクラスを付与する必要もないので、動的実装をする際もコードがシンプルになっていい感じになりますね。
ちなみに、

ul.list_box{
    margin-right: -20px;
}

ul.list_box li{
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

これでも見た目は綺麗に見えますが、オーバーフローした20px分はそのまま残りますので右端にいらない余白ができてしまいます。
ウィンドウサイズが広ければ問題ありませんが、要素いっぱいまでのウィンドウサイズにした時に、スクロールがでてしまいよろしくないですね。

いかがでしょう。
実際にやってみると、案外めんどくさいですよね。
予め知識があればすんなりできてしまいますが、知らないと答えにたどり着くのに一苦労することもしばしば…。
これからコーディングを始める方、まだ勉強中の方、よろしければぜひ参考にしてみてください。
…とか偉そうに言いつつ、私自身も勉強中の身ですので、もっといい方法があるよ！とかそれは違うでしょ！とかありましたらどんどんご意見をお寄せください。よろしくお願いいたします。

「このデザイン、コーディングする時どうやるんだろう？」
デザインする時、常に考えながら作業できたら素敵ですよね。
デザインはもちろんですが、コーディングもシステムも、これからもどんどん勉強していきたいと思います。

長々とお付合いいただき、ありがとうございました！
以上、虎澤がお送りいたしました♪