CSSでよく使うプロパティ

こんにちは朱夏です。

今回は、CSSでよく使う、基本的なプロパティをまとめてみました。
ほぼ自分の備忘用です。

ほぼ毎回必ず使うのはこのくらいでしょうか。

順番に簡単な説明をします。

color
文字の色を指定できます。
色の指定方法はいくつかありますが、#aaaaaaのスタイルで指定するのが個人的には解りやすいです。

font-size
文字の大きさを指定できます。
これも指定方法がいくつかありますが、特に必要がなければピクセル(px)で指定するのが良いと思います。

fonto-family
フォントを指定できます。
メイリオやMSゴシックなんかも指定できます。
指定するときはダブルクォーテーションでくくってあげてください。

width
対象クラスの横幅を指定します。
ピクセルなどで指定できますが、今回のサンプルの様に100%と指定すると、横幅いっぱいに広がります。
ウィンドウの大きさや画面の横幅によって割合で幅が決まるので、画面外に飛び出すと困る場合などには便利な指定方法です。

height
対象クラスの縦幅を指定します。
widthとはセットで使うことが多いです。
指定方法が一緒ですね。

margin
対象クラスの枠の内側の幅を指定できます。
幅の指定方法はピクセルや％などがあります。
このプロパティは指定方法が特殊で、「margin: 5px;」といった書き方だと、四方に5px幅を取ります。
これが、「margin: 5px, 10px;」と指定すると、上下に5px、左右に10px幅を取る指定になります。
指定する幅を4つにすると、上下左右それぞれに幅の指定ができます。
また、margin-leftの様に、一方（この場合左側）だけに幅を指定するプロパティも用意されています。

padding
marginが枠の内側なら、paddingは枠の外側です。
指定方法は、marginとほぼ変わりません。

border
指定したクラスの外枠に線を引きます。
「solid」で線のスタイルを、#aaaaaaで線の色を指定しています。

background-color
指定したクラスの枠内の色を指定できます。
色の指定方法には色名（今回はaqua）などを指定することもできます。

list-style-type
html側で作成されているリスト（<ul></ul>などでリスト化されている部分）のスタイルを変更する事が出来ます。
今回指定しているnoneは、リストの頭についている数字や点を消してくれます。
これとセットで使うことが、今のところほとんどです。

他にもCSSで使うプロパティはたくさんありますが、これだけでもかなり見た目を改善できるのではないかと思います。

今回は以上です。