最低限のCSSの機能

html プログラミング

前章でHTMLについて学び、ウェブサイト上に文字を表示できるようになりました。しかし、このままではリンク以外は黒色の文字が並んでいるだけです。これを装飾する役目を持っているのがCSSです。 本章では、CSSに必要なファイルを作成し、コードを書きながら学びます。

 

3-3フォルダのなかにindex3-3.htmlというファイルを作成しましょう。

 

作成したファイルに前章と同じ以下のコードを記述しましょう。前章のコードをそのまま本章でも使用します。

 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
１つ目の段落です
</p>
<p>
2つ目の段落です
</p>
<p>
3つ目の段落です。

<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">

クリックすると、Googleへ移動します。</a>
</body>
</html>

CSSファイルを用意しましょう
3-3フォルダのなかにstyle3-3.cssというファイルを作成しましょう。

 

以下のようなフォルダの構成になっていれば成功です。

HTML_CSS3-2index3-2.html
　　
3-3index3-3.html
style3-3.css
　　
今回作成したstyle3-3.cssファイルにこれからCSSの記述をします。

CSSの文法
HTMLの時と同様に、コードを書きながらCSSの文法を学びます。

HTMLとCSSの関係性についておさらいしよう
CSSの文法に入る前に、HTMLとCSSの関係性について振り返りましょう。

 

CSSファイルをHTMLファイルで読み込むためには、CSSファイルの情報をHTMLのhead要素に記述する必要があります。

head要素からCSSを呼び出せるようにしよう
本章で新しく作成したstyle3-3.cssを、index3-3.htmlから読み込む設定をします。
CSSファイルを呼び出すためには、head要素内に以下のような記述をします。

 

新しくでてきたキーワードを一つずつ確認しましょう。

link要素
link要素は現在のファイル（HTML）から外部情報（今回であればCSSファイル）を関連付けする際に記載します。
rel属性、href属性と一緒に使用するのが一般的です。

rel属性
rel属性はRelation（関係）の略で、参照先のファイルが現在のファイルとどのような関係であるのかを明らかにします。
属性値には決められたキーワードを記載します。
今回は”stylesheet”というキーワードを指定することでCSS（Cascading Style Sheets）を参照することを表している。

href属性
href属性はHyper Referenceの略で、参照先の外部ファイルの場所を明らかにします。
属性値にはファイルの場所、ファイル名を記載します。

 

head要素からCSSファイルを呼び出せるようにしましょう
index3-3.htmlに以下のようにCSSファイルの情報を記述しましょう。

HTML_CSS/3-3/index3-3.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
<link rel="stylesheet" href="style3-3.css">
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
１つ目の段落です
</p>
<p>
2つ目の段落です
</p>
<p>
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

これで、同じフォルダにあるCSSファイルを指定することができました。

CSSの記述に必要な知識を学ぼう
CSSの基本的な記述は、下図のようになります。

 

それぞれのキーワードを解説します。

セレクタ
セレクタとは、CSSによる装飾を、どの部分のHTMLに適用するかを選択するための記述です。

プロパティ
プロパティとはセレクタで指定したHTMLの「何を変えるのか」を選択するための記述です。背景の色や文字の大きさ、要素同士の余白など様々なプロパティが用意されています。

また、複数プロパティがある場合は順序は問いません。
下の例①と例②は同じコードを意味します。

【例①】
.body {
color: white;
height: 100px;
}

【例②】
.body {
height: 100px;
color: white;
}

値
プロパティで設定する内容を決めるための記述です。背景の色を指定するプロパティであれば、値でどのような色にするのかを決めることができます。プロパティと値の間はコロン（ : ）で区切り、値の後にはセミコロン（ ; ）を入力します。

文字の色を指定しよう
<p>...</p>の文字に色を付けて、CSSの使い方を学びましょう。

文字に色を付けるためには、colorプロパティを使います。

colorカラープロパティ
colorプロパティは、値によって自由に文字の色を指定することができます。今回はp要素全てを赤色にするので、以下のような記述をします。

 

CSSファイルを編集して、文字の色を指定しましょう
style3-3.cssに以下のように追記しましょう。

HTML_CSS/3-3/style3-3.css
p {
color: red;
}

見本通りに表示されない場合は、以下の可能性があります。確認してみましょう。

