５．スタイルを適用する対象をセレクタで広げる

ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

前回は、「スタイルを設定して表現力アップ」方法を学びました。

今回は、そのスタイルを適用する対象の指定のやり方です。

セレクタ

セレクタの「id」や「class」を指定することで、特定の要素を選択できます。

特定の要素だけにCSSで装飾したい時に便利です。　

id

まずは「id」について。

＜ソースコード（抜粋）＞

        <style>
            #miso
            {                
                color:brown;
            }
        </style>
    </head>
    <body>
        <p>ひつまぶし</p>
        <p id ="miso">味噌カツ</p>
        <p>カレーうどん</p>
    </body>

<style>

#miso

{

color:brown;

}

</style>

</head>

<body>

<p>ひつまぶし</p>

<p>カレーうどん</p>

</body>

属性の書き方は、開始ダクの中に以下のように書きます。

<p id ="miso">味噌カツ</p>

1	<p id ="miso">味噌カツ</p>

ここで付けたid名はこのファイルでは1つしか付けることができません。

identification（身分証明書）の略ですからそのHTMLソース中では唯一の要素に付けます。

あなたと全く同じ免許証やパスポートを持っている人がいないように、id名は１つのサイトで唯一無二のものになります。

idをスタイルで指定するにはid名の先頭に「#」をつけます。

#miso

#miso

それにより、<p>の中の味噌カツの文字色だけを変更することができました。

id名をつけることでHTMLの特定の要素を選択することができるようになりました。

しかし、この機能はJavaScriptでプログラミングする際に活きるのです。

HTML単体ではあまり活躍の場はありません。

HTMLでは主として以下のClassを使うことが一般的です。

class

次に「class」です。

＜ソースコード＞

        <style>
            .content
            {                
                text-align: center;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="content">ひつまぶし</li>
            <li class="content">味噌カツ</li>
            <li class="content">カレーうどん</li>
        </ul>
    </body>

<style>

.content

{

text-align: center;

}

</style>

</head>

<body>

<ul>

<li class="content">ひつまぶし</li>

<li class="content">カレーうどん</li>

</ul>

</body>

属性の書き方は、開始ダクの中に以下のように書きます。

<li class="content">

1	<li class="content">

“class”は先ほどの“id”とは違い、

ファイル内に同じclass名を複数付けることができます。

学校のクラスにも色々な人がいてもいいようにクラスには複数の要素が属することができますね。

classをスタイルで指定するにはclass名の先頭に「.」をつけます。

.content

.content

それにより、同じクラスの文字を中央揃えにすることができました。

div

次に「div」です。

＜アウトプット＞

アウトプットをブラウザで見る

＜ソースコード（一部抜粋）＞

        <style>
            #content
            {
                width: 500;
                height:300;                    
                background-color: gray
            }</style>
    </head>
    <body>
        <div id = content>
            <ul>
                <li>ひつまぶし</li>
                <li>味噌カツ</li>
                <li>カレーうどん</li>
            </ul>
        </div>
    </body>

<style>

#content

{

width: 500;

height:300;

background-color: gray

}</style>

</head>

<body>

<ul>

<li>ひつまぶし</li>

<li>カレーうどん</li>

</ul>

</div>

</body>

幅と高さを指定してバックグラウンドの色をグレイにしています。

<div>はこのように要素を囲うために使われます。

また、<div>にidを振ってスタイルを適用させることもよくあります。

ちなみに“div”はdivision（部分）の略です。

単体では特に意味を持たないタグですが、囲った部分をブロックレベル要素としてグループ化することができるタグです。

ブロックレベル要素とはその名の通りブロックのような要素です。

ブロックのように縦に積み重ねることができます。

次の<span>と比較してください。

span

最後に<span>です。

＜ソースコード＞

            <ul>
                <li>ひつまぶし</li>
                <li>味噌カツ</li>
                <li><span style="color:yellow" >カレー</span>うどん</li>
            </ul>

<ul>

<li>ひつまぶし</li>

</ul>

「カレーうどん」の“カレー”という３文字だけを黄色にしています。

<span>も単体では特に意味を持たないタグですが、

囲った部分をインライン要素としてグループ化することができるタグです。

一部分の見た目を変えたいときなどに使います。

インライン要素とは、その名の通りブロックレベル要素内で使われる要素です。

ブロックのようには積み重ねることはできない要素です。

以上、今回は「id, class, div, span」について学びました。

次回は「リンクを張って回遊性を高める」方法について学びます。

新人エンジニア向けHTML講座の一覧に戻る

MENU

セレクタ

id

＜ソースコード（抜粋）＞

class

＜ソースコード＞

div

＜アウトプット＞

＜ソースコード（一部抜粋）＞

span

＜ソースコード＞

新入社員研修ポータル

ZOOMを使った遠隔研修メニュー（PDFが開きます）

新人エンジニアのためのJavaタイピングゲーム

新人プログラマのためのプログラミング動画

お問い合わせはこちらから

新入社員研修ポータル