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

White isometric font alphabet with drop shadow on blue background. Vector illustration

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

目次

1.プロパティとは
2.プロパティの種類
3.よく使うプロパティ

1.プロパティとは

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

セレクタ { プロパティ : 値 }

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

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

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

▲目次へ戻る

2.プロパティの種類

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

●ディスプレイ用のプロパティ
●音声用のプロパティ
●印刷用のプロパティ

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

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

●ほとんどの要素に使えるプロパティ
●特定の要素専用のプロパティ

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

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

ディスプレイ用のプロパティ
ほとんどの要素で使用可能 文字 color font text-align など
ボックス width height border など
一般 position cursor outline など
特定の要素専用 テーブル table-layout border-collapse border-spacing など
リスト list-style list-style-image list-style-type など
ルビ ruby-align ruby-overhang ruby-position など
音声用のプロパティ
volume speak pause cue pitch stress など
印刷用のプロパティ
page size marks  orphans widows page-break-inside など

▲目次へ戻る

3.よく使うプロパティ

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

文字に関するプロパティ color
font-size
font-weight
font-family
テキストに関するプロパティ text-align
line-height
letter-spacing
text-indent
リストに関するプロパティ list-style-type
list-style-position
list-style-image
ボックスに関するプロパティ margin
padding
border
画像に関するプロパティ background-image
background-position
background-repeat
background-attachment
vertical-align

color

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

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

●書き方
<p style=”color: #AAAAAA; background-color: #B20000;”>
カラコード#AAAAAAの文字色 + カラーコード#B20000の背景色
</p>

●表示

カラコード#AAAAAAの文字色 + カラーコード#B20000の背景色

3.よく使うプロパティ

font-size

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

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

数値で指定
数値にpxやemやexなどの単位を付けて指定します。
pxとは、1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。
emとは、フォントの高さを1とする単位です。
exとは、小文字の「x」の高さを1とする単位です。

%で指定
標準の文字サイズに対する%値で指定します。

キーワードで指定
xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準の文字サイズです。
1段階上がると1.2倍のサイズになります。
また、smaller、largerを指定すると、大きさが1段階上下します。

●書き方
<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>

●表示

10px

5em

10ex

100%

50%

xx-small

small

large

xx-large

3.よく使うプロパティ

font-weight

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

font-weightは、太さを9段階(100~900)で指定することができますが、一般的なフォントは太さが9種類も用意されていることはあまりなく、通常は、文字を強調したい場合に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>

●表示

normal

bold

lighter

bolder

100

300

500

700

900

3.よく使うプロパティ

font-family

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

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

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

●書き方
<p style=”font-family: ‘MS ゴシック’,sans-serif;”>MS ゴシック</p>
<p style=”font-family: ‘MS 明朝’,serif;”>MS 明朝</p>

●表示

MS ゴシック

MS 明朝

3.よく使うプロパティ

text-align

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

●書き方
<p style=”text-align: left;”>左寄せ</p>
<p style=”text-align: right;”>右寄せ</p>
<p style=”text-align: center;”>中央寄せ</p>

●表示

左寄せ

右寄せ

中央寄せ

3.よく使うプロパティ

line-height

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

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

normal
ブラウザが判断して行の高さを決定します。
これが初期値です。

数値に単位をつけて指定
数値にpxやemやexなどの単位をつけて指定します。
pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。
emとはフォントの高さを1とする単位で、exとは小文字の「x」の高さを1とする単位です。

数値のみで指定
単位を付けずに数値のみで指定します。
この方法で指定すると、その数値にフォントのサイズを掛けた値が行の高さとなります。
例えば1.5と指定すると、150%や1.5emと指定した場合と同じ結果となります。

%で指定
%値で指定します。

●書き方
<p style=”line-height: normal;”>行の高さ:normal</p>
<p style=”line-height: 15px;”>行の高さ:15px</p>
<p style=”line-height: 300%;”>行の高さ:300%</p>

●表示

行の高さ:normal

行の高さ:15px

行の高さ:300%

3.よく使うプロパティ

letter-spacing

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

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

●書き方
<p style=”letter-spacing: 20px;”>文字の間隔:20px</p>
<p style=”letter-spacing: -2px;”>文字の間隔:-2px</p>

●表示

文字の間隔:20px

文字の間隔:-2px

3.よく使うプロパティ

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>

●表示

  • マーカーなし1
  • マーカーなし2
  • 黒丸1
  • 黒丸2
  • 白丸1
  • 白丸2
  • 黒四角1
  • 黒四角2
  • 算用数字1
  • 算用数字2
  • アルファベット小文字1
  • アルファベット小文字2

3.よく使うプロパティ

margin、padding

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

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

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

●書き方
<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>

●表示

マージン10px

マージン10px、パディング10px

上10px、右20px、下30px、左40px

3.よく使うプロパティ

background-image

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

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

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

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

●書き方
.img-bk {
background-image: url(‘../img/back.jpg’);
background-color: #AAAAAA;
color: #B20000;
}

3.よく使うプロパティ

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です