はじめに
この記事は、HTMLの基礎を学び終えて「次はCSSでスタイリングをしてみたい」と考えている方を対象としています。
この記事では、CSSの基本的な書き方から、現代のWeb開発で必須となっているFlexboxやレスポンシブデザインまで、体系的に学べる内容になっています。各セクションには実践的なコード例を用意しているので、実際に手を動かしながら学習を進めることができます。
この記事で学べること
- CSSの基本的な書き方とセレクタの使い方
- ボックスモデルとレイアウトの基礎
- Flexboxを使った柔軟なレイアウト構築
- レスポンシブデザインの実装方法
- 実践的なアニメーションやスタイリングのテクニック
CSSは膨大な機能がありますが、基礎をしっかり押さえれば、必要に応じて調べながら実装できるようになります。それでは、さっそく始めていきましょう。
CSSとは
CSSは文書のスタイルを定義するための言語です。HTMLが文書の構造を定義するのに対し、CSSは見た目を整える役割を担います。
CSSのプロパティは数百種類以上存在しますが、全てを覚える必要はありません。よく使うものから順に覚え、HTMLに対してデザインを想像しながらスタイルを適用していく考え方が重要です。
CSSの適用方法
CSSをHTMLに適用する方法は主に2つあります。
インラインスタイル
HTML要素のstyle属性を使用して、直接スタイルを適用する方法です。
<p style="color: blue; font-size: 16px;">これは青いテキストです。</p>
スタイルを共有できないため、規模が大きい開発では非推奨です。
外部スタイルシート（推奨）
スタイルを外部のCSSファイルにまとめて、HTMLファイルからリンクする方法です。rel属性でstylesheetを指定し、href属性でCSSファイルのパスを指定します。
<head>
<link rel="stylesheet" href="styles.css" />
</head>
/* styles.css */
p {
color: blue;
font-size: 16px;
}
複数のHTMLファイルで同じスタイルを共有でき、保守性が高まるため、この方法が推奨されます。
基本的なプロパティ
色の指定
テキストの色はcolor、背景色はbackground-colorで指定します。
/* テキストの色 */
color: red; /* 色名 */
color: #00ff00; /* 16進数 */
color: rgb(0, 0, 255); /* RGB */
/* 背景色 */
background-color: yellow;
background-color: #ff00ff;
background-color: rgb(255, 165, 0);
テキスト関連のプロパティ
/* テキストの装飾 */
text-decoration: none; /* 装飾なし */
text-decoration: underline; /* 下線 */
text-decoration: line-through; /* 打ち消し線 */
/* テキストの配置 */
text-align: left; /* 左揃え */
text-align: center; /* 中央揃え */
text-align: right; /* 右揃え */
text-align: justify; /* 両端揃え */
フォント関連のプロパティ
font-size
テキストのサイズを指定します。
font-size: 16px; /* ピクセル単位 */
font-size: 1.5em; /* 親要素のフォントサイズの1.5倍 */
font-size: 120%; /* 親要素のフォントサイズの120% */
単位の使い分けは以下の通りです。
-
px: ピクセル単位で固定サイズを指定。デバイスによって見え方が異なる場合がある -
em: 親要素のフォントサイズに対する相対サイズ -
%: 親要素のフォントサイズに対する割合 -
rem: ルート要素のフォントサイズに対する相対サイズ
レスポンシブデザインを考慮する場合は、相対単位の使用が推奨されます。
font-family
フォントの種類を指定します。
font-family: Arial, sans-serif;
font-family: "Times New Roman", serif;
font-family: "Courier New", monospace;
カスタムフォントはユーザーの環境にインストールされていない場合、表示されないことがあります。ブラウザ標準のフォントを指定するか、WebフォントサービスであるGoogle Fontsなどの利用を推奨します。
CSSセレクタ
セレクタはスタイルを適用する対象を指定するための記法です。
基本的なセレクタ
/* ユニバーサルセレクタ: すべての要素 */
* {
margin: 0;
padding: 0;
}
/* 要素セレクタ: 特定のHTML要素 */
p {
color: blue;
}
/* IDセレクタ: 特定のIDを持つ要素 */
#header {
background-color: gray;
}
/* クラスセレクタ: 特定のクラスを持つ要素 */
.button {
background-color: green;
color: white;
}
/* 属性セレクタ: 特定の属性を持つ要素 */
input[type="text"] {
border: 1px solid black;
}
クラスセレクタはIDと異なり、複数の要素に同じクラスを適用できます。属性セレクタは基本的にはIDセレクタの使用を推奨しますが、動的な要素の選択に便利です。
組み合わせセレクタ
/* 子孫セレクタ: 特定の要素内にある要素 */
header .button {
background: red;
}
/* 直下セレクタ: 親要素の直下にある子要素 */
header > h1 {
color: blue;
}
/* 隣接セレクタ: 特定の要素の直後にある要素 */
h1 + p {
font-size: 18px;
}
擬似クラス
特定の状態にある要素を選択できます。マウスの状態やフォーカスの状態などに応じてスタイルを変更する際に使用します。
/* マウスカーソルが乗った状態 */
a:hover {
color: red;
}
/* クリックされている状態 */
button:active {
background-color: darkblue;
}
カスケードと詳細度
カスケード
CSSを定義する順番によってスタイルの優先順位が変わります。後に定義されたスタイルが優先されます。
詳細度
スタイルの優先順位を決定するためのルールです。競合があるときに、より具体的なセレクタが優先されます。
インラインスタイルは最も詳細度が高いですが、非推奨の書き方なので使用は避けましょう。
詳細な計算方法についてはMDNのドキュメントを参照してください。
開発者ツールでの確認
ブラウザの開発者ツールを使うと、どのCSSが適用されているか確認できます。打ち消し線が引かれているスタイルは、より詳細度の高いスタイルによって上書きされています。
CSSの継承
一部のプロパティは親要素から子要素に自動的に継承されます。colorやfont-familyなどのテキスト関連のプロパティは継承されますが、marginやpaddingなどのボックスモデル関連のプロパティは継承されません。
ボックスモデル
CSSでは、すべての要素が矩形のボックスとして扱われます。ボックスは以下の4つの領域で構成されています。
ボーダー
要素の境界線を作成します。
/* 一括指定: 太さ スタイル 色 */
border: 1px solid black;
border: 2px dashed red;
/* 個別指定 */
border-width: 2px;
border-style: dotted; /* solid(実線)、dashed(破線)、dotted(点線) */
border-color: blue;
/* 特定の辺のみ */
border-top: 1px solid black;
パディング
要素の内側の余白を指定します。
/* 一括指定 */
padding: 10px; /* 全ての辺に10px */
padding: 10px 20px; /* 上下10px、左右20px */
padding: 10px 20px 30px 40px; /* 上、右、下、左の順 */
/* 個別指定 */
padding-top: 10px;
padding-right: 20px;
マージン
要素の外側の余白を指定します。記法はパディングと同様です。
/* 一括指定 */
margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px 40px;
/* 個別指定 */
margin-top: 10px;
margin-right: 20px;
displayプロパティ
要素の表示方法を制御します。
display: block; /* ブロック要素: 縦に並び、幅と高さを指定可能 */
display: inline; /* インライン要素: 横に並び、幅と高さは指定不可 */
display: inline-block; /* インラインブロック: 横に並び、幅と高さも指定可能 */
実践的なCSS
positionプロパティ
文書内で要素の配置位置を制御します。
/* デフォルトの位置 */
position: static;
/* 相対位置: 元の位置を基準に移動 */
position: relative;
top: 10px;
left: 20px;
/* 絶対位置: 親要素を基準に配置 */
position: absolute;
top: 50px;
left: 100px;
/* 固定位置: ビューポートを基準に固定 */
position: fixed;
top: 0;
left: 0;
詳細はMDNのドキュメントを参照してください。
transitionプロパティ
要素の状態変化にアニメーション効果を追加できます。
.button {
background-color: blue;
color: white;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: darkblue;
}
この例では、ホバー時に背景色が0.3秒かけて徐々に変化します。
transformプロパティ
要素の位置、サイズ、形状を変形できます。
transform: rotate(45deg); /* 回転 */
transform: scale(1.5); /* 拡大縮小 */
transform: translate(50px, 100px); /* 移動 */
backgroundプロパティ
背景画像やグラデーションを設定できます。
/* 背景画像 */
background-image: url("image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/* グラデーション */
background: linear-gradient(to right, red, blue);
background: radial-gradient(circle, yellow, green);
Googleフォントの使い方
Googleフォントを使うと、様々なフォントを簡単に利用できます。
手順
- Google Fontsで使用したいフォントを選ぶ
- 「Select this style」をクリックし、表示される
<link>タグをHTMLの<head>に貼り付ける
<head>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>
- CSSで
font-familyプロパティを使用して適用する
body {
font-family: "Roboto", sans-serif;
}
フォント名の後にフォールバックフォントを指定しておくと、フォントが読み込めなかった場合でも適切に表示されます。
Flexbox
Flexboxはレスポンシブデザインやモダンなレイアウトを実現するための強力なCSS機能です。要素を柔軟に配置し、画面サイズに応じて自動調整できます。
基本概念
Flexboxは親要素と子要素の関係で成り立っています。親要素にdisplay: flex;を指定すると、子要素の並び方を柔軟に制御できるようになります。
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
主軸と交差軸の関係
Flexboxでは、主軸と交差軸という2つの軸を理解することが重要です。
flex-direction
要素の配置方向を指定します。
flex-direction: row; /* 横方向、左から右（デフォルト） */
flex-direction: row-reverse; /* 横方向、右から左 */
flex-direction: column; /* 縦方向、上から下 */
flex-direction: column-reverse; /* 縦方向、下から上 */
justify-content
主軸方向の配置を制御します。flex-direction: row;の場合は水平方向の配置になります。
justify-content: flex-start; /* 左寄せ */
justify-content: center; /* 中央寄せ */
justify-content: flex-end; /* 右寄せ */
justify-content: space-between; /* 両端揃え、間は均等 */
justify-content: space-around; /* 周囲に均等な余白 */
flex-wrap
アイテムが多いときの折り返しを制御します。
flex-wrap: nowrap; /* 1行に詰め込む（デフォルト） */
flex-wrap: wrap; /* はみ出したら次の行へ */
flex-wrap: wrap-reverse; /* 折り返し方向を逆に */
カードレイアウトやレスポンシブ配置に便利なプロパティです。
align-items
交差軸方向の配置を制御します。flex-direction: row;の場合は垂直方向の配置になります。
align-items: flex-start; /* 上寄せ */
align-items: center; /* 中央 */
align-items: flex-end; /* 下寄せ */
align-items: stretch; /* 高さを揃える */
align-items: baseline; /* テキストの基準線で揃える */
align-contentとalign-self
-
align-content: 複数行のとき、行全体の位置を調整 -
align-self: 個別の子要素ごとに縦位置を変更
align-itemsは全体の設定、align-selfは個別の調整に使用します。
flex-basis、flex-grow、flex-shrink
要素のサイズ調整を制御する3つのプロパティです。
-
flex-basis: 基本サイズ -
flex-grow: 余白があるときの伸び率 -
flex-shrink: スペースが足りないときの縮み率
.item {
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 1;
}
flexの省略記法
上記3つをまとめて指定できる便利な書き方です。
/* flex: grow shrink basis */
flex: 1 1 200px;
/* よく使われる簡略版 */
flex: 1; /* 均等に伸びる */
flex: 0 0 100px; /* 固定幅100px */
レスポンシブデザインとメディアクエリ
画面サイズに応じてデザインを変える方法です。メディアクエリを使い、幅ごとにCSSを切り替えることができます。
/* デフォルト（PC用） */
.container {
display: flex;
flex-direction: row;
}
/* タブレット以下 */
@media (max-width: 1024px) {
.container {
padding: 20px;
}
}
/* スマートフォン */
@media (max-width: 768px) {
.container {
flex-direction: column;
padding: 10px;
}
}
ブレークポイントの設定
一般的なブレークポイントは以下の通りです。
- スマートフォン: 〜768px
- タブレット: 769px〜1024px
- デスクトップ: 1025px〜
Flexboxとメディアクエリを組み合わせることで、どのデバイスでも最適なレイアウトを実現できます。
レスポンシブナビゲーションバー
実践例として、画面サイズに応じて変形するナビゲーションバーを実装してみましょう。
/* PC用: 横並び */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* スマートフォン用: 縦並び */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
}
.nav-menu {
width: 100%;
}
}
まとめ
CSSは膨大なプロパティがありますが、基本的な概念を理解すれば、必要に応じて調べながら実装できるようになります。特にFlexboxとレスポンシブデザインは現代のWeb開発で必須のスキルです。
この記事を辞書として使いながら手を動かして覚えていきましょう！