スタート!CSS入門

クラスセレクタ/IDセレクタ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLの中でも任意に設定した特定の要素に対してスタイルを付加するときは、クラスセレクタ/IDセレクタを使用します。ここでは、両セレクタの書き方や注意点を紹介します。
講師:
09:00

字幕

このレッスンでは任意に設定した特定の要素に対してスタイルを設定するときに使うクラスセレクタとID セレクタについて紹介します。クラスセレクタや ID セレクタは例えばHTML 内の全ての p 要素ではなく特定の p 要素だけを対象にしたいときなどに使います。実際に CSS を書いてみましょう。編集画面とウェブブラウザを並べて開きます。ここではコードを編集するIDE の機能を使って編集内容をリアルタイムにウェブブラウザでプレビューできるように設定しています。ウェブブラウザの上部にはそのための注意文が表示されていますが無視してください。通常はコードを書き換えてからウェブブラウザで再読み込みをすると編集内容が反映されます。まずはクラスセレクタを使ってみましょう。クラスセレクタを使うには HTML で対象にしたい要素のクラス属性にクラス名を設定します。ここでは冒頭の p 要素に対してcaution というクラスを設定します。クラス名には自分の好きな名前を付けてもいいですがあとで見直して際にどういう役割のクラスだったのかわかりやすいようにその内容を表す名前にするといいでしょう。クラスは要素に限らず複数設定することができますので一番上の h1 要素に対しても設定してみます。 これでクラスの準備ができました。次に CSS を書きましょう。クラスセレクタを指定するにはピリオドに続いてクラス名を書きます。ここでは caution クラスに対して文字色をシンクに設定してみましょう。caution クラスの文字色がシンクになりました。クラスが設定されていない要素の文字色は前のままです。クラスセレクタでは要素と関連づけて指定することもできます。例えば h1 要素の caution クラスだけを指定するには要素名に続けてピリオド、クラス名を書きます。文字色を深緑にしてみましょう。このように caution クラスの中でもh1 要素のみを対象として文字色を変更できました。また、クラスは一つの要素に対して複数設定できます。先ほど caution クラスを追加した p 要素にnotice という別のクラスを設定します。複数のクラスを設定するときは半角スペースでクラス名を区切ります。notice クラスに設定するスタイルがわかりやすいようにh2 要素にも設定します。notice クラスには下線を引くスタイルを追加してみましょう。notice クラスに下線を追加できました。さらにクラスセレクタでは複数のクラスを同時に指定できます。 ここまで書いた caution クラスとnotice クラスを同時に指定してみましょう。ピリオド、クラス名を書いた後にさらに続けてピリオド、クラス名を書きます。このようなクラスセレクタでは両方のクラスを持つ要素にだけスタイルが適用されます。試しに背景色を山吹色にしてみましょう。caution クラスと notion クラスを両方指定しているp 要素にだけ背景色が設定されました。続いて ID セレクタを使ってみました。ID セレクタはクラスセレクタと違って同じ HTML 内で唯一の要素を対象にするときに使います。そのため同じ ID は1つの HTML の中で一回しか使えません。ID セレクタを使うには HTML で対象にしたい要素の ID 属性にID 名を設定します。ここでは header 要素に bar というID 名を設定します。ID 名にはクラス名と同様に自分の好きな名前をつけて構いませんが1つの HTML の中で重複しないように注意します。これで ID の準備ができました。次に CSS を書きましょう。ID セレクタを指定するにはシャープに続いてID 名を書きますここでは bar ID に対して背景色をグレーに設定してみましょう。 bar ID の背景色がグレーになりました。ID セレクタはその性質上1つの HTML の中で同じ ID を一度しか使えないのでheader や footer など1つのページに必ず1つしか存在しない要素に対して使うと良いでしょう。また、一つの要素に対して複数の異なる ID を設定することもできません。なお、クラスセレクタと ID セレクタで同じ名前を使うことは可能です。混乱の原因になりがちですので実際に同じ名前にすることはさけることをお勧めします。ここまでクラスセレクタとID セレクタを紹介しましたがそれぞれの名前には一定の制限があります。次のリストを御覧ください。クラス名と ID に使えるのはアルファベット、数字ハイフン、アンダースコア―です。また、アルファベットの大文字小文字は区別されます。また、クラス名と ID 名の始まりは数字、二つのハイフンハイフンの直後の数字では始められませんクラス名と ID 名は HTML の仕様にも制限を受けます。例えば、 HTML4 ではID 属性はアルファベットで始まる必要があるためCSS2.1 では可能な先頭のハイフンアンダースコアは使えません。HTML と CSS のバージョンの組み合わせに注意が必要になります。 なお、この注意点は現在一般に最も普及しているCSS2.1 に基づくもので他のバージョンでは若干異なることにも注意してください。このレッスンでは任意に設定した特定の要素に対してスタイルを設定するときに使うクラスセレクタとID セレクタについて学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。