今日からCSS
今日から飾りつけ=CSSのお勉強です！
今まではHTMLファイルを作ってきましたが、別にCSSファイルを作ります。
CSSの基本的な書き方
styleタグ: 装飾したい部分をくくる
{}でくくり、中にフォントサイズや色などの指定をする
文字についてできること
- 文字サイズ: font-size/見出し、段落などでそれぞれ初期値が決まっている
- pxかemで指定する
- 文字色: color/10進法指定や16進数で指定する
- 行をそろえる: text-align
- 罫線をつける場所: border-style/罫線をつける場所
- 罫線の太さ: border-width/太さの指定(pxで指示)
- 罫線の色: border-color/罫線の色
- 背景色: background-color
class、idを使ったCSSの指定方法
class属性: 特定の要素だけ装飾したい場合、目印となる「class属性」をhtml上に追加する(名前をつけるイメージ)
→CSS上では「.(ドット)」＋「class属性の値」(=classセレクタ)で指示し、装飾したい内容を記す
id属性とidセレクタ: class属性と同じようにCSS設定できるが、#で指定する
ボックスモデル
marginプロパティ: CSSで”ボックス”と呼ばれる四角い領域の外側
paddingプロパティ: CSSで”ボックス”と呼ばれる四角い領域の内側
表とリストの装飾でできること
- 罫線追加
- セルに余白を追加
- セルの罫線のすき間をなくす: border-collapse: collapse;
- セルに色を付ける
- セルの大きさを指定
- リスト記号の変更: list-style-type(黒丸、白丸、ローマ数字やアルファベット、カタカナでも！)
だいぶ形にはなってきてるけど、理解しているというにはほど遠い…
コメント