よく発見する、ちょっぴり残念なウェブサイトの表示崩れやマークミス

今回は、ウェブサイトの表示崩れに関する記事です。
しばしば出会う、気になる表示崩れやマークミスあるあるをまとめてみました。
共感するなり自分のサイトを修正するなり、してみてください。

よく発見する、ちょっぴり残念なウェブサイトの表示崩れやマークミス

全体に横スクロールバーが出現


 
これは、本当によく出会います。
きちんとマークアップすれば、このようなことにはならないはずですけどね。

対策としては、以下の感じでしょうか。
まずFirebug等のツールも駆使して、どの箇所に原因があるかの判別ができるスキルも必要になってくるかと。

対策:

  • width:100%;に加え、paddingやmarginの横幅を設定していないかチェック。
  • ネガティブマージンを設定していないかチェック。
  • bodyにoverflow-x:hidden;で消せはするはず(非推奨です。)

高さが指定してあるせいで、文章が突如途切れる


 
こういうケースが想定されるので、できれば高さは指定しないほうが良いのでは?というのが個人的な意見です。
例えば、背景画像で囲みたい場合やグリッド配置を意図している場合に、高さを指定した結果この表示崩れが起こるケースが多いようです。

対策:

  • 高さの指定をしない。
  • 高さを指定する際は、コンテンツ量も合わせて抑えるようにしておく。

要らぬスクロールバーが出現している


 
これはちょっと嫌ですね。
特にWindowsだと、スクロールバーのデザインも綺麗ではないので、余計気になります。

対策:

  • 幅や高さの指定を不必要にしていないかチェック。
  • 子孫divにも、余計な幅や高さ指定がないかチェック。

aタグにdisplay:block;とすべきところを、していない


 
aタグはインライン要素なので、マウスを文字に載せないとリンクをクリックできません。
しかし、display:block;を設定すると、マウスをエリアに載せただけでクリックできるようになります。

どちらでもいいですが、一番最悪なのは…。

「エリアにマウスを乗せると背景色が変化するのに、リンクにはクリックできない」という、どっちつかずの状況になっているケース。
これは、対応が必要かと思います。

対策:

  • aタグにdisplay:block;を指定する。その他paddingなどを指定する。
  • li:hoverではなく、li a:hoverで背景色が変更するように。

position:absoluteでまさかの要素が重なり。


 
これは、position:absolute;の仕組みが曖昧なまま、使用してしまっているケースだと思います。

対策:

  • positionの仕組みについて、よく学びましょう。

サイドバー追随機能の挙動がめちゃくちゃ


 
サイドバーがスクロールに応じて追随する仕組みは多くのサイトで導入されています。
しかし、稀に重なり方が全然想定できておらず、表示がめちゃくちゃになってしまっているサイトがあります。
これは、見ていて辛いですね。

対策:

  • 一言では書ききれません。
  • とりあえず、他の重なられる要素にz-index(とposition)を指定することで応急処置を。

マウスオーバーでスルリと出現する子要素のアニメーション制御がされていない


 
言葉で説明するのは難しいのですが…。
マウスを乗せるとスルリと出現し、マウスを離すとスルリと隠れる、グローバルメニューはよく目にしますよね。
あれのアニメーション効果を適切に制御していないと、マウスの置き方しだいで、延々いったりきたりして見苦しい挙動になったりします。

対策:

  • jQueryの場合、not(:animated)を含めておく。
杉直樹
杉直樹 著者の杉直樹です。
"ライフクエスト"は、基本的にはジャンル多岐にわたる総合ブログです。
"人生をより豊かにする"と"社会をよりよいものにする"にマッチした記事をたくさん書いていけたらと思います。
お役に立てる記事があれば幸いです。

Facebookページで為になる情報をチェック

コメント