Ruby好き非エンジニアのブログ

〜Ruby on Railsの学習記録〜

normalize.cssとは?

今まで全く使ったことがなかったのですが、normalize.cssというのがあり、サイト制作時には活用した方が良さそうなものだったのでメモ。

ダウンロードサイトを見てみると、normalize.cssとは

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
とあります。
つまり、正規化が必要なスタイルのみを現代のスタンダードに沿ってレンダリングしてくれる。という感じでしょうか。

Normalize.css: Make browsers render all elements more consistently.

また、Overviewを見てみると、

The aims of normalize.css are as follows:

・Preserve useful browser defaults rather than erasing them.
・Normalize styles for a wide range of HTML elements.
・Correct bugs and common browser inconsistencies.
Improve usability with subtle improvements.
・Explain the code using comments and detailed documentation.

とあります。

見た感じ2個目と3個目が自分にとっては分かりやすい。
・Normalize styles for a wide range of HTML elements
>幅広いHTML要素のスタイルを標準化します。

・Correct bugs and common browser inconsistencies.
>バグや一般的なブラウザの矛盾を修正します。

WEBのスタンダードは日々進化しているため都度最適化するのは大変ですが、このnormalize.cssを入れておくとある程度サイトの寿命を長くできそう。


とりあえずここではダウンロードの方法だけ記載しておきます。

まず、ネットで「normalize」もしくは「normalize.css」と検索。
Normalize.css: Make browsers render all elements more consistently.

サイトの中に入り、DOWNLOAD部分をクリックするとcssが表示されるので、command+Aで全選択。f:id:Jyoko:20180125062154g:plain

エディターを開いてstylesheetsのフォルダ内にnormalize.cssファイルを作成し、そのファイル内にcommand+vで貼り付け。
f:id:Jyoko:20180128061631g:plain

自分の場合はパーシャルで、「_normalize.css.scss」という名前で作成。
この辺りは、このファイルをどう読み込むかで変わってくるかと思います。

とりあえずこれで終了!

まだまだ知らないこと多いと思いますが、簡単で便利なものはどんどん導入していきたい!

ということで今回はここまで〜。