オリジナルのreset.cssを作成してみました【vol.1】

今日は、オリジナルのreset.cssを作成してみたので、こちらでご紹介します。

こんにちは。Webコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。2020.5.11~学習スタート2020.8.10~実務でコーディングしていますHTML/CSS(SCSS)/jQuery に加えWordPressの学習中です。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

オリジナルのreset.cssを作成しました【vol.1】
あとがき

オリジナルのreset.cssを作成しました【vol.1】

先日、#シナカフェことシナジーカフェにて、わたしのHTML/SCSSテンプレ企画を添削していただきました。その際、「ホンマさん(@hirohom2)は自作のreset.cssを使用されている」とお聞きし、わたしもご教授いただきながら作成してみることにしました。

とってもおすすめのシナジーカフェ詳細はこちらです！
添削・情報交換・お仕事募集など、フリーランスの欲しいが詰まったコミュニティです。

クリエイターズ・シナジーカフェ

クリエイターズ・シナジーカフェ（シナカフェ）は、知って・遊んで・繋がる、Webクリエイター総合オンラインコミュニティです。勉強中の初学者からベテランまで、Web制作・開発にまつわる幅広い職種のメンバーが参加中！

reset.cssとは

まず、reset.cssとは

それぞれのブラウザが持っているデフォルトのCSSをフラットにするためのもの

です。Chrome、IE、Safariなどブラウザはたくさんありますが、それぞれに持っているデフォルトのCSSが異なるのです。

CSSを記述する前にリセットを行わないと、ブラウザによっては意図しないデザインになる恐れがあります。

一般的なreset.cssの使い方
① オープンソースで出回っているものをコピペ
② ファイル名をreset.cssなどとして保存
③ <head>内のオリジナルcssの前に読み込む

オープンソースは、いくつも種類があります。

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。分かりやすい例だと、inputタグなどはSafariとChrom...

reset.cssを自作してみた理由

html/scssテンプレ企画のコードをシナカフェで添削していただいた際に、以下をご教授いただいたからです。

・オープンソースだと、いらない記述やデフォルト値にしておいて欲しい記述などがある
→使わない要素に対してリセットをかけると、読み込み速度に影響がある
・デザインカンプによって設定が変わるものは、別途setupのscssで記述すればよい

実際に、添削してくださったホンマさん(@hirohom2)や石油王さん(@wurst_design)は、ご自身でカスタマイズされたreset.cssを使用されています。

枠内のことを考慮したリセットの仕方と、リセットCSSの中身を自分できちんと知っておきたく、reset.cssを作成してみることにしました。

※今回、vol.1としたのは今後使っていく中で改善していこうと思ったからです。

どのような点に気をつけたか

作成にあたって、

・なるべく最小限の記述
・デザインカンプによって別途設定するものは除く
・LP/コーポレートなどの種類や制作規模にかかわらず利用できるシンプルなもの

以上に気をつけてreset.cssを考え、シナカフェにてアドバイスをいただきました。

オリジナルreset.css

ひとまず完成したものです。

/*reset.css*/

*,*::before,*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td,figure,figcaption {
  margin: 0;
  padding: 0;
}
img {
  vertical-align: bottom;
  height: auto;
  border:0;
}
li {
  list-style: none;
  list-style-position: inside;
}
header a,footer a {
  text-decoration: none;
}
input,textarea,button,select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

・line-heightやfont-sizeなどのカンプによって設定するものは、別途setupのscssファイルに記述することにしました。
・list-style-position:inside;を追加しました。
・aのtext-decorationはa全体に記述していたのですが、文章中のリンクには下線を入れたいことが多いとご教授いただき(確かにそうです…！)ヘッダーとフッターのみに指定しました。

とにかく最低限に削ったので、今後使用していく中で気付くことがあればブラッシュアップしていきたいです。

また、この記述は抜いた方が良い、入れた方がよいなどのご意見があったらぜひアドバイスいただけますと幸いです！よろしくお願いいたします！