CSSの基本を知ったところでここではメインで使う「プロパティ」をピックアップして解説します。あくまでメインなので全部のプロパティは表記していません。
プロパティとは何でしょうか？
プロパティとは以下の赤い箇所のことです。
font-size: 20px;
}
ちなみに青がセレクタ、緑が値です。この言葉は頻繁に出てくるので是非覚えてください。
プロパティは二部に分けます。第一部はテキストや文字に装飾をする系や余白のCSSプロパティを説明し、第二部は枠線、背景、回り込み、リスト、高さ、横幅…といったプロパティを説明します。
「CSSがまだ不安…」という方は前回の7.装飾をするためにCSSを使うを参考にしてください。
では早速いきましょう！
目次
テキスト、文字にかけるCSS
color
文字色を定義するプロパティ。赤や青、緑など好きな色を指定することができます。
例：
p {
color: #f00;
}
適用例：
サンプル文字
値の部分はこのように#000;やred, blueなどの固有名詞等で指定できます。
font-size
文字のサイズを変更するプロパティ。大きくしたり小さくしたり、単位も様々です。
例：
ul {
font-size: 1.5em;
}
適用例：
サンプル文字
emとは「1文字分」なので基準サイズの1.5倍の大きさということになります。他に%, px, pt等、様々な単位で指定することができます。
簡単に説明するとpxやpt等の固定の単位を絶対指定、emや%の基準となるサイズによってかわる単位を相対指定といいます。
PCやスマホ、タブレットと様々な大きさのデバイスがあるので基本的にはemという相対指定で進めていくことをお勧めします。
font-weight
文字の太さを定義するプロパティ。
例：
div {
font-weight: bold;
}
適用例：
サンプル文字
100や200といった数値での指定もできますがboldを使うのが無難です。boldにしていたものを戻す場合は値にnormalを指定します。
font-family
ゴシックや明朝など、どのフォントを使うか定義するプロパティ。MS P ゴシックとかメイリオとか固有名詞で指定します。
例：
h2 {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
適用例：
サンプル文字
値がコンマで複数個指定されています。これは全部を指定するのではなく、「1つ目がなかったら2つ目、それもなかったら3つ目…」といったように優先順位をつけて指定しています。
なぜこんなことをするのかというとフォントというのは見ている人のパソコンにそのフォントが入っているかはわからないので、なかった時のためにいくつか予備で指定するのです。
この例だと一番優先させたいのはヒラギノ角ゴ Pro W3ですがこれはMacのフォントで一般的なWindowsコンピュータには入っていません。なのでこれはWindowsユーザーには無視されて次のフォントにいきます。
試しにどのフォントも入っていない場合（そんなことは基本的にないですが、海外などで日本語フォントが入っていない場合）、最後に設定したsans-serifというサンセリフ体（ゴシック体）の文字を使えという命令をしています。この指定にするとそのパソコンに入っている基本的なゴシック文字が使われ日本語も表示できるようです。
text-decoration
文字の装飾を定義するプロパティ。
例：
div {
text-decoration: underline;
}
適用例：
サンプル文字
例ではunderline、つまり「下線」を引きました。他には上に線をひくoverline、取り消し線のline-through、何も指定しない場合や設定した値を戻したいばあいのnoneなど。一番使うのはunderlineでしょう。
text-align
行内での表示位置を定義するプロパティ。
例：
p {
text-align: center;
}
適用例：
サンプル文字
結構使うプロパティの一つ。centerの他に右寄せにするright、基準値となるleftがあります。
line-height
行内におけるテキストの高さを定義するプロパティ。
例：
h4 {
line-height: 500%;
}
適用例：
サンプル文字
高さを指定する値は%の他にemやpxなどfont-sizeと同じように指定できます。ここもpx指定よりも相対指定のemや%がいいでしょう。line-heightは単位を省くと「倍」という意味になります。（例：1.5 = 1.5倍）
font-sizeの値より大きい場合は余った数を上下に割り振ります。
text-indent
文字を引っ込める（インデントする）プロパティ。
例：
p {
text-indent: 1em;
}
適用例：
サンプル文字
サンプル文字
インデントするというのは文字を下げる、という意味です。1emすると1文字分インデントされ2行目からはもともとの位置からスタートとなりよくある文章の形と思ってもらえればわかるかと思います。
もちろんpxや%等の数値での指定もできます。しかし実際にはemで「1文字分」としたほうが後々の管理がしやすいでしょう。
余白を指定するCSS
続いて余白を決めるCSSを学びます。これはよく使うプロパティなので是非覚えましょう。
margin
要素の外側の余白を決めるプロパティ。
例：
div {
margin: 30px 50px;
}
適用例：
サンプル文字
marginプロパティは外側の余白を設定します。要素自体の余白は全く関与しません。例では上下と左右に分けましたが、上だけ、下だけ、上下左右全部、上と左右は一緒で下だけ別などなど4方向細かく設定できます。
/*上下左右30px 例：*/
div {
margin: 30px;
}
/*上30px 左右20px 下10px 例：*/
div {
margin: 30px 20px 10px;
}
/*上30px 右50px 下10px 左20px 例：*/
div {
margin: 30px 50px 10px 20px;
}
/*上だけ30px 例：*/
div {
margin-top: 30px;
}
/*右だけ50px 例：*/
div {
margin-right: 50px;
}
/*下だけ10px 例：*/
div {
margin-bottom: 10px;
}
/*左だけ40px 例：*/
div {
margin-left: 40px;
}
といった感じに細かく設定できます。このmarginプロパティは次に出てくるpaddingプロパティとセットで覚えるようにしましょう。
padding
要素の内側の余白を決めるプロパティ。
例：
div {
padding: 15px 40px 5px;
}
適用例：
サンプル文字
paddingプロパティはmarginと変わり要素の内側の余白を設定します。marginとごっちゃになりやすいところです。適用例を見ると分かる通り要素の内側なので青い部分が広がっているのがわかると思います。
marginと同じく、上下左右をそれぞれ細かくと上だけ左だけといったように個別にも設定できます。※marginと同じのため省略します。
最初はどこからが内側でどこからか外側なのかわからなくなりますが、次回で紹介するborderやbackgroudプロパティでわかりやすくなるので合わせて見てみましょう。
