HTMLを圧縮してinline-blockのデザインが崩れたときの対処法

CSSの”display: inline-block”を使うと、ブロック要素を均等幅で横並びにすることができます。例えばli要素に適応すれば、リストが縦ではなくて横方向に並びます。ヘッダーメニューでよく見かける手法です。

一方で、Webにファイルを公開する際には、CSSやJavaScriptなどは不要なスペースや改行やコメントなどを削除して、ファイル容量を圧縮(minify)したものを公開することが多いかと思います。時にHTMLもminifyすることがあるのですが、このminify作業でinline-blockのデザイン崩れが発生してしまう場合があります。

改行のありなしで挙動が変わるinline-block

実際にinline-blockでリストを表示してみましょう。

<style media="screen">
    .list{
        display : inline-block;
        background-color : #ccc;
    }
</style>
...
<ul>
    <li class="list">リスト1</li>
    <li class="list">リスト2</li>
    <li class="list">リスト3</li>
    </ul>

 

  • リスト1
  • リスト2
  • リスト3

よく見ると、リストの間に余白があります。

次にli要素を改行なしで書いてみます。

...
<ul>
    <li class="list">リスト1</li><li class="list">リスト2</li><li class="list">リスト3</li>
</ul>

 

  • リスト1
  • リスト2
  • リスト3

この場合は余白がなくなっていることがわかります。

minifyでなにが起こるか?

HTMLをminifyしてしましょう。

... <style> li{display : inline-block; background-color : #ccc;}</style> ... <ul> <li class="list">リスト1</li><li class="list">リスト2</li><li class="list">リスト3</li></ul> ...

改行がなくなるため、リストは余白なしで表示されます。

つまり、li要素を改行ありでコードを組んで開発しても、リリース時に圧縮してしまうと意図しないデザイン崩れが発生してしまうのです。

inline-blockでデザイン崩れを起こさないために

とはいえ、li要素を改行なしでコードを書くのは可読性がよくありません。思わぬバグを引き起こしやすくなります。なので、スタイル指定を用いてinline-blockで発生する余白をなくしましょう。

そのためには、ulのフォントサイズを0に指定します。このとき、liのフォントサイズも指定する必要があります。

<style media="screen">
    .wrap{
        font-size : 0px;
    }
    .list{
        display : inline-block;
        background-color : #ccc;
        font-size : 16px;
    }
</style>

...

<ul class="wrap">
    <li class="list">リスト1</li>
    <li class="list">リスト2</li>
    <li class="list">リスト3</li>
</ul>

 

  • リスト1
  • リスト2
  • リスト3

こうすることで、圧縮前と後でデザインが変わる心配がなくなります。

Related Posts