素人がWordPressでサイトを構築したいための勉強メモ【8】CSSの基本

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

今回もこちら。
チャプター5にして今まで一番理解していなかったCSSの勉強する。
CSSでデザイン＆装飾って言われてもどうするんだと思っていた。

基礎についての知識を読んだ今現在のイメージ。
家に例えると、HTMLが設計・骨組み。
CSSが壁紙や建具、床素材。
だろうか。
うーん、もっとうまい例えは無いものか。

セレクタ・プロパティ・値・コメントと言われても、まださっぱりちんぷんかんぷんである。

あとで戻って復習することにする。

チャプター5のポイント

・テキストの色の設定
・テキストの大きさの設定
・CSSファイルの読み込み
・グループ化

色の設定。
基礎の基礎。
h1の色を緑にする。green。
色の指定を細かくする場合はカラーコードを使用。
PhotoshopのRGB色指定で確認できる「＃000000」みたいなやつか。

テキストの大きさ。
これもコードはよく見るのでなんとなくわかる。
今回は％指定。
サイズ指定には他にもpx、em、remがあるようだが、まだ理解が浅い。何が最適なんだろうか。

CSSファイルの保存と読み込み。
style.cssで保存。このstyle部分は好きなものにして良いのか。
命名規則については書いていない。
読み込みはHTMLにstyle.cssを読み込ませるテキストを入力する。案外「”」を忘れがちになり、読み込めないこともある。そこは慣れだろう。

グループ化
よく見かけるdivだ。今回は</header>の下から<footer>の前までdivで囲んだ。
まだ何のためか分からない。この後、レイアウトしやすくなるのか。
よく見かけるのはdivの中にさらにdivがある構造。

次はCSSでレイアウト。