WEB制作をする際にブラウザ側で標準に適応されるCSSを無効化する作業はクロスブラウザ対応が必須な現在の環境で開発するのに必須なものとなっています。それぞれの好み、環境に合わせて最適なCSSリセットのスタイルシートを使用するようにしましょう。
CSSリセットとは
CSSリセットとは、GoogleChrome,Firefox,Edgeなどそれぞれのブラウザに標準搭載されているデフォルトのスタイルをリセットするCSSのことを指します。例えば、GoogleChromeでいうとDeveloperToolで確認していただくとわかりますが、特にスタイルを書いていないのに、Chromium UA styleSheetというスタイルが当たっているのがわかると思います。
このスタイルを打ち消すものがCSSリセットとなります。
ノーマライズCSS
ノーマライズCSSは非常にCSSリセットと似ていますが、異なっている点があります。それは、CSSリセットではほとんどすべてのデフォルトCSSを打ち消すのに対して、ノーマライズCSSでは、デフォルトのUA stylesheetのいいところを残したままにして不要な箇所だけ打ち消すといった効果を得ることができます。そのため、必要に応じて、CSSリセットかノーマライズCSSを使うのがいいのか環境に合わせて適応していく必要があります。
CSSリセット＆ノーマライズCSSの使用方法
<head>
<link rel="stylesheet" href="reset.css" type="style/css">
<link rel="stylesheet" href="nomalize.css" type="style/css">
</head>リセット＆ノーマライズCSSの使用方法は、通常の外部CSSの読み込み方法と同じで、ヘッドタグ内にlinkタグのhref属性で読み込んであげます。読み込む順番が非常に重要で、必ずリセットCSSかノーマライズCSSのどちらかを通常のCSSの上に記述するようにしましょう。
おすすめのCSSリセット
個人的におすすめであるCSSリセットをご紹介します。非常に有名なCSSフレームワークである、Bootstrapが採用しているCSSリセットがあります。それが、Reboot.cssです。Rebootはnormalizeに非常に似ていますが、それに追加して便利で有用なスタイルが追記されているものになります。そのまま使用できるReboot.cssの場所は以下です。
ノーマライズCSS↓
リセットCSS↓
情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。