押さえておきたいレスポンシブWebデザインのコツ

2018年6月20日

PC、ノートPC、スマホ、タブレット…世の中にはどうしてたくさんの端末があるんだろう…

用途に合わせて好きな端末が選べるようになり、便利になった反面、その事自体を恨めしく思うWebデザイナーの方々は多いのではないでしょうか。ただ、Webデザインに関しては端末の種類以前にWebブラウザに苦しめられてきた歴史もあるので、問題が入れ替わっただけの様な気がします…と言うか微妙に増えています。

コーディング恐怖症になりつつあるインドア系商人です。

スマホ・タブレットが出てくる以前は、インターネット閲覧が可能な端末はパソコンと携帯電話（ガラケー）しかありませんでした。その為、現在のように複数の端末画面に合わせてレイアウトを考えなければいけないと言う状況にはありませんでした。（PC用とは別にガラケー専用のホームページを作らなければいけませんでしたが…）

ですが、現在はたくさんの端末が存在し、従来のPCよりもスマホやタブレットのユーザーの方が確実に多くなっています。そんな数多ある端末ごとにホームページを作っていたのではキリがありません。そこで注目されたのがレスポンシブWebデザインと言う、ひとつのCSSで複数の端末のホームページをデザインする事ができる方法です。

…前置きが長くなってしまいましたが、Webデザイナーとして働く上で、レスポンシブWebデザインの技術は必須と言っても過言ではなくなっています。もし、ホームページの作成に興味を持っている方や、ゆくゆくはWebデザイナーとして働きたいと考えている方がいらしたら、最低限のコツだけでもレスポンシブWebデザインの導入がスムーズになりますので、この機会に修得する事をお勧めします。

レスポンシブWebデザイン導入のコツ

1. HTMLファイルにviewportを指定する

↓viewportと言うのはこういうモノです。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

これがないと、レスポンシブWebデザインに必須のCSS・メディアクエリが正常に動作しません。必ず入れましょう。

2. HTMLタグにwidthなどの設定を直接埋め込まない。

× … <img src="usagi-kuma.jpg" width="1000" height="450" alt="いたいけなうさぎさんの危機">
● … <img src="usagi-kuma.jpg" alt="いたいけなうさぎさんの危機">

HTMLタグに直接要素のwidthを指定するとCSSでいくら指定しようと動作してくれません。要素のwidthはCSSファイルで設定しましょう。

3. @media内で要素のwidthにpxは使わない。

chromeなどのWebブラウザで確認した時に問題がなくても、スマホで見ると画像の幅等がちぐはぐで、画面からはみ出したりしている事があります。これは、@media内で要素の幅指定にpxなどの数字で指定している事が原因です。@media で要素の幅を指定したい時は、pxではなく%で指定しましょう。

4. 画像にはmax-width:100% を指定する。

表示させたい画面の幅より画像が大きい場合、レイアウトが崩れてしまう事があります。その対策として、CSSで画像にmax-width: 100%; height: auto; を指定しましょう。

img {
          max-width: 100%; 
          height: auto;
}

5. レイアウトの変更は、displayを使い分ける。

PCで見た時は表示されているけど、スマホで見た時は表示されていない。またはガラッとデザインが変わってしまっているメニューってありますよね。PC用の要素とスマホ用の要素を両方載せておいて、display:none;で不可視にし、表示させたい時にdisplay:block;を指定する事でレイアウトを切り替える方法があります。
また、要素を左右に寄せるだけならfloatを使えばいいのですが、最近ではフレキシブルボックスと言ってdisplay:flexを使ってレイアウトする方法を用いるケースも増えてきました。これを機にdisplayの使い方を覚えておいて損は無いかと思います。

.header-menu{
           display: flex; /* メニューを横並びにしたい */
           }

@media screen and (max-width: 480px) {
          .header-menu{
                     display: block; /* メニューの横並びを解除したい */
                     }
}

6. 画面横に隙間の対策には、overflow:hiddenを使う。

左右にマージンなんか設定していないのに何故か表示される横方向のスクロールバー…。要素内に追加したpaddingとか色々原因は考えられるのですが、とりあえずはみ出した部分が表示され無くなればそれでいいのです！…と言う訳で、この場合はすべての要素を包括する要素に対して overflow:hidden; を設定すれば解決します！

main{
           width: 100%;
           padding: 10px;
           overflow: hidden;
}

以上を踏まえて、シンプルなレスポンシブ対応のページを作ってみました。

>> いたいけなうさぎさんのホームページ　レスポンシブ未対応
 >> いたいけなうさぎさんのホームページ　レスポンシブ対応

…いかがでしょうか。

むずかしそう…としり込みしていた方でも、これなら簡単！と思われたのではないでしょうか？レスポンシブウェブデザインに苦手意識を持っていた方も、初めて挑戦する方も、どんどん試していきましょう！

それでは！

author: インドア派商人