こんにちは朱夏です。
今回は、CSSでよく使う、基本的なプロパティをまとめてみました。
ほぼ自分の備忘用です。
ほぼ毎回必ず使うのはこのくらいでしょうか。
body {
color: #aaaaaa;
font-size: 15px;
font-family: "cursive";
width: 100%;
height: 30px;
margin: 5px;
padding: 10px;
border: solid #aaaaaa;
background-color: aqua;
list-style-type: none;
}
順番に簡単な説明をします。
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で使うプロパティはたくさんありますが、これだけでもかなり見た目を改善できるのではないかと思います。
今回は以上です。
