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

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

6.セレクタ

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

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

id

まずは「id」について。

<ソースコード(抜粋)>

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

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

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

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

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

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

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

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

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

class

次に「class」です。

 <ソースコード>

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

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

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

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

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

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

div

次に「div」です。

<アウトプットイメージ>

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

<ソースコード(一部抜粋)>

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

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

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

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

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

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

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

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

span

最後に<span>です。

<ソースコード>

 

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

セレクタの詳しい説明はこちらのサイトも参考にしてみてください。

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

 

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