フリー検定

本サイトは広告により収益を得ています

Chapter 2: Webページを彩る - CSSの基礎

Chapter 2: Webページを彩る - CSSの基礎

2025年09月20日
フリー検定
広告

目次

現在: 3 / 6
  1. 1. はじめに：Webサイト制作の基本をマスターしよう
  2. 2. Chapter 1: Webページの骨組みを作る - HTMLの基礎
  3. 3. Chapter 2: Webページを彩る - CSSの基礎 閲覧中
  4. 4. Chapter 3: Webページに動きをつける - JavaScriptの基礎
  5. 5. Chapter 4: 実践演習：ミニWebサイト制作
  6. 6. まとめ：スタンダード検定取得に向けて
ITエンジニア フロントエンドエンジニア AYCFフロントエンドエンジニア-スタンダード

フロントエンドエンジニアに関する検定はこちら

面倒な会員登録も不要！すぐに受験！

無料で受験する

Webサイトの骨組みがHTMLなら、その見た目をデザインするのがCSS（Cascading Style Sheets）の役割です。CSSは、Webページの色、フォント、レイアウトなどを装飾するための言語で、HTMLと組み合わせて使います。

CSSの役割と記述方法

CSSは、HTML要素にスタイルを適用するルールを定義します。基本的な記述方法は以下の通りです。

CSS

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

  • セレクタ：スタイルを適用したいHTML要素を指定します（例：h1、p、.containerなど）。

  • プロパティ：変更したいスタイル項目（例：color、font-sizeなど）。

  • 値：プロパティに適用したい具体的な設定（例：red、16pxなど）。

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

  1. 外部スタイルシート: <link>タグで外部の.cssファイルを読み込む方法。最も一般的で推奨される方法です。

  2. 内部スタイルシート: <style>タグを<head>内に記述する方法。

  3. インラインスタイル: HTML要素のstyle属性に直接記述する方法。特別な場合を除き非推奨です。

ボックスモデルの理解

CSSのレイアウトを理解する上で最も重要な概念がボックスモデルです。HTMLの各要素は、一つひとつの**四角い箱（ボックス）**として扱われます。この箱は、以下の4つの要素で構成されています。

  • Content（コンテンツ）: テキストや画像など、実際のコンテンツが表示される領域。

  • Padding（パディング）: コンテンツと境界線の間の余白。

  • Border（ボーダー）: コンテンツとパディングを囲む境界線。

  • Margin（マージン）: ボーダーの外側の余白。要素同士の間隔を調整します。

これらの値を設定することで、要素のサイズや他の要素との間隔を細かく制御できます。

レイアウトの基本：FlexboxとGridの初歩

Webページのレイアウトを効率的に作成するために、現代のCSSではFlexboxとCSS Gridがよく使われます。

  • Flexbox: 1次元（行または列）のレイアウトに適しています。要素を横並びにしたり、中央寄せにしたりするのに非常に便利です。

    • display: flex;を親要素に指定すると、子要素が横並びになります。

  • CSS Grid: 2次元（行と列）のレイアウトに適しています。Webサイト全体のグリッド構造を定義するのに最適です。

レスポンシブデザインの基礎

スマートフォンやタブレットなど、多様なデバイスでWebサイトを最適に表示させるための手法をレスポンシブデザインと言います。CSSでは、@mediaルールを使って、画面サイズに応じてスタイルを切り替えることができます。

CSS

/* 画面幅が600px以下の場合に適用されるスタイル */
@media screen and (max-width: 600px) {
  .container {
    flex-direction: column; /* 縦並びに変更 */
  }
}

色の指定方法と文字のスタイル設定

  • 色の指定: #ff0000（16進数）、rgb(255, 0, 0)、red（キーワード）など、様々な方法で色を指定できます。

  • フォント: font-family（フォントの種類）、font-size（文字の大きさ）、font-weight（太さ）などのプロパティで文字を装飾します。

練習課題： 前章で作成したHTMLの自己紹介ページに、以下のCSSを追加してみましょう。

  1. 背景色や文字色を変更してみる。

  2. ボックスモデルのプロパティ（padding、border、margin）を調整して、要素の見た目を変えてみる。

  3. 画面幅を狭めたときにスタイルが変わる@mediaルールを試してみる。

次の章では、これらの静的なページにJavaScriptを使って動きを加える方法を学びます。

フロントエンドエンジニアに関する検定はこちら

面倒な会員登録も不要！すぐに受験！

無料で受験する
前の記事 Chapter 1: Webページの骨組みを作る - HTMLの基礎 次の記事 Chapter 3: Webページに動きをつける - JavaScriptの基礎
広告

検定一覧はこちらから

様々なジャンルの検定から選んで、あなたの知識を試してみましょう。

検定一覧を見る

関連記事

広告