プロパティ概論
今回はスタイルシートのプロパティを紹介します。
とは言っても全部紹介すると、100以上あるし、それ専門のサイトも豊富にあるので、
接頭語に絞って紹介しようと思います。
接頭語だけでも覚えれば、どんな機能にかかわっているかすぐに分かりますよ。
プロパティ接頭語集
background-???
backgroundで始まるプロパティは背景に関することを設定します。
調節できることとしては、以下のものがあります。
- 背景の色や画像
- 表示位置
- 繰り返しのパターン
font-???
fontで始まるプロパティは文字に関することを設定します。
調節できることとしては、以下のものがあります。
- 文字の色、大きさ、太さ
- 使うフォント
- 斜体などの設定
text-???
textで始まるプロパティは文章に関することを設定します。
調節できることとしては、以下のものがあります。
- 左揃え、中央揃えなど
- 段落の字下げ
- 下線や取り消し線を引く
margin-???,padding-???
marginやpaddingで始まるプロパティは余白や詰めに関することを設定します。
調節できることとしては、以下のものがあります。
- 上下左右の余白や詰め
marginとpaddingの違いはボックスを理解しようで説明します。
border-???
borderで始まるプロパティは枠線に関することを設定します。
調節できることとしては、以下のものがあります。
- 枠線の色や太さ
- 表示パターン
list-???
listで始まるプロパティはリストに関することを設定します。
調節できることとしては、以下のものがあります。
- マーカーの種類
- マーカーの画像
- マーカーの位置
配置に関するプロパティ
配置にかかわるプロパティには以下のものがあります。
- width,height：ボックスの幅や高さ
- position：表示位置の計算方法
- top,left,right,bottom：移動方向と量
- float,clear：回り込みと解除
- overflow：あふれた部分の処理方法
- z-index：重なりの順序
ぜひ覚えておきたいプロパティ
ぜひ覚えておきたいプロパティには以下のものがあります。
- color：文字の色
- line-height：行間
- vertical-align：文字の上下位置
- display：要素の表示方法
もっと細かいプロパティや、取れる値などは実習編やCSSテクニックで、
実際に使いながら見ていきたいと思います。
プロパティは他にもありますが、ここに挙げたものだけで十分だと思います。
配置に関するプロパティはCSSデザインに欠かせないものなので、
名前だけでも早めに覚えたほうがいいです。