第3回HTML解説（中級編）
admin第1回と第2回では、HTMLの基本的な構造や要素、そしてフォームやテーブルなどのインタラクティブな要素について学びました。第3回では、**CSS（Cascading Style Sheets）**を使ってWebページのデザインをカスタマイズする方法を学びます。CSSはHTMLと組み合わせて、文字の色やフォント、レイアウトなどを調整し、より見栄えの良いWebページを作成するために使用します。
1. CSSとは？
CSSはWebページの見た目をスタイルするための言語です。HTMLがページの内容や構造を記述するのに対して、CSSはその見た目やレイアウトを制御します。例えば、文字の色やサイズ、背景色、ページ全体の配置などをCSSで指定できます。
CSSをHTMLに適用するには、3つの方法があります。
CSSの適用方法
インラインスタイル
HTMLタグのstyle属性に直接CSSを記述します。
<p style="color: blue;">青い文字の段落です。</p>
内部スタイルシート<style>タグを使って、HTMLファイルの<head>内にCSSを記述します。
<head>
<style>
p {
color: blue;
}
</style>
</head>
外部スタイルシート
外部ファイルとしてCSSを分離し、HTMLファイルでリンクを設定します。最も推奨される方法です。
<link rel="stylesheet" href="styles.css">
外部CSSファイル（styles.css）には以下のように記述します。
p {
color: blue;
}
2. CSSの基本的な構文
CSSは「セレクタ」と「宣言」の組み合わせで構成されています。
セレクタ
セレクタは、どのHTML要素にスタイルを適用するかを指定します。例えば、pというセレクタはすべての<p>要素にスタイルを適用します。
宣言
宣言は、セレクタで指定した要素に対してどのようなスタイルを適用するかを記述します。宣言は「プロパティ」と「値」の組み合わせです。
p {
color: blue;
font-size: 16px;
}
- プロパティ:
colorやfont-sizeなど、変更したいCSSの項目を指定します。 - 値: プロパティに対して設定する値です。たとえば、
colorプロパティにblue（青）を設定したり、font-sizeに16pxを指定します。
3. よく使われるCSSプロパティ
1. テキストに関するプロパティ
color: 文字の色を指定します。
p {
color: red;
}
font-size: フォントサイズを指定します。
h1 {
font-size: 32px;
}
font-family: フォントの種類を指定します。
body {
font-family: Arial, sans-serif;
}
text-align: テキストの配置を指定します（左揃え、中央揃え、右揃えなど）。
body {
font-family: Arial, sans-serif;
}
2. 背景に関するプロパティ
background-color: 背景色を指定します。
body {
background-color: #f0f0f0;
}
background-image: 背景に画像を設定します。
body {
background-image: url('background.jpg');
}
3. ボーダー（枠線）に関するプロパティ
border: ボーダー（枠線）を設定します。
p {
border: 1px solid black;
}
- 上記の例では、1ピクセルの黒い実線ボーダーが適用されます。
4. ボックスモデル関連プロパティ
CSSでは、すべての要素が「ボックスモデル」に基づいて表示されます。ボックスモデルは、コンテンツ、パディング、ボーダー、マージンの4つの部分から成り立ちます。
padding: コンテンツとボーダーの間の余白を設定します。
p {
padding: 10px;
}
margin: ボーダーの外側の余白を設定します。
h1 {
margin: 20px;
}
widthとheight: 要素の幅と高さを指定します。
div {
width: 300px;
height: 200px;
}
4. クラスとIDセレクタ
クラスセレクタ
class属性を使って、複数の要素に共通のスタイルを適用できます。クラスセレクタはピリオド（.）で指定します。
<p class="highlight">これはハイライトされた段落です。</p>
<style>
.highlight {
background-color: yellow;
}
</style>
IDセレクタ
id属性は、特定の要素に一意の識別子を与えるために使用します。IDセレクタはハッシュ記号（#）で指定します。
<p id="important">これは重要な段落です。</p>
<style>
#important {
font-weight: bold;
color: red;
}
</style>
- クラスは複数の要素に適用できますが、IDは1つのページに1つしか使えません。
5. レスポンシブデザインとメディアクエリ
Webページを様々なデバイス（PC、タブレット、スマートフォン）で適切に表示させるために、レスポンシブデザインを用います。CSSのメディアクエリを使うことで、特定の画面サイズに応じたスタイルを適用できます。
メディアクエリの例
以下は、画面の幅が600ピクセル以下の場合にスタイルを変更する例です。
@media (max-width: 600px) {
body {
background-color: lightblue;
}
h1 {
font-size: 20px;
}
}
@media (max-width: 600px)は、画面幅が600px以下の場合に適用されるスタイルを指定します。スマートフォンなどの小さな画面に合わせてデザインを調整するために使います。
6. フレックスボックス（Flexbox）
フレックスボックスは、Webページのレイアウトを簡単に作成するためのCSSレイアウトモジュールです。特に、要素を横並びや縦並びに簡単に整列させるのに便利です。
フレックスボックスの基本的な使い方
<div class="container">
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
<style>
.container {
display: flex;
}
.item {
background-color: lightcoral;
padding: 20px;
margin: 10px;
}
</style>
- **
display: flex;**を指定すると、その要素の子要素が横並びになります。 - フレックスボックスは、要素の整列やスペース調整が簡単にできるため、レスポンシブデザインにも非常に便利です。
まとめ
今回は、CSSを使ってHTMLのデザインをカスタマイズする基本的な方法を学びました。テキストや背景のスタイル、ボーダーやレイアウトの調整、クラスとIDを使ったスタイルの適用、そしてレスポンシブデザインのためのメディアクエリについて理解を深めました。
次回は、より高度なCSSのテクニックや、アニメーション、トランジションなどの動きを加えたデザインについて解説します。CSSを使いこなすことで、ユーザー体験を向上させる美しいWebページを作ることができます。
