はじめに
HTML＆CSS中級編の続きになります。
勉強ついでに、学習したことを備忘録としてまとめようと思います。
環境
OS：macOS
エディタ：VSCode
ブラウザ：Google Chrome
受講コース：HTML & CSS 上級編
目次
1 本コース中に使用したCSSのプロパティ
コース学習中に登場したCSSのプロパティとそれらの使用用途を簡単にまとめました。
学習中にMDNを確認しているので、コース中では使われていない用途が書かれているかもしれません。
興味がある方は、調べてみてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element
CSSで使用したプロパティ
| プロパティ | 使用用途 |
|---|---|
| box-sizing |
要素全体の幅や高さの計算方法を指定するborder-boxに指定すると、widthの合計にpaddingとborderを含むようになる※ marginは合計値に含まれない |
| clear |
要素の回り込みを解除する 親要素の高さが消滅してしまうのを防ぐ目的で使用している |
| max-width |
画面幅の最大値を指定する widthで大きすぎる値を指定するのを防ぐ目的で使用する場合もある |
2 レスポンシブデザインについて
Webページには、PCやタブレット、スマートフォンなどのデバイスからアクセスすることができる。
デバイスによって画面サイズが異なるため、デバイスや画面サイズに応じてコンテンツのレイアウトを調整する必要がある。
レスポンシブデザインを用いることで、画面サイズに合わせて最適なレイアウトを設定できる。
メディアクエリについて
ブラウザの画面サイズに応じて、CSSのスタイルを変更できる手法をメディアクエリという。
メディアクエリは、適用条件と条件を満たしている場合に適用させるCSSを記述する。
メディアクエリの記述方法は、以下のようになります。
@media(max-width: 1000px ){ /*1000px以下の時に適用させたいCSSを記述する*/
h1 {
color: red; /*1000px以下の時、h1の色を赤にする*/
}
.item {
width: 50%; /*1000px以下の時、itemのwidthを50%にする*/
}
}
メディアクエリで指定できる条件： max-widthまたはmin-width
※メディアクエリの条件を指定するとき、「○○px」の部分をブレイクポイントという。
レスポンシブデザインの実装
レスポンシブデザインを適用する準備として、
タグ内にviewportを設定する。viewportを設定することで、メディアクエリが正しく機能するようになる。
<head>
*省略
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*省略
</head>
3 box-sizingプロパティについて
widthやheightプロパティは、ボックスモデルにおけるcontent領域の大きさを指定する。
（HTML＆CSS初級編のボックスモデルについてにも記述しました。）
表示される要素幅は、以下のような式で決定する。
要素幅=width+padding+border+margin
また、widthの大きさに%を指定すると、親要素に対する大きさを指定できる。
<body>
<div class="parent">親要素
<div class="child">
子要素
</div>
</div>
</body>
.parent {
background-color: red;
}
.child {
background-color: blue;
width:50%;
padding: 0 20px;
}
}
例えば上記のような場合、子要素の幅はwidth(親要素に対して50%)+左右のpadding(２✖️20px)になる。
親要素の幅が小さくなると、それに比例してwidthは小さくなるが、paddingやborder、marginの大きさは変わらない。
レスポンシブデザインを適用するときは、paddingなども親要素の幅に比例させて、大きさを変化させたい。
そんな時は、box-sizingプロパティを使い、border-boxを指定する。
すると、要素幅の合計にpaddingとborderが含まれるようになります。
つまり、width+padding+borderの大きさの和を、親要素に対して何%にするか、と指定できるようになる。
boxsizing:border-box;を指定すると、上記の画像が下記のようになる。
子要素の幅が少し小さくなり、width+左右のpaddingが親要素に対して50%の大きさになる。
※boxsizing:border-box;を指定しても、marginは含まれないことに注意する！
なお、box-sizing:border-box;を指定する時は、*に対して指定することが推奨されている。
4 その他の学びや注意点について
・全ての要素にCSSを適用したい場合は、*(アスタリスク)を用いる。
・メディアクエリ用のCSSは、WEBページのCSSファイルとは別ファイルに記述することが推奨される。
ファイルを分割することで、整理しやすくなる。
(メディアクエリ用のCSSファイルを読み込む際には、必ずviewportよりも下の行に記述する。)
・通常、親要素の高さは子要素を包む高さとなる。
しかし、子要素全てに対して、CSSでfloatプロパティを指定している時、親要素の高さは0となってしまう。
これを回避するテクニックとして、空タグとclearプロパティを使う手法がある。
・CSSでdisplay: none;を指定すると、その要素を非表示にできる。
非表示にした要素を表示させるには、display: block;を指定する。
5 最後に
続いて、Flexbox編を学習していきます。
内容の誤りや補足等ありましたら、コメントにて教えていただけますと助かります。