こんにちはNAOです。
今回はWEBデザイン勉強初学者の方に便利なデザイン崩れを防ぐリセットCSSとはどういうものなのかを紹介したいと思います。
リセットCSSとはどういうものなのか
リセットCSSとはブラウザがデフォルトで持っているCSSを消すCSSのことを意味します。
ブラウザとはWEBサイトを閲覧するためのソフトウェアでGoogle ChromeやSafari、Internet Explorerなど様々な種類のものがありますがどのブラウザも固有のCSSがセットされているということになりますのでそれを打ち消す為のリセットCSSになります。
リセットCSSを使用してデフォルトのCSSを打ち消してデザインがどのブラウザで見ても同じになるようにすることは最低限やらなければいけないということになります。
リセットCSSの設定はどうするのか?
リセットCSSは世の中に数多く出回っているCSSを利用している方が大半です。
リセットCSSで検索をするとコピペするだけで使用できるものが出てきますのでそれが大半になります。どういう書き方をすればいいかを理解すれば自分で設定もできるようになりますが正直出回っているものでも不自由なく使用できます。
style.cssの@charset "utf-8";の下から記載するのはいつも通りですが今は記載するリセットCSSをするのではなくリンクでリセットCSSを設定するのも主流の一つになってきています。
私はそちらを使っています。
今回はGithubで公開されている「ress.css」というファイルを使用したいと思います。
※リンク先にいく位必要は特にありません。
<link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css">を使用することで非常に簡単にリセットCSSを使用することが出来ます。
1 2 |
<link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style.css"> |
リセットCSSはCSSの前に必ず読みこますことは忘れないでください。
これでブラウザごとの違いがなく無駄な余白がなくなりますので是非リセットCSSを簡単にした「ress.css」を使用してデザインを頑張っていきましょう。