はじめてのHTML&CSS入門

色々なセレクタ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
基本的なセレクタに加えて、CSSには便利なセレクタが用意されています。実際によく使われるセレクタをピックアップしてみました。
講師:
05:21

字幕

このレッスンでは CSS の色々なセレクターについて学びます。CSS には様々なセレクターがあります。今回はチャプター3レッスン4のファイルを開いて記述をしていきます。それでは style.css の方のファイルに既にコメントが入っています。CSS では、この様にコメントを入力します。開始を /*そして、終点で */ と入力をするとこの記述はコンピューターには無視をされて人間のメモ書きとなります。では子孫セレクターを早速書いていきましょう。それでは今回は #main半角スペースを打って pそして半角スペース { 改行そして色味をコントロールするcolor のプロパティそして色味は #009900グリーンを入力しておきます。それでは、上書き保存をしてHTML ファイルの方も見てみましょう。さて、先程の #main はid="main" のことです。そして、半角スペース p とは main の中に含まれている p ということになります。この様に書くとmain の p と footer に入っている p を場合分けすることができます。この HTML を GoogleChrome で見てみましょう。 コンテキストメニューを開いてOpen in Browser を押します。この様に main の中に含まれている p だけがグリーンになってることが確認できました。それでは Sublime Text に戻りスタイルシートに次のセレクターを記述します。今回は p 、そして そして em 、そして }そしてまた color を記述します。color: #cc0000にしてみましょう。そして Command+S で上書き保存そして HTML に戻りましてコンテキストメニューからOpen in Browser をしてみます。そうしますと、p の中に入っている emという風に子供のセレクターを指定することができます。この子供セレクターは子孫セレクターと違いp の中に階層がどんどん深くなった時1つ目の階層までつまり直属の子供だけをセレクトすることができるセレクターです。それでは Sublime Text に戻りましょう。style.css の中の子孫セレクターと隣接セレクターという所に記述をしていきます。#main これは id="main" ですね。そして h3 ここまでは子孫セレクターです。そして、ここに +そして pそして { の改行からcolor を指定していきます。 #fc0 と打ちましょう。実はこの fc0 は、ffcc00 の省略形です。この様に省略できることも覚えておきましょう。では、この結果どうなるかを見ていきます。Command+S で保存そして HTML の方に戻りまして右クリックから Open in Browserこの様になりました。この隣接セレクターの特徴はh3 のすぐお隣にあるもののみ適用する、という効果を持っています。ですので、終点が p であってもh3 の1つ下の p だけの色は変わりその下の p は元のグリーンのままになっています。また、CSS は上書きができるということも覚えておきましょう。最初 id="main" の p で全部が緑になっていたものを後から書いた id="main" のh3 + p という隣接セレクターで上書きをしました。このレッスンでは CSS の色々なセレクターを学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

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

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

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

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