今回からCSSの書き方の基本やプロパティの解説をしたいと思います。プロパティは種類が膨大で、すべて覚えるのは不可能に近いです。無理に覚えようとせずに、実際に調べながらコーディングし少しずつ覚えていきましょう。
CSSの基本文法
CSSはセレクター、プロパティ、値と呼ばれる３つの部分を組み合わせて、「どの部分の、何を、どう変えるか」を指定します。どのような役割があるのか見ていきましょう。
h1{
color: red;
}
セレクター
h1の部分はセレクターと言います。セレクターではどの部分を装飾するかの指定をします。HTMLのタグの名前や、クラス、IDと呼ばれる特定の変更箇所を書きます。例えばこの部分にh1と書けばWebページ内のh1タグに装飾が適用されます。
セレクターに続けて、プロパティと値を波括弧「{」と「}」で囲んで記述します。
プロパティ
color;の部分はプロパティと言います。セレクターで指定された部分の何を変えるかを書きます。例えば文字色を変える。文字サイズを変える、背景画像を加えるなどです。プロパティには多くの種類があり、一度にすべてを覚えるのは困難です。よく使うものから、少しづつ覚えていくと良いでしょう。
プロパティに続けて、値との間にはコロン「：」を書いて区切ります。
値
red;の部分は値と言います。値では見た目をどのように変えるのかを書きます。例えば文字色を変えるなら「何色に変えるか」、背景に画像を設置するなら「どの画像を設置するのか」など、具体的に指定します。
複数のプロパティと値を指定するときは、値の最後にセミコロン「；」を加えます。
CSSを書く時のルール
半角英数字で書く
HTMLと同じく、全角文字や日本語を使うことはできません。
| 良い例 | 悪い例 |
|---|---|
| h1 {color: red;} | ｈ１ （ＣＯＬＯＲ： ＲＥＤ；） |
大文字と小文字
CSS自体は基本的に大文字と小文字の区別はありませんが、HTMLのバージョンによって小文字で記述する必要がある場合もあるので、小文字で統一すると良いでしょう。
| 良い例 | 悪い例 |
|---|---|
| h1 {color: red;} | h1 {COLOR: RED;} |
複数のセレクターを指定する
複数のセレクターに同じ装飾を指定できます。指定するときはカンマ「.」でセレクターを区切ります。指定するセレクターの数や順番は関係ありません。
| 良い例 | 悪い例 |
|---|---|
| h1.p {color: red;} | h1 p {color: red;} |
複数の装飾を指定する
1つのセレクターに複数の装飾を指定したい場合は、値の最後にセミコロン「；」を加えてプロパティーを区切ります。
| 良い例 | 悪い例 |
|---|---|
| h1 {color; red; font-size: 20px;} | h1 {color: red font-size: 20px;} |
プロパティが1つしかない場合や、一番最後のプロパティには「；」は不要です。しかし、後からCSSの編集をし、別のプロパティを追加する場合も多々あります。そんな時に最後の行にセミコロンがついていなかった場合
、記述エラーになりやすいため、どの行でも「；」は必ずつける癖をつけておくと良いでしょう。
単位を指定する
文字サイズや幅、高さなどの数値を指定するときは、値が「0」の場合を除き、単位も一緒に書きます。次のような単位が良く使われます。
| 単位 | 読み方 | 説明 |
|---|---|---|
| px | ピクセル | 画面上の最小単位（１ピクセル）を基準とした単位 |
| % | パーセント | 親要素のサイズを基準に割合で指定する単位 |
| rem | レム | ルート要素（html要素）に指定されたサイズを基準とした単位 |
この中で「px」は絶対値と呼ばれ、指定したサイズから変動することはありません。対して「%」や「rem」は相対値と呼ばれ、基準となる要素のサイズによって変動します。
| 良い例 | 悪い例 |
|---|---|
| h1 {font-size: 20px;} | h1 {font-size: 20;} |
要素の中に指定する
複数のセレクターを半角スペースで区切ると、指定した要素の中にある要素に装飾を指定できます。例えば<div>タグの中に<p>タグがあるとき、セレクターをdiv pというように半角スペースで区切って「<div>タグの中の<p>タグ」と指定することができます。
例えば下の様にHTMLに<div>タグで囲まれた<p>タグと、囲まれていない<p>タグがあった場合、CSSでdiv pに対しての装飾が書かれると、<div>タグで囲まれていない方の<p>タグは文字色が変わりません。
<div>
<p>テキスト</p>
</div>
<p>テキスト</p>
div p {
color: red;
}
文字や文章を装飾する
文字の大きさを変えるfont-sizeプロパティ
font-sizeプロパティは文字のサイズを指定します。大きさは主に「px」や「rem」,「％」を使います。
主な値
| 指定方法 | 説明 |
|---|---|
| 数値 | 数値に「px」や「rem」,「％」などの単位をつける |
| キーワード | xx-small,x-small,small,medium,large,x-large,xx-largeの７段階で指定できる |
ページの基準となる<html>タグにfont-size: 100%を指定すると、ブラウザーのデフォルトの文字サイズ、またはユーザーがブラウザーの環境設定により調整したサイズを基準に相対値を設定できます。それに対し、「px」で指定したサイズは、基準のサイズと関係なく絶対値として設定されます。
<h1>タイトル</h1>
<h2>サブタイトル</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキス<br>
トテキストテキストテキストテキストテキストテキストテキストテキスト</p>
html {
font-size: 100%;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 20px;
}
フォントのサイズを変えるfont-familyプロパティ
font-familyプロパティを使ってフォントの種類を指定します。指定したフォントをユーザーがインストールしてない場合は、ブラウザーで設定しているデフォルトのフォントで表示されます。CSSの設定では複数のフォントを指定でき」、フォントの種類をカンマ「.」で区切って、先に指定したものから順に適用されます。ブラウザーによっては日本語のフォント名を識別できないため、英語表記のフォント名も同時に指定しましょう。
主な値
| 指定方法 | 説明 |
|---|---|
| フォント名 | フォント名を記述する。日本語名が記述されている場合は、フォント名を「’」または「”」で囲って指定する。 |
| キーワード | sana-serif、serif、cursive、fantasy、monospaceから指定する。 |
html {
font-size: 100%;
}
h1 {
font-size: 2rem;
font-family: serif;
}
h2 {
font-size: 20px;
font-family: "游ゴシック体","Yu Gothic",YUGothic,sans-sans-serif;
}
p {
font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro",sana-sans-serif;
}
文字の太さを変えるfont-weightプロパティ
font-weightプロパティでフォントの太さを指定します。１～１０００の任意の数値で指定することもできますが、通常は「normal」や「bold」などのキーワードで指定する方が一般的です。また、太字や細字など、太さのバリエーションが用意されていないフォントでは表示されません。
主な値
| 指定方法 | 説明 |
|---|---|
| キーワード | normal,bold,lighter,bolder |
| 数値 | １～１０００の任意の値 |
<p>通常の太さのテキスト</p>
<div >
<p>太字にしたテキスト</p>
</div>
行の高さを変えるline-heightプロパティ
行の高さ（行間）の指定するときはline-heightプロパティを使います。行の高さが文字サイズより小さい場合は行が重なるので注意が必要です。
主な値
| 指定方法 | 説明 |
|---|---|
| normal | ブラウザーが判断した行の高さで表示 |
| 数値（単位なし） | フォントサイズとの比率で指定 |
| 数値（単位あり） | 「px」、「em」、「%」等の単位で指定 |
p {
line-height: 2.5;
}
文章を揃えるtext-alignプロパティ
text-alignプロパティでテキストを揃える位置を指定します。日本語の場合、デフォルトでは左揃えになっています。
主な値
| 指定方法 | 説明 |
|---|---|
| left | 左揃え |
| right | 右揃え |
| center | 中央揃え |
| justify | 両端揃え |
p {
line-height: 2.5;
text-align:
}
少し分かり難ですが、leftだと文章の右端が揃っていませんが、justifyは両端が揃っています。
色の指定方法
カラーコードで指定する
１つ目はカラーコードと呼ばれる６桁の英数字で指定する方法が一般的です。カラーコードはハッシュ「＃」から始まり、０～９の数字とa～fのアルファベットを組み合わせて表現します。英字は大文字、小文字どちらでも使えます。
RGB値で指定する
２つ目はRGBの数値を組み合わせて指定する方法です。RGBとは赤(Red)、緑(Green)、青(Blue)の数値の組み合わせた表現方法です。CSSでの表記方法は「rgb(赤の数値、緑の数値、青の数値)」となります。数値は０～２５５まであり、「０」が一番暗く、数値が上がるほど明るくなります。そのため「rgb(255,255,255)」は白を表し、「rgb(0,0,0)」は黒になります。
色の名前で指定する
３つ目は色の名前で指定す方法です。赤なら「red」、青なら「blue」、といったように、決められた色の名前を使うこともできます。どんな色なのか言葉からすぐに連想できるというメリットがあります。ただし指定できる色の数には限りがあり、細かい色の指定は難しいです。
簡単なスペルの色を覚えて、テストのときにとりあえずで色付けするときに便利です。
文字に色を付けるcolorプロパティ
colorプロパティは文字に色を付けるためのプロパティです。一般的にカラーコードで記述します。
主な値
| 指定方法 | 説明 |
|---|---|
| カラーコード | 「#」で始まる３桁もしくは６桁のカラーコードを指定 |
| 色の名前 | 「red」「blue」など決められた色の名前を指定 |
| RGB値 | 「rgb」から書き始め、赤、緑、青の値を「,」で区切って指定。 |
h1 {
color: #0bd;
}
h2 {
color:navy;
}
p {
color: rgb(10,130,165);
}
カラーコードを記述するときは「#」を忘れないように注意しましょう。
背景に色を付けるbackground-colorプロパティ
背景に色を指定するにはbackground-colorプロパティを使います。色の指定方法は文字色を付けるときと同じく、カラーコードや色の名前を書きます。
主な値
| 指定方法 | 説明 |
|---|---|
| カラーコード | 「#」で始まる３桁もしくは６桁のカラーコードを指定 |
| 色の名前 | 「red」「blue」など決められた色の名前を指定 |
| RGB値 | 「rgb」から書き始め、赤、緑、青の値を「,」で区切って指定。 |
ページ全体の背景に色を付けるなら<body>タグに対して指定します。
body {
background-color: #fee;
}
h1 {
background-color: #faa;
}
背景に画像を設置する
background-imageプロパティで要素の背景に画像を設置します。
主な値
| 指定方法 | 説明 |
|---|---|
| url | 画像ファイルの指定 |
| none | 背景画像を使用しない |
「url」に続いて丸括弧（）内に画像のパスを記述します。CSSファイルから見た画像ファイルの位置を書きましょう。
body {
background-image: url(../images/main-img3.jpg);
}
ページ全体に画像が表示されました。
終わりに
今回はCSSの基本を解説しました。ここで紹介したプロパティはまだまだ、ほんの一部に過ぎません。無理に覚えようとせずに、実際にコーディングして少しずつ覚えていくといいでしょう。
エンジニアファーストの会社 株式会社CRE-CO 吉川 真史