本書を読む前に

更新日：

リセットCSSについて

Google ChromeやFirefox、SafariなどのWebブラウザごとにデフォルトの設定があるため、表示結果に差異があります。そこで、リセットCSSを利用して初期スタイルを統一させることで実装しやすくします。

リセットCSSにはすべてのスタイルをリセットするものや、一部のスタイルを残してブラウザ間の差異を統一させるものがありますが、本書ではすべてのスタイルをリセットする『sanitize.css』を使って解説していきます。

リセットCSSの適用方法

sanitize.cssを適用する方法を紹介します。
下 ダウンロード先の「Download」ボタンをクリックするとリセットCSSファイルをダウンロードできます。

ダウンロード先

https://csstools.github.io/sanitize.css/

リセットCSS「sanitize.css」ファイルを任意の場所にアップロードし、適用したいHTMLファイルの<head>～</head>内に下記「HTML例」のように記述すれば、リセットCSSが適用されます。

HTML例

<link rel="stylesheet" href="sanitize.css">

CDNも用意されているので、下記HTMLタグを<head>～</head>内に記述するだけで適用可能です。

※2022年2月10日更新
「sanitize.css」のCDN版とダウンロード版で異なる内容になっておりました。本書内容はダウンロード版にて検証しておりますので、CDN版のご利用はお控えください。
ご迷惑をおかけしますが、どうぞよろしくお願いいたします。

対応ブラウザについて

対応ブラウザは、Google Chrome、Mozilla Firefox、Apple Safari、Microsoft Edgeの最新版です（2022年1月時点）。

Internet Explorer（インターネットエクスプローラー）は、2022年6月16日（日本時間）からMicrosoft社の公式サポート対象外となるため、本書でも対応ブラウザから外しております。

また、一部コードについては対応ブラウザ最新版のみの対応となっているものがあるため、前バージョンまで（もしくは近年まで）対応外だったコードについては、別途対応するコードを紹介しています。

更新履歴

  • リセットCSSのCDN版削除

    • デザイン目次へ