プログラミング

CSSの完全ガイド

最終更新： 28/02/2025
1 分の読み

CSS（Cascading Style Sheets）は、ウェブページの外観を設定するために使用されるスタイルシート言語です。HTMLと一緒に使われ、コンテンツのレイアウト、色、フォント、その他の視覚的な要素を調整します。CSSはその名前の通り、「カスケーディング」方式で適用されるため、スタイルが複数の場所から継承される仕組みを持っています。この記事では、CSSの基本的な構文から高度なテクニックまで、完全かつ包括的に説明します。

1. CSSの基本構文

CSSの基本的な構文は非常にシンプルです。主に「セレクタ」、「プロパティ」、「値」の3つの部分で構成されています。基本的な構文は以下のようになります。

関連記事
css
セレクタ {
  プロパティ: 値;
}

例えば、以下のCSSコードは、すべての

タグの文字色を赤にするスタイルを定義します。

css
p {
  color: red;
}
  • セレクタ: スタイルを適用したいHTML要素を指定します。例えば、pはすべての段落（

    タグ）を指します。

  • プロパティ: スタイルで変更したい属性を指定します。この場合、colorは文字の色を指定するプロパティです。
  • 値: プロパティに設定する具体的な値です。redは色を指定しています。

2. CSSの適用方法

CSSをHTMLに適用する方法は3つあります。

2.1 インラインCSS

HTMLタグ内に直接CSSを記述します。例えば、

タグにインラインでスタイルを指定する場合は次のようにします。

html
<p style="color: red;">これは赤い文字の段落です。p>

インラインCSSは簡単ですが、スタイルの再利用性が低く、管理が難しくなるため、できるだけ避けるべきです。

2.2 内部CSS

HTML文書内のセクションにスタイルを記述します。これを内部スタイルシートと呼びます。

html
<head>
  <style>
    p {
      color: red;
    }
  style>
head>

内部CSSは、特定のHTML文書だけに適用されます。

2.3 外部CSS

外部のCSSファイルをHTML文書にリンクする方法です。これが最も一般的で効率的な方法です。

html
<head>
  <link rel="stylesheet" href="styles.css">
head>

styles.cssという外部ファイルにCSSを記述します。この方法は、スタイルを複数のHTMLファイルに適用でき、再利用性が高いため、ウェブ開発において推奨されます。

3. CSSのセレクタ

CSSには多くの種類のセレクタがあります。セレクタは、どのHTML要素にスタイルを適用するかを決定します。主要なセレクタをいくつか紹介します。

3.1 要素セレクタ

要素名を指定してスタイルを適用します。

css
h1 {
  color: blue;
}

この例では、すべての

タグに青い文字色が適用されます。

3.2 クラスセレクタ

クラス名を指定してスタイルを適用します。クラスセレクタは、HTML要素にクラスを指定することで使います。

html
<p class="highlight">この段落は強調表示されます。p>

css
.highlight {
  background-color: yellow;
}

上記の例では、highlightというクラスを持つ

タグに黄色い背景色を適用します。

3.3 IDセレクタ

IDセレクタは、ページ内で一意の要素を選択するために使います。IDセレクタは、#で始まります。

html
<p id="intro">これはイントロ段落です。p>

css
#intro {
  font-size: 20px;
}

ここでは、IDがintroの

タグにフォントサイズを20pxに設定しています。

3.4 属性セレクタ

特定の属性を持つ要素を選択します。

css
input[type="text"] {
  border: 1px solid black;
}

この例では、type="text"という属性を持つタグに黒い枠線を追加します。

4. CSSのボックスモデル

CSSでは、要素がページ上にどのように表示されるかを決定する「ボックスモデル」があります。ボックスモデルは、要素が占める領域を定義するもので、以下の構成要素からなります。

  • コンテンツ: 要素の中身（テキストや画像など）。
  • パディング: コンテンツとボーダーの間のスペース。
  • ボーダー: 要素の周りの枠線。
  • マージン: 要素と他の要素との間のスペース。

ボックスモデルを理解することは、レイアウトを正確に制御するために非常に重要です。

5. レイアウトに関するCSSプロパティ

5.1 displayプロパティ

displayプロパティは、要素がどのように表示されるかを指定します。主要な値には次のものがあります。

  • block: 要素はブロックレベルで表示され、次の要素はその下に表示されます。
  • inline: 要素はインライン要素として表示され、次の要素は同じ行に表示されます。
  • flex: フレックスボックスレイアウトを使用して要素を配置します。
css
div {
  display: block;
}

5.2 positionプロパティ

positionプロパティは、要素の配置方法を指定します。主要な値には次のものがあります。

  • static: デフォルトの配置方法（文書の流れに従う）。
  • relative: 相対的に配置されます。
  • absolute: 親要素を基準に絶対的に配置されます。
  • fixed: ビューポートを基準に固定された位置に配置されます。
css
div {
  position: absolute;
  top: 20px;
  left: 30px;
}

5.3 floatプロパティ

floatプロパティは、要素を左または右に寄せるために使用します。

css
img {
  float: left;
}

これにより、画像は左に寄せられ、その後に続くコンテンツが右側に流れます。

6. CSSのトランジションとアニメーション

CSSを使用して、ウェブページの要素に動きを加えることができます。これにより、ユーザーインタラクションに対する応答が視覚的に強調され、ページがより動的に見えます。

6.1 トランジション

トランジションは、要素のプロパティが変化する際にアニメーション効果を付けるために使用します。

css
button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: green;
}

ここでは、ボタンがホバーされたときに背景色が青から緑にスムーズに変化します。

6.2 アニメーション

CSSアニメーションを使用すると、要素を指定した動きに従って時間経過とともに変化させることができます。

css
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 100px;
  }
}

div {
  position: relative;
  animation: move 2s infinite;
}

この例では、

要素が左から右に動くアニメーションを設定しています。

7. メディアクエリ

メディアクエリを使用することで、異なる画面サイズやデバイスに応じてCSSを変更できます。これにより、レスポンシブデザインを実現できます。

css
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

この例では、画面幅が600px以下のデバイスでは、フォントサイズを14pxに変更します。

結論

CSSはウェブデザインにおいて欠かせない要素であり、ページのスタイルを決定する強力なツールです。基本的な構文から高度なレイアウト技術まで、CSSは様々な方法でウェブページを魅力的に演出できます。

最終更新： 28/02/2025
1 分の読み
Back to top button