2019/11/12
今日の日報
学んだこと
はじめてのCSS
#03 色の表現方法を学んでいこう
わかったこと
- １つのセレクターに対して、複数のプロパティを設定した場合、後から書いた方が優先される
- rgbのカラー指定は各色を0から255の数字で指定する
- 16進数*1で指定する方法もある（#を書いた後に16進数を書く）
- red、green、blueで同じ文字が続く場合は、それぞれを一文字で表現してもOK（例 #00ff00 → #0f0）
- 透明度の設定、色相彩度、明度を指定する方法もある
- CSSでコメントを書きたい場合は /* */で囲う（HTMLと同様のショートカットが使える→command+/）
#04 フォントを設定していこう
わかったこと
- 文書全体のスタイルはbodyに書く
- font-familyを使ってフォントの指定ができる
- font-family: Verdana, sans-serif; ←Verdanaを使ってね。なかったらゴシック体フォントを使ってね、という意味になる
わからなかったこと、疑問点
- 末尾につく「;」は閉じタグ的な存在なのかな
- 指定フォントがなかった場合というのは、環境的に持っていないということなのかな（古いPCだと持ってなかったり、ということなのかしら）
- なかった場合のゴシック体も環境によって様々になるのかな…（windowsだったらMSゴシックとか、Macだったらヒラギノ角ゴとかそういうこと？）
#05 CSSのボックスモデルを確認しよう
わかったこと
- 背景色の指定は「background-color」というプロパティで指定できる
わからなかったこと、疑問点
- 「HTML で書いたそれぞれの要素がブラウザで表示されるときにはこのような四角い領域を確保してくれます」？？？どのような…？？？
- CSSのボックスモデルの説明（概念）が全然理解できなかった…（とりあえず進めてみて、理解できるかもしれないので一旦置いておこう…）
→#7を見て「このような四角い領域」というのは、各要素が四角の中にいるということなのかなと思った（四角が並んでいるという風に考えるということ？なにも設定をしていなければ）
#06 marginで外側の余白を設定しよう
わかったこと
- マージンはmarginを使って上下左右設定できる
- 上：margin-top
- 下：margin-bottom
- 右：margin-right
- 左：margin-left - 上下左右が同じ数値の場合は「margin: 0px;」でまとめて設定できる
- 0pxの場合は単位を省略することも多い
わからなかったこと、疑問点
- 0px以外は単位を省略できないのか
→別の数値で試してみたら反映されなかった
#07 divタグを使ってみよう
わかったこと
- HTMLではレイアウトのためのdivタグというものが用意されてる
- 入れたい要素をdivタグで囲う
- どのdivかを判別できるように識別子をつけてあげる（例 div class="任意のクラス名"）
- スタイリングのための識別子にはClass属性が使われる
- CSSのセレクターでは、Class属性をつけた要素を .クラス名 で表現できる
- 中央寄せにしたいときは、左右のmarginをautoに設定するテクニックがよく使われる
- margin-right: auto;
margin-left: auto;とすると余った領域を左右に均等に割り当ててくれる
わからなかったこと、疑問点
- 各要素が四角の中に入っていて、divタグに入れるとさらに大きな四角にいれるみたいな感じなのかな
先生のお言葉
CSSはhtmlよりも覚えることがおおく、基礎的な知識と実践の距離が比較的大きいので、混乱することもあるかもしれないけども、ひとつずつ経験して理解できていくから、自分がわからないことをしっかり掴んで言語化できるとよいですね
本日の感想
- HTML基礎より理解に時間がかかる。（HTML基礎は聞いてスッと理解できたけど、CSS基礎は一度噛み砕く作業が必要…）
- これはHTMLに書く、これはCSSに書く、という違いがわからなくてちょっと混乱している。
*1:16進数とは、0から9までの10個の数字と、AからFまでの6個のアルファベットを使って数値を表現する方法である。
