リンキングスタイルを使って、複数のページをまとめてデザインするためのCSSについて学習します。
ブラウザが持つCSSをリセットし、ゼロからデザインする必要性について理解することが目的です。
リセットCSSファイル
下のダウンロードボタンを押してください。
ダウンロードしたCSSファイルは、「nyanroomフォルダ」へ保存しておきましょう。
これからサイトを作成するときに、必要なファイルになります。
複製して使いまわせるようにしておくと良いです。
リセットCSSのメリット
ブラウザのCSSをリセットすることで、異なるブラウザでも同じようなデザインで表示することができます。
「ブラウザごとの表示の違いをなくすことができる」
「ブラウザごとに合わせてCSSを使い分けることがない」
「ブラウザ固有の表示バグを修正できる」
といった点が挙げられます。
特定のブラウザの特定のバージョンで、レイアウトが崩れたり、見え方が変わるといった意図しない問題を未然に防ぐことができます。
リセットCSSの種類
リセットCSSは沢山の種類があり、完全リセット型とスタイル統一型に分けることができます。
完全リセット型
リセットCSSの中でも、ブラウザのCSSを『ほぼ全てリセット』してくれる「destyle.css」は、ゼロからデザインを作成することができるのでオススメです。
ファイルを作成・配布している公式サイトでも、下記のように紹介しています。
- ブラウザによる表示の違いを無くせる
- デフォルトのmarginやpaddingなどを消す
- font-sizeとline-heightをリセットする
- ユーザーエージェントの違いによる差異を無くす
- 必要最低限の要素に絞ることで、ファイルサイズを小さく抑える
- すべてのスタイリング手法においても問題なく動作する
個人的におすすめのリセットCSSです
destyle.cssの最新版はこちらから
スタイル統一型
このタイプは、全てのブラウザの表示を統一させるように書き換えてくれるリセットCSSで、marginやpaddingの余白もあり、見出しや段落の文字の大きさも違います。
その中でも有名でよく使われているのが「Normalize.css」で、h1やh2タグの文字サイズの違いも余白も、異なるブラウザで同じサイズになります。
個人的には、ブラウザのバージョンが大きく変わって、CSSの表示も変わってきたときに対応されないと困るので使っていません。
とはいえ、ブラウザの表示を基本にデザインする時は作業効率もいいのでオススメです。
その他にもたくさんのリセットCSSがあり、それぞれ特徴があるので、興味のある人は調べて使ってみるといいでしょう
各リセットCSSを使った表示の比較
リセットCSSナシ
See the Pen 10-1-2 by Rayout-gw (@Rayout-gw) on CodePen.
完全リセット型 destyle.css
See the Pen 10-1 by Rayout-gw (@Rayout-gw) on CodePen.
スタイル統一型 normalize.css
See the Pen 10-1-3 by Rayout-gw (@Rayout-gw) on CodePen.
猫カフェトップページでCSSをリセットする
「index.html」に「destyle.css」を<link>で参照してみましょう。
次に作成する「layout.css」も一緒に記述しておきましょう。
<title>保護猫カフェ/にゃんルーム</title>
<link href="destyle.css" rel="stylesheet">
<link href="layout.css" rel="stylesheet">
<style>
body{
font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
line-height: 100%;
}
<link>では必ずリセットCSSから先に記述しないと、継承・上書き・追加の影響を受けるので注意
「layout.css」を作成し、画像を拡大縮小可能にする
Web制作
nyanroom
destyle.css
layout.css（作成するフォルダ）
index.html
images
img{
width:100%;
max-width: 100%;
height: auto;
}画像の拡大縮小は、この後のレスポンシブデザインでも必要になるので、覚えておきましょう
ページレイアウトの骨組みとなるタグのサイズを記述する
header,
nav,
main,
footer{
width: 100%;
}半角カンマで区切ったセレクタは、改行しておくと見やすく、見つけやすくなります