8.CSSで使う主要なプロパティと値を知ろう(1)

CSSの基本を知ったところでここではメインで使う「プロパティ」をピックアップして解説します。あくまでメインなので全部のプロパティは表記していません。

プロパティとは何でしょうか？

プロパティとは以下の赤い箇所のことです。

ちなみに青がセレクタ、緑が値です。この言葉は頻繁に出てくるので是非覚えてください。

プロパティは二部に分けます。第一部はテキストや文字に装飾をする系や余白のCSSプロパティを説明し、第二部は枠線、背景、回り込み、リスト、高さ、横幅…といったプロパティを説明します。
「CSSがまだ不安…」という方は前回の7.装飾をするためにCSSを使うを参考にしてください。

では早速いきましょう！

テキスト、文字にかけるCSS

color

文字色を定義するプロパティ。赤や青、緑など好きな色を指定することができます。

例：

適用例：

値の部分はこのように#000;やred, blueなどの固有名詞等で指定できます。

font-size

文字のサイズを変更するプロパティ。大きくしたり小さくしたり、単位も様々です。

例：

適用例：

emとは「1文字分」なので基準サイズの1.5倍の大きさということになります。他に%, px, pt等、様々な単位で指定することができます。
簡単に説明するとpxやpt等の固定の単位を絶対指定、emや%の基準となるサイズによってかわる単位を相対指定といいます。
PCやスマホ、タブレットと様々な大きさのデバイスがあるので基本的にはemという相対指定で進めていくことをお勧めします。

font-weight

文字の太さを定義するプロパティ。

例：

適用例：

100や200といった数値での指定もできますがboldを使うのが無難です。boldにしていたものを戻す場合は値にnormalを指定します。

font-family

ゴシックや明朝など、どのフォントを使うか定義するプロパティ。MS P ゴシックとかメイリオとか固有名詞で指定します。

例：

適用例：

値がコンマで複数個指定されています。これは全部を指定するのではなく、「1つ目がなかったら2つ目、それもなかったら3つ目…」といったように優先順位をつけて指定しています。
なぜこんなことをするのかというとフォントというのは見ている人のパソコンにそのフォントが入っているかはわからないので、なかった時のためにいくつか予備で指定するのです。
この例だと一番優先させたいのはヒラギノ角ゴ Pro W3ですがこれはMacのフォントで一般的なWindowsコンピュータには入っていません。なのでこれはWindowsユーザーには無視されて次のフォントにいきます。

試しにどのフォントも入っていない場合（そんなことは基本的にないですが、海外などで日本語フォントが入っていない場合）、最後に設定したsans-serifというサンセリフ体（ゴシック体）の文字を使えという命令をしています。この指定にするとそのパソコンに入っている基本的なゴシック文字が使われ日本語も表示できるようです。

text-decoration

文字の装飾を定義するプロパティ。

例：

適用例：

例ではunderline、つまり「下線」を引きました。他には上に線をひくoverline、取り消し線のline-through、何も指定しない場合や設定した値を戻したいばあいのnoneなど。一番使うのはunderlineでしょう。

text-align

行内での表示位置を定義するプロパティ。

例：

適用例：

結構使うプロパティの一つ。centerの他に右寄せにするright、基準値となるleftがあります。

line-height

行内におけるテキストの高さを定義するプロパティ。

例：

適用例：

高さを指定する値は%の他にemやpxなどfont-sizeと同じように指定できます。ここもpx指定よりも相対指定のemや%がいいでしょう。line-heightは単位を省くと「倍」という意味になります。（例：1.5　= 1.5倍）
font-sizeの値より大きい場合は余った数を上下に割り振ります。

text-indent

文字を引っ込める（インデントする）プロパティ。

例：

適用例：

インデントするというのは文字を下げる、という意味です。1emすると1文字分インデントされ2行目からはもともとの位置からスタートとなりよくある文章の形と思ってもらえればわかるかと思います。
もちろんpxや%等の数値での指定もできます。しかし実際にはemで「1文字分」としたほうが後々の管理がしやすいでしょう。

余白を指定するCSS

続いて余白を決めるCSSを学びます。これはよく使うプロパティなので是非覚えましょう。

margin

要素の外側の余白を決めるプロパティ。

例：

適用例：

marginプロパティは外側の余白を設定します。要素自体の余白は全く関与しません。例では上下と左右に分けましたが、上だけ、下だけ、上下左右全部、上と左右は一緒で下だけ別などなど4方向細かく設定できます。

といった感じに細かく設定できます。このmarginプロパティは次に出てくるpaddingプロパティとセットで覚えるようにしましょう。

padding

要素の内側の余白を決めるプロパティ。

例：

適用例：

paddingプロパティはmarginと変わり要素の内側の余白を設定します。marginとごっちゃになりやすいところです。適用例を見ると分かる通り要素の内側なので青い部分が広がっているのがわかると思います。

marginと同じく、上下左右をそれぞれ細かくと上だけ左だけといったように個別にも設定できます。※marginと同じのため省略します。
最初はどこからが内側でどこからか外側なのかわからなくなりますが、次回で紹介するborderやbackgroudプロパティでわかりやすくなるので合わせて見てみましょう。