オタクでもわかるCSS入門

2025年11月1日web

アイドルオタクや声豚はたまにCSSが必要になるときがありますよね？

え？無い？

必要ある人向けにクッソ簡単に説明していきます。

CSSとは

CSS（シーエスエス）とは、ウェブページの「見た目」や「デザイン」を担当するものです。

家づくりに例えると、わかりやすいです。

• HTML（エイチティーエムエル）: 「ここに柱を立てる」「ここに壁を作る」「ここにドアを置く」といった、家の「骨組み」や「部品」を決めるものです。
• CSS（シーエスエス）: 「壁の色を青く塗る」「ドアを木製にする」「窓の形を丸くする」といった、その骨組みや部品を「どう飾るか（デザインするか）」を決めるものです。

HTMLだけだと、文字や画像がただ上から順に並んでいるだけで、とてもシンプルです。 そこにCSSを使うことで、「この文字は赤色で大きくする」「この写真は右側に置く」「背景を水色にする」といった指示を出し、私たちが普段見ているような、きれいで読みやすいウェブページのデザインを作ることができます。

webサイトはHTML(文字情報)とCSS(デザイン情報)に分かれてるという感じですかね。
つまりはwebサイトのデザインをCSSを使用して変更してやろうぜ！という話です。

まあ簡単に言うと、HTML内にある住所です。
田中さんちは赤色の屋根にしましょう、鈴木さんちは青色の屋根にしましょうをするためには田中さんちの住所がわからんとできませんよね？
なので、住所を特定する必要があります。

CSSの書き方

CSSセレクター

まずは上記でいう住所の特定するをします。

この住所のことをCSSセレクターと呼ぶらしいです。

HTMLは

<タグ名 属性名="内容" 属性名="内容".../>

<タグ名 属性名="内容" 属性名="内容"...>もじれつ</タグ名>

という内容で記載されます。

上記のHTMLの場合CSSセレクターは以下のように記載します。

タグ名[属性名="内容"]

では実際にやってみましょう。

まずchromeかなんかでF12を押して開発者ツールを開きましょう。

1. のアイコンをクリックし
2. の画像にマウスオーバーすると色が変化します。
3. 2をクリックするとその画像のHTMLが表示されます

開発者コンソール上でctrl+Fを押してさっきの方法で特定したCSSセレクターを入力しましょう。

すると…

検索結果が61件もでるし、さっき指定した画像が指定されません…
img[width="320″]で指定すると、同じ住所の子が61人もいることになります。
これを絞るには三つ方法があります。

1. ユニークな要素(他と重複しない要素)を指定する
   • これが一番確実ですね
     • 例：img[alt="Thumbnail of post image 066″]
2. 他要素 > 本要素 と他の要素との関係性を記述する
   • 次に確実性が高いのがコチラ。親がユニークな要素を持っていればそれにあやかれます。親の七光り的な？
     • 例：a[href="https://xn--nzwp98desh.com/post/2025/02/15/11553/"] > img[width="320″]
       • 補足：現実の住所と同じで、"新宿"という地名はたくさんありますけど、東京都 > 新宿 だと新宿区が確定します。
3. スペースで区切って、違う要素を複数記述する
   • おなじタグ内の複数要素もしくは、親、またはその親の要素と組み合わせてやれます。
     • 例：div[class="toc grid clearfix"] img[width="320″]
       • 補足：東京都に新宿という地名は結構あります。 が何区だか何市の新宿かわからない時に便利です。
         “東京 新宿" だと新宿区はもちろん、葛飾区のにいじゅくや豊多摩郡の内藤新宿町も引っかかります。
         区とか市とかと言った直接の親のくくりをスキップできるのは大きいですが、結果が増えるのがボトルネックです。
         注意としては、左から順番に大きい区分の要素を入れてください。 “新宿 東京"とかだと引っかかりあません。

<div class="family">
    <div class="babba" assets="false">
        <p>資産はないよ</p>
        <div class="mamma" lang="kansai">
            <p>ほな、長生きしぃや、年金もらいまくりましょうか</p>
            <p>ガキ、あんたらのあしたの予定おしえーや</p>
            <div class="wai" wizard="true">
                <p>明日はselene b2にライブを見に行きます。</p>
            </div>
            <div class="otoutto" girl-friend="true">
                <p>彼女とデートです。</p>
            </div>
        </div>
    </div>
</div>

CSSで装飾する

さっきのHTMLをブラウザで見てみましょう

そっけないですね。これを実際に装飾しましょう。

CSSの書き方は

div[class="wai"] {
        text-align: right;
    }

のようになります。

CSSセレクター {
    設定する項目: 具体的な内容;
}

となります。

text-alignはテキストの位置を変更する項目であり、rightはそのまま右を示しています

そのため、これを実行すると

となります。

設定する項目と具体的な内容は調べれば出てきます。
検索ワードとしては “CSS 色変更" とか “CSS 位置変更"とかでしょうか。

では実際にCSSを使用し、上記をライン風にしてみましょう。

/* チャット画面全体の背景 */
div[class="family"] {
    background: #79bde8;
    /* ライン風の空色 */
    padding: 10px;
}

/* 全ての発言（pタグ）の共通スタイル */
div[class="family"] p {
    display: inline-block;
    /* 吹き出しの幅を文字数に合わせる */
    padding: 8px 12px;
    /* 吹き出しの内側の余白 */
    border-radius: 15px;
    /* 吹き出しの角を丸くする */
    margin: 4px 0;
    /* 吹き出しの上下の余白 */
    max-width: 70%;
    /* 吹き出しの最大幅 */
    background: #fff;
    /* 相手の吹き出し色（白） */
    word-wrap: break-word;
    /* 長い文章で折り返す */
}

/*マッマの発言を縦に並べる*/
div[class="mamma"] > p{
    display: flex;
}

/* 自分の発言（.wai）の親要素 */
div[class="wai"] {
    text-align: right;
    /* 中身（吹き出し）を右に寄せる */
}

/* 自分の吹き出し（.wai の中の pタグ） */
div[class="wai"] p {
    background: #8de055;
    /* 自分の吹き出し色（緑） */
}

情から{}内で複数使うときは;で区切ることや、/* */内の文字列は自分用のメモとして、何の影響も及ぼさないということも変わってもらえたでしょうか。

CSSセレクターをもっと簡単に書く

実はもっと簡単に書けます。

<div class="mamma" lang="kansai">はdiv.mammaでいけます。
属性名がclassの場合は.を使用し、.mammaってやれます。タグ名(ここでいうdiv)も不要です。

また属性名がidの場合は#mammでやれます。

さいごに

僕が書いた内容はさわりしか書いてないので、詳しく知りたい方は調べたり、本読んだりして学んでください

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

SBクリエイティブ

• Amazonで探す
• 楽天で探す
• Yahooショッピングで探す

関連記事

オタクでもわかるXPath入門

アイドルオタクや声豚はたまにXPathが必要になるときがありますよね？ え？無い？ 必要ある人向けにク ...

 https://xn--nzwp98desh.com/post/2025/11/01/11848/