CSS|チュートリアル - 元Webデザイナー兼コーダーの備忘録

CSSは、ウェブページのデザインを制御する言語です。このチュートリアルでは、CSSの基本から簡単なスタイルの適用方法まで学んでいきます。初心者の方でも理解しやすいよう、基本構造やセレクタ、プロパティと値について説明し、実際のスタイル適用例も紹介します。このチュートリアルを通じて、CSSの基礎を習得し、魅力的なウェブデザインを作成するための第一歩を踏み出しましょう。

CSSの基本構造
セレクタ
プロパティと値
簡単なスタイルの適用例
まとめ
その他の記事

CSSの基本構造

CSSの基本構造は非常にシンプルです。以下の形式で記述します。

/* 基本構造 */
セレクタ {
    プロパティ:値;
}

/* 例 */
p {
    color: blue;
    font-size: 16px;
}

この例では、すべての<p>タグのテキストが青色になり、フォントサイズが16ピクセルに設定されます。

セレクタ

セレクタは、スタイルを適用するHTML要素を指定します。主なセレクタには以下があります。

要素セレクタ:p, div, h1など
IDセレクタ:#idname
クラスセレクタ:.classname
属性セレクタ:[attribute="value"]

/* 要素セレクタ */
h1 {
    font-size: 24px;
}

/* IDセレクタ */
#header {
    background-color: black;
    color: white;
}

/* クラスセレクタ */
.highlight {
    background-color: yellow;
}

/* 属性セレクタ */
[type="submit"] {
    background-color: green;
}

プロパティと値

CSSプロパティは、要素の特定のスタイルを制御します。値は、そのプロパティに割り当てる具体的な設定です。以下は、プロパティと値の記述例です。

.box {
    /* サイズ */
    width: 100px;
    height: 100px;

    /* 色 */
    background-color: #f0f0f0;
    color: #333;

    /* フォント */
    font-family: Arial, sans-serif;
    font-size: 14px;

    /* レイアウト */
    margin: 10px;
    padding: 15px;
    border: 1px solid black;
}

簡単なスタイルの適用例

理論を学んだら、実践に移ります。以下の手順で、ウェブページにCSSを適用してみましょう。

1.HTMLファイルを作成:以下のコードをindex.htmlという名前で保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSチュートリアル</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSSの基本</h1>
    <p>これはCSSを使ったスタイル適用の例です。</p>
</body>
</html>

2.CSSファイルを作成:以下のコードをstyle.cssという名前で保存します。

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

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

p {
    font-size: 18px;
    color: #333;
}