新入社員ここでは、IT系企業の新入社員向けにHTMLを解説しています。デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。前回は、「スタイルを設定して表現力アップ」方法を学びました。今回は、そのスタイルを適用する対象の指定のやり方です。セレクタセレクタの「id」や「class」を指定することで、特定の要素を選択できます。特定の要素だけにCSSで装飾したい時に便利です。idまずは「id」について。="miso">味噌カツ</p><p>カレーうどん</p></body>属性の書き方は、開始ダクの中に以下のように書きます。="miso">味噌カツ</p>ここで付けたid名はこのファイルでは1つしか付けることができません。identification(身分証明書)の略ですからそのHTMLソース中では唯一の要素に付けます。あなたと全く同じ免許証やパスポートを持っている人がいないように、id名は1つのサイトで唯一無二のものになります。idをスタイルで指定するにはid名の先頭に「#」をつけます。#miso1#misoそれにより、<p>の中の味噌カツの文字色だけを変更することができました。id名をつけることでHTMLの特定の要素を選択することができるようになりました。この機能はJavaScriptでプログラミングする際に活きるのです。HTML単体ではあまり活躍の場はありません。HTMLでは主として以下のClassを使うことが一般的です。class次に「class」です。class="content">カレーうどん</li></ul></body>属性の書き方は、開始ダクの中に以下のように書きます。class="content">“class”は先ほどの“id”とは違い、ファイル内に同じclass名を複数付けることができます。学校のクラスにも色々な人がいてもいいようにクラスには複数の要素が属することができますね。classをスタイルで指定するにはclass名の先頭に「.」をつけます。.content1.contentそれにより、同じクラスの文字を中央揃えにすることができました。div次に「div」です。content><ul><li>ひつまぶし</li><li>味噌カツ</li><li>カレーうどん</li></ul></div></body>幅と高さを指定してバックグラウンドの色をグレイにしています。<div>はこのように要素を囲うために使われます。<div>にidを振ってスタイルを適用させることもよくあります。ちなみに“div”はdivision(部分)の略です。単体では特に意味を持たないタグですが、囲った部分をブロックレベル要素としてグループ化することができるタグです。ブロックレベル要素とはその名の通りブロックのような要素です。ブロックのように縦に積み重ねることができます。次の<span>と比較してください。span最後に<span>です。>カレー</span>うどん</li></ul>「カレーうどん」の“カレー”という3文字だけを黄色にしています。囲った部分をインライン要素としてグループ化することができるタグです。一部分の見た目を変えたいときなどに使います。インライン要素とは、その名の通りブロックレベル要素内で使われる要素です。ブロックのようには積み重ねることはできない要素です。span」について学びました。次回は「リンクを張って回遊性を高める」方法について学びます。確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。