スタート!CSS入門

疑似要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
疑似要素の中に含まれる:before疑似要素と:after疑似要素は、ある要素に含まれる内容の前後に別の内容を生成するために使います。内容の生成には、contentプロパティを組み合わせます。ここでは、これらの組み合わせ方について紹介します。
講師:
05:14

字幕

このレッスンでは HTML では定義しないでCSS 側で要素のように指定して扱える疑似要素について紹介します。疑似要素を使うと最初の行や最初の文字だけにスタイルを設定できます。疑似要素は大きく分けて三種類あります。1つ目は first-line疑似要素です。これは指定したセレクタの一行目のみを対象にします。実際に CSS を書いてみましょう。編集画面とウェブブラウザを並べて開きます。ここではコードを編集するID の機能を使って編集内容をリアルタイムにウェブブラウザでプレビューできるように設定しています。ウェブブラウザの上部にはそのための注意文が表示されていますが無視してください。通常は editor でコードを書き換えてからウェブブラウザで再読み込みをすると編集内容が反映されます。まず first-line 疑似要素を使ってみましょう。first-line 疑似要素を使うにはまず基準となるセレクタを書きコロンの後に first-lineと書きます。ここでは p 要素こちらをセレクタにしてみましょう。まず基準となる p 要素を記述しそのあとにコロンそして first-lineと入力します。 first と line の間にはハイフンが入ります。このセレクタに対して背景色を設定します。背景色は山吹色になるように設定してみましょう。ウェブブラウザを見ると first-line疑似要素でp 要素の一行目の背景色が山吹色に変わってることがわかります。p 要素全体に対しては背景色がつかずに一行目のみ背景色がついていますね。なお、指定したセレクタの一行目という領域がどれくらいの範囲になるかについてはウェブページの幅font-size を含む多数の要因に影響を受けます。例えばここではウェブブラウザの幅を変更するとp 要素の一行目という領域が少し狭くなりました。これによって背景色が適用される領域も変わったことがわかります。ウェブページ全体の幅が変わるとそれに伴って1行目の領域も変動するこのことも覚えておきましょう。疑似要素のリストに戻ります。二つ目の first-letter 疑似要素は指定したセレクタの一文字目のみを対象にします。実際に CSS を書いてみましょう。編集画面とウェブブラウザを並べて開きます。first-letter 疑似要素を使うにはまず基準となるセレクタを書きコロンの後に first-letterと書きます。 先ほどの first-line と同じような書式です。ここでは先ほどと同じくp 要素をセレクタにしましょう。p 要素の次にコロンそしてfirst-letter です。first-line と同じようにfirst と line の間はハイフンで結びます。こちらのセレクタに対して今度は font-size を指定します。ここでは font-size に36 ピクセルを指定しましょう。ウェブブラウザを御確認ください。p 要素の一文字目こちらの font-size が 36 ピクセルになりました。疑似要素のリストに戻ります。最後の項目であるbefore / after 疑似要素は一部の古いブラウンで動作しない点を考慮してここでの紹介は割愛します。このレッスンで紹介したfirst-line 疑似要素もfirst-letter 疑似要素はblock-container 要素という一部の要素にしか適用できません。また指定できるプロパティも背景関連や font 関連など一部のプロパティに限られていますので注意してください。なお、これらの疑似要素は現在一般に最も普及しているCSS2.1 に基づくもので他のバージョンでは若干異なることに注意してください。 またこのレッスンでは疑似要素のセレクタをすべて タイプセレクタつまり要素で表現しましたがクラスセレクタ、 ID セレクタなどのセレクタでも併用し組み合わせることができます。このレッスンでは HTML では定義しないでCSS 側で要素のように指定して扱える疑似要素について学びました。

スタート!CSS入門

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

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

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

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

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