コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
CSSセレクタと規則
このレッスンでは CSSセレクタと規則の適用のされ方について ご説明をします。 CSS規則、つまりCSSの記述については 大きく2つ。 「セレクタ」と 「CSS宣言」は「プロパティ」と 「値」のペアで成り立っています。 そのうちのセレクタに対する 説明なんですが、 「セレクタは、ページ上のいくつかの要素に 一致させるためのパターン」と いうことになります。 宣言ブロック。 複数のCSSの宣言ですね。 それがどの要素に適用されるかを 決めるということなんですが、 具体的にセレクタの書き方を ご紹介しましょう。 2つのCSS規則で h1 のほうの color、blue。 h3 も color は blue ですね。 ちょっとこの h1 のほうを 削除してしまいましょう。 そして保存します。 ブラウザで見ると当然 h1のテキスト、タイトルはこれは 黒に変わってしまいました。 さてそこでセレクタなんですけれども セレクタは要素1個だけとは限りません。 複数あってもいいんですね。 あるいは h1 に対するスタイルは 全部ひとつの宣言ブロックに 固めなければいけないということも ありません。 どういうことかというと、ここに h1 も blue にしてね、ということで カンマ区切りで指定します。 それからこの部分ですね。 「セレクタは」という所。 strong になっていますね。 これも加えましょう。 カンマ区切りで strong と。 こうするとこの3つの要素については 文字カラーはブルーになります。 保存をして確かめます。 h1がブルーになるとともに 強調のstrongですね。 これもブルーになりました。 今度はセレクタを増やしたいと思います。 ここで ul の要素ですね。 ul はここにひとつあって、1組あって、 それから li の中に 入れ子の ul もあります。 ですからこの両方に 適用されるんですけれども ul で list-style と。 list-style で none と。 「ありません」ということですね。 「なし」という指定をします。 これで保存します。 そうすると、li要素すべての 前にあった印が消えてしまいました。 でもこの入れ子になってるほう、 こちらだけは白丸をつけたいなと 思ったとしましょう。 これもセレクタで設定することができます。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。