CSS入門：基本の使い方を徹底解説

Webページを美しく、使いやすくするために欠かせないのが CSS（Cascading Style Sheets） です。HTMLで作成したページにスタイルを適用し、レイアウトを整えたり、文字の色や大きさを変更したり、ボタンのデザインを統一したりと、Webデザインの自由度を大きく向上させます。この記事では、CSSの基本構文から、セレクターの種類や使い方までを分かりやすく解説します。

はじめに

CSSとはなにか

CSS(Cascading Style Sheets) を使用すると、Webページのデザインやレイアウトを自由に表現することができます。HTMLで構造を作成したあと、CSSを適用することで、文字の色やサイズ、配置、背景デザインなどを柔軟に調整し、ユーザーがより快適に閲覧できるページを作成できます。
CSSは単に装飾を施すだけでなく、レスポンシブデザインを実現したり、アクセシビリティを向上させたりと、Webサイトの使いやすさにも大きく貢献します。

CSSの基本構文

CSSの基本的な書き方は、次のような構造になります。

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

1. セレクター
   適用するHTML要素を指定します。例えば、p を指定すれば <p> タグに適用されますし、.button を指定すれば <button class=”button”> に適用されます。
2. プロパティ
   変更したいCSSのスタイルを指定します。例えば、color は文字色を指定するプロパティです。
3. 値
   プロパティに設定する具体的な値を指定します。例えば、color: blue; なら文字色が青になります。

実際のCSSの例

h1 {
  font-size: 24px;  /* 見出しの文字サイズを24pxに */
  color: red;       /* 文字色を赤に */
  text-align: center; /* 中央揃え */
}

このCSSを適用すると、<h1> 要素は24pxの赤文字で、中央揃えになります。

CSSセレクターの基本

セレクターとは

「CSSセレクター」は、「どのHTML要素にスタイルを適用するか」を指定するための仕組みです。
例えば、次のようなHTMLがあるとします。

<p>こんにちは、CSSの世界へようこそ！</p>

この<p>要素の文字色を青にしたい場合、以下のようにCSSを書きます。

p {
  color: blue;
}

この p の部分がセレクターで、「HTMLの<p>要素にスタイルを適用する」という指示になります。

なぜセレクターを理解することが重要なのか？

適切なセレクターを使いこなすことで、効率的にデザインを適用でき、メンテナンスしやすいコードを書くことができます。では、なぜセレクターの理解が重要なのか、具体的に見ていきましょう。

1. 効率的なスタイリングが可能になる
   セレクターを適切に使うことで、1つのCSSルールを複数の要素に適用し、コードを簡潔に保つことができます。例えば、すべてのボタンに共通のデザインを適用したい場合、個別にスタイルを指定するのではなく、クラスセレクターを使うことで一括管理できます。

   /* クラスセレクターでボタンのデザインを統一 */
   .button {
     background-color: blue;
     color: white;
     padding: 10px 20px;
     border-radius: 5px;
   }

   このように記述すれば、<button class=”button”> を持つすべての要素に統一したスタイルが適用され、HTMLコードをすっきりさせることができます。

2. 保守性と拡張性が向上する
   Webサイトは時間とともに変更・追加が必要になります。適切なセレクターを使っていないと、スタイルの修正が大変になり、コードの管理が複雑になってしまいます。例えば、特定のページ内の見出しだけを変更したい場合、適切なセレクターを使えば、影響範囲を限定して安全に修正できます。

   /* このページのh1だけデザインを変更 */
   .page-about h1 {
     color: darkgreen;
     font-size: 24px;
   }

   これにより、他のページのh1には影響を与えず、変更が簡単になります。

