なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第３回/全３回）

こんにちは！最近映画で号泣して次の日目が腫れた岩間です！
さて、2回に渡って紹介してきたスマホ対応、今回が最後になります！
今回は要素の高さを揃えてくれるjQuery「AutoHeight」を使ったレイアウトです♪

見る環境によって画像一覧の見え方を変える

説明文の長さによって高さがバラバラになったリストを、要素の高さを揃えてくれるjQuery「AutoHeight」を使って整えます。
今回は、前回までとは違ってcssでの分岐も併せて解説していきます♪

2列で表示したいのは小さいスマホだけなので、それ以上は3列で表示することになります。
別で新しく分岐を設定してもいいのですが・・・
今回はこれまで設定してきた分岐があるので、一緒に書くことにしました。

実は、前回設定した変数の中で小さいスマホ用に設定したものだけ使っていなかったんですが、気付きましたか？

var spWidth = '小さいスマホのサイズ';

これです！
前回作成したJavaScriptに小さいスマホの切り替えを追加します。

if ( spWidth > screen.width) {
$('meta[name=viewport]').attr('content',spView);
}

画像一覧用の処理を入れるだけだと他の処理が無視されてしまうので、Viewportの分岐も入れておきます。ViewportとAutoHeightで実質4種類の分岐になりますね。

小さいスマホ、大きいスマホ、タブレット、PCの分岐に、AutoHeightにあらかじめ用意されているコードをそれぞれ追加します！

/*2つごとに1回、回り込み解除*/
$('高さを揃えたい要素').autoHeight({column:2,clear:1});

/*3つごとに1回、回り込み解除*/
$('高さを揃えたい要素').autoHeight({column:3,clear:1});

これで、2列と3列の分岐ができました！

でもまだこれで完成ではありません。
大きいスマホ用に3列に設定しても、そのままだとリストの大きさが2列用のままで
画面内に収まらない分は折り返してしまいます。

画面幅にきれいに3列並ぶよう、メディアクエリを使って調整していきます！

メディアクエリは、cssの機能の1つで、画面のサイズに応じて適用するスタイルを振り分けられる機能です。
例えば、PCでは400pxで表示していたものをスマホでは200pxで表示するように設定できます。

メディアクエリで、画像一覧を大きいスマホでは3列で表示するように設定していきます！

@media screen and (max-device-width:大きいスマホの画面幅){
li{
width:画面幅の3分の1;
}
img{
width:100%;
height:auto;
}
}

たったこれだけでリストもきれいに表示することができました！
画像の横幅を100%にすると画像を囲っている要素の幅に応じて可変してくれるので、いろんなところで使ってます(^o^)

これで動作を確認してみると、PC・タブレット・スマホで崩れることなく表示できました！
画面幅で切り替えているので、スマホを横向きにした場合にも対応しています♪

もっともっと簡単で確実な方法もあるかと思いますが、今回は端末ごとに分けることでわかりやすいコードになったと思います。

全3回に渡って紹介してきた、なるべく沢山のスマホ・タブレットで快適に見られるレイアウトの実現、いかがでしたか？

今回記事を書いたことで私自身も改めて勉強になりました。
学んだことを伝えるってすごく難しいですね；；

ここまで読んでくださってありがとうございました(*^^*)