コピペで使える！フロートを使った横並びコンテンツ

2016.02.17
2016.09.07

自社販売サイトはもちろん、楽天もYahooショッピングもポンパレモールもECサイトで良く使われるであろう『横並びコンテンツ』。

『新作一覧』だったり、『当店オススメ！』だったり使う機会は多いのではないかと思います。

今はスマホファースト化が進み、縦に長くではなく横にスクロールという仕様も増えてきたので、ずらずら並べるよりかはスライダーでコンパクトに…というスタイルも多いですね。

ですが今回は敢えて、初心に戻ってFloatを利用した横並びアイテムを作ってみたいと思います！

てっとり早く出来上がりを見たい方はこちらからどうぞ！

今回のコンセプト

IE9以下は無視。
左詰めでボックスを配置。
横並びがボックス高さによって崩れない。
リキッドレイアウト。
もちろんレスポンシブ。
Coooooool!!

商品ラインナップを作ろう！

まずは基本モデルの作成

まずはタグを用意！
ザックリとベースのモデルを作成します。
今回はリンク付きの横並びボックスにします。

[html]
<div class="float_box">
<ul>
<li> <!– ▼ アイテム –>
<a href="#">
<img src="example.jpg" class="image">
<p class="name">グレートなベアー</p>
<p class="price">¥1,980</p>
</a>
</li> <!– ▲ アイテム –>
</ul>
</div>
[/html]

これで基本タグが完成しました！
あとはこの『<li>～</li>』をコピペして行けば、個数が増やせるというお手軽テンプレートの完成です。

リンク内の各コンテンツにはそれぞれ独立したスタイルシートを適用させたり、汎用性を持たせる為に全てにクラスを振ってあります。
もちろん無い方がすっきりしますが、そこは用途によって変えて良いと思います。

タグをリセット

各タグにはそれぞれ初期設定があらかじめ決まっています。
例えば<p />タグには下に1行分の余白が設定されている等。

自由にデザインを配置する為、そういった値を全て0にリセットします。

[css]
.float_box ul,
.float_box li,
.float_box p
{
/* [余白をリセット] */
margin: 0;
padding: 0;
}
.float_box li
{
/* [黒点を非表示] */
list-style-type: none;
}
[/css]

floatで横並びにする

左詰めに並んで行くように、floatで横並びにします。
列数は4列くらいにしましょうか。またブラウザの幅などで見えたり見えなかったりという風にならないよう柔軟に対応させる為、値は『％』で指定します。

[css]
.float_box li
{
/* [要素を横並びにする] */
float: left;

/* [pxだと、相対的な値にならないので、%を使う] */
/* [4個分のサイズを指定] */
width: 25%;
}
[/css]

フロートレイアウトにありがちな要素の高さ問題

最初の内は結構困惑しがちですが、floatを掛けると親要素の高さが無くなります。
これはfloatの意味通り要素を『浮かせる』と言う意味なので、親要素にキッカリ引っかかっていた子要素が浮いてしまったため、引っかかりが無くなって高さが無くなる…と僕は解釈しています(笑)

ゴムがバチーン！って感じじゃないですかね。完全に意味不明ですけど。

overflow: hiddenを使う

高さが無いと下に続く要素との余白類で色々と面倒な事になるので、『overflow: hidden;』を仕様して、高さを復帰させます。
これは、floatが掛かっている要素の親要素に『overflow: hidden;』を設定すると、高さが計算されるという仕様を利用したものです。
他にも『:afterを用いたクリアフィックス』という方法もありますが、今回は割愛します。

[css]
.float_box ul
{
/* [縦幅を復帰。] */
overflow: hidden;
}
[/css]

表示画像の大きさも調整

さらに画像も小さい分には特に支障はありませんが、大きすぎるとはみ出てみっともないので、最大サイズをボックス内までに設定します。

[css]
.float_box .image
{
/* [ボックス内を最大サイズにする] */
max-width: 100%;
}
[/css]

ここまでの基本モデルはこんな感じです！

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”bEZKOx” default_tab=”result” user=”Regless”]See the Pen HtmlFloatBox-1 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

ボックスデザインを装飾

文字に濃淡を出してメリハリを出す

