04 はじめてのホームページ　HTMLとclassの使い方

2020年4月3日2024年12月25日

URLをコピーしました！

今回はHTMLコードでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。ただし、同じ要素であるp要素に別々の色や配置を指定する場合必要になってくるのがclassです。ここでは、class属性を使って個別指定ができるように行います。

HTMLファイルの作成

下記のHTMLとCSSコードをエディタに入力（コピー貼り付けも可）してみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジー＆環境問題</title>
    <style>
        body {
            background-color: #e3e3e3;
            font-size: 100%;
            line-height: 1.7;
            font-family: serif;
        }

        h1 {
            background-color: #000000;
            color: #ffffff;
        }

        p.center {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 class="center">ECOLOGY 【エコロジーへの取り組み】</h1>
    <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
        Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
    </p>
    <p class="center">
        <a href="index.html"><img src="green.jpg" alt="エコロジー 森林"></a>
    </p>
    <p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
    </p>

    <p class="center"><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
</body>

</html>

このHTMLで使われているCSS

HTMLファイル内の<style>タグに書かれているCSSは、以下のように使われています。

`body`要素のスタイル

body {
    background-color: #e3e3e3;
    font-size: 100%;
    line-height: 1.7;
    font-family: serif;
}

background-color: ページ全体の背景色を指定します。この場合、薄いグレー（#e3e3e3）を設定しています。
font-size: テキストのサイズを指定しています。「100%」はブラウザの標準サイズを基準にします。
line-height: 行間を指定します。この場合、「1.7」で少し広めの行間を設定しています。
font-family: フォントを指定します。この場合は「serif（セリフ体）」を使用しています

`h1`要素のスタイル

h1 {
    background-color: #000000;
    color: #ffffff;
}

background-color: 見出し部分の背景色を黒（#000000）に設定しています。
color: 文字色を白（#ffffff）に設定しています。

`p.center`要素のスタイル

p.center {
    text-align: center;
}

text-align: このクラスが適用された<p>タグのテキストや内容を中央揃えにします。

`class`属性について

CSSでは、複数の要素に同じデザインを適用したい場合にclass属性を使います。
classは「スタイルをグループ化するラベル」と考えるとわかりやすいです。

このHTMLの`p.center`

<p class="center">
    <a href="index.html"><img src="img.jpeg" alt="エコロジー 森林"></a>
</p>

class="center"
この部分は、pタグに「center」という名前のスタイル（クラス）を適用していることを示します。CSS内で定義された.centerのルールが適用されます

p.center{
   text-align:center;
}

結果として、この<p>タグの内容は中央揃えになります。

また同様にセンターに配置したい箇所　h1要素やコピーライトの箇所にもclassを使って中央に配置しています。

`class`のメリット

再利用性が高い

複数のタグに同じデザインを簡単に適用できます。

<h1 class="center">タイトル</h1>

<p class="center">中央揃えのテキスト1</p>

<p class="center"><small>Copyright....</small></p>

柔軟性がある

必要に応じて複数のclassを指定することもできます。

<p class="center bold">複数のスタイルを適用</p>

`class`の命名規則とポイント

英語で命名する

例: header, footer, main-content
日本語は避け、一般的に英語を使います。英語にすることで、他の開発者にもわかりやすくなります。

小文字を使用する

例: button-primary, text-center
大文字は使わず、小文字に統一するのが一般的です。

単語を区切るときはハイフン（`-`）を使う

例: nav-bar, list-item
スペースやアンダースコア（_）ではなく、ハイフンを使うのが主流です（BEMやCSSフレームワークの慣習に基づく）。

目的や意味を明確にする

例: card-title, error-message
見ただけで何を意味しているのか分かるように命名します。曖昧な名前（box, itemなど）は避けましょう。

推奨するclass名

構造を表す名前

例: header, footer, sidebar, container
ページのレイアウトや構造に関係する要素には、こうした名前を使います。

役割や状態を表す名前

例: active, disabled, highlighted
ボタンの「有効」「無効」や、テキストの強調表示など、要素の状態に基づく名前を使います。

修飾用の名前（BEMの考え方に基づく）

BEM（Block-Element-Modifier）の考え方を取り入れると、命名がさらに整理されます。

Block: 基本のコンポーネント名
例: card, menu
Element: Block内の部品
例: card-title, menu-item
Modifier: BlockやElementの状態や変化
例: card-title--highlighted, menu-item--active

<div class="card card--featured">
    <h2 class="card-title">タイトル</h2>
    <p class="card-text">本文</p>
</div>

次は、header main footer の学習！05に進みます。

CSSの設定を行なってみた　4回目の動画

よかったらシェアしてね！

URLをコピーしました！

04 はじめてのホームページ HTMLとclassの使い方