読者です 読者をやめる 読者になる 読者になる

flandlescarlet's diary【情報工学生の備忘録】

元機械工学科所属だった情報工学生です。JavaScriptで適当に何かを作ったり、絵を描いていたりします。

パーフェクトCSSテクニック1

一般的でないセレクタの使用方法

htmlは文書の構造を示し、CSSはデザインを取り繕う。

今回はそのCSSについて深く見てみることにしました。

普段使わない書き方も意外と使ってみれば、実用性があるかもしれません。

自分のCSSの復習とともに記述していきます

 

 

基本的な記述のルール

コメントの書き方

 /* この範囲をコメントアウト改行をしても効果は続く */

小文字を優先して使う

 p{font-size: 18px;} 〇

P{FONT-SIZE: 18PX;} △

 

宣言の衝突時の優先順位

  • 後者に記述したものが反映される
  • 要素の数やid名やclass名での順位で決まる
  • !important 宣言があるとそれが適用される
  • ユーザースタイルシートが一番に優先される

基本的な記述

 *{ font-size: 18px; } /* 全ての要素に適用 */

p{ font-size: 18px; } /* pタグ全てに適用 */

.design{ font-size: 18px; } /* クラス名がdesignに全て適用 */

#design{ font-size: 18px; } /* ID名がdesignに全て適用 */

p.design{ font-size: 18px; } /* pタグのクラス名designに適用 */

p#design{ font-size: 18px; } /* pタグのID名designに適用 */

p strong{ font-size: 18px; } /* pタグの中のstrongタグ以降に適用(子孫セレクタ) */

p > strong{ font-size: 18px; } /* pタグの中のstrongのみ適用(子セレクタ) */

p + strong{ font-size: 18px; } /* pタグの後に出てくるstrongタグにのみ適用(隣接セレクタ) */

p , strong{ font-size: 18px; } /* pとstrongタグ全てに適用 */


p.design , h1.design + div#design p.num strong { font-size: 18px; }

/*=====================================================*/
/* <p class="design">・・・(1) */
/* */
/* <h1 class="design">本題</h1> */
/* <div id="design"> */
/* <p class="num"><strong>〇適用〇</strong></p> */
/* </div> */
/*=====================================================*/

 リンクの設定(類似クラス)

/* リンク先に関する設定*/

 a:link{ color: #F00;} /* まだ表示したことのないリンクの色を#F00に */

a:visited{ color: #F00;} /* 既に表示されたことのあるリンクの色を#F00に */

a:active{color: #F00;} /* マウスで選択している時のリンクの色を#F00に */

/* JavaScript関連の仕様*/

a:active{color: #F00;} /* マウスで選択している時のリンクの色を#F00に */

a:hover{color: #F00;} /* マウスが上に来てる時のリンクの色を#F00に */

a:focus{color: #F00;} /* フォーカスがある時のリンクの色を#F00に */

 

 おそらくこれらの適用が最低限の常用での使用範囲だと思います。

時には<a href="#"></a>と<a name="#"></a>がある時同じアンカーでも

hrefだけに適用させたい場合や

最初の一文字、一行だけに表示させたいなど、様々な適用方法があります

次回に記していこうと思います

 

【参考図書】

スタイルシートWebデザイン:著すみけんたろう