CSS: コンテンツのスタイル設定

CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。この記事では、CSS の基礎知識 — その仕組みや、前回の記事で作成したコンテンツ構造の外観や使い心地を改善する方法 — について追ってみましょう。

前提条件:	コンピューターのオペレーティングシステム、ウェブサイトを構築する際に使用する基本ソフトウェア、およびファイルシステムに概ね慣れておくこと。
学習成果:	CSS の目的と機能。 CSS構文の基本的な部分 — ルールセット、セレクター、宣言、プロパティ、プロパティの数値。ボックスモデル、色やフォントの変更、HTML 要素の位置指定など、一般的な CSS 機能が含まれます。

CSS とは何か

HTML と同様、CSS はプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。 CSS は HTML 要素のスタイルを設定するために使用されます。スタイルを設定したい要素を選択し、そのスタイルプロパティに値を指定することで、要素の外観を定義します。

コンテンツの作成の記事で紹介した基本的な HTML の例を、もう一度見てみましょう。

html

<p>生きるための方法:</p>

<ul>
  <li>食う</li>
  <li>寝る</li>
  <li>繰り返す</li>
</ul>

これはそれ自体では次のように表示されます。

ここに CSS を少し追加することで、HTML の外観を変更することができます。次のスニペットは、<p> 要素を選択し、異なるフォントと赤色のテキスト color を適用します。さらに、すべての <li> 要素を選択し、それぞれに黄緑色の background-color、1 ピクセルの実線の黒い border、および 5 ピクセルの下マージンを設定します。

css

p {
  font-family: sans-serif;
  color: red;
}

li {
  background-color: greenyellow;
  border: 1px solid black;
  margin-bottom: 5px;
}

HTML に CSS をつけて、このデモでは次のように表示されます。

ご覧のとおり、ほんの少しの CSS を加えるだけで、地味な見た目のリストの外観を変えることができました。

CSS には他にも、背景画像やグラデーションの指定、書体やスクロール動作の制御、アニメーションの追加、さらにはウェブページ全体のレイアウト構築に至るまで、さまざまな機能があります。

CSS の HTML への適用

CSS を使用する際、まず確認すべきことは、CSS が HTML に正しく適用されているかどうかです。この節では、CSS スタイルシートを first-website に追加し、ページに適用します。

first-website フォルダー内に、styles という名前の新しいフォルダーをもう 1 つ作成します。
テキストエディターを使用して、以下の CSS を新しいファイルに貼り付けてください。これにより、<p> 要素の文字色が赤になります。このスタイルシートが HTML に正しく適用されているかどうかを確認するには、同様にコードから始めるのが便利です。
css
```
p {
  color: red;
}
```
そのファイルを styles フォルダーの中に style.css ファイル名で保存してください。
index.html ファイルを開き、先頭（<head> タグと </head> タグの間）に以下の行を貼り付けてください。
html
```
<link href="styles/style.css" rel="stylesheet" />
```
index.html を保存し、ブラウザーで読み込んでください。次のように表示されるはずです。

Mozilla のロゴといくつかの段落です。段落のテキストは、 CSS によって赤くスタイル付けされています。

段落のテキストが赤くなっていれば、おめでとう！ CSS が動作しています。そうでない場合は、以上の手順をもう一度踏み、それぞれの手順を正しく実行しているかどうかを注意深く調べてください。

CSS の構文の基本

前の CSS の例では、p はセレクターと呼ばれ、スタイル設定を行う要素を選択します。具体的には、p は HTML 内のすべての段落を選択します。中括弧 ({ }) 内の行は宣言と呼ばれ、特定のプロパティの値を設定します。この場合、プロパティは color で、これは段落のテキストの色を制御し、設定されるプロパティ値は red です。

この構造全体をルールセットと呼びます。（ルールセットという用語は、多くの場合単にルールと呼ばれることもあります。）

別のルールセットを見ていきましょう。今回は、複数の宣言をつけています。

css

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

ルールセット内では、宣言同士を区切るためにセミコロン (;) を使用しなければならない。それぞれの宣言内では、プロパティとその値を区切るためにコロン (:) を使用しなければならない。

同時に、1 つのルールに複数のセレクターをカンマで区切って記述することで、複数の要素を選択することもできます。例を示します。

css

p,
.my-class,
#my-id {
  color: red;
}

