縦方向のマージン幅に気をつけよう。他のプロパティとは異なり、縦方向のマージン幅はうまく効かないケースがあります。margin-topが重なるとき、大きな要素のみが適用されてしまいます。実際に以下サンプルで見てみましょう。CodePen.赤と青の要素の間は、70pxの代わりに40pxが適用されており、青い要素のマージンは考慮されていません。いくつかのスタイリング用ハックもありますが、margin-bottomのように、一定方向にマージンを適用していくのが望ましいでしょう。スタイリングに取り入れることで、思い描いたレイアウトを手軽に実現することができます。モードで利用するプロパティを組み合わせることで、デベロッパーはより柔軟で、フレキシブルなレイアウトが可能になり、一度使い方を覚えてしまえば、レスポンシブレイアウトも簡単に作成することができるでしょう。主要モダンブラウザへの対応もほぼバッチリとなってきています、これを機会にスタイリングに活用してみましょう。Safari用プリフィックスを加えるのもお忘れなく。Safari用プリフィックスを加えるのもお忘れなく。-webkit-flex;}CSS3のFlexBoxで実装する、知っておきたい5つのレイアウトテクニックまとめでは、ウェブサイト制作で手軽に導入できる、より実践的な使い方を紹介しています。ここ数年で状況は大きく改善されていますが、いまだにブラウザごとで表示レイアウトなどの挙動が異なります。リセットを適用することで、どのブラウザでも同じように表示されるようにできます。ライブラリもあり、考えられるブラウザの違いがすべて修正されています。ライブラリを利用したくないときは、以下の基本的なCSSスタイリングも試してみましょう。border-box;}すこしきついやり方かもしれませんが、marginとpaddingを無効化することで、デフォルトで設定されているスペースがなくなり、レイアウトしやくすくなります。boder-box;プロパティについては次のテクニックで見ていきましょう。HTML/CSSを書き始めたばかりのひとは、あまり知らないbox-sizingプロパティかもしれませんが、とても重要なポイントです。デフォルトとの違いを確認することで、より理解しやすいでしょう。2*10)となります。幅/高さに含まれます。イメージファイルは背景に適用しよう。デザインにイメージ画像を加えるとき、特にレスポンシブの場合はimg要素の代わりに、divを利用してbackgroundCSSプロパティを適用してみましょう。関係ないように見えますが、background-sizeやbackground-positionのおかげで、イメージ画像のスタイリングがよりしやすくなり、元サイズやアスペクト比も保つことができます。おけるテーブル要素は分かりにくく、レスポンシブに対応させるのも一苦労で、全体的なスタイリングもむずかしい、あまりおもしろくない要素のひとつです。テーブルとセルに枠線を加えたいと思うと、以下のようになるのではないでしょうか。CodePen.ご覧のとおり、枠線が二重になって見た目もあまり良くありません。collapse;を適用してみましょう。読みやすいコメントを記述しよう。CSSはプログラミング言語ではありませんが、読みやすいようにコードにきちんと解説されている必要があります。シンプルなコメントを加えるだけでスタイルシートを整理し、他の人にも読みやすくなり、後から確認、修正しやすくなるでしょう。主要コンポーネントやメディアクエリなど、CSSの大きい項目ではライン線を加えスタイリングを試してみましょう。}より細かいデザインの詳細や、あまり重要でないコンポーネントには、一般的なコメントを利用するなど区別すると良いでしょう。*/で囲むようにしましょう。#222;}目次へ戻る8.クラス名に「串刺しスタイル」を利用しよう。クラスやID名において、一単語以上を含む場合はハイフン(-)でつなぐようにしましょう。