Print Friendly, PDF & Email

ここでは、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>

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

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

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

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

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

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

#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>

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

<li class="content">

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

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

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

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

.content

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

div

次に「div」です。

<アウトプット>

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

<ソースコード(一部抜粋)>
        <style>
            #content
            {
                width: 500px;
                height:300px;                    
                background-color: gray
            }
        </style>
    </head>
    <body>
        <div id = content>
            <ul>
                <li>ひつまぶし</li>
                <li>味噌カツ</li>
                <li>カレーうどん</li>
            </ul>
        </div>
    </body>

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

単位はpx(ピクセル)になります。

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

逆に言えば、<div></div>のように要素を空にする使い方はルール違反です。

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

例えば、リストを中央ぞろえにするにはどのようにすればよいか分かりますか?

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

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

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

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

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

span

最後に<span>です。

<ソースコード(抜粋)>
        <ul>
            <li>ひつまぶし</li>
            <li>味噌カツ</li>
            <li><span style="color:yellow" >カレー</span>うどん</li>
        </ul>

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

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

【今回の復習Youtube】

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