CSSとは？

CSS（Cascading Style Sheets）は、HTMLで作成したWebページの見た目（デザインやレイアウト）を指定するための言語です。 文字の色やサイズ、背景色、余白、レイアウトの調整など、Webページを美しく整えるために使用します。

CSSの基本的な使い方

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

1. インラインスタイル

HTML要素に直接スタイルを指定する方法です。

<p style="color: red; font-size: 20px;">これは赤い文字の段落です。</p>

メリット: 簡単に使える。 デメリット: スタイルが分散して管理しづらい。

2. 内部スタイルシート

HTML文書の<head>内に<style>タグで記述する方法です。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>これは青い文字の段落です。</p>
</body>
</html>

メリット: HTMLファイル内でスタイルをまとめて記述可能。 デメリット: 他のHTMLファイルには適用できない。

3. 外部スタイルシート

CSSを別ファイルに分けて管理する方法です。

HTMLファイル（例: index.html）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>これは外部スタイルシートでスタイルを適用しています。</p>
</body>
</html>

CSSファイル（例: styles.css）

p {
    color: green;
    font-size: 16px;
}

メリット: 複数のHTMLファイルで同じCSSを使える。管理が簡単。 デメリット: HTMLとCSSファイルを分ける必要がある。

CSSの基本構文

CSSは以下のような構文を持っています。

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

例

h1 {
    color: red; /* 文字色を赤に設定 */
    font-size: 24px; /* フォントサイズを24pxに設定 */
}

各部分の説明

セレクタ: スタイルを適用したいHTML要素（例: h1）。
プロパティ: 変更したい属性（例: colorやfont-size）。
値: プロパティに設定する値（例: redや24px）。

よく使うCSSプロパティ

文字関連

color: blue; /* 文字の色 */
font-size: 20px; /* 文字のサイズ */
font-family: Arial, sans-serif; /* フォントの種類 */
font-weight: bold; /* 太字 */
text-align: center; /* テキストの中央揃え */

背景関連

background-color: lightgray; /* 背景色 */
background-image: url('background.jpg'); /* 背景画像 */

余白関連

margin: 20px; /* 外側の余白 */
padding: 10px; /* 内側の余白 */

ボーダー（枠線）

border: 2px solid black; /* 枠線の太さ、種類、色 */
border-radius: 10px; /* 枠線の角を丸くする */

CSSのセレクタ

セレクタは、どの要素にスタイルを適用するかを指定します。

1. タグセレクタ

HTMLタグ全体に適用します。

p {
    color: green;
}

2. クラスセレクタ

特定の要素に適用します。クラス名は.で指定します。

<p class="important">これは重要な段落です。</p>

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

3. IDセレクタ

特定の1つの要素に適用します。ID名は#で指定します。

<p id="highlight">これはハイライトされた段落です。</p>

#highlight {
    background-color: yellow;
}

簡単なサンプル

以下のHTMLとCSSを使って、簡単なスタイル付きWebページを作ってみましょう。

HTMLファイル（`index.html`）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title>CSSの基本</title>
</head>
<body>
    <h1>CSSでスタイルを学ぼう！</h1>
    <p class="highlight">この段落はハイライトされています。</p>
    <p>普通の段落ももちろん表示できます。</p>
</body>
</html>

CSSファイル（`styles.css`）

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 20px;
    padding: 20px;
}

h1 {
    color: blue;
    text-align: center;
}

.highlight {
    color: white;
    background-color: orange;
    padding: 10px;
    border-radius: 5px;
}

次に進むには？

CSSを学んだら、次は以下を学ぶとWebページ作成がさらに楽しくなります。

レスポンシブデザイン: スマホやタブレットでも見やすいページを作る方法。
CSSアニメーション: 動きのあるデザインを作る方法。

CSSを使って、あなたのWebページを魅力的にデザインしてみましょう！ 😊

前へHTMLとは？次へJavascriptとは？

最終更新 2 日前