3. スタイルの優先順位（カスケード）を理解できる
   CSSには、「カスケード（Cascading）」という概念があり、複数のスタイルが適用される場合、どれが優先されるかが決まっています。セレクターの詳細度（Specificity）を理解することで、意図しないスタイルの上書きを防ぎ、適切なデザインを適用できます。

   /* すべてのh1に適用 */
   h1 {
     color: blue;
   }
   
   /* クラスセレクターの方が優先される */
   .title {
     color: red;
   }
   
   /* IDセレクターの方がさらに優先される */
   #main-title {
     color: green;
   }

   上記の場合、<h1 id=”main-title” class=”title”> に適用される色は 緑（IDの指定が最優先） になります。このように、セレクターの優先順位を理解することで、思い通りのデザインを適用しやすくなります。

4. 高度なセレクターで柔軟なデザインが可能になるCSSには、属性セレクター、疑似クラス、疑似要素などの高度なセレクターがあります。これらを活用すると、より細かいスタイル設定ができ、JavaScriptを使わずに動的な表現も可能になります。
   例えば、:hover 疑似クラスを使うと、マウスが乗ったときだけボタンの色を変えることができます。

   .button:hover {
   background-color: darkblue;
   }

   また、nth-child(n) を使うと、リストの偶数番目だけや奇数番目だけ背景色を変えることもできます。

   /* 偶数番目だけ */
   li:nth-child(even) {
     background-color: #f2f2f2;
   }
   
   /* 奇数番目だけ */
   li:nth-child(odd) {
     background-color: #f2f2f2;
   }

   このように、セレクターを理解しておくと、CSSの表現力を最大限に活かせるようになります。

CSSセレクターの種類

基本のセレクター

h1 { 
   color: red; 
}

<h1>sample</h1>

.title { 
   font-weight: bold; 
}

<h1 class="title">sample</h1>

#main { 
   background-color: lightgray; 
}

<main id="main">
   <div><p>sample</p></div>
</main>

h1, h2, p { 
   margin: 10px; 
}

<h1>sample1</h1>
<h2>sample2</h2>
<p>sample3</p>

詳細なセレクター

div p { 
   color: green; 
}

<div>
   <ul>
      <li><p>sample1</p></li>
      <li><p>sample2</p></li>
   </ul>
</div>

ul > li { 
   list-style-type: square; 
}

<ul>       
    <li><p>sample1</p></li>
    <li><p>sample2</p></li>
</ul>

h1 + p { 
   font-style: italic; 
}

<h1>見出し H1</h1>
<p>この段落は h1 の直後なので適用される</p>
<p>この段落は h1 の直後ではないので適用されない</p>

<div>間にある要素</div>

<p>この段落は h1 の直後ではないので適用されない</p>

h1 ~ p { 
   color: gray; 
}

<h1>見出し H1</h1>
<p>この段落は h1 の後なので適用される</p>
<p>この段落は h1 の後なので適用される</p>

<div>間にある要素</div>

<p>この段落は h1 の後なので適用される</p>

属性セレクター

a[target="_blank"] { 
   color: red; 
}

<input type="text">

a[target="_blank"] { 
   color: red; 
}

<a target="_blank">~~</a>

a[href^="https"] { 
   color: green; 
}

<a href = "https://sample1.com">~~</a>
<a href = "https://sample2.com">~~</a>

img[src$=".png"] { 
   border-radius: 10px; 
}

<img src="sample1.png">
<img src="sample2.png">

p[class*="error"] { 
   color: red; 
}

<p class="critical-error-msg">~~</p>
<p class="small-error-msg">~~</p>

CSSプロパティの基本

CSSにおけるプロパティは「どのようにスタイルを適用するか」を決める重要な要素です。

主要なCSSプロパティ

CSSにはさまざまなプロパティがありますが、ここでは基本的なものを紹介します。

フレックスボックスについては以下のサイトで練習すると実践的に身につけられると思います
https://flexboxfroggy.com/#ja

まとめ

CSSはWebページのデザインやレイアウトを自由に表現するための言語であり、単なる装飾にとどまらず、レスポンシブデザインやアクセシビリティ向上にも貢献します。
CSSを適切に使いこなすことで、統一感のあるデザイン、管理しやすいスタイル設定、柔軟なデザインの適用ができ、より洗練されたWebページを作成することができます。