【CSS】CSS-テクニック集2021 第一弾

この記事では、CSSスタイリングで実践したい、便利なテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。

これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。

1. レイアウトに Flexbox を利用しよう。

Flexbox をスタイリングに取り入れることで、思い描いたレイアウトを手軽に実現することができます。

Flexbox モードで利用するプロパティを組み合わせることで、デベロッパーはより柔軟で、フレキシブルなレイアウトが可能になり、一度使い方を覚えてしまえば、レスポンシブレイアウトも簡単に作成することができるでしょう。

2. CSS リセットをしよう。

ここ数年で状況は大きく改善されていますが、いまだにブラウザごとで表示レイアウトなどの挙動が異なります。この問題を解決する方法として、すべての要素に初期値を設定した CSS リセットを適用することで、どのブラウザでも同じように表示されるようにできます。

normalize.css や minireset 、ress などのライブラリもあり、考えられるブラウザの違いがすべて修正されています。

ライブラリを利用したくないときは、以下の基本的なCSSスタイリングも試してみましょう。

すこしきついやり方かもしれませんが、marginとpaddingを無効化することで、デフォルトで設定されているスペースがなくなり、レイアウトしやくすくなります。

3. Border-box をすべてに適用しよう。

HTML/CSSを書き始めたばかりのひとは、あまり知らないbox-sizingプロパティかもしれませんが、とても重要なポイントです。デフォルトとの違いを確認することで、より理解しやすいでしょう。

• content-box（デフォルト） – 要素に width や height を指定すると、コンテンツにのみ適用され、 padding や border などはこれに追加されます。たとえば、div要素にwidth: 100px;、padding: 10px;を指定すると、最終的には120px（100 + 2*10）となります。
• border-box – padding や border などは幅/高さに含まれます。たとえば、div要素にwidth: 100px;を指定するとき、border-boxを利用していれば padding や border を加えても、最終的に100px となります。