[CSS]ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ

Post on:2015年4月16日

Webページを作成している時に、意図しないのにできてしまう隙間の原因とその解決方法を紹介します。

サイトのキャプチャ

Mind The Gap: Six Causes of Unwanted Spaces In Page Layouts

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

デフォルトのスタイルが原因となる隙間

HTMLを作成する際、スタイルシート無しでも読みやすいようにすることをWeb制作者は忘れがちです。これはすべての要素にブラウザがもつデフォルトのスタイルを上書きして、サイト用のスタイルを適用することを意味します。

ブラウザがもつデフォルトのスタイルとは例えば、パラグラフ間の垂直のスペース、見出しの下のスペース。これらのスタイルは時々、あなたが意図しない隙間となります。

  • <body>は、上下左右にマージンをもっています。
  • <figure>は、margin-leftの値をもっています。
  • リスト要素は、左にスペースが空くようにマージンをもっています。
  • 見出し要素は、margin-topに値をもっています。

原因の特定

ブラウザの「要素を検証」を使って、問題となっている特定の原因を見つけることができます。ユーザエージェントのスタイルシートから継承されたスタイルには特に注意を払ってください。

※「要素を検証」は、Chromeだと右クリックで表示されます。

解決方法

リセット用のCSSを使い、原因となっている要素のプロパティを一旦リセットしてからスタイルします。リセット用CSSをあなたが使うスタイルシートの先頭に常に記述しておくのもよいでしょう。

リセット用のCSSを使う時は、下記の記事も参考にどうぞ。

ボックスモデルが原因となる隙間

デフォルトの状態で要素にpaddingを加えるということは、widthをどのように指定したかに関わらず、ボックスがもっているサイズを増やすということです。

原因の特定

ボックスサイズの算出方法を指定するbox-sizingプロパティは、デフォルト値「content-box」ではパディングとボーダーを幅と高さに含めず、「border-box」ではパディングとボーダーを幅と高さに含めます。

解決方法

box-sizingプロパティはサイト全体に適用します。
私が望ましいと思う指定は、下記のようになります。

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

これはサイトを作成する早い段階で導入することを勧めます。デフォルトのボックスモデルを使用するより、より多くの問題を解決することができます。

ブロック要素内のインライン要素にできる隙間

インライン要素は、その下にほんの少しだけスペースを確保します。この現象は親の要素が「display: block;」でブロック要素の時に見られます。

よくある例としては<figure>でボーダーをつけ、その中に<figcaption>要素がない時です。

サイトのキャプチャ

<figure>要素の最下部の画像とボーダーの間にスペースが生じます。

原因の特定

問題がおきた時にブラウザの「要素を検証」を使用することは通常最も良い方法です。

解決方法

解決にはいくつかの方法があります。

  1. 親要素のfont-size or line-heightを「0」にするミニサイズのリセット用のCSSを適用する。
    ※<figcaption>のような子要素全てにこの設定を適用することを忘れないように。
  2. 中に配置されるインライン要素に「vertical-align: middle;」を適用する。
    ※「vertical-align: bottom;」でも機能します。
  3. 中に配置される要素に「display: block;」を適用する。

inline-blockが保持している隙間

リスト要素の<li>を改行コードで並べると隙間ができてしまうなど、inline-blockはスペースを保持します。

<ul class="inline-block">
<li>アイテム</li>
<li>アイテム</li>
<li>アイテム</li>
</ul>

原因の特定

ページのどこでinline-blockを使用しているか把握しておきましょう。

解決方法

まずは影響を受けているコードから改行や空白スペースを削除します。エレメントを含んでいる場合にはその要素に「font-size: 0;」を適用（子要素のためのリセット）します。

<ul class="inline-block"><li>アイテム</li><li>アイテム</li><li>アイテム</li></ul>

改行を削除するのではなく、コメントを使うのも有効です。

<ul class="inline-block"><!--
--><li>アイテム</li><!--
--><li>アイテム</li><!--
--><li>アイテム</li><!--
--></ul>

DreamWeaverなどWYSIWYGエディタでできてしまう隙間

DreamWeaverのようなWYSIWYGエディタやWordのようなHTML書き出し機能があるアプリケーションを使用すると、レイアウトを保持する時や空のデータに「空白スペース（&nbsp;）」を使用することがあります。これは他の要素でも起きる現象で、WYSIWYGエディタの間違った使い方です。

原因の特定

作成したページのコードをブラウザやテキストエディタで表示し、「空白スペース（&nbsp;）」がないかチェックします。この空白スペースが隙間となっています。

解決方法

テキストエディタの置換機能で「空白スペース（&nbsp;）」を削除し、実際の空白スペースに置き換えるか「font-size: 0;」を適用します。

マージンとマージンの相殺が原因となる隙間

マージンの相殺をこのリストで説明するには少し複雑なので、ポイントを解説します。
スタティックに配置された要素のポジティブなマージンの値は、常に他のコンテンツを遠ざけるようにスペースを作りだします。そしてこれらのマージンの値は、他の要素から継承されることがあります。

原因の特定

ページ上でマージンがどのように機能しているのか、マージンの相殺はどう影響しているのかを確認してください。

解決方法

期待通りにマージンが適用されていない場合は、その要素のマージンの値を減らしてみてください。マージンの相殺が原因の場合は、マージンの代わりにパディングにするのも一つの手です。

sponsors

top of page

©2024 coliss