中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
classとspanの違いを徹底解説：HTMLの基本を中学生にも分かる言葉で
ウェブページを作るとき、よく出てくる言葉に class 属性と span タグがあります。これらは見た目を変えたり、意味を伝えたりするための道具ですが、それぞれの役割が違います。本ガイドでは、実務で迷わないように class と span の違いを、例え話と図解を交えながら分かりやすく説明します。まずは結論から言うと、class は複数の要素を横断して共通の性質をつけるための「識別子」で、span は文の一部を小さく区切るための「範囲を区切るタグ」です。
この二つは別物ですが、セットで使うとデザインや機能を整えるのにとても役立ちます。
次に、具体的な使い方の前に、なぜこの二つがセットで重要なのかを丁寧に見ていきましょう。
中学生でも分かるように、難しい専門用語を避けつつ、一つずつポイントを抑えます。
class属性とは何か？なぜ使うのか？
class 属性は、HTMLの要素に「名前」をつける仕組みです。例えば、段落を表す p 要素に class の値をつけると、CSS でその名前を使って色を変えたり幅を変更したりできます。複数の要素に同じ class 名をつければ、同じデザインを一度に適用できます。さらに、複数のクラス を同じ要素につけることも可能で、複合的なデザインを作るときに便利です。
この機能は、HTML と CSS の連携を強力にします。
ただし、class 自体は「見た目の変更を指示する名前」であって、意味を変えるものではありません。従って、アクセシビリティや SEO の観点でも、適切な名前を付けることが大切です。
spanタグとは何か？どんな場面で使うのか？
span タグは、文章の中の特定の部分を「区切る」ための小さな要素です。意味を持つタグではなく、レイアウトやデザインのための容器として使います。例えば、文中の一部の文字を色を変えたいときや、特定の語だけを太字にしたいときに span を使います。これと class を組み合わせると、特定の語を別のデザインにする処理がとても楽になります。HTML を読み上げるスクリーンリーダーにとっても、意味を持つタグと区別して扱うことは、アクセシビリティの点で重要です。
実務では、span は「範囲を区切るだけの小さな容器」として使い、意味を伝える要素（例: 強調のための strong や 代わりの em など）とは役割を分けて運用します。
実践的な使い分けのガイド
ここでのポイントは、class はスタイルのグループ化、span は文中の一部を装飾するための道具、という基本を守ることです。以下の手順で使い分けるとミスが減ります。
- 目的を決める: 見た目を変えるのか、意味を伝えるのかを最初に決める。
- クラス名の命名規則: 2〜3語で、短く覚えやすく、他のクラスと混同しない名前にする。
- 複数クラスの活用: 同じデザインを適用したい要素には複数のクラスを付けると便利。どう違うのか、使い分けを考える。
- スコープを決める: 大元のコンポーネントに対してのみ適用する。
最後に、実際のページを想定して、次のような流れで使い分けると理解が深まります。まず class でレイアウトの枠組みを作り、必要に応じて span で細かい文字装飾を追加します。こうすることで、CSS と HTML の役割が明確になり、保守もしやすくなります。
新しい友だちとデザインの課題を話しているとき、友人が言った『class属性は仲間を束ねる名前、spanは文の中の指示役』という言い方が印象的だった。私たちは、どの要素がどんなデザインを持つべきかを話し合い、表現の一貫性を保つために class を統一し、span で細かな彩りを付ける、そんな現場の現実に近い使い方を学んだ。授業でも、まずは目的を決め、次に命名規則を決め、最後に適用範囲を決める――この順序を守るだけで、 HTML と CSS の連携はぐっと楽になる。
ITの人気記事
