Webデザイン1: リセットCSS

こんにちは。KOUKIです。

Web制作と聞くと、最初は何したらいいか分からないですよね?

ここでは、そんな方々のためにちょっとしたヒントを記事にしています。

最初は、リセットCSSです。

リセットCSS

Webページを表示するブラウザには、それぞれデフォルトのスタイルが適用されています。

そのため、ブラウザによってWebページのデザインが崩れてしまう原因になるので、リセットCSSを設置してスタイルの初期化を行ってあげるとGoodです。

KOUKI
KOUKI

必須ではないんですけどね。お作法です。

実装

リセットCSSとして以下の設定を行うといいと思います。

box-sizing; border-boxは、要素の高さと幅がpaddingやborderを含めないのでこのプロパティを指定した方がいいと個人的に思います。

この値のデフォルト値はcontent-boxですが、これはpaddingやborderを含んでしまいます。

例えば、300px ✖️ 100pxのボックスを作りたいとなった時、それぞれ以下のようになります。

content-boxは、paddingとborderを含んでしまうので、想定した300pxを越えてしまいます。

320 ✖️ 120

一方、border-boxを指定すると要素全体で、想定した大きさになります。

300 ✖️ 100
KOUKI
KOUKI

その他に追加したいプロパティがあれば、*かbodyに追加しましょう。自分のオリジナルのリセットCSSを作り上げるイメージです。

reset.cssみたいなファイル名で保存して、htmlファイルの先頭で呼び出すイメージです。

まとめ

簡単でしたが、以上です!

また、よろしくお願いします!

関連記事