近年、たくさんのデバイスが誕生しました。
スマートフォンやタブレット、新しいパソコン。
様々な形でウェブサイトを閲覧できるようになったのは、ご存知の通りです。
そのため、すべてのデバイスでしっかり表示される作り方が必要でした。
結果、誕生したのが「レスポンシブ化」という方法です。
レスポンシブサイトは、どの端末でも適切なレイアウトで閲覧できます。
具体的には「画面の横幅」に応じて、レイアウトを変更させる方法です。
スマートフォンはスマートフォンのレイアウトになる。
パソコンではパソコンのレイアウトになる。
タブレットではもちろんタブレットに適したサイズになる。
デバイスによって調整されるのが、レスポンシブです。
では、レスポンシブサイトの作り方について、進めて行きましょう。
■ MISSION 6 – こちらのサイトを再現してみましょう
https://base91.net/mission/cording/6/index.html
■ 解答ファイルのダウンロード
https://workroom.biz/mission/cording/6/mission6.zip
※ zipファイルって何？ どうやって開くの？
http://base91.net/zip-how-to-open/
もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
一人で何も見ることなく、MISSION6を再現できたら次に進んでみてください。
今回活用しているHTMLとCSSは下記の通りです。
新出のHTMLタグ
特にありません。
mission5以前を参考にしてください。
各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/
新出のCSSプロパティ
レスポンシブ化にはmedia screenというタグを使います。
medea screenには「レイアウトを変化させるサイズ」を設定できます。
@media screen and (max-width:900px) {
}
上記の場合は、900px以下になったら、レイアウトを変化させるという意味です。
■ max-widthの場合
画面の横幅が「指定以下になったら括弧内のCSSを適応する」ということです。
■ min-widthが指定された場合
「指定以上の横幅なら括弧内のCSSを適応する」ということです。
では、具体的にどうやったら、変化させることができるのでしょう。
設定そのものは簡単で{}内に適応させたいCSSを書くだけです。
@media screen and (max-width:900px) {
.mainCont figure{
margin-right:0px;
margin-left:0px;
}
}
これで画面の横幅が900px以下になった時に、中のCSSが適応されます。
今回であれば、.mainCont figureのmarginが左右とも0になるということです。
初期状態でfigureの左右にmarginが指定してあった場合。
900px以下に画面の横幅が変化したら、0に上書きされます。
この仕組みを使って、各デバイスのサイズにあわせて、変更していきます。
レイアウトの変化が起こるポイントを「ブレークポイント」と言います。
今回最も気をつけるのは、横に3つ記事が並んだ、記事一覧のセクションです。
画面の幅が小さくなった時、横に並んだままだと、小さく圧縮されて視認性が悪くなります。
なので、一定の横幅になったら、縦に並ぶように設定してあります。
詳しくは、デベロッパーツールおよび検証ツールを使って確認してみてください。
各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/
レスポンシブで変化する箇所の確認例
では、一体どのようにして変化箇所を確認すれば良いのでしょう。
まずWEBサイトを開いて、ブラウザの横幅を伸縮させてみましょう。
そうすると、明らかにレイアウトが変化する箇所があるはずです。
変化が観測できたら、デベロッパーツールで変化する箇所を選択しましょう。
そして、画面の横幅を左右伸縮させて、CSSの変化を観察してみてください。
下記に簡単な動画をご用意しましたので、確認してみてください。
このように、デベロッパーツールを使って変化を観測できます。
最初は「変化があからさまに確認できる箇所」を観察した方が良いですね。
色々なWEBサイトで確認してみましょう。
レスポンシブ化の方法に関して、たくさんの発見があるはずです。
メディアクエリをCSSファイルの「どこ」に書くか
CSSファイルの「どの箇所に」メディアクエリを書くか。
そんな質問を、時々うけることがあります。
答えは本当に様々なのですが、僕個人は最後にまとめて書くことが多いです。
まず、基本的なレイアウト用のCSSを一通り書きます。
そして、最後にまとめてレスポンシブ用のCSSを書きます。
今回のMISSIONの回答ファイルでもそうですね。
一通りCSSを書いた最後に、メディアクエリが記述してあります。
最終的には、自分の書き方に合わせて記述場所を考えていくと良いでしょう。
ぜひ、ご自身の管理しやすい書き方を見つけてみてください。