2019/11/11
今日の日報
学んだこと
はじめてのCSS
#01 はじめてのCSSを書いてみよう
わかったこと
- CSSの書き方は色々ある
- 方法のひとつとして、head要素の中にstyleタグで書いていく方法がある
- 該当のタグを指定して、{}の中に設定を書く（例 h1 {color: red;} ）
- VScodeは色見本を表示してくれる
- CSSはどこにどのようなスタイルをあてていくかの設定
- どこに＝「セレクター」、どのような＝「プロパティ」
- 別ファイルで管理しても良い（style内の記述が長くなってしまう場合）
- 別ファイルの場合は、CSSファイルを読み込むためのタグをhead要素内に書く
<link rel="stylesheet" href="css/styles.css"> - 新しく作ったCSSファイルにstyleタグ内に書いた内容をそのまま書けばOK
#02 デベロッパーツールを使ってみよう
わかったこと
- 設定したCSSがブラウザでどう解釈されたかデベロッパーツールで確認できる
- HTML/CSSの学習に限って言えば、Elementsパネルが使えればOK
- Elements パネルの左側ではブラウザが解釈した HTML、右側では CSS で設定されたスタイルを確認できる（私はデベロッパーツール右側に表示されたので、上下だった）
- 調べたい要素を右クリックして「検証」とやっても開ける
- user agent stylesheet＝ブラウザが標準で持っているCSS
- computedタブでは設定しているスタイルをまとめて一覧で見ることができる（アルファベット順に並んでいる）
- Show all チェックで親要素から引き継いでいるスタイルも含め、全てを見れる
本日の感想
- CSSの勉強がはじまった（全然進められなかった）
