2017/06/04

レスポンシブWebデザインで覚えておきたいCSS6選+4

最近ではレスポンシブデザインのHTMLテンプレートやワードプレステーマが標準になったと思います。

一気にレスポンシブデザイン化が進んだ理由はGoogleが推奨したからと言えるでしょう。

Googleがレスポンシブデザインを推奨する理由はPCとスマートデバイス(スマホ、タブレット)でURLが共通、HTMLなどリソースが共通であること。それに伴いGoogleのリソースの消費を抑え、不具合の発生を軽減できるためだと読み取りました。

参考:レスポンシブ ウェブ デザイン – ウェブマスター向けモバイルガイド
参考:モバイル設定を選択する – ウェブマスター向けモバイルガイド
参考:よくあるミスを回避する – ウェブマスター向けモバイルガイド

レスポンシブWebデザインをカスタマイズするのに覚えておきたい10つことを紹介します。

レスポンシブWebデザインで覚えておきたいCSS6選

レスポンシブWebデザインは可変であることが前提で作られています。可変であるために良く使われるCSSを紹介します。

floatでカラム落とし

floatはコンテンツを並列にするときに使われます。例えば、幅300pxのコンテンツが3つ並んでいた場合、スクリーン幅のよってコンテンツがカラム落ちになります。
res3

CSS

HTML

幅の指定

スクリーンまたはデバイスの幅によってコンテンツ(画像やdivなど)の幅が可変します。

%指定:width

一番よく使われるのが幅の%指定かなっと思います。例えば、画像の幅を100%に設定するとパソコンでもスマホでもスクリーンに100%の幅で表示されます。
※divタグで500px指定の中に画像幅100%しても500px以上は表示されません。

CSS

HTML

最大幅:max-width

最大幅を指定するcssです。max-widthを250pxに設定するとwidthを100%に設定していたとしても250px以上で拡大表示されることはありません。

CSS

HTML

最小幅:min-width

最小幅を指定するCSSがmin-widthです。スマホなどで小さく表示され過ぎないようにする場合に使っています。例えば、ソーシャルアイコンでwidthを20%に設定した場合、パソコンでは最適な大きさですがスマホで表示した場合に小さ過ぎます。

その時、最小幅をmin-widthで30pxに設定するとスマホでも30px以上小さくならずに表示することができます。

CSS

HTML

スマートデバイスのスケーリング

表示するデバイスのディスプレイ幅によって画面の拡大・縮小を指定するのがmetaタグのviewport。以下のコードではサイトをデバイスのスクリーン幅に合わせて表示、スケールは1倍という意味になります。

これ以外の設定もmeta viewportにできますがGoogleでは推奨されていないようです。

参考:ビューポートを設定する | PageSpeed Insights | Google Developers

私はviewportを上記で紹介している設定にして変更したい箇所はデバイス幅に合わせてメディアクエリで変更するようにしています。

スクリーン幅に合わせてCSSを変更するメディアクエリ

デフォルトのCSS設定を指定のスクリーン幅の時、上書きイメージで変更するメディアクエリの例を2つ紹介します。

スマートデバイスに合わせて文字サイズの変更

スマートデバイスで表示される文字はパソコンで表示される文字サイズと同じだと思いますが、実際に表示されている大きさはスマートデバイスの場合、小さく表示されます。

これはデバイスのスクリーンの大きさによって表示されるためかと。

なのでスマートデバイスの時、文字サイズを少し大きく設定すると視認性を向上させることができます。

不要なコンテンツの非表示

スマートデバイスでのみ表示させたいコンテンツがある場合に便利なCSSです。

例えば、ラインの共有ボタンはパソコンで表示させても無駄なコンテンツになりますがスマートデバイスでは表示させたいコンテンツです。

この時、メディアクエリとdisplayの組み合わせで表示を切り替えることができます。

CSS

HTML

画像と動画のレスポンシブデザイン2選

画像や動画はレスポンシブ対応にしておかないとスマートデバイスでサイト見た時にデザイン崩れが発生します。ユーザーの離脱を招く結果になるため対応しておきたいCSSです。

画像幅は%指定で!

コンテンツ幅に対して割合(%)で幅(width)を指定します。これによって最大限に表示されるので視認性が向上します。

CSS

HTML

動画はFitvids.jsで可変にする

Fitvids.jsはjQueryライブラリのひとつでスクリーン幅に合わせて動画(iframe)の大きさを適切なサイズに調整してくれます。
簡単に実装方法を紹介すると
1.jQueryの読み込み。
2.Fitvids.jsをダウンロードして読み込み
3.Fitvids.jsを使うclass又はidをjavascriptコードに指定。
の3点を行えば実装できます。
※jQuery、Fitvids.js、javascriptはbody終了タグの前に記述。
以下、サンプルコードです。

参考CDN:Hosted Libraries | Hosted Libraries | Google Developers
参考DL:Download jQuery | jQuery
参考DL:davatron5000/FitVids.js · GitHub
※右側にあるDownload ZIPをクリック。

スマートデバイスのユーザービリティ2選

iphoneやタブレットのようなスマートデバイス対応で実装しておきたい2つ。

画像遅延読み込み

スマートデバイスはメモリ容量が少ないため、たくさんのメモリを使われるとサイト表示が遅くなります。

画像遅延読み込みの実装はメモリ消費を軽減するのに実装しておきたい機能のひとつです。

関連記事:lazyloadの使い方をDemoを見て納得!!画像遅延読み込みでサイトの最適化。

リンクはコンテンツ全体にする

スマートデバイスで表示されるテキストリンクはクリックに緊張が走ります。

クリックしにくいから。

スマートデバイスの時、dispalyの設定をinline-blockにしてボタン化するとクリックが容易にできるようになります。

CSS

HTML

(Visited 496 times, 1 visits today)