コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
IDセレクタを使う
このレッスンでは、 IDセレクタの使い方について ご説明をします。 HTML要素に与えた id属性の値によって、 それをセレクタとして要素を選択します。 「単純セレクタ」のひとつです。 構文はと言うと、「#」ですね、 井桁のあとにid属性に与えた値、 つまり、ID名を指定すればいいです。 ID名というのは文章の中で固有、 一意とも言いますけれども、 ユニークな値ですね。 文章の中にひとつしか そのID値を持つ要素はありません。 ですから、特定の要素を選ぶのには 最も効率的だと言えます。 今、開いているHTMLドキュメントには スタイルの指定はしてあります。 CSS規則は書いてありますね。 けれども、使っているセレクタは 単純な要素セレクタ、 「型セレクタ」とも言いますけれども、 それとクラスセレクタだけです。 まだIDセレクタは使っていません けれども、このbody要素の中は、 すでにid属性が2つ設定されています。 h1 に id として id-selector、 h3 に id として syntax とありますので、 IDセレクタを使うことができます。 そして、このドキュメントの中、 h1、h3 はそれぞれ ひとつずつしかありませんから、 代わりにこのIDセレクタを使っても 大丈夫ということですね。 ですから、h1 を消してしまって #id-selector ですね。 それから h3 は消してしまって、 #syntax と。 こちらの h1 も同じですね。 #id-selector というふうにしてしまっても 同じですね。 結果は変わりませんけれども 確認しておきましょう。 ファイルを保存します。 h1 と h3 の文字色が青で、 h1 の方は左側に太い線が引いてあります。 先ほどと変わらない表示になっていますから IDセレクタが 有効に働いているということですね。 id-selector の方は 固有のスタイルがありますので、 同じようにこの syntax の方も syntax固有のスタイルを設定しましょう。 #syntax というふうにして、 ここはフォントファミリーを 設定しましょうか。 font-family ということで、 構文なんで、monospace、 いわゆる等幅ですね、に 設定したいと思います。 これで確認しましょう。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。