パーフェクト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デザイン:著すみけんたろう