CSSの基礎 — ウェブページをデザインするための入門ガイド

こんにちは、無限∞道場運営チームです！
HTMLでウェブページの骨組みを作成した後、次に学ぶべきは CSS（Cascading Style Sheets） です。CSSは、ウェブページのデザインやレイアウトを指定するためのスタイルシート言語で、ページの外観を整えるために必要不可欠です。この記事では、CSSの基本について解説し、ウェブページをより魅力的にする方法を紹介します。

1. CSSとは？

CSS は、ウェブページのスタイル（デザインやレイアウト）を指定するために使われる言語です。具体的には、テキストの色やフォント、レイアウト、背景画像、余白など、HTMLだけでは実現できない見た目をコントロールします。HTMLはウェブページの「骨組み」を作成しますが、CSSはその「装飾」を担当します。

2. CSSの基本的な仕組み

CSSは、セレクタ と プロパティ の組み合わせで構成されます。セレクタでどの要素にスタイルを適用するかを指定し、プロパティと値でその要素に適用するスタイルを定義します。

CSSの基本的な構文は以下のようになります。

cssコードをコピーするセレクタ {
    プロパティ: 値;
}

例：

cssコードをコピーするh1 {
    color: blue;
    font-size: 24px;
}

この例では、<h1> タグに対して文字色を青にし、文字サイズを24pxに指定しています。

3. CSSの適用方法

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

1. インラインCSS

HTMLタグに直接スタイルを記述する方法です。style 属性を使って、個々の要素にスタイルを適用します。

htmlコードをコピーする<h1 style="color: blue; font-size: 24px;">こんにちは、世界！</h1>

2. 内部CSS（内部スタイルシート）

<head> タグ内に <style> タグを使って、ページ全体に適用するスタイルを記述する方法です。

htmlコードをコピーする<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>

3. 外部CSS（外部スタイルシート）

別ファイルにスタイルを記述し、そのファイルをHTMLにリンクする方法です。多くのページで共通のスタイルを使用する際に便利です。

htmlコードをコピーする<head>
    <link rel="stylesheet" href="style.css">
</head>

style.css ファイルに以下のようなCSSを記述します。

cssコードをコピーするh1 {
    color: blue;
    font-size: 24px;
}

4. CSSの基本的なプロパティ

CSSにはさまざまなプロパティがあり、ウェブページの外観を自由にカスタマイズできます。ここでは、よく使われる基本的なプロパティをいくつか紹介します。

1. 色の指定

文字の色や背景色を指定するプロパティです。

color — 文字の色を指定します。
background-color — 背景の色を指定します。

cssコードをコピーするp {
    color: red;
    background-color: yellow;
}

2. フォントの設定

フォントに関するスタイルを指定するプロパティです。

font-family — 使用するフォントを指定します。
font-size — フォントサイズを指定します。
font-weight — フォントの太さを指定します（例：bold、normal）。

cssコードをコピーするp {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

3. 余白の調整

要素の内側と外側の余白を指定するプロパティです。

padding — 要素の内側の余白を指定します。
margin — 要素の外側の余白を指定します。

cssコードをコピーするp {
    padding: 10px;
    margin: 20px;
}

4. ボックスモデル

CSSでは、すべての要素は ボックスモデル に基づいて配置されます。ボックスモデルは、要素が持つ4つの領域で構成されます。

コンテンツ — 要素の内容そのもの。
パディング（padding） — コンテンツとボーダーの間のスペース。
ボーダー（border） — パディングの周りの枠線。
マージン（margin） — ボーダーの外側のスペース。

cssコードをコピーするdiv {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

この例では、要素の内容が幅200px、高さ100pxで、その周りに10pxのパディング、2pxのボーダー、20pxのマージンがあります。

5. 背景画像の設定

背景に画像を設定するプロパティです。

cssコードをコピーするbody {
    background-image: url('background.jpg');
    background-size: cover;
}

6. テキストの整列

テキストの配置を指定するプロパティです。

text-align — テキストの水平方向の位置を指定します（例：left、center、right）。

cssコードをコピーするh1 {
    text-align: center;
}

5. クラスとID

CSSでは、特定の要素に対してスタイルを適用するために クラス と ID を使います。

クラス

複数の要素に同じスタイルを適用したい場合、クラスを使います。クラスは . で始まり、HTMLでは class 属性で指定します。

cssコードをコピーする.red-text {
    color: red;
}

htmlコードをコピーする<p class="red-text">赤いテキスト</p>
<p class="red-text">これも赤いテキスト</p>

ID

特定の1つの要素に対してスタイルを適用したい場合、IDを使います。IDは # で始まり、HTMLでは id 属性で指定します。

cssコードをコピーする#unique-text {
    color: blue;
}

htmlコードをコピーする<p id="unique-text">青いテキスト</p>

6. レスポンシブデザイン

現代のウェブ開発では、PCだけでなくスマートフォンやタブレットなど、さまざまなデバイスに対応する必要があります。レスポンシブデザイン では、CSSを使ってデバイスの画面サイズに応じたレイアウトを作成します。

メディアクエリ

メディアクエリ を使うことで、画面の幅に応じて異なるスタイルを適用できます。

cssコードをコピーする@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

この例では、画面の幅が600px以下の場合に、背景色がライトブルーに変わります。

まとめ

CSSを使うことで、HTMLで作成したウェブページを美しくデザインし、ユーザーにとって魅力的な体験を提供できます。今回紹介した基礎的なCSSプロパティを活用して、ウェブページのデザインを自由にカスタマイズしてみてください。

無限∞道場では、HTMLやCSSをはじめとしたウェブ技術を体系的に学び、実践的なスキルを身に付けることができます。CSSをさらに学び、より高度なデザインやレイアウトに挑戦してみましょう！

次回のセッションでは、JavaScriptの基礎についても学んでいきますので、ぜひ引き続きご参加ください！

HTMLの基礎 — BizTech初心者向けのウェブページ作成ガイド

JavaScriptの基礎 — 動的なウェブページを作るための入門ガイド