基金訓練(Webデザイン・プログラミング科)の46日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。
本日の内容は下記のとおりです。
１．CSSのスタイル属性(プロパティ)
テキスト、フォントに関するスタイル属性
文字の大きさ
- プロパティ
- font-size
- 値
-
- 長さ(単位付数値)(絶対及び相対指定)
- xx-small 超極小(絶対指定)
- x-small 極小(絶対指定)
- small 小(絶対指定)
- medium 標準(絶対指定)
- large 大(絶対指定)
- x-large 特大(絶対指定)
- xx-large 超特大(絶対指定)
- smaller より小さく(相対指定)
- larger より大きく(相対指定)
- % 親要素に対するパーセンテージ(相対指定)
文字の書体
- プロパティ
- font-family
- 値(複数指定可能で「,」で区切って指定)
-
- 系列別(serif、sans-serif等)
- フォント名(“ＭＳ Ｐ ゴシック”、Osaka等)
※スペースを含むフォント名の場合は、「”」で囲む。
※日本語のフォント名の文字は全角で、スペースは半角にする。
文字の太さ
- プロパティ
- font-weight
- 値
-
- normal 標準
- bold 太字表示
- bolder より太く表示
- lighter より細く表示
- 100～900 100刻みで指定
文字のイタリック体、斜体表示
- プロパティ
- font-style
- 値
-
- normal 標準
- italic イタリック体で表示
- oblique 斜字で表示
※イタリック体は、筆書形の右に傾いた書体で、元の書体とはデザインが違ったもの。
※斜体は、字形をそのまま斜めに傾けたもの。
行送り
- プロパティ
- line-height
- 値
-
- 長さ(単位付数値)
- 実数値(単位なし数値) フォントサイズに対する倍数
- normal 標準(フォントサイズに基づいてブラウザが設定した規定値)
- % フォントサイズに対するパーセンテージ
文字の色
- プロパティ
- color
- 値
-
- カラーの値
※ブロック要素に指定可能。
段落の行揃え
- プロパティ
- text-align
- 値
-
- left テキストを左揃えにする
- right テキストを右揃えにする
- center テキストをセンター揃えにする
- justify 行内で均等配置にする
文字の装飾
- プロパティ
- text-decoration
- 値
-
- none 標準
- underline 下線をつける
- overline 上線をつける
- line-through 取り消し線をつける
- blink 点滅させる
※blinkは、Firefox、operaのみ有効。
※2つ以上の値を半角スペースで続ければ、同時に指定できる。
今日のポイント
- line-heightを指定した時、フォントの上下に均等に隙間が開くので、例えば、
font-size:10px;line-height:14pxの時、上下に各2pxの隙間があく。
