【初心者向け】CSSのベース設定わかりやすくを解説

CSSについてCSSの基礎は理解した！

セレクタ、プロパティー、値などの書き方は分かった！

今回はそんな方へCSSを組み上げる前に、下地として読み込ませておくと作業がスムーズになるCSSをいくつか解説してまとめておきます

オススメは必要なものをあらかじめ1つのファイルにまとめておくなど、すぐ使える状態にしておくのがいいと思いますよ＾＾

CSSてなんだ？？とかあんまりわからないという方はまずはこちらからどうぞ

あわせて読みたい

【初心者向け】CSSとは？？(知識ゼロから学ぶ) WEB制作について勉強しだしてCSSてよく聞くようになったけど何かわからない。どうやって勉強したらいいかわからない。今回はそんな方に向けた内容になります 本記事では...

便利な設定を紹介していきます

リセットCSS

各Webブラウザは最低限のHTML表示を保護するための独自のCSSを持っており、同じHTMLでもブラウザ毎にフォントサイズやマージンなどの表示に多少の差が生じます

分かりやすい例だと、inputタグなどはSafariとChromeでは全く異なる表示になってしまいます

それを防ぎブラウザによるスタイルの差異をなくすために、ブラウザ独自のCSSをあらかじめ無効化するための方法がリセットCSSとなります

リセットCSSを使わないとブラウザ毎に微妙にデザインが崩れたり、それを防ぐためのCSSの記述が煩雑になるなどの理由から、現時点のWeb制作においてはほぼ必須の要素となっています

仕組みとしてはブラウザが元々持っているデフォルトのCSSの設定を上書きするように、ブラウザ毎に異なるスタイルを持つ特定のセレクタに対してプロパティを指定してブラウザ間の表示を揃えるという感じです

その結果としてリセットCSSを使うことによって異なるブラウザでも同じようなデザインのWebサイトを作ることができるのです

リセットCSSの使い方

リセットCSSを使用する場合は、自作のCSSの前に読み込むことです

例えば、リセットCSSreset.cssと自作のCSSstyle.cssの2種類のCSSファイルを読み込む場合は、下記のように記述します

なお、完全にリセットせずブラウザ独自のCSSを活かしつつ見た目を均等に整える調整したCSSを「ノーマライズCSS」

ノーマライズCSSに＋αしてモバイル用などの細かい調整を入れたCSSを「サニタライズCSS」と区別します

しかし僕の意見としては自分で用意するよりも用意されたリセットCSSを使うほうが手っ取り早いのでいつも用意されているものを使っています

おすすめのリセットCSS

デフォルトのスタイルが無いタイプ

• The New CSS Reset
• destyle.css

デフォルトのスタイルがあるタイプ

• Normalize.css
• A modern CSS reset
• sanitize.css
• ress.css
• Reboot.css

簡単に説明しておくと

デフォルトのスタイルが無いタイプは、marginやpaddingなどをすべて0にして、font-sizeもすべて統一されます。余計なスタイルが付かないので管理しやすいですが、その分自分でスタイルを当てないといけないので場合によっては手間が少し増えます

デフォルトのスタイルがあるタイプは、marginやpaddingがそれぞれ用意されていたり、h1タグやh2タグのfont-sizeなどはタグに合わせたサイズで表示されたり、ulタグやolタグも左側にpaddingが付けられるなどデフォルト状態である程度スタイルが整えられています

単純にブラウザ間の差異を無くすという点では共通していますが、その中でもいくつかのタイプに分けられるということを覚えておきましょう

どれが適切かは使いやすさやサイトの状況で判断してみてくださいね

これでリセットCSSの重要性が分かりましたね！

どんどん行きましょう！

次の個人的に必要な設定に参ります

font-size: 62.5%;

リセットCSSの次はfont-size: 62.5%;です

聞いたことある方もない方もいるとは思いますがわかりやすく説明していきますね

実際に使うときは

このようにHTMLに使います

どういう意味になっているかといいますと

「62.5％」というのは、フォントサイズの初期値「16px」を「10px」にするCSSなんです！

どういうことかといいますと

html要素でfont-sizeを62.5%にしておくと、デフォルト設定の時の基準が16pxの62.5%、つまり10pxになるということですね！

そこで、常にhtml 要素のフォントサイズを基準にできる「rem」を使用することで、

こうすることで、ちょうど1rem=10pxになり、

30pxにしたいなあと思うなら3remと書けば良いし、

22pxにしたいなら2.2remと書けば良いので計算がしやすいわけです

font-sizeを62.5%とは文字サイズの単位についてのお話でした

これを理解できれば計算が楽になるし作業が効率化しますよね！

では次がベース設定の最後です

img要素に対するCSS

コーディングで「imgの指定をしているのにうまく画像の大きさが調整できないよ」だったり「imgの大きさの指定の仕方がわからない」

などといった悩みにぶつかったことはありませんか？？

この悩みをベース設定で簡単に解決しますね！

大前提として、imgにwidth:300px;などと指定してしまうと画像の縦横比が変わってしまう可能性があるので、やらないようにしてください。

結論といたしましては

imgの要素にはmax-width:100%; vertical-align:bottom;を指定しておくことです

理由としてはmax-width:100%;と指定することでimgが親要素の中で常に最大100%の大きさにできます。さらには、vertical-align:bottom;を指定することで、画像の下に小さな余白ができるのを防ぐことができます

そして画像のサイズを調整したい要素にはブロック要素で囲んであげてそのブロックに対してサイズ調整をしてあげることです

例を書いていきます

上記のようにimgをdivのブロック要素で囲みます

HTMLに対してCSSは先ほど囲ったdivのブロック要素に上記のようにサイズ調整をしてあげることです

これで簡単にサイズ調整ができるようになりましたね！

まとめ

今回は僕の思う作業が楽になる なおすすめCSSでした！

個人的な意見なのでまだまだあるかもしれませんがその時は教えてください（笑）

皆さんもCSSのベース設定をして効率よくコーディングを進めていきましょう＾＾