WEBデザイン HTML/CSS よくある失敗例

最終更新日 2012.10.8

並べたメニュー画像に隙間ができる問題と対策

li, divなどのブロック要素に対してcssのdisplay属性に"inline"を設定する事で横並びに出来ますが、そういうときに見落としがちのこと。

<ul style="list-style-type: none;">
    <li style="display: inline;"><img src="1-1.png" /></li>
    <li style="display: inline;"><img src="1-2.png" /></li>
    <li style="display: inline;"><img src="1-3.png" /></li>
    <li style="display: inline;"><img src="1-4.png" /></li>
</ul>

この余白ができる現象はバグでもなんでもないです。この例だと、</li>の後から次の<li>までの間に改行、スペースやタブが入力されているので、それが余計な空白として表示されています。ですので、直し方としてはliタグの前後を詰めれば解決です。

修正方法・直した後
<ul style="list-style-type: none;">
    <li style="display: inline;"><img src="1-1.png" /></li
    ><li style="display: inline;"><img src="1-2.png" /></li
    ><li style="display: inline;"><img src="1-3.png" /></li
    ><li style="display: inline;"><img src="1-4.png" /></li>
</ul>

floatを指定するとズレる

cssのfloat属性に"left", "right"を設定するとき、重なったりズレたりしてうまくいかないとき。

<div style="float: left;"><img src="2-1.jpg" /></div>
<div style="float: right;"><img src="2-2.jpg" /></div>
<div style="float: left"><img src="2-3.jpg" /></div>
<div style="float: right;"><img src="2-4.jpg" /></div>

折り返して左側に配置される要素、この例では3番目のdiv要素に対して、clear属性も一緒に設定しておきます。

修正方法・直した後
<div style="float: left;"><img src="2-1.jpg" /></div>
<div style="float: right;"><img src="2-2.jpg" /></div>
<div style="float: left; clear: left;"><img src="2-3.jpg" /></div>
<div style="float: right;"><img src="2-4.jpg" /></div>

margin/paddingが指定通りにならない

cssのmargin, padding属性はブラウザによって少し扱いが異なります。特にwidth, height属性と組み合わせるときにその違いが問題となります。

例1: margin属性だけ指定
<div style="border: solid 2px black; width: 128px;">
  <div style="border: solid 2px blue; margin: 20px;">
    <div style="border: solid 2px green; width: 40px; height: 40px;
     margin: 20px;">
      test
    </div>
  </div>
</div>
例2: padding属性だけ指定
<div style="border: solid 2px black; width: 128px; padding: 20px;">
  <div style="border: solid 2px blue; padding: 20px;">
    <div style="border: solid 2px green; width: 40px; height: 40px;">
      test
    </div>
  </div>
</div>
例3: margin, padding属性を組合わせたパターン1
<div style="border: solid 2px black; width: 128px; padding: 20px;">
  <div style="border: solid 2px blue;">
    <div style="border: solid 2px green; width: 40px; height: 40px;
     margin: 20px;">
      test
    </div>
  </div>
</div>
例4: margin, padding属性を組合わせたパターン2
<div style="border: solid 2px black; width: 128px;">
  <div style="border: solid 2px blue; padding: 20px; margin: 20px;">
    <div style="border: solid 2px green; width: 40px; height: 40px;">
      test
    </div>
  </div>
</div>
「1時間悩んだ…でも直らない!」そんなときは弊社にご相談ください。位置ずれ原因の特定・修正 … 1ページ単位でお申込可能。そのほかスマホ・携帯対応などお手伝いいたします。

ほんの一部の修正、小さな案件1件からでもご対応いたします。お気軽にご相談ください。

お問合せcontact@capriccio.tofax:078-330-8431