ここからもっと見やすく、デザイン設定をしていこうと思います。
まずは文字の色や大きさをそれぞれ差別化して、メリハリを出したいと思います。

[css]
.float_box a
{
/* [リンク文字の初期値を黒にする] */
color: #000;

/* [リンクテキストのアンダーラインを非表示にする] */
text-decoration: none;
}
.float_box .name
{
/* [商品名の文字を若干小さくする] */
font-size: .875em;

/* [商品名の文字をグレーにする] */
color: #777;
}
.float_box .price
{
/* [価格を太文字にする] */
font-weight: bold;
}
[/css]

見やすさを出すために余白を活用

あまり詰まりすぎていると非常に窮屈かつ見づらいので、余白を使って見やすくします。
あまり余白を入れすぎると今度は逆に見づらいので注意！

画像は、大きさが足りない場合には真ん中になるように調整します。

[css]
.float_box .image
{
/* [画像が真ん中に来るようにする] */
/* [画像と文字の間に余白を入れる] */
display: block;
margin: 0 auto 5px;
}
.float_box .name
{
/* [価格との間に余白を入れる] */
margin-bottom: .75em;
}
[/css]

ここまでの仕上がり

これで、さっきよりは各アイテムが見やすくなりました！

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”vLMyoJ” default_tab=”result” user=”Regless”]See the Pen HtmlFloatBox-2 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

でもこれだと、隣のアイテムとの余白が無いので、まだちょっと見づらいですね。
次は隣との余白を付けてみたいと思います。

リキッドなフロートボックスを作成

では試しに普通に作ってみましょう！
今回は隣との余白は30pxという設定で作成します。

[css]
.float_box li
{
/* [横幅を指定] */
margin-right: 30px;
}
[/css]

結果

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”bEJgbx” default_tab=”result” user=”Regless”]See the Pen HtmlFloatBox-3 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

どうでしょう。横の数4列に設定したはずが3列になってしまいました。
これは、横幅25％+30pxという設定なので、横幅が合計120pxオーバーする形になり最後の1個が回り込んでしまったと言う事です。

では横幅指定のある< li />タグにマージンがかけられない事がわかったので、今度はその内側にある< a />にマージンを入れてみましょう。
[css]
.float_box a
{
/* [ブロック要素に変更] */
display: block;

/* [余白を指定] */
margin-right: 30px;
}
[/css]

結果

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”JGVEjR” default_tab=”result” user=”Regless”]See the Pen HtmlFloatBox-4 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

これでブラウザ幅に関係なく4個入るようになりました！

ただ、右端の余白30pxが邪魔になりませんか？
普通に見たら中央ではなく30px分左に寄っている様に見えてしまったあまりカッコよくないですね。

次はこの右端の30pxを何とかしてみましょう。

ネガティブマージンを利用して余白を作る

ネガティブマージンとは、なんかの技名みたいですが、単純にmarginの値にマイナス値を付けるだけです。
ただ、上下左右の値によって挙動が違うので注意！

上と左に付けた場合は、『要素自体をその方向に引っ張る』
下と右に付けた場合は、『その方向にある要素が自分の方にに引っ張る。幅を指定していない場合はpaddingのような使い方になる。』

ややこしいですね。画像にしてみました！
こんな感じ。

また、英語ですがこちらに詳しく書いている様です。
多分厳密に言うと色々違うのかもしれませんが、こんな解釈で今のところやっていけてます(笑)

The Definitive Guide to Using Negative Margins

右端の30pxを見えなくする

右端の30pxをなくす為に以下の工程を進めます。

floatの設定している親要素『<ul />』の右側に30px分のネガティブマージンを設定し、余白を作る。
ネガティブマージンを設定した親要素『<div class=".float_box" />』にoverflow: hidden;を設定し、<ul />の右30px分の余白を非表示にする。
Year!!

イメージとしてはこんな感じです。
こうする事で、30px分余白が出来るが、見た目は同じというモデルが完成です！

[css]
.float_box
{
/* [はみ出ている部分を非表示] */
overflow: hidden;
}
.float_box ul
{
/* [右側に30px分の余白を作る] */
margin-right: -30px;
}
[/css]

