【プロゲート】HTML & CSS 上級編の学習内容まとめ
ここではオンライン学習サイト「プロゲート」の学習内容をまとめていきます。
HTML & CSS 上級編
1.目標物を確認しよう
レスポンシブデザインを学ぼう
・このレッスンでは、HTML&CSS中級編で制作したWebサイトに、「レスポンシブデザイン」を適用していく
・レスポンシブデザインとは、様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整するためのもの
・特にスマートフォン表示に対応したサイト制作においては必須の技術
2.メディアクエリを設定しよう
メディアクエリ（Media Queries）とは
・メディアクエリはブラウザの画面サイズに応じてCSSのスタイルを設定できる手法
メディアクエリの書き方
・メディアクエリは、@media (条件) { .... }という様に書く
・指定された条件が当てはまるときにのみ{ }内のCSSが適用される
max-widthとmin-width
・メディアクエリの条件にはmax-width(最大幅)、またはmin-width(最小幅)を指定できる
・max-width: ◯◯pxと指定すると、画面幅が◯◯px以下の時にCSSを適用できる
・min-widthはその反対
ブレイクポイント
・max-width: ◯◯px（またはmin-width: ◯◯px）のようにメディアクエリの条件を指定するとき、「◯◯px」の部分をブレイクポイントと呼ぶ
・今回はスマートフォンの画面幅は670px以下、タブレットの画面幅は670px ~ 1000pxと想定して、ブレイクポイントを設定する
3.メディアクエリによるレイアウト
メディアクエリによるレイアウトの例
・レスポンシブデザインを適用しないと、画面幅が小さいときにコンテンツの内容も小さくなり見づらくなってしまう
・ここでは画面幅によってコンテンツのwidthを大きくする
4.box-sizing
レイアウト崩れを直す
・itemクラスのwidthが25%で指定されているため、左右のpaddingを追加すると要素の幅の合計が100%を超えてしまい、レイアウトが崩れてしまう
・このようなレイアウト崩れは、box-sizing: border-box;を用いることで防ぐことができる
box-sizing: border-box;の仕組み
・box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになるので、paddingやborderを追加した時に生じるレイアウト崩れを未然に防ぐことができます
（※ただし、marginはborder-boxでの合計値に含まれない）
全要素にCSSを適用する
・box-sizing: border-box;を指定するときは、*(アスタリスク)に対して指定することが推奨されている
・*はすべての要素に対してCSSを適用したい場合に用いる
・border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなる
5.レスポンシブデザインの型を準備しよう
viewportの設定
・レスポンシブデザインを適用する準備として、<head>タグ内にviewportを設定する
・viewportを設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しない
・ただし、ここでviewportの中身の書き方を暗記する必要はない
width: 100%
・HTML中級編では、全体のwidthを1170pxで固定していたが、これでは、スマートフォンなどの小さい画面でも、widthが1170pxのままになってしまう
・画面幅によって全体のwidthが変わるように、width: 100%;に変更する
6.タブレット向けのレイアウトを作ってみよう
responsive.cssの読み込み
・stylesheet.cssにメディアクエリ用のCSSを記述しても問題ないが、整理しやすいように今回はCSSファイルを分割し、responsive.cssにメディアクエリ用のCSSを記述していく
・responsive.cssを読み込む際には必ずviewportよりも下の行に記述する
lesson要素の配置を変更
・タブレット向けのレイアウトを作成していく
・今のままだとタブレットの画面幅でレッスン紹介の部分が見づらい
・lessonクラスのwidthを50%に指定して、タブレットの画面幅では２段で表示するようにする
7.レイアウトの崩れを修正しよう
レイアウトが崩れている原因
・背景色が途中で切れてしまう問題が生じるのはlesson-wrapper要素の高さが580pxに固定されているため
・高さがコンテンツの中身によって変わるようにこの指定を消す
floatと親要素の高さ
・通常、親要素の高さは子要素を包む高さとなるが、子要素が全てfloatの時、親要素の高さは0となってしまうという性質がある
・これは、floatは「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるから
floatの解除
・子要素が全てfloatでも、親要素が高さを持つように設定する
・floatはclear: left;で「浮いている」状態を解除できる
・ここではclear: left;を適用するためだけの空のタグを用意する
・空タグとclearでfloatを解除するのはよく使うテクニックなので覚えておく
8.スマートフォン向けのレイアウト（１）
スマートフォン向けのメディアクエリ
・ここからスマートフォン向けのレイアウトを組んでいく
・ブレイクポイントを670pxに設定
・lesson要素のwidthを100%にして縦並びになるように変更する
footerの位置調整
・スマートフォンサイズではfooterが中央寄せになるように配置する
9.スマートフォン向けのレイアウト（2）
SNSボタンの調整
・スマートフォン環境でもボタンをタップしやすいように、ボタンの幅を画面いっぱいに広げる
・ボタン間のmarginも調整する
10.フォントをレスポンシブ化しよう
フォントのレスポンシブ化
・画面幅によって、フォントサイズを調整する
11.max-width
画面サイズが大きい時に対応しよう
・とても大きい画面ではどうでしょうか？
・例えば2000pxの画面幅で表示すると、レッスン部分がお互いに離れすぎていて、見づらくなってしまうのでこれを直す
max-widthを指定する
・container要素のwidthが100%なので、画面幅が2000pxなどとても大きい時も画面いっぱいに広がってしまう
・max-width: ◯◯px;と指定すると、画面幅を拡大しても、要素の幅の上限が◯◯pxとなる
12.ヘッダーメニューを切り替えよう
スマートフォンのヘッダーレイアウト
・最後に、スマートフォンでのヘッダーのレイアウトを整えていく
・スマートフォンでは、ヘッダーメニューを表示しきれないため、メニューをアイコンに変更する
（本来はjQueryなどを用いてアイコンをクリックした時の動作をつけるべきだが、このレッスンでは扱わない）
要素の表示/非表示
・メニューアイコンはデフォルトでは非表示にし、画面幅が670px以下（スマートフォンサイズ）の時にのみ表示されるようにする
・要素を非表示にするにはdisplay: none;を用いる
・非表示にした要素を表示させる時は、display: block;を用いて表示する