リセットCSS?ノーマライズCSS?

HTMLには、Webブラウザが本来持っているスタイル情報があります。

しかし、Webデザインをしていく上で、邪魔になる場合がでてきます。

そんな時に「リセットCSS」や「ノーマライズCSS」という指定を使います。

 

Webブラウザ本来のスタイル情報を確認

見出しを意味するタグ<h1><h2>などは文字が大きく表示され、上下にマージンがつきます。

また、段落を意味するタグ<p>も上下にマージンがつきます。

箇条書きを意味するタグ<ul>は、左側に余白がつきます。

これが、すでにWebブラウザ自身が持っているスタイリングなのです。

 

リセットCSSとは


Webブラウザが本来持っているスタイリング情報が、レイアウトを思い通りに行うのに妨げになる場合があります。

これを思い通りにするのが「リセットCSS」という手法です。

これは、Web制作において長く使われてきました。

全ての要素が隙間なく隣り合うので、レイアウトしやすくなります。

しかしその一方、ブラウザが本来持っているスタイリングも一緒にリセットされてしまうので、

その表示を調整するのにかえって手間取ることも多々あります。

 

ノーマライズCSSとは


現在では、全体をリセットするのでなく、特定の部分をピンポイントでリセットする方法が主流です。

Webブラウザ本来のスタイリングを残しつつ、部分的に適応させるのが「ノーマライズCSS」という手法です。

例えば、グローバルナビゲーションとしてリストを横に並べたい場合、隙間や行頭のマークが不要になります。

こんな時に、「#nav  ul,#nav  li{marign:0;padding:0;}」として、部分的にリセットするのです。

このように、各要素のマージン、パディング、フォントサイズなどを微調整できます。

Webサイトで「normalize.css」が配布されていますので、読み込んで使用すると便利です。

◇まとめ◇

  1. Webブラウザはデフォルトのスタイル情報を持っている
  2. ブラウザ間のスタイル微調整には、ノーマライズCSSで吸収する
  3. 新しい手法だけでなく、古い手法も知識として持っておく
 

コメントを残す

サブコンテンツ

【PR】

今だけ!値下げ決行!【初心者に嬉しい】画像編集マニュアル

【期間限定】LINEの人気スタンプが無料で手に入る!

お得な返礼品を貰おう!ふるさと納税

【無料登録】オススメのASPはココ!

女性が有利?ポイントサイト攻略マニュアル【無料】

奇跡的に文章力がアップする『魔法の〇〇集』プレゼント【無料】

【初心者でも安心】バイナリーオプションの自動攻略ツール(特典付き)

このページの先頭へ