【cssの小技】レイアウトが崩れた！など

今回は、webサイト/webページ(ホームページ)づくりで起こり得るトラブルに対処する小技を紹介します。私がよく使う方法です。

cssを使ってデザインしている時に起こる
『レイアウトが崩れた！』『余白どうなってんねん？！』
主にそんな場合に使う小技です。

◆その前に大前提をおさらい

HTML上で文字をタグで囲むと
ブラウザでは無色透明で枠線も無い『箱』ができています。
その箱の「幅」はブラウザの左右いっぱいまで広がり
箱の「高さ」は箱内にある文字や画像の高さと同じになります。
つまり幅と高さは自動調整されています。

さらに『箱』は左右で「改行」がかかるので横並びできません
『箱』は積み下がって行きます。
いわゆる[ブロックレベル要素]というヤツです。

すべては『箱』でできている

「レイアウトが崩れた！」で役立つ小技

私がよく使うプロパティはアウトラインoutlineです。
アウトラインを引けば『箱』の状況がわかるので対処しやすくなります。

/*書き方例*/

/*書き方1*/
p{outline:1px solid #f00;}

/*書き方2*/
p{
outline:1px solid #f00;
}

/*書き方3*/
p {
    outline: 1px solid #f00;
}

書き方はみなさんそれぞれの入力方法でどうぞ

※入力の時に気を付ける点があります。
・値が必ず3ついること(順番はどれからでもOK)
・値と値の間は必ず半角スペースを入力すること

◆アウトラインとボーダーの違い

枠線を表示するプロパティにはボーダーborderもあります。
borderは箱の外側に線を引きますのでwidthやheightがあると、線の太さ分足されてしまうんです。(私がbox-sizingを使わないのもあります)

p {
    width: 100px;
    height: 100px;
    border: 1px solid #f00;
}

上記の例だと102pxになってしまいます。
つまり、レイアウトなどに影響してしまうんです。
outlineは線の太さ分を"足さない"んです。

もう1点、borderはtop,right,bottom,leftの辺の指定が可能ですが、outlineは指定ができません。

なので、私は使い分けしてます。
・デザインではborderを使う
・「箱」の状況確認のためだけにoutlineを使う(デザインには使わない)

終わった後のコメントアウト

アウトラインの設定後に削除するも良しなのですが、
そんな時にはコメントアウト /* */ を使いましょう。
設定が無効化されます。

/*コメントアウト例*/

p {
    /*outline: 1px solid #f00;*/
}

再度、アウトラインを表示したい場合は /* */を消せば良いんです。

コメントアウトの応用
自分の作ったコード/人の作ったコードで、よく分からない所が出てきた場合に、設定を消さずに無効化して、一つずつコメントアウトを消して行くと
設定が反映されて行きますので、どこに何の設定をしてるのか分かりやすくなります。

まとめ　アウトラインとコメントアウト

レイアウトが崩れた！余白の状況を確認したい場合などに有効なのが
まずは『箱』を表示させること
アウトラインプロパティ(outline)を使うことで
状況が把握しやすくなります。

困った時のアウトライン、困ってなくてもアウトライン。

さらにコメントアウト( /* */ )を使うことで
設定を無効化できます。

困った時こそコメントアウト。