Sinatraを使ったメモアプリの開発で久しぶりにCSSを書くことになりました。 リセット系のCSS、normarize.cssを読み込ませる手順を全く覚えていなかったので調べました。
ノーマライズCSSとは
結論
公式ページを元にnormarize.css
を作成しlink
タグで読み込む。
- 公式ページ の
Download
からコードをコピー public/
ディレクトリにnormarize.css
ファイルを作成しコードをペースト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.