こんばんは、こずえです。
プログラミング学習記録5日目です。
前回に引き続き「はじめてのCSS入門講座」を進めました。
所感：今日は学習とブログ合わせて就寝時間に間に合うように調整できてよかった！(∩´∀｀)∩
記録0日目に書いた目標を「プログラミングで月収5万円」から「2019年中にプログラミングで月収5万円」に変更しました！
今年中に達成したいなとぼんやり考え続けていたので明記…！(｀・ω・´)ﾉ
合計学習時間
前回までの時間：6.00[h]
今回の時間：1.50[h]
合計時間：7.50[h]
学習内容
はじめてのCSS入門講座
- 4-3 文字のスタイルの指定（CSSの文字とリスト）
- 4-4 行間の指定（CSSの文字とリスト）
- 4-5 文字の配置（CSSの文字とリスト）
- 4-6 リストの表示方法（CSSの文字とリスト）
- 5-1 paddingプロパティ（CSSのボックスモデル）
- 5-2 marginプロパティ（CSSのボックスモデル）
メモ
文字のスタイルの指定
font-style
- normal：通常
- italic：斜体
- oblique：斜体
italicとobliqueの違いが気になったので検索して以下のサイトに目を通しました。
欧文フォントの中には、「イタリック体」と「斜体」用にそれぞれ専用にデザインされたフォントが用意されているものがあるようです。イタリック体は筆記体っぽくデザインされたもので、斜体は単純に斜めに倒しただけのような形です。
font-variant
- normal：通常
- small-caps：全ての文字を大文字書体で表記(文字のサイズはそのまま)
- inherit：親要素の指定を継承
font
プロパティの記述には順番が存在する。
font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> font-family
行間の指定
line-height
数値で指定する。
- px
- em
- ex
- %
- 単位指定無し
ここでの行間は行を中心とした上下。
以下のサイトの説明が参考になりました。
文字の配置
text-align
- left：左寄せ
- right：右寄せ
- center：中央寄せ
- justify：両端揃え(英文字の文章について指定できる
※1 )
あくまでも文字の配置についてのみ使用可能。
画像やブロックの配置には使用不可。
※1：軽く検索した所使える？ような印象を受けましたが、よく調べていないので書き留めておく程度にしておきます。
リストの表示方法
list-style-type
ulで指定が可能なもの
- disc：円形(中黒や中点と呼ばれるももの)
- circle：中空円(白丸)
- square：四角(塗りつぶされたもの)
olで指定が可能なもの（抜粋)
- decimal：数値
- decimal-leading-zero：数値(ゼロ埋め)
- lower-roman：ローマ数字(小文字)
- lower-alpha：アルファベット(小文字)
lower⇔upper：小文字⇔大文字
list-style-position
- none：表示しない
- inside：ブロックの内側
→頭をそろえたい時に便利。 - outside：ブロックの外側
- inherit：親要素の指定を継承
paddingプロパティ
余白の一種でボックス(ボーダー)の内側に当たる部分。
4つに分けて記述することが可能
- padding-top
- padding-right
- padding-bottom
- padding-left
一括で指定することも可能
- 2つの場合…上or下 左or右
- 3つの場合…上 左or右 下
- 4つの場合…時計回り(上右下左)
marginプロパティ
ボックス(ボーダー)の外側の余白
- margin-top
- margin-right
- margin-bottom
- margin-left
理解に役立つツール
padding、border、marginを視覚的に確認
pading、border、marginの確認はブラウザのデベロッパーツールを利用することで視覚的に確認ができます。
