今回はCSSのプロパティについて書いていこうと思います。
と言っても、量がとても多いので私が使ったことがあるプロパティを中心に書いていきます。
CSSってどこに書いたらいいの？という人は以下のリンクをご覧ください。
プロパティって？
プロパティとは、
上の図のCSSの赤文字の部分を言い、HTMLを装飾するためのものになります。
上の図ではセレクタの要素が「ｐ」となっており、プロパティが「color」となっているため、「ｐ要素の文字の色を変える」プロパティということになり、値が「blue」なので「ｐ要素の文字の色を青色に変えますよ」という意味になっています。
それ以外のプロパティもいくつか紹介していきましょう。
よく使うプロパティの紹介
文字の装飾
color
文字の色を変えます。上記のように色を直接入力する方法や
#ffffffのようにカラーコードを使用して書くこともできます。
私はカラーコードを使用する時は「WEB色見本」を参考にさせて頂いてます。
たくさんのカラーが探せるのでこの色を使いたい！という色が見つかると思います。
font-family
文字の書体を変更します。
font-size
文字の大きさを変えます。○○px、○○em、large等様々な指定の仕方があります。
font-weight
文字の太さを変えます。bold(太字)や100～900までの数字で指定する等できます。
background-color
文字の背景の色を変えます。先ほどの文字の色と同様に色の指定やカラーコードでの指定ができます。
枠線の装飾
border
線の太さ、種類、色の指定ができます。
線の太さは3px等pxで指定します。
種類はsolid(実線)、double(二重線)、dashed(破線)、dotted(点線)などの指定ができます。
線の色は先ほどまでの色指定と同様に行うことができます。
border-radius
10px等pxで指定を行います。数値が大きくなるほど枠線の角が丸くなります。
padding
枠線の内側の余白を指定します。10px 5px 10px 5px と指定した場合、順番に上、右、下、左の順に余白の広さを指定できます。
margin
枠線の外側の余白を指定します。paddingと同様に上、右、下、左の順で指定ができます。
paddingとmarginについてはまた別の機会に詳しく書けたらと思います。
コメント