勉強記録　～プログラマーへのいばら道～　progate：HTML&CSS上級編（１）

プログラマー転職を目指す、progateでのお勉強記録。

今回は、HTML&CSS上級編の復習その1となります。

内容は【レスポンシブデザインとは、メディアクエリとは、max-widthとmin-width、ブ

レイクポイント、レイアウト崩れを直す、box-sizing: border-box;の仕組み、全要素に

CSSを適用する】です。

１．レスポンシブデザインとは

　HTML中級編で制作したサイトは要素の幅を1170pxに固定しているため、それにより

　画面幅が狭くなるとコンテンツの一部が隠れてしまう。

　ここにレスポンシブデザインを適用することで、画面のサイズに合わせて最適なレイ

　アウトを組めるようになる。

２．メディアクエリ（Media Queries）とは

　メディアクエリとは、ブラウザの画面サイズに応じてCSSのスタイルを設定できる手

　法である。

　メディアクエリは「@media（条件）｛.........｝というように書く。指定された条件が

　整ったときにのみ｛｝のCSSが適用される。

　条件の最後にセミコロン( ; )をつけないので注意。

３．max-widthとmin-width

　メディアクエリの条件には、max-width（最大幅）とmin-width（最小幅）を指定でき

　る。「max-width: 〇〇px 」と指定すると、画面幅が〇〇px以下の時にCSSを適用でき

　る。「min-width: 〇〇px」はその反対となる。

４．ブレイクポイント

　max-width: 〇〇px（またはmin-width: 〇〇px ）のようにメディアクエリの条件を指

　定するとき、「〇〇px」の部分をブレイクポイントと呼ぶ。

　ブレイクポイント毎に色やレイアウトを変更していく。

５．レイアウト崩れを直す

　itemクラスのwidthの設定比（％）の指定によっては、左右の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;」を指定するときは、*（アスタリスク）に対して指定する

　ことが推奨されている。

　例：* {

　　　　box-sizing: border-box;

　　　 }

　*（アスタリスク）は全ての要素に対してCSSを適用したい場合に用いる。

　border-boxをすべての要素に適用することで、レイアウトを管理しやすくなる。

ということで、本日はここまで。

次回は「HTML&CSS上級編」の2回目の復習を記録します。

ご一読を頂きまして、有り難うございました。