この CSS ルールには、特定の HTML 要素を選択する要素（または要素型）セレクターが含まれています。同時に、このチュートリアルの残りの部分とは関係のない、他の 2 種類のセレクターも記載されています。それらの機能について知りたい場合は、基本的なセレクターのガイドをご覧ください。

メモ: Scrimba の Write your first lines of CSS! ^{MDN 学習パートナー} は、CSS の構文について、有益な対話的な入門ガイドを提供しています。

テキストの改善

例に戻って、CSS を使用してテキストの見栄えを改善してみましょう。ページに新しいフォントを設定し、さまざまな要素のテキスト設定を変更していきます。

まず、以前保存した、 Google フォントの出力を探します。
<link> 要素を index.html の先頭のどこか（<head> タグと </head> タグの間）に追加します。次のようなものです。
html
```
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
  rel="stylesheet" />
```
このコードは、Google Fonts サービスでホストされているスタイルシートにページをリンクさせ、選択したフォントを読み込みます。
次に style.css ファイルにある既存のルールを削除します。段落を赤く表示させる必要はなくなりました。
以下の行を style.css へ追加します。
css
```
html {
  /* px は「ピクセル」の意味。ベースフォントサイズは 10 ピクセルの高さになった */
  font-size: 10px;
  /* "PLACEHOLDER" を、Google Fontsから取得した font-family プロパティの値に置き換える */
  font-family: PLACEHOLDER;
}
```
メモ: CSS において、/* と */ の間に記述された何らかの内容はすべて CSS コメントとなり、ブラウザーによって無視されます。CSS コメントは、ウェブページの表示に影響を与えることなく、コードやロジックに関する役立つメモを記載するための方法です。
font-family のプレースホルダー行を、Google Fonts のコードにある font-family 行に置き換えてください。例を示します。
css
```
font-family: "Roboto", sans-serif;
```
font-family プロパティは、HTML に適用したいフォントを設定します。このルールは、ページ全体に対するグローバルな基本フォントとフォントサイズを定義します。<html> 要素内のすべての要素は、同じ font-size および font-family を継承します。
それでは、<h1>、<li>、<p> の各要素に、フォントやテキストのスタイルを設定してみましょう。それぞれの要素に対して、font-size の新しい値を設定します。同時に、text-align を使用して見出しを中央揃えにし、段落やリストアイテムの line-height と letter-spacing を増やして、本文のコンテンツを読みやすくしましょう。
css
```
h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```
コードを保存し、ブラウザーで HTML を読み込んでください（以前から開いていた場合は、ページを更新してください）。作成中のページは、次のような表示になるはずです。

メモ: 見出しや本文のフォントサイズが同様に気に入るまで、px の値を調整してみてください。

CSS はすべてボックスについてである

CSS を書いていて気づくことは、その多くがボックスに関するものだということです。ページ上のほとんどの HTML 要素は、他のボックスの上（または横）に配置されたボックスとして考えることができます。これらのボックスに対して、サイズ、色、位置指定などの値を設定することができます。これはボックスモデルと呼ばれています。

3 つのボックスがお互いの内側に配置されています。外側から内側に向かって、 margin, border, padding と書かれています。

ページ上の空間を占めるそれぞれのボックスには、次のようなプロパティがあります。

padding（パディング）: コンテンツの周囲のスペースです。以下の例では、段落テキストの周りのスペースです。
border（境界）: パディングのすぐ外側にある実線です。
margin（マージン）: 要素の外側の周りの空間です。

この節では、以下のプロパティも同時に使用しますが、その中には以前にも触れたものもあります。

width: 要素の幅です。
background-color: 要素のコンテンツおよびパディングの背後の色です。
color: 要素のコンテンツ（通常はテキスト）の色。
text-shadow: 要素内のテキストに適用されるドロップシャドウです。
display: 要素の表示モードです（基本的には、ウェブページ上でその要素がどのように表示されるか、あるいは配置されるかを示します）。

それぞれの節では、次のことを行ってから実行してください。

指定されたCSSコードを、style.css ファイルの末尾に追加してください。
ファイルを保存し、ブラウザーを更新して、CSS が HTML の表示にどのような影響を与えたかを確認してください。
CSS の仕組みがどのように動作するかを理解するために、指定された説明を読んでください。
冒険心があるなら、プロパティの値を変えてみて、ページをさらに独自にカスタマイズしてみてください。

ページの色を変更する

次のものを追加してください。

css

