HTML/CSS WEB

デザイン崩れを防ぐリセットCSSはこれを使うだけで解決!!

こんにちはNAOです。

今回はWEBデザイン勉強初学者の方に便利なデザイン崩れを防ぐリセットCSSとはどういうものなのかを紹介したいと思います。

 

リセット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」というファイルを使用したいと思います。

 

Githubはコチラ

※リンク先にいく位必要は特にありません。

 

<link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css">を使用することで非常に簡単にリセットCSSを使用することが出来ます。

 

 

 

リセットCSSはCSSの前に必ず読みこますことは忘れないでください。

 

これでブラウザごとの違いがなく無駄な余白がなくなりますので是非リセットCSSを簡単にした「ress.css」を使用してデザインを頑張っていきましょう。

 

ご購読ありがとうございました。

ビジネスにもブログにも使いやすいWordPressテーマ

「WING(AFFINGER5)」

SEOや収益化に効果的な機能が豊富

記事ごとにAMP化を選択可能

簡単に設置出来るランキング機能をはじめとしたアフィリエイトを始めやすい設計

お得にご購入はコチラ

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery/PHP 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-HTML/CSS, WEB

© 2022 TSUTAERU BLOG