ITエンジニアのプレイングマネージャー化応援サイト

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

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

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

前回は、「スタイルを設定して表現力アップ」方法を学びました。
 
今回は、そのスタイルを適用する対象の指定のやり方です。
 

セレクタ

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

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

id

まずは「id」について。

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

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

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

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

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

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

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

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

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

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

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

class

次に「class」です。

 <ソースコード>

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

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

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

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

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

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

div

次に「div」です。

<アウトプット>

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

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

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

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

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

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

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

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

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

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

span

最後に<span>です。

<ソースコード>

 

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

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

 

 

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

新入社員研修ポータル

IT企業の人財育成に関することなら全てお任せ下さい TEL 0120-559-463 受付時間 10:00 - 17:00 (土・日・祝日除く)

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

ZOOMを使った遠隔研修

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

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

YouTubeチャンネル

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

    お名前 (必須)

    メールアドレス (必須)

    題名(件名)

    メッセージ本文

    確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。

    新入社員研修ポータル

    PAGETOP
    Copyright © Say Consulting Group, Inc. All Rights Reserved.