HTML&CSS

CSSで要素間の隙間を埋める方法

またまたWebページの模写中にブロック要素とブロック要素の隙間ってなんやねんってなったので、調べた結果をまとめてみます。

Twittrでも悩みをつぶやきました。

これです。

【結論】スタイルをリセットすればOK

結論からですが、スタイルをリセットすればOKです。

例えばこんな感じです。

無事忌々しい隙間を消すことができました。

スタイルのリセットって?

各ブラウザは「デフォルトCSS(default.css)」にて、要素に対してあらかじめCSSが設定されています。これによって各要素にmarginやpaddingが設定されているので、各要素間に隙間ができてしまっているんですね。

この「デフォルトCSS(default.css)」はブラウザ毎、同じブラウザでもバージョン毎に異なるのでWebページを作成するにあたっては、まずデフォルトCSSをリセットすることから始めるのが不可欠なんです。

Progateかなんかでもそんな話しが出てきた気がしますが、ど模写してる時は忘れしてました・・・。(Twitterでつぶやく前にスタイルのリセットも試したと思うんだけどなぁ・・・。)

リセットCSS

デフォルトCSSのスタイルを打ち消して、ブラウザ間でのスタイルの違いをなくすためのCSSのことです。

今回の例で記述したmarginとpaddingをリセット(0)にするっていうのもめちゃくちゃ簡易的なリセットCSSになります。

でもデフォルトCSSで設定されているのはmarginやpaddingだけではありません。h1のフォントサイズやらなんやと多岐に及びます。

これを一つ一つリセットしていくのは大変なので、世の中には便利なリセットCSSが存在しています。

リセットCSS紹介:HTML5 Doctor Reset CSS

HTML5 Doctor Reset CSSはmargin、paddingを0にし、すべてのスタイルのfont-sizeも統一されます。なのでh1もpも全て同じfont-sizeになるってことです。もちろんfont-weightとかも。

全ての要素がスタイルが付いていない状態となるので、一つ一つ自分でスタイルをあてていく必要がありますが、自分が思うようにコントロールできるので慣れないうちはこれを使ってみたらいいかなと思ってます。

HTML5 Doctor Reset CSS

リセットCSS紹介:Normalize.css

Normalize.cssはmargin、paddingを0にするところはHTML5 Doctor Reset CSSと同じですが、その他のh1やh2などにそれぞれ異なるスタイルがあらかじめあてられています。

そのため一つ一つ自分でスタイルをあてなくても、ある程度は整ったレイアウトを作成することが可能となっていますが、それがかえって邪魔になる時もあるかと思います。

Normalize.css

まとめ

・要素間の隙間はブラウザに設定されている「デフォルトCSS(default.css)」のせい

・Webページを作成する際はリセットCSSでデフォルトCSSを打ち消すとこからはじめる

・リセットCSSは色々公開されているので、好みのものをを使う。(慣れたら自分用にアレンジ)

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す