スマートフォンが普及した今、パソコンでしか正常に表示されないサイトというのは
スマートフォンユーザーからしたら非常に見にくくストレスフルなもの。
全てのユーザーに快適にサイトを見てもらうためにも、
あらゆるデバイスに対応したサイト制作は必須といっても過言ではありません！
目次
- 1 そもそもレスポンシブ化って？
- 2 レスポンシブ化をするにあたっての準備
- 3 デベロッパーツールを使って、変更する箇所を探していく
- 4 諸悪の根源 width
- 5 Webサイトの暴れん坊 float
- 6 Webサイトのじゃじゃ馬 position
- 7 ラスボス width, height属性
- 8 まとめ
そもそもレスポンシブ化って？
レスポンシブ化、レスポンシブ化っていうけど、そもそもレスポンシブって何なのさ？
という疑問を持たれた方もいると思うので、簡単に説明します。
知ってるよ〜って方は読み飛ばしていただいてOKです！
レスポンシブとは？
レスポンシブデザイン、レスポンシブwebデザインなどの呼び名がありますが、
これらは簡単に言うと
画面サイズに応じて最適なデザインを表示する
事を指します。
つまりレスポンシブ化というのは、
サイトをいろんな画面サイズに対応させる事
なんですね。
レスポンシブ化をするにあたっての準備
さて、レスポンシブデザインについて理解して頂けたところで、
実際にどのような手順でサイトをレスポンシブ化していくか解説していきます。
ビューポートを設定する
まずはHTMLのheadタグ内に以下のmetaタグを記述してください。
1 | <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> |
おいおい！cssだけって言ってたのに話が違うじゃないか！
と思われた方については本当すみません…
この後もう一度HTMLをいじる工程があるのですが、
headタグ内にタグを追記するだけの作業なので大目に見てもらえればと思いますm(_ _)m
cssでメディアクエリを設定する
- ・画面幅が480pxまでの場合
- ・画面幅が481px〜780pxまでの場合
- ・画面幅が781px以上の場合
などの条件分岐を設定するものがメディアクエリです。
このコードはすでにあるcssファイルに追記しても、
スマートフォン用に新しくcssファイルを作りそちらに記述してもOKです！
実際のコードはこちら
1 | @media screen and (max-width:480px){ |
2 | /*画面幅が480pxまでの時*/ |
3 | } |
4 | @media screen and (min-width:781px){ |
5 | /*画面幅が781px以上の時*/ |
6 | } |
この中に、以下のようにコーディングしていく事で、
指定した画面幅内でのみその内容が適用されます！
1 | @media screen and (max-width:480px){ |
2 | /*画面幅が480pxまでなら、文字を青色にする*/ |
3 | p { |
4 | color: blue; |
5 | } |
6 | } |
linkタグで読み込む
先ほどスマートフォン用にcssファイルを作った方は、
当然ですが読み込まないと意味がないので、普段通りcssを読み込みます。
この時注意しないといけないのは
必ず元のcssファイルよりも後に読み込むという事です。
こうしないと元のcssを上書きできないので！
デベロッパーツールを使って、変更する箇所を探していく
いよいよ実践編です！
今回はGoogleChromeを使用しますが、
お気に入りのブラウザのそれっぽい機能（だいたい「検証」とか「開発者ツール」とか）
でも同じ事ができると思うので、そちらでも大丈夫です！
デベロッパーツールを起動する
Chromeではページの適当なところを右クリックすると出てくるメニューの「検証」から起動できます
そしていくつかレイアウトが用意されているのですが、私のおすすめはこれです！
赤丸の・・・をクリックするとぺこっとレイアウト一覧が出てきて、私は横並びのものを使ってます。
ちなみに赤線のところをぐぐっと移動させて、好きな幅にカスタマイズすることもできますよ！
ちょいメモ
Chromeのデベロッパーツールにはこのようなボタンがありまして
赤丸のところをクリックしてあげると、あらかじめ用意されてるデバイスの画面サイズに変更する事ができます！
要素を選択して、cssを書き換えていく
まず赤丸のカーソルのアイコンを有効にします。
すると、このように要素を選べるようになります！
そしてまず画面からはみ出ている要素を探します。
Chromeではこのように水色のマスクがかかるので一瞬でわかりますね！
はみ出ている要素を見つけたら、そのままクリックしちゃいます。
するとこのように、選択した部分のHTMLとその要素に指定されているcssが表示されます。
ここのcssを直接編集してしまっても良いのですが、
慣れないうちは赤丸の＋マークを押すと、フォーカスの当たっている部分に適したセレクタがぺこっと追加されるので
こちらに記述していくと、どこを編集したかわかりやすくて良いと思います！
自分の中で納得のいくレイアウトになったら、このように追記していきます
1 | @media screen and (max-width: 480px){ |
2 | /*ここにどんどん追記していきます！*/ |
3 | main, aside { |
4 | width: 100%; |
5 | } |
6 |
7 | main img { |
8 | float: none; |
9 | } |
10 |
11 | h1, h2 { |
12 | font-size: 16px; |
13 | } |
14 | } |
ちょいメモ
あまり夢中になってたくさん編集しすぎると
どこを編集したか自分でわからなくなってしまいます（私もよくやらかします…）
なので記述は小まめにしていきましょう！
デベロッパーツールの活用法については下記の記事でも解説していますので、更に詳しく知りたい方は是非ご覧ください。
Chromeデベロッパーツールの便利な使い方！タブの用途・使い方のコツを解説
Google Chromeデベロッパーツールを使いこなせていますか？経験豊富なプロのエンジニアやWebデザイナーに限らず、初心者ブロガーにとって…
なんとなくイメージできましたか？次からはよく使うプロパティ四天王を紹介していきますよ！
諸悪の根源 width
PCの広い画面幅用に作られたサイトを、スマホで表示するとどうなるか？
これはデベロッパーツールでも確認できますね。
めっちゃはみ出てる……
スマホの画面サイズにおさまるように縮小されて表示される場合もあります。
実際にスマホの小さい画面で見たら何がなんだかわかりません。
じゃあなんでいい感じにサイズを合わせてくれないの？ってところですが、
- ・コンテンツ幅をpxで固定
- ・画像のサイズをpxで指定
しているからなんですね。
スマホ画面に収まりきらないサイズのものでも、指定されてるまま表示されてしまうのです。
ではどう対応するかというと
大正義 width: 100%; を使います！！！
だいたいコンテンツ幅を100%にすれば解決します（乱暴）
ちなみに、先ほどのスクショで
.container section に width: 640px;
が指定されていたと思うのですが、
ここを100%にしてもはみ出たまんまだよ！？って時は、
親要素にwidthが指定されていると考えられます。
この例だと、.containerですね。
一箇所を100%にしても解決しない！って時は親要素も見てみてくださいね！
あとたまにあるのですが、たとえばここにheightが指定されていると画面幅を狭めた時…
不自然に縦長になったり、このようにはみ出たりします。
そういった場合には height: auto;を指定してあげます！
Webサイトの暴れん坊 float
floatが指定されてると要素があっちゃこっちゃに飛び回ります！
モバイル端末でも見やすいようなfloatの活用法もあるのかもしれませんが、
ひとまずPCサイト用に指定されたfloatはfloat: none;で一掃してます。
それでもこのようにレイアウトが崩れたままなら、ここからwidthなどを調整していきます。
スマートフォンの性質上、要素が縦並びになることが多いと思うのですが、
- ・margin: 0 auto;
- ・text-align: center;
Webサイトのじゃじゃ馬 position
崩れないわけ…ないじゃん…
と思わずこぼしてしまうのがこのpositionです。
数値の調整だけで済みそうな場合は
top bottom left right
ここの数値をいじって、
- ・position: relative;
- ・position: absolute;
これらのせいでレイアウトが崩れてるところはposition: static;でリセットします（乱暴）
大抵の場合これでじゃじゃ馬だったpositionはびっくりするほどおとなしくなります！
必要ないものはdisplay: none;で隠し、
必要なものは見やすいレイアウトになおすように調整していきます。
ラスボス width, height属性
1 | <img src="images/image.jpg" width="300" height="200" /> |
これはもう本当に…本当に困るんですけど、
HTMLに直接スタイルが指定されている場合なんですよね。
後から読み込んだCSSだけでは、いくら詳細度を高く指定しても上書きする事ができないんです…
（詳細度についてはこちらを参照）
しかしこのラスボスを打ち砕くエクスカリバー的な武器も実は存在していて、
それはCSSの !important というものなんですけど…
1 | img { |
2 | width: 100% !important; |
3 | height: auto !important; |
4 | } |
これがですね、順番や詳細度など一切無視して、
!importantのついているスタイルを強制的に適用させるものなのですが
一見便利そうに見えて、後から上書きがきかないのでかなりトリッキーです。
どこで予期せずスタイルが適用されなかったり、レイアウトが崩れたりするかわからないので、
これからHTMLコーディングする人はまじで直接HTMLにスタイルを指定しないでください…ほんと…
まとめ
いかがでしたか？
実際にサイトをレスポンシブ化する時は今回紹介しなかったプロパティもいじるのですが、
今回は主にレイアウトに関連するものをピックアップして紹介しました！
レスポンシブがなんなのか、実際にどのようにレスポンシブ化していくのか、
疑問は解消できたでしょうか？
少しでもお役に立てたなら幸いです！
またお会いしましょう！
