web制作の前に知っておきたい!破たんしやすいCSSとは


HTML構造に依存しているCSS

webサイトは作って終わりではなく、そのあとも運営していくことが普通です。運営していくなかではサイトの仕様やデザインが変わることもあります。そんなときに、HTML構造に依存したCSSを書いていると修正の手間が増えてしまいます。HTML構造に依存しているというのは、子孫セレクタや要素セレクタを多用して、HTMLマークアップの親・子・孫の関係通りにセレクタを書いてしまうということです。たとえば、「#sidenav < ul < li < a < span {color:red;}」のような書き方がHTML構造に依存したものになります。HTML構造に依存したセレクタを避けるためには、classセレクタを使ってCSSを書く方法が有効です。

スタイルを取り消しているCSS

スタイルの取り消しというのは、一度定義したスタイルを後から「0」や「none」といった値で上書きするということです。基本的にスタイルは取り消すよりも追加していくほうが、コードが複雑になるほど無駄なコードが少なくて済みます。

絶対値を多用したCSS

絶対値での指定というのは、フォントサイズなどを「px」の単位で指定するということです。たとえば、それぞれの要素の文字の大きさをpxによる絶対値で指定している場合、全体の文字の大きさを変えるにはそれぞれの文字の大きさを変更しなければなりません。しかし、「em」や「rem」など相対値での指定であれば、親要素やルート要素の文字の大きさを変えるだけで子要素や全ての要素の文字の大きさも変えることができます。

コーディングとは、コンピューターでプログラムを作ること、または文字や画像、音声などのデータを数字や記号といった符号に書き換えることです。