
- オススメCSS解説本

- CSSのメリット
- 利用手順
- HTMLとCSSの関係
- スタイル設定
- 継承
- カスケード
- 疑似クラスと疑似要素
- マージンとパディング
- 数値単位

- メニュー作成
- コンテンツ作成
- タイトル作成
疑似クラスと疑似要素 疑似クラスと疑似要素ってなぁに?
疑似クラスとは??
要素名や、属性等で分類出来ない性質に対してスタイルを設定するためのものです。主に、以下のような疑似クラスがあります。
- :link
- まだ見ていないページへのリンク
- :visited
- すでに見たページへのリンク
- :hover
- マウスカーソルが要素と重なっている時(アクティブではない時)
- :active
- リンク部分を選択した瞬間(クリックした瞬間)
- :focus
- 対象にフォーカスが移った時
- :lang(言語コード)
- ()内の言語コードが設定された要素
疑似クラスを使うと、リンクが設定されている要素内容のカラーを訪問状況により変えることが出来ます。注意すべきは、リンクに関する疑似クラスを使う時に、「a:link」⇒「a:visited」⇒「a:hover」⇒「a:active」の順番で設定することです。
a : link { color : #000000 ; }
a : visited { color : #000000 ; }
a : hover { color : #000000 ; }
a : active { color : #000000 ; }
疑似要素とは??
要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加するためのものです。主に、以下のような疑似要素があります。
- :first-line
- 要素の表示されている最初の1行に適応
- :first-letter
- 要素の最初の1文字に適応
■ :first-lineについて
h2 { font-size : 12px ; }
h2:first-line { font-size : 15px ; }
−
<h2>CSS徹底分析!!<br>-CSSを完全マスター-</h2>
「CSS徹底分析!!」までが、15pxで表示され、「CSSを完全マスター」が12pxで表示される。
CSS徹底分析!!(15px)
-CSSを完全マスター- (12px)
■ :first-letterについて
h2 { font-size : 12px ; }
h2:first-letter { font-size : 15px ; }
−
<h2>CSS徹底分析!!</h2>
「C」までが、15pxで表示され、「SS徹底分析!!」が12pxで表示される。
CSS徹底分析!!(C:15px/他:12px)
※:first-lineと:first-letterを組合わせて使うことは可能ですが、「first-letter」が「first-line」より後に、適用されるので、
h2 : first-letter { color : red; }
h2 : first-line { color : blue; }
と設定しても、最初の1文字目は赤になります。
