nomarize.css の導入

CSS Sinatra HTML

Sinatraを使ったメモアプリの開発で久しぶりにCSSを書くことになりました。 リセット系のCSS、normarize.cssを読み込ませる手順を全く覚えていなかったので調べました。

ノーマライズCSSとは

normarize.cssとはブラウザ間の差異を統一調整したCSSのことです。参照

結論

公式ページを元にnormarize.css を作成しlinkタグで読み込む。

例)Sinatraにnormarize.cssを導入する

  1. 公式ページ のDownload からコードをコピー
  2. public/ ディレクトリにnormarize.css ファイルを作成しコードをペースト
  3. views/layout.erb ファイルのhead タグ内に<link rel="stylesheet" href="/normarize.css"> を追記

独自のスタイルを当てるcssファイルよりも先に読み込まなければならないことに注意する。

<!-- layout.erb -->

<!DOCTYPE html>
<html lang="ja">
  <head>
    <mata charset="utf-8">
    <title>メモアプリ</title>
    <link rel="stylesheet" href="/normarize.css">
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>メモアプリ</h1>
    <%= yield %>
  </body>
</html>

まとめ

初めてnormarize.css を自分で導入してみましたが思っていたよりも簡単でした。 Rails 等のフレームワークでも同様の手順で導入できそうなので今後も活用できそうな知識になりそうで良かったです。

参照

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