A.C.O. Inc.

DESIGN CONSULTING FIRM 東京

A.C.O. ジャーナル

Web Monsters

レイアウトを崩すモンスター「カラムオチーン」が現れた!

1 suki 1 suki

プレビューしたらカラム落ち。マークアップ初心者を悩ます「カラムオチーン」

日々忙殺されるWEB制作者の間で存在が囁かれる「WEBモンスター」を皆様はご存知だろうか。懸命に働く労働者に突如として襲いかかる者もいれば、そっと手を差し伸べてくれるありがたいヤツもいるといわれている。
「WEBモンスター」ではそんなモンスターたちの攻略方法を考えるぞ。

カラムオチーン

「カラムオチーン」

ガタガタレベル:★★★★★

サイトのレイアウトを崩す「カラムオチーン」は、プレビュー画面でレイアウトを崩し、経験の浅いコーダーを悩ませる。
適切なコードを記述するまでは、いくらリロードを繰り返しても決して消えてくれない。コーダーの実装や計算ミスにより現れるらしく、今見ているブラウザで大丈夫だったからと油断していると危ないぞ!

おすすめ攻略方法

「しっかり計算」
カラムオチーンはしっかり計算がされていないと出現する。要素の幅、マージン、パディング、ボーダーを全てきちんと計算すれば退治できる!リキッドデザインの場合、%単位での計算になるので注意が必要だ!レスポンシブサイトの場合は各サイズでの設計が求められる。レガシーブラウザの対策も怠るな!

おすすめ武器

「.resizr」
スマホやタブレットなどさまざまなスクリーンサイズをエミュレートし、Webページを表示してくれるオンラインツール。カラムオチーンのサーチに役立つ!
.resizr

経験値

HTML、CSSをしっかりと理解できていれば、カラムオチーンを倒す事は難しくないだろう。
そもそも「カラムオチーン」を出現させないために、実装前に対象のデバイス、ブラウザ毎にしっかりと計算をする事が重要だ!

by Masashi Ikeno

武蔵野美術大学デザイン情報学科卒業。デザイン制作会社にて企業サイトや紙媒体のデザインを経て、現在に至る。アクセス解析、プロジェクトマネジメント担当。コミュニケーション・ストラテジー部所属。

View articles

  • Share this article:
  • Get the latest insights

    UXやデザインのトピックからグローバルレポートまで、最新の情報をお届けします

    月1–2回ぐらいで届けます。いつでもキャンセルできます。Privacy Policyをご覧ください

  • Connect

    お悩みのことがあれば、お気軽にご相談ください。

    Contact