海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。
この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。
コンテンツ目次
- 1. 縦方向のマージン幅に気をつけよう。
- 2. レイアウトに Flexbox を利用しよう。
- 3. CSS リセットをしよう。
- 4. Border-box をすべてに適用しよう。
- 5. イメージファイルは背景に適用しよう。
- 6. リストテーブル用ボーダー線の加え方
- 7. 読みやすいコメントを記述しよう。
- 8. クラス名に「串刺しスタイル」を利用しよう。
- 9. 繰り返しを避けよう。
- 10. CSSアニメーションは transform を利用しよう。
- 11. 自己流ではなく、ライブラリを利用しよう。
- 12. セレクタの特殊性を下げよう。
- 13. !important は使わないようにしよう。
- 14. 大文字には意味が。text-transform でスタイリングしよう。
- 15. Em と Rem、Pxの違いについて
- 16. 大きなプロジェクトではプリプロセッサーを利用しよう。
- 17. クロスブラウザ対応にはオートプリフィクサーを利用しよう。
- 18. 本番では圧縮したコードを利用しよう。
- 19. Can I Use をフル活用しよう。
- 20. 制作した CSS を検証しよう。
1. 縦方向のマージン幅に気をつけよう。
他のプロパティとは異なり、縦方向のマージン幅はうまく効かないケースがあります。たとえば、一つの要素のmargin-bottomともう一つの要素の margin-topが重なるとき、大きな要素のみが適用されてしまいます。実際に以下サンプルで見てみましょう。
See the Pen Beware of Margin Collapse by PhotoshopVIP (@vipcrew) on CodePen.
赤と青の要素の間は、70pxの代わりに40pxが適用されており、青い要素のマージンは考慮されていません。いくつかのスタイリング用ハックもありますが、margin-bottomのように、一定方向にマージンを適用していくのが望ましいでしょう。
2. レイアウトに Flexbox を利用しよう。
Flexbox をスタイリングに取り入れることで、思い描いたレイアウトを手軽に実現することができます。
Flexbox モードで利用するプロパティを組み合わせることで、デベロッパーはより柔軟で、フレキシブルなレイアウトが可能になり、一度使い方を覚えてしまえば、レスポンシブレイアウトも簡単に作成することができるでしょう。主要モダンブラウザへの対応もほぼバッチリとなってきています、これを機会にスタイリングに活用してみましょう。
container {
display: flex;
/* Safari用プリフィックスを加えるのもお忘れなく。 */
display: -webkit-flex;
}
CSS3のFlexBoxで実装する、知っておきたい5つのレイアウトテクニックまとめでは、ウェブサイト制作で手軽に導入できる、より実践的な使い方を紹介しています。
3. CSS リセットをしよう。
ここ数年で状況は大きく改善されていますが、いまだにブラウザごとで表示レイアウトなどの挙動が異なります。この問題を解決する方法として、すべての要素に初期値を設定した CSS リセットを適用することで、どのブラウザでも同じように表示されるようにできます。
normalize.css や minireset 、ress などのライブラリもあり、考えられるブラウザの違いがすべて修正されています。ライブラリを利用したくないときは、以下の基本的なCSSスタイリングも試してみましょう。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
すこしきついやり方かもしれませんが、marginとpaddingを無効化することで、デフォルトで設定されているスペースがなくなり、レイアウトしやくすくなります。box-sizing: boder-box;プロパティについては次のテクニックで見ていきましょう。
4. 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 となります。
5. イメージファイルは背景に適用しよう。
デザインにイメージ画像を加えるとき、特にレスポンシブの場合はimg要素の代わりに、divを利用してbackgroundCSSプロパティを適用してみましょう。
あまり関係ないように見えますが、background-sizeやbackground-positionのおかげで、イメージ画像のスタイリングがよりしやすくなり、元サイズやアスペクト比も保つことができます。
See the Pen Image as Background by PhotoshopVIP (@vipcrew) on CodePen.
6. リストテーブル用ボーダー線の加え方
HTML におけるテーブル要素は分かりにくく、レスポンシブに対応させるのも一苦労で、全体的なスタイリングもむずかしい、あまりおもしろくない要素のひとつです。たとえばテーブルとセルに枠線を加えたいと思うと、以下のようになるのではないでしょうか。
See the Pen Table Borders: Bad Example by PhotoshopVIP (@vipcrew) on CodePen.
ご覧のとおり、枠線が二重になって見た目もあまり良くありません。二重ラインを取り除く簡単ハックとして、テーブル要素にborder-collapse: collapse;を適用してみましょう。
See the Pen Table Borders : Good Example by PhotoshopVIP (@vipcrew) on CodePen.
7. 読みやすいコメントを記述しよう。
CSSはプログラミング言語ではありませんが、読みやすいようにコードにきちんと解説されている必要があります。シンプルなコメントを加えるだけでスタイルシートを整理し、他の人にも読みやすくなり、後から確認、修正しやすくなるでしょう。
主要コンポーネントやメディアクエリなど、CSSの大きい項目ではライン線を加えスタイリングを試してみましょう。
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
より細かいデザインの詳細や、あまり重要でないコンポーネントには、一般的なコメントを利用するなど区別すると良いでしょう。
/* Footer Buttons */
.footer button { }
.footer button:hover { }
また、CSS では、//を使ったコメントには対応していないので、不要な部分は/* */で囲むようにしましょう。
/* 正解 */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* 間違い */
p {
padding: 15px;
// border: 1px solid #222;
}
8.クラス名に「串刺しスタイル」を利用しよう。
クラスやID名において、一単語以上を含む場合はハイフン（-）でつなぐようにしましょう。またクラス名を決めるときは、統一があり、コンポーネントをベースとした開発アプローチができる、BEM も検討してみましょう。より詳しいBEMの説明については、BEM 101 from CSS-Tricks を確認しましょう。
/* 正解 */
.footer-column-left { }
/* 間違い */
.footerColumnLeft { }
.footer_column_left { }
9. 繰り返しを避けよう。
ほとんどのCSSプロパティの値は、DOMツリーのひとつ上のレベルから要素を継承します。このことからカスケーディング（Cascading: 滝状）スタイルシートと名付けられています。たとえば、fontプロパティを参考に考えてみましょう。親要素からいつも継承されるので、各要素ごとに分けて設定する必要はありません。
デザインでもっともよく利用するフォントスタイルを、htmlまたはbodyに加えてみましょう。以下は一般的な設定方法です。
html {
font: normal 16px/1.4 sans-serif;
}
後からいつでも特定の要素のみスタイルを変更することができます。 ここで大事なのは繰り返しを避け、スタイルの継承を可能な限り利用することです。
10. CSSアニメーションは transform を利用しよう。
widthやheight、またはleft/top/bottom/rightを使い、直接デザイン要素をアニメーションさせるのは避けるべきでしょう。より滑らかな動きを表現できるtransform()プロパティを利用するのが理想的で、コードを読むときに意図した内容を理解しやすくしてくれます。
以下のコードをサンプルに見てみましょう。ballという要素を、右方向にスライドさせたいとしましょう。leftの値を変更する代わりに、translateX();を利用してみましょう。
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* オススメできない*/
.ball.slide-out {
left: 500px;
}
/* オススメ */
.ball.slide-out {
transform: translateX(450px);
}
transformプロパティには、translateやrotate、scaleなどたくさんの機能があります。
より詳しいアニメーションの動きについては、以下を参考にどうぞ。
See the Pen Css3 Transform by Vineeth.TR (@vineethtr) on CodePen.
11. 自己流ではなく、ライブラリを利用しよう。
CSSコミュニティーはとても活発に意見交換がされており、新しいライブラリも定期的に公開されています。ちょっとしたスニペットからレスポンシブ対応のアプリ作成用のフレームワークまで、ささまざまな用途に対応してくれます。また、そのほとんどがオープンソースです。
CSSの問題が発生したときは、自分の知っている方法を試す前に、GitHub や CodePen などで同じ問題がすでに解決されていないか確認すると良いでしょう。
12. セレクタの特殊性を下げよう。
すべてのCSSセレクタが、平等に作られているわけではありません。CSS を書きはじめたころは,
記述した場所よりも上にあるCSSセレクタは、いつも上書きされると思いがちです。しかし、いつもというわけではありません。以下のサンプル例を参考に見てみましょう。
See the Pen Keep Selector Specificity Low Example by PhotoshopVIP (@vipcrew) on CodePen.
.activeを追加したとき、ボタンの色を赤に変更しようとしていますが、うまくいきません。これはより詳細度の高いIDセレクタと一緒に、background-colorを設定していることが原因です。詳細度ルールは以下の通りです。
ID(#id) > クラス（.class） > 種類/タイプ（例: header）
また詳細度は重なるので、a#button.activeはa#buttonよりもランクが上になります。あまり詳細度の高いセレクタを使用していると、古いセレクタにも影響し、結局!importantを利用しなければいけません。
13 !important は使わないようにしよう。
その場しのぎに!importantばかり使っていると、あとから上書きを大量にしなくてはいけません。その代わりに、なぜCSSセレクタが動かないのか見つけ、修正しましょう。
!importantを使っていいのは、HTMLをインラインスタイルで上書きしたいときですが、こちらもできれば避けておきたい、もう一つのテクニックと言えるでしょう。
14. 大文字には意味が。text-transform でスタイリングしよう。
HTMLにおいて、重要な単語を強調したいときなど、特定の目的があるときに大文字を利用しましょう。
<h3>Employees MUST wear a helmet!</h3>
一部の文字テキストを大文字で強調したいときは、HTMLファイルではいつも通りに文字を入力し、CSSで大文字に変換しましょう。見た目は同じですが、文脈に関連がないときなど、より分かりやすくしてくれます。
<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
text-transform: uppercase;
}
15. Em と Rem、Pxの違いについて
文字テキストを設定するときにどの値を利用するべきか、多くの議論が行われていますが、実際は３つすべてのオプションには、メリットとデメリットがそれぞれあります。
em– 1emは、親要素のfont-sizeとなります。メディアクエリでよく利用される通り、em には柔軟性がありますが、emからpxへの変換が複雑です。rem–HTMLのフォントサイズに関係しており、rem は見出しや文字テキストの縮尺スケールが非常にしやすいです。HTMLには一般的なフォントサイズを設定しておき、他のすべての要素を rem で設定するのは、アクセスしやすいアプローチと言えるでしょう。px–pxはもっとも正確性がありますが、レスポンシブデザインでは拡大縮小スケールに対応していません。使いやすく理解しやすいだけでなく、設定した値と実際の結果を確認しやすいというメリットも。
特にレスポンシブデザインを制作しているときは、emやremを活用することで、作業短縮にもつながります。
16. 大きなプロジェクトではプリプロセッサーを利用しよう。
Sass や Less、PostCSS、Stylusなどの名前を聞いたことがあるかもしれません。これらのプリプロセッサーは variablesやCSSファンクション、セククターのネスト化など豊富な機能が揃っており、特に大きなプロジェクトではCSSコードを管理しやすくなります。
以下の簡単なサンプル例を見てみましょう。ここでは Sass を用い、 variables で配色を決めることで、スタイルシート内でいつでも使い回すことができ、変更するときも variables の$accent-colorのみを修正すればOKです。
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
プリプロセッサーの唯一のデメリットは、通常のCSSにまとめる必要がありますが、Koala などのツールを利用する場合はあまり問題にならないでしょう。
特に人気の高い Sass と Less の使い方チュートリアルも一緒に確認しておくと良いでしょう。
17. クロスブラウザ対応にはオートプリフィクサーを利用しよう。
各モダンブラウザに対応するようにコードを書いていくのは、CSSの中でももっとも面倒な作業でしょう。特に統一性もなく、いつ必要かも分かりませんし、スタイルシートを書き終えたあとに修正するのは、退屈すぎる作業です。
うれしいことに、コードを貼り付けるだけで自動的にブラウザ対応してくれるだけでなく、対応させたいブラウザを選択することも可能です。
- オンラインツール : Autoprefixer（APIを含む）、 CSS Compressor
- テキストエディタ用プラグイン : Sublime Text用, Atom用
- ライブラリ: Minifiy（PHP）、 CSSO 、 CSSNano（PostCSS 、Grunt、 Gulp）
18. 本番では圧縮したコードを利用しよう。
ウェブサイトやアプリの読み込み時間を改善するには、リソースの圧縮ツールを利用するべきでしょう。圧縮したコードでは余白スペースや繰り返しを削除したものとなり、全体のファイルサイズを減らすことができます。もちろん圧縮してしまうと、コードは読めなくなってしまうので、本番では圧縮 .min バージョンを使い、開発には通常のバージョンを利用するようにしましょう。
CSS コードを圧縮する方法はたくさんあります。
- オンラインツール : CSS Minifier（APIを含む）、 CSS Compressor
- テキストエディター用プラグイン : Sublime Text用、Atom用
- ライブラリ : Autoprefixer（PostCSS）
制作ワークフローに応じて、上記プリプロセッサーを活用してみるか、プロセスを自動化してみましょう。
19. Can I Use をフル活用しよう。
ブラウザによる対応環境はまちまちなのが現状です。Can I Use を利用すれば、入力したプロパティがどれくらい広くサポートされているのか、ひと目で確認することができます。
Can I Use で確認するだけでなく、理由もなくレイアウトが崩れてしまうなどの問題がないか、検証することも大切です。オーディエンスのブラウザ環境をきちんと知ることも役立ちますし、真っ先にサポートが必要な点も見えてくるでしょう。
20. 制作した CSS を検証しよう。
CSS の検証は、HTML や JavaScript コードの検証に比べるとそこまで重要ではないかもしれませんが、CSS整形ツールを使ってみると良いでしょう。構文上に間違いがないか確認できたり、コード改善に必要なアドバイス、tipsを提供してくれます。
こちらもCSS圧縮ツールやオートプリフィクサー同様に、たくさんのツールが公開されているので、用途に応じて使い分けましょう。
- オンラインツール : W3 Validator、 CSS Lint
- テキストエディター用パッケージプラグイン : Sublime Text用、 Atom用
- ライブラリ : Stylelint（Node.js、PostCSS）、css-validator（Node.js）
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
今回紹介したツールも含め、作業スピードが格段にアップするお助けツールを中心にまとめています。
