セマンティックってどういう意味？CSSの詳細度を理解して自由自在にスタイルを適用しよう！

Posted at 2025-06-12

ごあいさつ

みなさん、こんにちは！
オブジェクティブグループ（以下OBG）に所属している@scrashim9Rと@ume_work0831と申します。
弊社にて月1で開催しているフロントエンドの講習会のご紹介をしていきたいと思います。
いつもは初級と中級に分かれて講習を行っておりますが、今回は前半と後半に分かれての合同開催した時の内容について触れていきます！

semantic（セマンティック）について

まず前半はsemantic（セマンティック）なコーディングについてお話させて頂きました。
semanticは直訳すると「意味」を示す単語です。
IT業界ではコンピュータに情報の意味を正確に理解させ、文書の関連付けや情報処理を自動的に行わさせる技術と呼ばれています。

正確に理解とはどういう事か？

まずは下記のHTMLを見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>見た目は問題ない？</title>
    <style>
        .container { width: 80%; margin: auto; }
        .box { padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" style="font-size: 24px; font-weight: bold;">ようこそ！</div>
        <div class="box">これはサンプルページです。</div>
        <div class="box">
            <div style="font-weight: bold;">お問い合わせ</div>
            <div>メール: example@example.com</div>
            <div>電話: 123-456-7890</div>
        </div>
        <div class="box" style="text-align: center;">&copy; 2025 Sample Site</div>
    </div>
</body>

非常にシンプルなWebページとなります。
挨拶とWebページの簡単な説明文、お問い合わせの連絡先が書かれてます。
表示としては特に大きな問題はないかと思われますね（デザイン面は置いといて）

ですがHTMLタグを確認してみると感想はガラリと変わると思います。

Q.どのような印象を持ちましたか？

タグにインライン要素でCSSが記載されている
headタグにstyleタグでCSSが記載されている
全てdivタグで書かれている

色々な意見があるかと思います。
ここでdivタグはどの様な意味を持っているタグなのかを思い出してみてください。

汎用性のあるタグではありますが、divタグ自体には特に何の意味も付随されておりません。
先程も述べた様にWebページ上では表示に問題があるという訳ではありません。
では何が問題なのか？
ここで「コンピュータが情報の意味を正確に理解」という話になってきます。

検索エンジンで上位に掲載されやすくなる

お馴染みGoogleを始めとする検索エンジンでの結果で上位に掲載されやすくなります。
検索エンジンはWebサイトのコードを参照してどのようなサイトなのかを判断しているので、上記のようなdivタグのみで作られたページだと構造が正しく読み取られない場合があります。
折角見た目を綺麗にしても訪れる人が居なければ本末転倒ですよね。

アクセシビリティの向上

Accessibility（利用し易さ）にも直結します。
視覚障がい者の人がWebサイトの情報を読み取る際に使用するスクリーンリーダーの読み取りの正確さに繋がったり、設置したボタンにマウスではなくキーボードでの操作でアクセスが可能になります。

制作側の運用・開発における手間が増える

単純に制作者側にとっても適したタグが使われていないと、
「ここの階層、divタグがひたすら使われていて分かり辛いな……」と思いませんか？私は思います。
勿論エディタにも様々な補完は拡張機能などで入れる事も可能ですが、一目見て分かり辛いコードと格闘するのは嫌になりますよね。

以上のように「Webサイトは表側（閲覧者が実際に見る）が良ければヨシ！」という訳ではなく、裏側のコードもとても重要です。
正しい意味のタグを使用してコーディングする事を「セマンティックコーディング」と呼びます。

セマンティックなHTMLとは？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>見た目は問題ない？</title>
    <style>
        .container { width: 80%; margin: auto; }
        .box { padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" style="font-size: 24px; font-weight: bold;">ようこそ！</div>
        <div class="box">これはサンプルページです。</div>
        <div class="box">
            <div style="font-weight: bold;">お問い合わせ</div>
            <div>メール: example@example.com</div>
            <div>電話: 123-456-7890</div>
        </div>
        <div class="box" style="text-align: center;">&copy; 2025 Sample Site</div>
    </div>
</body>

先程のコードを例に考えてみましょう。

Q.皆さんならどのようなコードを書きますか？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>セマンティックで書いてみた</title>
    <style>
        .container { width: 80%; margin: auto; }
        .box { padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; }
    </style>
</head>
<body>
    <header class="container">
        <h1>ようこそ！</h1>
    </header>
    
    <main class="container">
        <section class="box">
            <p>これはサンプルページです。</p>
        </section>
        
        <section class="box">
            <h2>お問い合わせ</h2>
            <address>
                <p>メール: <a href="mailto:example@example.com">example@example.com</a></p>
                <p>電話: <a href="tel:123-456-7890">123-456-7890</a></p>
            </address>
        </section>
    </main>
    
    <footer class="container box" style="text-align: center;">
        <p>&copy; 2025 Sample Site</p>
    </footer>
</body>
</html>

冒頭でお見せしたdiv祭からそれぞれ意味を持つタグになった事でコードの視認性が爆上がりしたと思いませんか？
特に顕著に表れているのが「addressタグ」で囲われている事でプログラム的に「あ、ここの文字列は連絡先を記載しているんだな」と一目で分かる内容になったのではないでしょうか。

実際の講習ではここから更に各タグの使い方などについて説明をしていきましたが、
今回の記事では長くなってしまう為割愛させて頂きます。

検索エンジンからも、エンジニアからも見て分かり易いコードを書けるように練習していきましょう！

後半戦は、疑似要素、疑似クラス、CSSの詳細度についてを解説！

疑似要素とは

要素の一部に対してスタイルを適用できる指定方法です。
※設定する場合は、コロン（：）2つ＋疑似要素名を記載します。

例えば、下記のようなHTMLを作成し、

pタグにfirst-line
h1タグにfirst-letter

それぞれ設定すると、一行目だけ太字や最初の一文字だけ赤色にする。
というような装飾を付けることが可能です。
　　　　　

疑似クラスとは

指定した要素が特定の状態の時にスタイルを適用する指定方法です。
※設定する場合は、コロン（：）1つ＋疑似クラス名を記載します。

例えば、下記のようにHTMLでメニューを作成後、

aタグに:hpverを設定すると

カーソルをあてた時のみ、緑色になるというような装飾を付けることが可能です。
　⇒　

詳細度とは

スタイルがどれが優先されるか（競合したとき）を決めるルールです。
「同じプロパティが複数のCSSに書かれているけど、どれが効くの？」というときに、詳細度の高い方が優先されます。

基本的にCSSは、上から下に記載しき、下に書いたものが継承、上書きされます。
しかし、詳細度が高い場合、上書きしたつもりでも上手く反映されないといった事象が発生します。詳細度を理解することで、そういった事態が発生した際に適切な対応が可能になります。

優先度の順位

インラインスタイル（style属性）
IDセレクタ
クラス／属性セレクタ／疑似クラス
要素名／疑似要素

※!importantは、どの要素よりも強く強制的に上書きされます

便利な覚え方
点数で表記する覚え方です。※合計点数が高い方が優先されます。

他にも3桁（0-0-0）で覚える方法もあります。

さて、では下記のように記述すると「テキスト」には何色が反映されるでしょうか。

　
…
　
……

　
―――― 正解は、赤色です！

親要素と子要素のセレクタを比較した際は、詳細度の点数に関係なく
子要素のセレクタが適用されます。

子要素、子孫要素にのみスタイル適用する方法

子要素、子孫要素にのみスタイルを適用したい場合に使う子セレクタ

子セレクタ（>）と子孫セレクタ（スペース）の違い

具体例

HTML
<div class="parent">
  <p>①直下のp</p>
  <div class="child">
    <p>②入れ子のp</p>
  </div>
</div>

子セレクタ

.parent > p {
  color: red;
}

これは「.parent の直下にある p」だけに適用→ ①には適用されるが、②には適用されない

子孫セレクタ

.parent p {
  color: blue;
}

これは「.parent の中にあるすべての p」に適用→ ①と② 両方に適用される

如何でしたでしょうか。
セマンティックデザインを意識し、その要素がどんな役割や意味を持っているのかを分かりやすくし、さらにCSSの詳細度や子セレクタ、子孫セレクタを活用することで思い通りにスタイルを適用することで、自分の作りたいものを、思い通りに作れるようになります！

オブジェクティブグループでは X の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up