2023/12/13 学科 CSS基礎②【オンライン】

Diary

1限目:CSSのプロパティと値について
2限目:練習問題の説明
3限目:CSSのプロパティと値を考える
4限目:練習問題の解説
5限目:本日の講義のまとめ

今日教わったこと

▼バックグランド系プロパティ

・background-colorプロパティ:bodyに対してこれを使えば全体の色が変わる。個別の所を変えるのもできる。初期値は透明
・background-attachmentプロパティ:背景に画像を指定できる。スクロールとともに動かしたり、固定したりの指定もできる。
・background-imageプロパティ:これも背景画像指定。pタグやdivタグに使える。
・background-repeatプロパティ:繰り返してくれる。水玉模様とかそんな感じ
・backgroundプロパティ(背景の一括指定):よく使う。↑までのを一括して指定できる。スペースで区切る。
・background-size プロパティ(背景画像のサイズ):ブラウザサイズが変わった時に背景画像のサイズをどうするか指定できる。縦基準で隙間作ってでも収まるように表示するか、横基準で隙間なく完全に覆うサイズにするかなど
・background-position プロパティ(背景画像の表示開始位置):表示開始位置を指定できるがあんま使わない

▼テキスト系プロパティ

・color プロパティ(文字の色)
・opacityプロパティ(透明度):0が完全に透明、1が完全に不透明
・text-align プロパティ(文字の配置)
・text-decoration-color プロパティ(文字飾りの色)
・text-decoration-line プロパティ(文字飾りの表示位置):下線上線や取り消し線とか
・text-decoration-style プロパティ(文字飾りの線種):破線とか二重線とか
・text-decoration-thickness プロパティ(文字飾りの線の太さ):Safariが非対応なのであんまり使わない方がいい…
・text-decoration プロパティ(文字の飾りの一括指定):Safariだとサポートが甘いので、文字に関しては一括指定しない方がいい
・text-shadow プロパティ(文字の影):水平・垂直方向、ぼかし、色を指定できる。やり方によっては物語シリーズみたいな中抜きぼかしもできる

▼フォント系プロパティ

・font-family プロパティ(フォントの種類):フォントの名前でも指定できるがその端末に指定してるフォントが入ってるか分からないので、ググってだいたいこのフォントなら大丈夫ですよって紹介されてるフォントを使うのが安心。そういう時は左からこれ出して、もし無かったらこれにしてと指定できる。Google Fontsを使えばネット上にフォントが置いてあるので活用するのもあり
・font-size プロパティ(フォントのサイズ)
・font-weight プロパティ(フォントの太さ)
・font-style プロパティ(フォントのスタイル):斜体など。フォントによっては斜体がそもそもないので注意
・line-height プロパティ(行の高さ)
・font プロパティ(フォント一括指定):↑までのを一括指定できる。
・white-space プロパティ(空白・改行の表示方法):ややこしいので資料サイト参照
・word-wrap プロパティ(単語の途中での改行方法)
・word-break プロパティ(テキストや単語の改行方法)
・tab-size プロパティ(タブ文字の表示幅指定)

▼リスト系プロパティ

・list-style-type プロパティ(リストマーカーの種類):リストの頭を・にするか白丸にするかなど指定できる
・list-style-image プロパティ(リストマーカーの画像)
・list-style-position プロパティ(リストマーカーの位置)
・list-style プロパティ(リストマーカーの一括指定)

コメント