要素の配置に困ったら、枠線を表示しようという話。（初心者向け）

日本一の副業Ｗｅｂデザイナー、ポラリス・デザインの大森です。
銀行員とＷｅｂデザイナーやってます。

今日は、要素の配置がうまく行かない時に、使って欲しい裏技（？）ついてお話しします。

---

先日、自社サイトをやっと公開しました。
すごくシンプルなデザインで、全く写真やイラストを使わず、基本文字と枠組のみ。

そういうデザインって簡単そうで、意外に要素が思ったとおりのところに表示されなくて困ったりします。

そんな時に使えるのがこの技。

【必殺のデバッグコードの仕込み方】

皆さん、RESET系のCSSは使われていると思いますが、そこのすべての要素を指定しているところに下記のコードを追加しましょう。

ちなみにポイントは、コメントオフで追加することです。。。

これをすると、なんと全ての要素に枠線がつきます。

え？

だから何だって。。。

【枠線を付けることで怪しいところがわかるようになる。】

枠線がつくと、どこがおかしいのか一目瞭然です。

例えば、こんなパターン。

スマホ画面から何かがはみ出して、左右にスクロールが発生してる。。。涙目

このパターンは一目瞭然なんですけど、要素の幅設定がうまく行ってなくて、どこかが全体を押し広げていることって、肉眼だと確認できなくてはまることが結構あります。

そこで、枠線をつけます。

やり方は簡単。chromeの開発画面ツールを出して、先ほどのコメントオフのCSSをぽちっとクリックして復活させるだけ。

そうすると、URLが長すぎて欄外に全体を広げているのがわかります。

でも、枠線が見えないと、あたりが付かないので、いろいろコードを試しては、画面をリフレッシュすることになり、とっても効率が悪いのです。

【この方法自体はよくある方法ですけど、コメントアウトが肝】

要素にユニバーサルセレクタ等で枠線を付けるのはよく知られた方法です。（僕も、デジハリの講師の方から教えていただきました。）

ただ、ポイントは、borderのコードを最初からコメントアウトで記述しておくことです。

そして、いざ見たくなった時は、Chromeの開発ツールでbodyを表示し、コメントアウトしたcssを復活します。

わずかクリック一つで枠線がついたり消えたり。

便利〜。

オフィシャルサイトのコーディング時にはとても重宝しました。

【最後に：各要素のサイズ指定を確認しよう。】

最後に、要素がうまく表示できない時は、各要素と、その親要素はどのようなサイズ指定かまず、確認しましょう。

自分の経験上、うまくいかなおのは、親要素のサイズ指定が自動で設定されており、個要素の方でコードをひねくり回しても治らないことが多いです。

枠線を簡単につけ外しできる本方法は、僕と同じ駆け出しの皆さんの役に立つと思います。

皆さんもぜひ、試してください。