値の最後のセミコロン（ ; ）を忘れている
値の最後がセミコロン（ ; ）ではなく、コロン（ : ）になっている
スペルミスや打ち間違いがある
style3-3.cssファイルで、閉じ括弧（ } ）が無い
ブラウザで確認しましょう
画面をリロードしてCSSが正しく適用されているか、確認しましょう。以下のように表示されていれば成功です。

 

文字の大きさを指定しよう
同様に<p>...</p>の文字の大きさを編集して、CSSの使い方を学びましょう。

font-sizeフォント サイズプロパティ
font-sizeプロパティとは文字の大きさを指定するプロパティです。
文字の大きさを調整するときに、単位としてpxが頻繁に使用されます。

pxピクセル
px(ピクセル)とはpixelの略で、簡単にいうとデジタル画面の最小の単位のことです。
pxの概念は少し複雑なのでここでは省略しますが、気になる人はこちらの記事を参考にしてください。

本章では、よく使用する単位であることを覚えておきましょう。

先ほど記述したコードは以下のように読み解くことができます。

 

CSSファイルを編集して、文字の大きさを指定しましょう
style3-3.cssに以下のように追記しましょう。

HTML_CSS/3-3/style3-3.css
p {
color: red;
font-size: 24px;
}

ブラウザで確認しましょう
画面をリロードしてCSSが正しく適用されているか、確認しましょう。以下のように表示されていれば成功です。

 

見本通りに表示されない場合は、以下の可能性があります。確認してみましょう。

値の最後のセミコロン（ ; ）を忘れている
値の最後がセミコロン（ ; ）ではなく、コロン（ : ）になっている
font-sizeのfontとsizeの間がハイフン（ - ）になっていない
スペルミスや打ち間違いがある
style3-3.cssファイルで、閉じ括弧（ } ）が無い
class属性とclassセレクタについて理解しよう
上記までのステップでは、CSSを修正することによって、<p>...</p>の全ての色と大きさを編集することができました。

しかしながら、下図のように、一部の<p>...</p>のみを装飾したい場合は、どのようにすれば良いでしょうか。

 

そこでclass属性とclassセレクタが登場します。

classクラス属性
class属性とはHTML要素に対して個別に名前を指定することができる属性です。
class属性の属性値をclass名といいます。

 

例えば、<p>...</p>に対して"first-message"というclass名を付与する場合は、以下のように記載します。

【例】sample.html
<p class="first-message">
テキストテキストテキスト
</p>

CSSではclass名をセレクタと指定して、装飾することができます。

classクラスセレクタ
HTMLで指定したclass名をCSSのセレクタとして使用することができます。classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述します。

【例】sample.css
.first-message {
color: red;
}

classセレクタを使うことによって、特定のHTMLだけに装飾をすることができます。

要素を指定して文字の大きさと色を指定しましょう
先ほどまではp要素すべてが装飾されていました。今回は2つ目の段落だけが装飾されるように、以下の手順でコードを編集していきましょう。

HTMLファイルで、2つ目の段落のp要素にclass名をつける
CSSファイルで、p要素につけたclass名に対して装飾する
HTML_CSS/3-3/index3-3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
<link rel="stylesheet" href="style3-3.css">
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
１つ目の段落です
</p>
<p class="second-message">
2つ目の段落です
</p>
<p>
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

style3-3.cssに以下のように追記しましょう。

style3-3.css

p {
font-size: 24px;
color: red;
}
.second-message {
color: orange;
font-size: 12px;
}

ブラウザで確認しましょう
画面をリロードして、CSSが正しく適用されているか確認しましょう。以下のように表示されていれば成功です。

 

見本通りに表示されない場合は、以下の可能性があります。確認してみましょう。

style3-3.cssファイルのクラス名指定で、.second-messageに打ち間違いやスペルミスがある
style3-3.cssファイルのクラス名指定で、.second-messageの先頭のドット（ . ）が抜けている
colorやorangeなどにスペルミスがある
style3-3.cssファイルで、閉じ括弧（ } ）が無い
id属性とidセレクタについて理解しよう
class属性とclassセレクタの他にも、特定の要素を装飾する方法があります。
それは、id属性とidセレクタです。

idアイディー属性
id属性とは特定のHTML要素のみに対して、名前を指定することができる属性です。
id属性の属性値をid名といいます。

