HTML5の資格を取った時のメモ ②CSS

2017年に受験した時の記録です。

HTML5の資格を取った時のメモ

1. HTML
2. CSS ←この記事
3. その他範囲、試験対策
4. サンプルコード、問題

---

1日目
kindleでもう少し難しい教科書を買って通勤中に20ページぐらい読む
HTML教科書 HTML5レベル1
優しい方の本目標：2-5まで→読了。

2日目
CSSの残りが多かったので朝のうちに30分で2-6テキスト、2-7フォントに目を通す。
通勤中はkindleで難しい方の本。HTMLパートを20ページぐらいと夜食事しながら技術要素のパートを少し読む。
技術要素は大体知ってるので気楽。配点は少ないけど手堅く狙っておきたい。
逆にHTMLやCSSの暗記は辛い。覚えても試験が終われば多分忘れるので基礎理解を重視して進める。
22:40から自宅で優しい本のCSS続き。23:40読了。

chapter2 CSS（CSS3）

style要素とstyle属性（グローバル属性）
フォントサイズの単位 em（エム）←大文字のMに由来（Mがサイズ一杯の大きさだから）
参考：emとは

2-2-1 セレクタの種類（覚えろ！）

シンプルセレクタ
・タイプセレクタ（要素名）
・ユニバーサルセレクタ（*）
＋
・. クラスセレクタ
・# IDセレクタ
・[属性セレクタ]
・: 疑似クラス
・:: 疑似要素（::afterとか）

※詳細度が高い順（※桁は繰り上がらない）

x100
・# IDセレクタ
x10
・. クラスセレクタ
・[属性セレクタ]
・: 疑似クラス
x1
・タイプセレクタ（要素名）
・:: 疑似要素（::afterとか）

2-2-6 属性セレクタ

・[属性名]
・[属性名="値"]：値全体が一致
・[属性名~="値"]：値のどれかと一致
・[属性名|="値"]：値のハイフンの前が一致（"en"でen-USと一致）
・[属性名^="値"]：値の前方一致
・[属性名$="値"]：値の後方一致
・[属性名*="値"]：値の一部が一致

2-2-10 結合子

・SelA SelB：Aの内部のB
・SelA > SelB：Aの子のB。孫なら「SelA > * > SelB」
・SelA + SelB：Aのすぐ下の弟のB
・SelA ~ SelB：Aより下の弟全員のB

2-4 色

→諦める

　　　　　　　　　,r '"￣"'''丶,
　　　　　　　 ./.ﾞﾞﾞﾞﾞ 　　.lﾞ~ﾞﾞﾞﾞ ヽ＼
　　　　　　. i´ ri⌒.'li､　.'⌒ヽ　 'i::`i,
　　　　　　.|　′　.ﾞ゜　　.ﾞﾞﾞ″ .:::l::::::!
　　　　　　|,　　　,r'!ヾ･ ヽ,　 .::::.|:::::::i　　あいつはもう消した！
　　　　　　.i,　　./,r──ヽ, :::::::i::::,r'
　　　　　　ﾞヽ､　 .ヾ!ﾞﾞﾞﾞﾞﾞ'''ヽ、_ノ
　　　　　　　　｀'''ﾞi　._____ l /ヽ
　　　　／＼ へ　 ﾞヽ ＿__ノ’_／
　　　　へ､　　 |￣＼ー フ￣ |＼ー
　 ／ ／￣＼　| 　＞|￣|Σ　|　 |
　 ,　┤　　　 |/|＿／￣＼＿| ＼|
　|　　＼＿／　 ヽ
　|　　　＿_(￣　 |
　|　　　＿_） ～ノ
　人　　＿_）　ノ

opacity（不透明度）0.0で透明、1.0で不透明

2-5 背景

background-imageでレイヤ生成
backgroundで全部盛り（ただし指定なし＝reset）

2-8-9 displayプロパティ

意味わかんない。
clip：刈り込む、切り抜く、一部を見せる

2-9-8 フレキシブルボックスレイアウト

flex「これがフレキシブルボックスレイアウトです」メンタリストか
displayプロパティ周りは後で理解する。

※短時間で詰め込んだので疲れていたようです。