新人
Webデザイナー
指定してもないのにブラウザに余計な余白ができている
ホームページ制作を始めて間もない時に、こんな場面に遭遇したことがあると思います。
それは、各ブラウザがデフォルトで持っているCSSの指定の影響です。
また、それ知ってるよという人もいるかと思います。
原因をわからない人も、知ってるよって人も本記事でご紹介する新しいリセットCSSを使い、原因の解消または、リセットCSSを新しいものにしませんか？
リセットCSS（reset.css）
下記CSSをコピペし、お使いのエディタに貼り付けてreset.cssを作成し、これから新規で作成するホームページで読み込ませてください。
reset.css
@charset "UTF-8";
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: none;
font-style: normal;
text-align: left;
zoom: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
table {
border-collapse: collapse;
font-family: inherit;
}
h1,h2,h3,h4,h5 {
font-size: 100%;
font-weight: normal;
line-height: 1;
}
input,textarea,select {
font-family: inherit;
font-size: 16px;
}
input[type="button"],input[type="text"],input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
textarea {
resize: none;
-webkit-appearance: none;
border-radius: 0;
}
th,td {
border-collapse: collapse;
}
table th,table td {
white-space: nowrap;
}
ul,ol {
list-style-type: none;
}
img {
vertical-align: text-bottom;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
height: auto;
width /***/:auto;
}
下記のように任意のフォルダに保存し、読み込ませてください。
<link href="css/reset.css"rel="stylesheet" type="text/css" >ここではcssフォルダの中にあるreset.cssを読み込ませるよう指定しています。
コピペでリセットCSSを作成しよう！まとめ
本記事で紹介したreset.cssをそのままコピペして使っていただいてもいいですが、これから制作するホームページに合わせて、記述を追加したり削除して使ってください。
2020年現在、このreset.cssで問題ないかと思いますが、この先新たなプロパティなど追加された場合、レイアウトが崩れる可能性もありますので、本サイトでも随時見直しを行い、最適なreset.cssを提供できるよう管理していきます。
おすすめプログラミングスクール
CSSでおすすめの本
テレワーク中の方へ
溜めこんでいる書類等はありませんか？
テレワークを機に整理しましょう！下記のページでおすすめの電動シュレッダーをご紹介しているので参考にして見てください。
