コラムColumn

コーディングの際に役立つ要素領域の枠線表示(outline)について

outline

はじめまして。
コーダー担当のkakeoと申します。

Webサイト作成をする上で、CSSのレイアウトが思うようにいかない時どのように対処していますでしょうか。

原因はさまざまかと思いますが、そんな時に役立つ一つの方法として、ページ上の全ての要素をアウトライン(outline)で表示する便利なテクニックを紹介します。
また、本ブログはwebサイト制作初心者を対象としていますので、中・上級者には役立つ情報ではないかもしれません。

まずoutlineとは、レイウトに一切影響を与えずに枠線が引けるプロパティです。

画像でもテキストでも何に対しても、スタイルシートを使って「枠線を引きたい」と思ったときに使用するのは「border」プロパティかと思います。
でも、borderプロパティで枠線を引くと、当然「枠線の太さ」の分だけ、その要素自体のサイズも大きくなってしまいます。
しかし、borderプロパティとは違って、周囲のレイアウトに一切影響しない枠線が引ける特徴があります。

webサイトと制作していく中で、要素の範囲や余白などどのようになっているのか、
レイアウトがどのように崩れているのか確認したい時など、普通webサイトを見ただけでは分かりづらい部分があると思います。
ある程度は分かるかもしれませんが…

———————————————————————————————-

下記の画像をご確認ください。
通常の表示では要素の領域は分かりません。
【 before 】
ブログ_before

———————————————————————————————-






下記のコードをCSSに追記することによって、全ての要素にアウトラインが表示されます。

* {
	outline: #0000ff 1px solid;
}

補足:「 * 」はCSSで、全ての要素に全指定するやり方です。
全指定用のセレクタは『全称セレクタ』とも言われております。
また、色も#0000ff(青)を使用していますが、自分の見やすい色にしてもらって構いません。

下記の画像をご確認ください。
全ての要素にラインが引かれ一目でリンク領域、余白の範囲などが確認でき、
さらにフロート周りや入れ子などのおかしくなりがちなとこもチェックできます。

———————————————————————————————-

【 after 】
ブログ_after

———————————————————————————————-

いかがだったでしょうか。そんなの知ってるよ、常識だよ!
と思ってる方は沢山いらっしゃるかと思いますが、自分は初めて知った時、「こういった確認方法があるのか」と少し感動したのを覚えています。

初心者の方には役立つ情報かと思いますので、レイアウトが崩れた際、原因を見つける時などに使用してみてはいかがでしょうか。

CSS / outline / コーディング

執筆者:kakeo

お問い合わせフォーム