リセットCSS

  • リセットCSSの使い方
  • リセットCSSサンプル

リセットCSSは、ブラウザが持つデフォルトのスタイルを完全にリセットまたは初期化するためのCSSです。異なるブラウザやデバイスでの表示の違いを解決するために使われ、全ての要素が同じ基準で表示されるようにします。

リセットCSSの主な目的

最初にリセットしておくことで、デフォルトのブラウザごとの異なるスタイル設定(マージン、パディング、フォントサイズなど)を一掃し、開発者が自身でスタイルを設定する際に、予期しないブラウザ間の差異を避けることができます。これにより、スタイリング作業がより効率的に行え、デザインの一貫性を保つことができます。

リセットCSSを読み込む前

リセットCSSを読み込んだ後

リセットCSSの使い方

リセットCSSの使い方は、通常のCSSと同じです。
ただし、ブラウザに付属しているデフォルトのスタイルを打ち消すために使用するので、リセットCSSを一番上に記述しましょう。

リセットCSSサンプル

下記、リセットCSSをコピーし、今後のコーディングに使用してみてください。

See the Pen 274_リセットCSS_001 by Yugo Harima (@yh-dezadezi) on CodePen.

以上、「リセットCSS」について説明でした。

また、「CSSの基本」のステップも全て完了となります。
次回からはコーディングを実際に行なっていいます。
引き続き、別のステップも進めていきましょう。

CSSの基本

全 6 動画
  • CSSの書き方

    CSSの書き方

    03:45
  • ブラウザで表示

    ブラウザで表示

    01:23
  • 基本のプロパティを覚える1

    基本のプロパティを覚える1

    08:03
  • 基本のプロパティを覚える2

    基本のプロパティを覚える2

    03:24
  • classとは

    classとは

    02:06
  • リセットCSS

    リセットCSS

    01:16