こんにちは。KOUKIです。
Web制作と聞くと、最初は何したらいいか分からないですよね？
ここでは、そんな方々のためにちょっとしたヒントを記事にしています。
最初は、リセットCSSです。
リセットCSS
Webページを表示するブラウザには、それぞれデフォルトのスタイルが適用されています。
そのため、ブラウザによってWebページのデザインが崩れてしまう原因になるので、リセットCSSを設置してスタイルの初期化を行ってあげるとGoodです。
KOUKI
必須ではないんですけどね。お作法です。
実装
リセットCSSとして以下の設定を行うといいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* リセットCSS */ /* ユニバーサルセレクタ */ /* 全てのページに共通して設定したいcssを定義 */ * { margin: 0; padding: 0; box-sizing: border-box; /* 枠線と詰め物がボックスの全幅または全高に加算されないようにする*/ } body { /* Latoは、Google Fonts */ /* <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet"> */ font-family: "Lato", sans-serif; font-weight: 400; /* フォントの太さ */ font-size: 16px; /* フォントの大きさ */ line-height: 1.7; /* 行の高さ */ color: #777; /* 文字の色 */ } |
box-sizing; border-boxは、要素の高さと幅がpaddingやborderを含めないのでこのプロパティを指定した方がいいと個人的に思います。
この値のデフォルト値はcontent-boxですが、これはpaddingやborderを含んでしまいます。
例えば、300px ✖️ 100pxのボックスを作りたいとなった時、それぞれ以下のようになります。
content-boxは、paddingとborderを含んでしまうので、想定した300pxを越えてしまいます。
一方、border-boxを指定すると要素全体で、想定した大きさになります。
KOUKI
その他に追加したいプロパティがあれば、*かbodyに追加しましょう。自分のオリジナルのリセットCSSを作り上げるイメージです。
reset.cssみたいなファイル名で保存して、htmlファイルの先頭で呼び出すイメージです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet"> <link rel="stylesheet" href="css/reset.css"> <title>Reset CSS</title> </head> <body> <header class="header"> Some text... </header> </body> </html> |
まとめ
簡単でしたが、以上です！
また、よろしくお願いします！
にほんブログ村
最近のコメント