id属性には「1つのページ内で、同じid名を複数のHTML要素に付与しない」という慣例が存在します。ブラウザに関連する他の言語が、想定した挙動にならない場合があるためです。
したがって、「1つのページ内には、同じid名を持つHTML要素が存在しない」ように命名しましょう。

 

例えば、<p>...</p>に対して"third-message"というid名を付与する場合は、以下のように記載します。

【例】sample.html
<p id="third-message">
テキストテキストテキスト
</p>

CSSではid名をセレクタと指定して、装飾することができます。

idアイディーセレクタ
HTMLで指定したid名をCSSのセレクタとして使用することができます。idセレクタを指定する場合は、「#id名」の形でCSSファイルに記述します。

【例】sample.css
#third-message {
color: blue;
}

idセレクタを使うことによって、特定のHTMLだけに装飾をすることができます。

要素を指定して文字の大きさと色を指定しましょう
class属性と同様にして、以下の手順でコードを編集しましょう。

HTMLファイルで、3つ目の段落のp要素にid名をつける
CSSファイルで、p要素につけたid名に対して装飾する
HTML_CSS/3-3/index3-3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
<link rel="stylesheet" href="style3-3.css">
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
１つ目の段落です
</p>
<p class="second-message">
2つ目の段落です
</p>
<p id="third-message">
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

style3-3.cssに以下のように追記しましょう。

style3-3.css
p {
font-size: 24px;
color: red;
}
.second-message {
color: orange;
font-size: 12px;
}
#third-message {
color: blue;
}

ブラウザで確認しましょう
画面をリロードして、CSSが正しく適用されているか確認しましょう。
以下のように表示されていれば成功です。

 

見本通りに表示されない場合は、以下の可能性があります。確認してみましょう。

style3-3.cssファイルのid名指定で、#third-messageに打ち間違いやスペルミスがある
style3-3.cssファイルのid名指定で、#third-messageの先頭のシャープ（ # ）が抜けている
colorやblueなどにスペルミスがある
style3-3.cssファイルで、閉じ括弧（ } ）が無い
テキストの一部にCSSを指定する方法を学ぼう
テキストの一部だけに、CSSを指定することもできます。そのためによく使用する要素が、span要素です。

spanスパン要素
span要素は、テキストの一部だけを装飾するために使用される要素です。部分的にテキストのフォント調整、文字色・背景色を変更するのに頻繁に使用されます。

ここでは、見出しのテキストの一部分を、青色に変えます。以下のようにindex3-3.htmlに追記しましょう。行うことは、

「見出し」の前後を<span>...</span>で囲む
span要素にblueクラスを設定する
CSSファイルで、blueクラスにプロパティを設定する
です。

部分的にCSSを指定したい箇所にspan要素を記述しましょう
まずは、以下のようにindex3-3.htmlに追記しましょう。

HTML_CSS/3-3/index3-3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
<link rel="stylesheet" href="style3-3.css">
</head>
<body>
<h1>
これは<span class="blue">見出し</span>です
</h1>
<p>
１つ目の段落です
</p>
<p class="second-message">
2つ目の段落です
</p>
<p id="third-message">
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

部分的にCSSを指定しましょう
続いて、style3-3.cssに以下のように追記しましょう

style3-3.css
p {
font-size: 24px;
color: red;
}
.second-message {
color: orange;
font-size: 12px;
}
#third-message {
color: blue;
}
.blue {
color: blue;
}

ブラウザで確認しましょう
画面をリロードしてCSSが正しく適用されているか、確認しましょう。以下のように表示されていれば成功です。

 

要点

CSSファイルの読み込みはHTMLのhead要素の中で行う。

link要素を用いてHTMLファイルからCSSファイルを読み込むことができる。

CSSの記述は、セレクタ・プロパティ・値から成り立っている。

セレクタを用いて、CSSを適用する箇所を決める。 プロパティはCSSで何を装飾するのかを決める（文字の色や大きさ、余白など）。

colorプロパティで文字の色を変えることができる。 font-sizeプロパティで文字の大きさを変えることができる。

classセレクタを用いることで、特定の箇所だけにCSSを適用することができる。

idセレクタを用いることで、特定の箇所だけにCSSを適用することができる。

1つのページ内に、同じid名を持つHTML要素を配置しない。

span要素を使うことでテキストの一部分にCSSの装飾を加えられる。