もっと詳しく!書式の応用編

省略した書式を使いこなす!

CSSは制作しているうちに、膨大になってしまうという問題があります。長すぎるCSSは、可読性が悪い、少なからず読み込みに時間がかかってしまうといったデメリットがあります。このため、CSSに慣れてきたら、省略できる記述については省略していくことがおすすめです。
例えば、文字の装飾を行うプロパティには、文字の大きさ(font-size)、文字の書式(font-family)、文字の色(font-color)といったものがあります。これをまとめてfontというプロパティにまとめることが可能です。見慣れない人にとっては大した量じゃないでしょう、と思うかもしれませんが、塵も積もれば山となります。また、後からCSSを読んだ時の読みやすさが格段に上がりますので、省略可能なものは積極的に使うと良いでしょう。
一点注意したいのが、複数の値をまとめて宣言するプロパティは、値の書き方に個別のルールが設けられていることがあります。先の例であげたfontプロパティの場合、六つの値を宣言できますが、このうちfont-sizeとfont-familyの宣言は省略できないので、注意してください。

新しい技術を取り入れてみよう!

CSSは次々に新しいものが開発されていますので、ブラウザ環境などに応じて新しいものを取り入れていくことも大切です。その中で最も見逃せないのがメディアクエリ(Media Queries)です。
これはCSSを読み込んだ環境の画面サイズに応じて、自動的に適用するスタイルを変更できるというものです。インターネットを閲覧する環境がパソコンのみならず、タブレット端末やスマートフォンといったより小さいデバイスが増えたために必要とされるようになりました。
これを使えば、スマートフォン環境であれば画像を表示させない、メニューボタンをプルダウンにする、といったデザインが実現可能となっています。それまではパソコン用とスマートフォン用でアクセス先を変える必要がありましたが、同一のページをスタイルを変えて表示することができるのです。このような対応をしたページのことを、レスポンシブデザインと言いますが、今や導入検討が必須の項目ですので、是非利用してみてください。