CSSの基本｜知っておいて損はない！ホームページの基礎知識

ホームページの運営に携わっていれば自然に身につく知識ですが、関わりのない方にとっては全くの未知の世界。基本を知ると知らないでは大違い！？ホームページにまつわる情報を、苦手意識や抵抗感のある方にも分かりやすくお届けいたします。

今回は「HTML/CSS」といったように、よくセットで扱われるHTMLの相方、CSSの基本について解説していきます。

CSSとは？

CSS（Cascading Style Sheets）は、Webページの見た目をデザインするための言語です。例えば、文字の色を変えたり、背景に色を付けたり、レイアウトを変更したりするために使用します。HTMLがWebページの骨組みを作るのに対し、CSSはその見た目を整える役割を果たします。

CSSの記述方法

CSSの基本構文は以下のようになっています。

セレクタ {
  プロパティ: 値;
}

セレクタとは、どのHTML要素にスタイルを適用するかを指定するものです。プロパティはデザインの要素（例: 色、フォント、幅など）を決定し、値のところでそのプロパティに適用する具体的な値を設定します。

例えば、すべての段落（pタグ）の文字色を赤にしたい場合は、次のように書きます。

p {
  color: red;
}

これが適用されると、すべての<p>タグのテキストが赤色で表示されます。

CSSを適用させる方法は3つある

WebページにCSSを適用させたい時、記述する方法は3種類あり、それぞれの特徴を理解して、適切な手段を選ぶ必要があります。

1. HTMLに直接書く（インラインCSS）

HTMLタグ内に直接スタイルを指定する方法です。例えば、以下のようにstyle属性を使って記述します。

<p style="color: green;">この文字は緑色になります！</p>

インラインCSSは特定の要素に対してダイレクトにスタイルを適用できますが、この方法だけで全てのスタイルを指定するのはとても大変です。

2. HTMLの中にまとめて書く（内部CSS）

HTMLの<style>タグ内にCSSを書いて、ページ全体にデザインを適用させます。基本的に<style>タグは<head>タグ内に記述します。

<style>
p {
  color: green;
}
</style>

この方法では、インラインでは出来なかった、まとめて指定するということが可能になります。適用されるのは記述したHTMLファイルのページ内のみです。

3. 別のファイルに書く（外部CSS）

CSSを専用のファイル（例: styles.css）に記述し、HTMLから<link>タグを使って読み込みます。読み込ませるための以下の記述も基本的には<style>タグは<head>タグ内に記述します。

<link rel="stylesheet" href="style.css">

複数のページから読み込ませてスタイルを共通化できるため効率がよく、ほとんどのWebサイトでこの方法が使われています。

クラス（class）を使ってスタイルを適用しよう

CSSでは、同じデザインを複数の要素に適用するために「クラス（class）」を用います。クラスを使うことで特定の要素にのみ適用させることができ、より柔軟なデザインが可能になります。

まず、HTMLファイルにclass属性を使って要素にクラスを設定します。

<p class="highlight">この文字にデザインが適用されます！</p>
<p>この文字は影響を受けません</p>
<p class="highlight">この文字にデザインが適用されます！</p>

次にCSSファイルにそのクラスに適用するデザインを指定します。クラス名の前には「.」をつけて定義します。

.highlight {
  color: red;
  font-weight: bold;
}

これにより、クラス「highlight」を持つ要素は赤色かつ太字で表示されるようになります。

クラスを使うと、複数の要素に同じスタイルを適用できるため、コードの管理がしやすいのも大きなメリットです。

CSSでできることの一例

1. 文字に装飾をする

CSSを使うと文字の色やフォント、サイズ、間隔などを自由に変更できます。
例えば、以下のように設定すると、見出しの文字を青色で大きくし、中央に配置することができます。

h2 {
  color: blue;/* 青色を指定 */
  font-size: 30px;/* フォントサイズを指定 */
  text-align: center;/* 中央揃えを指定 */
}

2. ボックスをデザインする

CSSを使うと、ボックスのサイズや色、枠線などを自由にカスタマイズできます。
以下のように設定すると、200px×100pxのグレイで縁のある四角形を作ることができます。

div {
  width: 200px;/* 幅を指定 */
  height: 100px;/* 高さを指定 */
  background-color: gray;/* 塗りつぶしの色を指定 */
  border: 2px solid black;/* 枠を指定 */
}

3. レイアウトや間隔を整える

様々なレイアウトのWebページがありますが、そのデザインを実現するためにCSSが用いられています。
レイアウトの一例として、次のようなFlexboxを使うと簡単に要素を横並びにすることができます。

.container {
  display: flex;/* 横並びにする */
  justify-content: space-between;/* 中身のアイテムの配置を指定 */
}
.box {
  width: 100px;/* アイテムの幅を指定 */
  height: 100px;/* アイテムの高さを指定 */
  background-color: lightblue;/* アイテムの塗りつぶし色を指定 */
  margin: 10px;/* アイテムのまわりの余白を指定 */
}

4. スマホ対応（レスポンシブWebデザイン）

画面サイズに応じて異なるスタイルを適用させることも可能です。スマホとパソコンで見え方を変えるような場合に使用します。
例えば、画面幅が600px以下の時に文字サイズを変更したい場合は以下のように記述します。

/* 通常 */
body {
    font-size:18px;
}
/* 600px以下の時 */
@media (max-width: 600px) {
  body {
    font-size:16px;
  }
}

まとめ

CSSはWebページにデザインを適用させるために必ず必要となってくる技術です。思い通りに表示を変更できるようになるとサイトの更新がとても楽しくなってくるので、ぜひ実際に試してみてください！

最後に今回のまとめです。

CSSの役割はWebページの見た目を整えること。
CSSの適用方法には、インラインCSS、内部CSS、外部CSSの3つがある。
クラスを使うことで、特定の要素にスタイルを適用させる。
レスポンシブWebデザインで、スマホやタブレットにも対応したページを作成できる。

以上、CSSの基本でした。

投稿日：2025/03/04

カテゴリー：トピック｜ホームページの基礎知識