結果

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”wMZgvE” default_tab=”result” user=”Regless”]See the Pen HtmlFloatBox-5 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

ちなみにそんな難しい事しなくても、ただ余分に右側に30px多く設定すればいいんじゃないの？と思うかもしれませんが、今回はリキッドレイアウトで作成している為、そういった細かい設定が出来ません。
なので、今回のケースではネガティブマージンが一番手っ取り早く、管理も楽ちんです。

『100％+30px』みたいな設定が出来れば楽nなんですけどね！

下の余白も調整

右は完成しましたが、下の余白も同じく入れたいですね。
ただ単純に入れると先ほど同様で、一番下だけ余計な30px分の余白が出来てしまい、これまたあまりかっこよくありません。

なので、ここでもネガティブマージンの『下に設定すると下の要素を自分に移動させる』原理を利用して疑似的に無くし、上下左右余白が均等になるようにします。

[css]
.float_box ul
{
/* [下側に30px分の余白を削る] */
margin-bottom: -30px;
}
.float_box li
{
/* [アイテムの下側に30px分の余白を設定] */
margin-bottom: 30px;
}
[/css]

結果

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”JGVEoR” default_tab=”result” user=”Regless”]See the Pen HtmlFloatBox-6 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

折り返しが崩れないようにする

ここまで来たら殆ど完成ですね！あとはフロートレイアウトにありがちな『レイアウト崩れ』を回避したいと思います。

普通に使うと気づかないことが多いですが、レスポンシブデザインやリキッドレイアウトにした場合、1行の文字数が定まらないことが多く、もし高さ一定でない場合、折り返した際に引っかかってしまう場合があります。

それを回避する為、各折り返しの最初のアイテムに『clear: both;』を追加して、必ず左端から表示されるように調整します。
調整には『nth-of-type』の疑似セレクタを使用します。

[css]
.float_box li:nth-of-type(4n+1)
{
/* [4+1個置きにclearを設定] */
clear: both;
}
[/css]

結果

これで引っかかりが無くなりました！

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”yergNd” default_tab=”result” user=”Regless”]See the Pen HtmlFloatBox-7 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]

並びをレスポンシブにする

これだけでもどのブラウザサイズによっても柔軟に対応出来るボックスモデルになっていますが、やはりスマホデバイスで4個並びは小さくなりすぎますね。

最後にデバイスサイズ毎に見やすいようにレスポンシブにしたいと思います。
通常は4個並び、タブレットサイズでは3個並び、スマホサイズでは2個並びにしてみましょう。

サイズは某Bootstrapで使用されているようなサイズを利用し、メディアクエリを利用して実装します。
ここらへんは、デバイス多様化のせいで、特に決まりって無いですよね。
iphoneもでかくなっちゃったし、WindowsPhone日本に殆ど来ないし。困ったものですね！

[css]
@media all and (min-width: 992px)
{
/* タブレットサイズ以上のデザイン */
.float_box li
{
/* 横幅を3個分に設定 */
width: 25%;
}
.float_box li:nth-of-type(4n+1)
{
/* [4+1個置きにclearを設定] */
clear: both;
}
}
@media all and (min-width: 768px) and (max-width: 991px)
{
/* タブレットサイズ時のデザイン */
.float_box li
{
/* 横幅を3個分に設定 */
width: 33.333%;
}
.float_box li:nth-of-type(3n+1)
{
/* [3+1個置きにclearを設定] */
clear: both;
}
}
@media all and (max-width: 767px)
{
/* スマホサイズ時のデザイン */
.float_box li
{
/* 横幅を2個分に設定 */
width: 50%;
}
.float_box li:nth-of-type(2n+1)
{
/* [2+1個置きにclearを設定] */
clear: both;
}
}
[/css]

完成！

これでデバイス毎に列の数が変わってリキッドな商品一覧が完成です！
ちょっと分かりづらいですが、スマホ等でみたり、ブラウザの幅をグニョグニョして頂けると、横列の数が変わると思います。

[codepen_embed height=”400″ theme_id=”0″ slug_hash=”GoLrox” default_tab=”result” user=”Regless”]See the Pen HtmlFloatBox-8 by Kouji Hayashi (@Regless) on CodePen.[/codepen_embed]