html {
  background-color: #00539f;
}

このルールはページ全体の背景色に設定を行います。上記のカラーコードを、ウェブサイトをどんな外見にするかで選んだ色に変更しましょう。

本文のスタイル設定

次に、このルールを追加しましょう。

css

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

次は <body> 要素です。ここにはいくつかの宣言がありますので、 1 行ずつ見て行きましょう。

width: 600px;: これにより body は常に 600 ピクセルの幅になります。
margin: 0 auto;: margin や padding などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響します（この場合は 0 になります）。2 番目の値は左右に影響します。auto は、残った水平方向の余白を左右に均等に分配する特殊な値です。
background-color: #FF9500;: これは要素の背景色を設定します。このプロジェクトでは、<body> の背景色に赤みがかったオレンジ色を使用して、<html> 要素に使用されている濃い青と対照をなすようにしています。
padding: 0 20px 20px 20px;: これはパディングに 4 つの値を設定します。これは、コンテンツの周りに少しのスペースを確保するためです。今回は body の上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。
border: 5px solid black;: これは境界の太さ、スタイル、色の値を設定します。この場合は、 body の全側面に 5 ピクセルの太さの黒ベタの境界線を設定します。

一括指定プロパティに関する補足

一度に複数のプロパティを設定する CSS のプロパティ値は、一括指定プロパティと呼ばれます。例えば、padding: 0 20px 20px 20px は、以下の 4 つのプロパティと同等です。

css

padding-top: 0;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

メモ: Scrimba の Margin/padding shorthand ^{MDN 学習パートナー} は、マージンとパディングの一括指定の使い方を手順を追って説明する対話的なレッスンです。

ページのメインタイトルの位置指定とスタイル設定

それでは次のものを追加してください。

css

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

body の上部のひどい隙間に気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザーが <h1> 要素にデフォルトのスタイルを適用するためです。それは悪い考えのように見えるかもしれませんが、スタイルのないページにも一定の読みやすさを求めるためのものです。隙間をなくすために、 margin: 0; を設定してデフォルトのスタイルを上書きします。

次に見出しの上下のパディングを 20 ピクセルに設定し、見出しテキストが HTML の背景色と同じ色になるように設定します。

最後に、 text-shadow は要素のテキストコンテンツに影を適用します。

最初はピクセル値で、影のテキストからの水平オフセット、どれだけ横に移動するかを設定します。
2 番目はピクセル値で、影のテキストから垂直オフセット、どれだけ下に移動するかを設定します。
3 番目のピクセル値で、影をぼかす半径を設定します。値が大きいほどぼやけた影を生成します。
4 番目の値は、影の基本色を設定します。

画像のセンタリング

最後に、このルールを挿入してください。

css

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

次に、画像を中央に配置して見栄えを良くします。body 要素の場合と同じ margin: 0 auto のテクニックを使用することができますが、CSS を正しく機能させるためには、いくつかの違いがあるため、追加の設定が必要になります。

<body> 要素は ブロック 要素であり、ページ上で空間を占め、マージンやパディング、その他のボックスプロパティを設定できます。一方、<img>（画像）要素は インライン 要素であり、デフォルトでブロック要素のようにマージンの値を設定することはできません。この画像で自動マージンのテクニックが動作するには、display: block; を使用して、ブロックレベルの挙動を指定する必要があります。

最後に、max-width プロパティを 100% に設定します。これにより、画像が body に設定された width（600 ピクセル）よりも大きい場合でも、600px に制約され、それ以上横に広がらないようにします。

メモ: display: block; や、ブロックレベルとインラインの区別、 max-width: 100%; がまだ理解できなくても心配しないでください。 CSS の勉強を続けていくうちに意味が分かってくるはずです。

まとめ

この記事のすべての指示に従った場合は、次のようなページが表示されます。

Mozilla のロゴを中央に配置し、ヘッダーと段落を配置しています。これで、ページ全体の背景が青くなり、中央に配置されたメインコンテンツストリップの背景がオレンジになるなど、きれいなスタイルになりました。

作成した結果はこちらから見ることができます。行き詰った場合は、GitHub 上の完成版のサンプルコードと作業内容を常に比較することができます。

この記事では、CSS についてごく表面的な部分しか触れていません。このコースの後半にある CSS によるスタイル設定の基本コアモジュールでは、さらに多くのことを学ぶことができます。

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年7月29日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告