CSS【プロパティ】～スタイルを与える

CSSは、基本的にセレクタとプロパティと値を１セットとして使用します。
セレクタで示されたHTML要素に、スタイルを指定するのが プロパティと値です。
今回は、CSSのプロパティについてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．プロパティとは

CSSは、基本的に次のような形で使用します。

セレクタは、対象となるHTML要素を特定するものです。
そして、特定されたHTML要素に、スタイルを与えるのが プロパティとその値です。

CSSで使用できるプロパティは、数多く存在します。
様々な種類のプロパティが用意されているおかげで、CSSでレイアウトを細かく設定することができます。
それぞれのプロパティによって、値の指定の仕方も変わってきます。

このように、プロパティは量が多いので、全て覚えるのは難しいですが、文字のサイズや色など、よく使うプロパティは自然に覚えられます。

▲目次へ戻る

２．プロパティの種類

プロパティは、大きく３つに分類することができます。

ディスプレイ用のプロパティは、画面表示（見た目）のスタイルで、音声用のプロパティは、音声ブラウザ用のスタイル、印刷用のプロパティは、印刷時のスタイルです。

そして、ディスプレイ用のプロパティは、次の２通りのタイプがあります。

ほとんどの要素に使えるプロパティは、メタデータ・コンテンツ以外の要素で使用することができます。
メタデータ・コンテンツについては、HTML 【メタデータ】１ ～ メタデータ・コンテンツの概要とbase要素をご覧下さい。

特定の要素専用のプロパティは、table要素のためのtable-layoutプロパティや、list要素のためのlist-style-imageプロパティのように、その要素で使うためだけに用意されたプロパティ（その要素でしか使用できないプロパティ）です。

▲目次へ戻る

３．よく使うプロパティ

CSSでは、細かくレイアウトの指定ができるように、数多くのプロパティが用意されていますが、よく使うプロパティは割と限られています。
文字の表示に関するプロパティなど、よく使うと思われるプロパティを紹介します。

color

colorプロパティは、文字色を指定する際に使用します。

文字色を指定する場合は、同時に背景色も指定します。
背景色は、background-colorプロパティで指定します。
背景色と文字色との関係に注意して、文字が読みにくくなるのを防ぐためです。

<p style="color: #AAAAAA; background-color: #B20000;">
    カラコード#AAAAAAの文字色 ＋ カラーコード#B20000の背景色
</p>

３．よく使うプロパティへ

font-size

font-sizeプロパティは、フォントのサイズを指定する際に使用します。

値は、数値、または％、またはキーワードで指定します。

<p style="font-size: 10px;">10px</p>
<p style="font-size: 5em;">5em</p>
<p style="font-size: 10ex;">10ex</p>
<p style="font-size: 100%;">100%</p>
<p style="font-size: 50%;">50%</p>
<p style="font-size: xx-small;">xx-small</p>
<p style="font-size: small;">small</p>
<p style="font-size: large;">large</p>
<p style="font-size: xx-large;">xx-large</p>

３．よく使うプロパティへ

font-weight

font-weightプロパティは、フォントの太さを指定する際に使用します。

font-weightは、太さを９段階（100 ～ 900）で指定することができますが、一般的なフォントは太さが９種類も用意されていることはあまりなく、通常は、文字を強調したい場合にboldやbolderを使用する程度です。

<p style="font-weight: normal;">normal</p>
<p style="font-weight: bold;">bold</p>
<p style="font-weight: lighter;">lighter</p>
<p style="font-weight: bolder;">bolder</p>
<p style="font-weight: 100;">100</p>
<p style="font-weight: 300;">300</p>
<p style="font-weight: 500;">500</p>
<p style="font-weight: 700;">700</p>
<p style="font-weight: 900;">900</p>

３．よく使うプロパティへ

font-family

font-familyプロパティは、フォントの種類を指定する際に使用します。

フォントの種類はカンマ（,）で区切って複数の候補を並べることができます。
複数の候補を指定すると、指定順にユーザ環境で利用可能なものが選択されるので、より多くのユーザに自分のイメージに近いフォントの表示で見てもらうことができます。

指定したフォントがユーザの環境で使用できない場合は、ブラウザで設定されたデフォルトのフォントで表示されます。

<p style="font-family: 'ＭＳ ゴシック',sans-serif;">ＭＳ ゴシック</p>
<p style="font-family: 'ＭＳ 明朝',serif;">ＭＳ 明朝</p>

３．よく使うプロパティへ

text-align

text-alignプロパティは、行揃えの位置や、均等割付を指定する際に使用します。

<p style="text-align: left;">左寄せ</p>
<p style="text-align: right;">右寄せ</p>
<p style="text-align: center;">中央寄せ</p>

３．よく使うプロパティへ

line-height

line-heightプロパティは、行の高さを指定する際に使用します。

値は、数値や％で指定します。

<p style="line-height: normal;">行の高さ：normal</p>
<p style="line-height: 15px;">行の高さ：15px</p>
<p style="line-height: 300%;">行の高さ：300%</p>

３．よく使うプロパティへ

letter-spacing

letter-spacingプロパティは、文字の間隔を指定する際に使用します。

文字の間隔には、マイナスの値を指定することもできます。

３．よく使うプロパティへ

list-style-type

list-style-typeプロパティは、リストの先頭に表示するマーカー文字の種類を指定する際に使用します。

list-style-typeとlist-style-imageの値を同時に指定した場合は、list-style-imageの値が優先されます。

<p style="letter-spacing: 20px;">文字の間隔：20px</p>
<p style="letter-spacing: -2px;">文字の間隔：-2px</p>

３．よく使うプロパティへ

margin、padding

marginプロパティは、上下左右のマージンをまとめて指定する際に使用します。

paddingプロパティは、上下左右のパディングをまとめて指定する際に使用します。

どちらも、上下左右を異なる幅にしたい場合には、スペースで区切って複数の値を指定します。
・値を１つ指定した場合：指定した値が「上下左右」の幅になります。
・値を２つ指定した場合：記述した順に「上下」「左右」の幅になります。
・値を３つ指定した場合：記述した順に「上」「左右」「下」の幅になります。
・値を４つ指定した場合：記述した順に「上」「右」「下」「左」の幅になります。

<p style="background-color: #31A9EE; margin: 10px;">
    マージン10px
</p>
<p style="background-color: #31A9EE; margin: 10px; padding: 10px;">
    マージン10px、パディング10px
</p>
<p style="background-color: #31A9EE; margin: 10px 20px 30px 40px;">
    上10px、右20px、下30px、左40px
</p>

３．よく使うプロパティへ

background-image

background-imageプロパティは、背景画像を指定する際に使用します。

body要素やtable要素だけではなく、p要素やdiv要素などにも背景画像を指定することができます。

背景画像はURLで指定します。

背景に画像を指定する際には、背景色と文字色も同時に指定するようにしすます。
そうすることで、ユーザの環境によって背景画像が表示されない場合に、 背景色と文字色の関係によって文字が読みにくくなることを防ぐことができます。

.img-bk {
    background-image: url('../img/back.jpg');
    background-color: #AAAAAA;
    color: #B20000;
}

３．よく使うプロパティへ

▲目次へ戻る