CSSは現代のWebページ制作になくてはならないものです。
Web制作に関わる人であれば、誰でもそのスキルを磨いていきたいと思っているのではないでしょうか。

ただ、、JavaScriptなどのフレームワークに関しての情報はエンジニアの交流会などで頻繁にシェアされるものの、CSSについては新しい技術が出てこない限りやりとりされることは少ないのが現状です。

CSSは、主にWebの見た目に関わる技術なので、レベルを上げることはWebデザインの表現力にそのまま直結します。
今回は、CSSの技をもう1レベル上げるための7つのポイントをご紹介します。

１：一番シンプルなCSSリセット

marginやpaddingなど、ブラウザ間の表示誤差を修正する方法の一つに、CSSリセットと呼ばれる設定を行う方法があります。
通常、CSSリセットはnormalize.cssなど用意されているリセットライブラリを外部ファイルで読み込む必要がありますが、それを行わなくとも表現できる簡単な方法が存在します。

以下のコードでは、全ての要素のmarginとpaddingを削除して、ボックス高さや幅の算出方法を、ボーダー幅を含める形にしています。

＊ {
　　box-sizing: border-box;
　　margin: 0;
　　padding: 0;
}

(「＊」は実際には半角です)

Webサイト表示の主な原因のひとつは、意図しない余白の発生やボーダー幅の算出方法の違いによるピクセル単位のレイアウトのズレです。
上記のようなたった数行のコードで、どのブラウザでもほぼ同じようにレイアウトを行うことが可能になります。

２：テーブル幅を均等分割

Webデザインを行ったことがある人なら誰しもうなずいてくれると思いますが、テーブルを挿入したときに、列のコンテンツ量によって幅が自動調整され、かえって見た目が残念になってしまうことがあります。

何列あったとしても、コンテンツ量に左右されずに、テーブル幅を均等にするためには、どうすればよいのでしょうか。

答えは、次のようなコードを1行挿入するだけです。

.price-table {
　　table-layout: fixed;
}

table-layoutプロパティに指定できる値は、「auto」か「fixed」のどちらかですが、初期値では「auto」に設定されています。
コンテンツ量によって幅が変わってしまうのは、このためです。

しかし、table-layoutに「fixed」を指定すると、必要に応じて各列の幅をしていしますが、幅が指定されていない列には残りの幅が均等に割り振られます。

３：フォントの大きさをレスポンシブ指定

最近では、国産・海外製問わずさまざまな大きさのデバイスが登場してきたので、デバイスごとに最適なフォントサイズの指定を行うのに一苦労している人もいるかもしれません。
ユーザーエージェントによるフォントサイズの切り替えは特に大変です。

しかし、ウィンドウの横幅によって自動的にフォントサイズが調整できれば、たった数行で最適なフォントサイズを算出することができます。
方法としては、:rootにcalc関数を使ってviewport上のサイズからルートのフォントサイズを指定しておき、各要素をremを使って相対的に決めていきます。

:root {
　　font-size: calc( 1vw + 1vh + .5vmin );
}

ルートが決まれば、各要素はremを使ってルートに対して相対的な文字の大きさを指定します。

body {
　　font: 1rem/1.4 sans-serif;
}

これだけで、デバイスの大きさを気にすることなく、バランスのよい方法で文字サイズを算出することができます。