programming

リセットCSSの使い方【ダウンロードから読み込みまで】

reset-css-setting

 

リセットCSSっていろんなのがあるけど、どれを使ったらいいか分からない。どうやってファイルを書くの?ダウンロードしてどうするの?

 

今回はリセットCSSの選び方、ファイルの準備についてまとめました。

今回紹介するリセットCSSは

 

  • sanitize.css
  • HTML5 Doctor CSS Reset
  • ress

について。

 

  • 特徴
  • ダウンロード方法
  • 書き方

を順を追って説明していきます。

 

リセットCSSをHTMLファイルに読み込ませる時の注意点

リセットCSSのファイル読み込みは必ず自作のstyle.cssの前に記載してください。

 

(例)
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">

 

後ろに書かれたコードが優先されるので、

先にリセットCSSを読み込むことでデフォルトは無効化し、自作のCSSが反映されます。

 

sanitize.cssの使い方

sanitizeの特徴は

  • ブラウザ周りの余白はリセット
  • 見出しなどの要素の上下の余白、文字のサイズと太さはリセットしない
  • スマホなどのモバイルに対応している。
GitHub - csstools/sanitize.css: A best-practices CSS foundation
GitHub - csstools/sanitize.css: A best-practices CSS foundation

A best-practices CSS foundation. Contribute to csstools/sanitize.css development by creating an acco ...

続きを見る

 

ダウンロード方法

githubの「code」からもファイルのダウンロードが出来ますが、

こちらのサイトでは画面一番下のダウンロードボタンから「sanitize.css/」のファイルをダウンロード出来ます。

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

続きを見る

 

使い方

CSSファイル

ダウンロードしたCSSファイル(sanitize.css)をフォルダに入れます。

 

HTMLファイル

<head>内に以下のコードを書き込みます。

<link rel="stylesheet" href="パス/sanitize.css">

 

パスの部分は作成しているディレクトリに合わせて入力してください。

 

HTML5 Doctor CSS Resetの使い方

HTML5 Doctor CSS Resetの特徴は

  • 全ての余白が消える
  • 見出しや太字などの文字サイズはリセットされ全て統一される
  • 文字の太さはリセットされない
  • <input>要素はブラウザ固有のものになる

ダウンロード方法

HTML5 Doctor CSS Resetに記載されているコードをコピペしてreset.cssという名前で保存するか、

ダウンロードページから一番上にあるファイル「html5reset-1.6.1.css」をダウンロードします。

https://code.google.com/archive/p/html5resetcss/downloads

 

使い方

CSSファイル

ダウンロードしたCSSファイルをフォルダに入れます。

 

HTMLファイル

<head>内に以下のコードを書き込みます。

<link rel="stylesheet" href="パス/reset.css">

 

「html5reset-1.6.1.css」をダウンロードして使う際は「html5reset-1.6.1.css」と記載します。

パスの部分は作成しているディレクトリに合わせて入力してください。

 

ressの使い方

ressの特徴は

  • ブラウザ周り、各要素の上下の余白、<input>のテキストボックスやボタンもすべてリセット
  • 見出しなどの文字のサイズと太さはリセットされない
ress/ress.css at master · filipelinhares/ress · GitHub
ress/ress.css at master · filipelinhares/ress · GitHub

🚿 A modern CSS reset. Contribute to filipelinhares/ress development by creating an account on GitHub ...

続きを見る

 

ダウンロード方法

上記のressのサイトにリセットCSSのコードが記載されているのでそれをコピーし、「ress.css」と言う名前でファイルを作成しコードを貼り付けます。

もしくは、web上に公開されているものを直接書き込めばress.cssが適用されます。

使い方

CSSファイル

CSSファイルを作った場合はフォルダに入れます。

web上に公開されているものを使用する場合は用意するものはありません。

 

HTMLファイル

<head>内に以下のコードを書き込みます。

<link rel="stylesheet" href="パス/ress.css">

パスの部分は作成しているディレクトリに合わせて入力してください。

 

web上に公開されているものを直接書き込む場合は

<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

と記載します。

-programming
-

© 2020 スキニノート Powered by AFFINGER5