2024年7月15日 01:00【初心者・未経験向け】ITエンジニアのポートフォリオを作ってみよう-CSS編 reset.cssとは？-
.png&w=1920&q=75)
CSSを実装していくにあたって下準備としてreset.cssというものをHTMLに読み込ませます。
reset.cssとは何か
reset.cssは、異なるブラウザ間でスタイルの一貫性を保つために使われるCSSファイルです。デフォルトでブラウザが持つスタイルをリセット（初期化）し、基盤となるスタイルをゼロから構築できるようになります。これにより、異なるブラウザでの見た目の違いを防ぎ、統一されたデザインを表示できます。
例えば、見出しタグ`<h1>`〜`<h6>`はブラウザによって異なるマージンが設定されています。reset.cssを使用すると、これらのタグのマージンを一律にリセットできるため、ブラウザ毎に異なった見た目になってしまうことを防げるというわけです。
reset.cssの使用方法
reset.cssを利用するには、プロジェクトのスタイルシートよりも先に読み込む必要があります。これにより、任意のカスタムスタイルが正しく適用されるようになります。
reset.cssの実装方法
`<link rel="stylesheet" href="reset.css">`タグをHTMLの`<head>`セクションに追加します。その後に、`<link rel="stylesheet" href="style.css">`と続けて、個別のスタイリングを適用します。
この手順により、全てのブラウザで統一された基本スタイルが適用され、デザインの不整合が防げます。これはWeb開発で非常に重要な手順なので、CSSを利用する際はマストで実装しましょう！
reset.cssにもいくつか種類があるのですが、今回は一般的なよく使われているresat.cssを紹介します。
style.cssとは別のファイルを作り、そこに記載しましょう。
reset.css
```css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
```
※上記のreset.cssをコピーして使用してもOKです！
このreset.cssは、すべてのHTML要素のデフォルトスタイルを取り除き、ブラウザ間で一貫したレンダリングを可能にします。reset.cssをプロジェクトに導入することで、予期しないスタイルの違いによる問題を避けながら、デザインを正確に制御することができるのでおすすめです。
この記事を書いた人
元々営業職でエンジニアの知識がゼロのところからプログラマーを目指して勉強中です。
元々営業職でエンジニアの知識がゼロのところからプログラマーを目指して勉強中です。
.png&w=640&q=75)
