初めに
おはこんばんちわ。
普段はコツコツサーバサイドの開発をしている者です。
今回、モック（本番に近い見た目のHTML＋CSS＋ JavaScriptで構成した画面）の作成依頼がきました。
良い機会なので
CSSをチュートリアル（教科書的なもの）で学習してみることにしました。
そしてそれを簡単に見返せるように、記述したいと思います。（深堀したい方は「参照したサイトのチュートリアルをやると良いと思います。）
項目
- CSSの仕組み
- HTMLへのCSS適用方法
- CSSルール(それぞれの名前)
- セレクタ
- カスケードと継承
- プロパティ値の計算
- ＠rules
- 参照にしたサイト
CSSの仕組み
- ブラウザがHTMLをロード
- HTMLをDOMに変換
- HTMLにリンクされている画像、CSSなどを取得
- CSSを解析し、DOMに適用
- 画面表示
DOM（Document Object Model）とは
- マークアップ言語の各要素、属性、およびテキストは、ツリー構造にしたもの
HTML→DOMのイメージ
↓HTML
<p>
Let's use:
<span>Cascading</span><span>Style</span><span>Sheets</span></p>↓DOM
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
└─ "Sheets"
HTMLへのCSS適用方法
※ソースはかなり割愛
外部スタイルシート
hoge.html
<!DOCTYPE html><html><head><linkrel="stylesheet"href="styles.css"></head><body><p>・・・・</p></body></html>styles.css
p{color:red;}- htmlのhrefでCSSのファイルを指定
内部スタイルシート
hoge.html
<!DOCTYPE html><html><head><style>p{color:red;}</style></head><body><p>・・・・</p></body></html>- htmlの<style></style>の中に記述
インラインスタイル
hoge.html
<!DOCTYPE html><!DOCTYPE html><html><head></head><body><pstyle="color:red;">This is my first CSS example</p></body></html>- htmlのタグにstyle="プロパティ:プロパティ値;"を記述
- 基本使わない！！！メンテナンスが大変
CSSルール(それぞれの名前)
css
p{color:red;}- pの部分 → セレクタ (selector)
- color: red; → 宣言 (declaration)
- color → プロパティ (property)
- red → プロパティ値 (property value)
セレクタ
さまざまな種類のセレクタ
| セレクタ名 | 例（HTML） | 例（CSS） |
|---|---|---|
| 要素セレクタ（HTMLの要素 | <p> | p |
| IDセレクタ | <p id="my-id"> | #my-id |
| クラスセレクタ | <p class="my-class"> | .my-class |
| 属性セレクタ | <img src="myimage.png"> | img[src] |
| 擬似クラスセレクタ | <a> | a:hover |
複数の要素を選択
css
p,li,h1{color:red;}- セレクタの間にカンマを挿入
- <p>、<li>、<h1>を選択
子の要素を選択
css
liem{color:reb;}- ２つのセレクタの間に半角スペースを挿入
- <li>にネストされている<em>の内容を選択
直後の要素を選択
css
h1+p{font-size:200%;}- ２つのセレクタの間に半角プラス（+）を挿入
- <h1>直後の<p>の内容を選択
リンクのスタイリング（選択）
css
a:link{color:pink;}- 未訪問のリンクを選択
css
a:visited{color:green;}- 訪問後のリンクを選択
css
a:hover{text-decoration:none;}- オンカーソルのリンクを選択
カスケードと継承
カスケード
html
<h1class="main-heading">・・・</h1>css
.main-heading{color:red;}h1{color:blue;}- 同じ選択値に複数のCSSを適用した場合の適応ルール
- <h1>の文字色「青」ではなく、main-headingクラスの文字色「赤」を適用
- より具体的なセレクタのプロパティを適用
継承
html
<p>・・・<span>hoge</span></p>css
body{color:blue;}- 親にプロパティを設定した場合、子にも適応（継承されないものもある（widthなど））
- <body>の文字色「青」を子の<span>にも適応
- <span>に文字色「赤」を設定した場合は、その要素だけプロパティを設定
継承の制御
html
<ul><li>Default <ahref="#">link</a></li><liclass="my-class-1">Inherit<ahref="#">link</a></li><liclass="my-class-2">Reset<ahref="#">link</a></li><liclass="my-class-3">Unset<ahref="#">link</a></li></ul>css
body{color:green;}.my-class-1a{color:inherit;}.my-class-2a{color:initial;}.my-class-3a{color:unset;}a{color:red;}- inherit→親要素のプロパティを設定（継承の有効化）
- initial→ブラウザのデフォルト値（デフォルト値がなく、継承可能な場合は、継承値を設定）
- unset→プロパティ値をリセット（継承可能な場合は、inheritでそうでない場合はinitialを設定
- 1行目のリンクが「赤」、2行目のリンクが「緑」、3行目のリンクが「黒」、4行目のリンクが「緑」で表示
全てのプロパティ値をリセット
html
<blockquote><p>This blockquote is styled</p></blockquote><blockquoteclass="fix-this"><p>This blockquote is not styled</p></blockquote>css
blockquote{background-color:red;border:2pxsolidgreen;}.fix-this{all:unset;}- プロパティにallを設定し、プロパティ値にunsetを設定
- <blockquote class="fix-this">の内容をデフォルトのプロパティ値で表示
!important
html
<pclass="better">....</p><pclass="better"id="winning">important</p>css
#winning{background-color:red;}.better{background-color:green!important;}p{background-color:blue;}- プロパティ値の後に !importantを設定
- !importantを設定したプロパティ値がカスケードと継承に関係なく適応
- 2行とも緑の背景色
プロパティ値の計算
算出結果をプロパティ値に設定
width:calc(90%-30px);- 選択した幅を90%-30pxの幅に変更
データ型<angle>
transform:rotate(0.2turn);- 時計周りに2/10*360回転（確認）
@rules
外部CSSファイルの取込
@import'styles2.css';条件付き適用
body{background-color:pink;}@media(min-width:30em){body{background-color:blue;}}- ビューポートが30emを超えるブラウザにのみ適用
参照にしたサイト
- 開発者向けのウェブ技術>チュートリアル
https://developer.mozilla.org/ja/docs/Web/Tutorials
TODO
- カスケードと継承をちゃんと理解する