css[復習]
はじめに
cssの復習時に理解が足りていなかった点をメモ代わりに書き出しました！
リセットCSSとは
リセットCSSは、ブラウザ特有のデフォルトCSSを解除するためのCSSです。
リセットCSSを記述することで、意図したとおりにWebページが表示され、ブラウザでのデザインを統一できます。
以下のように記述します。
/* ブラウザがそれぞれ持っているCSSをリセットするための記述 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
各要素を詳しく説明していきます。
margin: 0; padding: 0;
たとえば、下の左図のように、margin: 0; とpadding: 0; がない場合、ページ左端と要素との間に少し隙間ができてしまいます。（左図）
margin: 0; と padding: 0; を記述することで、この隙間がなくなります（右図）。
box-sizing: border-box;
box-sizingのデフォルト値は、box-sizing: content-box; となっています。
content-boxの場合、以下画像のように、paddingとborderの分だけコンテンツ（要素）の横幅や高さが大きくなってしまいます。
詳細度
詳細度とは、スタイルの指定が重複したときにどのスタイルを優先するかというルールになります。
詳細度の違いによって意図せぬ表示になってしまうこともあります。覚えておきましょう。
以下は、詳細度の大きい（優先度の高い）セレクター順になっています。
（）は具体的な例です。
- Inline style … （<p style="">）
- IDセレクタ … （#red）
- 疑似クラス … （:nth-child(n)、:hover ※このあとの項目で説明します）
- クラスセレクタ … （.blue）
- タイプセレクタ … （p{...}、h1{...}）
- 全称セレクタ … （*{...}）
疑似クラスとは？
疑似クラスは、HTML要素の特定の状況や条件に基づいてCSSスタイルを適用するための機能です。
例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
使用頻度の高い代表的な疑似クラスは以下になります。
疑似クラスの一覧を確認できるリンクを張り付けておきます。
cssでレスポンシブ対応
cssでレスポンシブ対応させるためには、以下の2点が必要です。
- viewportの設定
- メディアクエリの設定
viewportとは？
viewport（ビューポート）は、各デバイスで表示される領域のことです。このviewportを使って、各デバイスでどのように表示させるかを記述します。
例として以下のように、index.htmlのhead要素内にmeta要素を挿入し、viewport を記述します。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
name属性でviewportを指定し、content属性でビューポートの詳細を設定します。contentの属性値は、下記の通りです。
| 属性値 | 内容 |
|---|---|
| width=device-width | widthでコンテンツの表示領域を指定。device-widthとすることで、デバイスの横幅が自動的に適用される |
| initial-scale=1.0 | initial-scaleで表示倍率を指定。1.0とすることで、等倍になる |
メディアクエリとは？
メディアクエリ（media queries）は、解像度やビューポート幅などの条件に応じて、CSSの記述を切り替える方法です。
メディアクエリで条件を設定すると、ブラウザがその条件に合致したときに、指定したCSSに切り替わって表示されるようになります。
上書きされるCSSがないときは、元のCSSの記述がそのまま使われます。ですので、メディアクエリには、変更したいCSSのみを記述しましょう。
(例)特定のブラウザ幅でアイコンの色が変わるようにする
/* すべての画面サイズで適用される設定 */
.social i {
color:black;
}
/* タブレット横置きサイズ（1024px）以下の際に適用される設定 */
@media screen and (max-width:1024px) {
.social i {
color: green;
}
}
/* タブレット縦置きサイズ（768px）以下の際に適用される設定 */
@media screen and (max-width:768px) {
.social i {
color: red;
}
}
/* スマートフォンサイズ（425px）以下の際に適用される設定 */
@media screen and (max-width:425px) {
.social i {
color: blue;
}
}
参考にさせていただいた記事
まとめ
今までbootstrapを活用してレスポンシブ対応していたので、cssでもできるよう数をこなさないといけないです・・・
レスポンシブ対応苦手だなと思っていた節もあったのでこの機会に克服していきたいです(笑)
Discussion