人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

Flexアイテムで垂直方向のmarginやpaddingの描画がブラウザによって異なる

Flexboxでレイアウトをしているときに、 ガター に em や px などの固定値を指定するのではなく、 % 値を指定したいときに起きる問題です。

ブラウザの差異


<div class="grid">
  <div class="item">
    <div class="inner">1</div>
  </div>
  <div class="item">
    <div class="inner">2</div>
  </div>
</div>


.grid {
  display: flex;
  width: 500px;
}
.item {
  padding-top: 10%;
  padding-right: 10%;
  width: 50%;
  background-color: #c4ddb9;
}
.inner {
  background-color: #a1c6e7;
}

分かりやすいように簡単なHTMLとCSSを用意しました。これを各ブラウザで表示すると以下のようになります。

IEやChrome では padding-top: 10%; が描画されていますが、 EdgeやFirefox では描画されていません。実際には EdgeやFirefox でも描画されています。IEやChromeでは垂直方向の padding が 要素の横幅 を基準に計算されるのに対し、EdgeやFirefoxでは 要素の高さ を基準に計算されてしまうためです。ちなみに Flexアイテム だけでなく Gridアイテム でも同じ現象が起きます。

解決策


.grid {
  display: flex;
  margin: 0 auto;
  max-width: 500px;
}
.item {
  padding-right: 10%;
  width: 50%;
  background-color: #c4ddb9;
}
.item::before {
  display: block;
  padding-top: 20%;
  content: '';
}
.inner {
  background-color: #a1c6e7;
}

Flexアイテム ではなくその子要素であればこの問題は発生しないので、 擬似要素 を使って padding-top を指定しています。CSSでアスペクト比を固定するテクニックと同じような仕組みですね。

CSS本執筆しました！！！