各ブラウザごとにデフォルトの設定が異なり、
同じHTMLでも微妙に異なる表示となるため、仕事としてコーディングする場合、リセット用のCSSを一番最初に読み込むのが最近は定番になっています。
リセット用CSSもどこまでリセットするかなど様々な考え方もあり
世界中に無数のリセット用CSSが公開されています。
私は、YUI LibraryのCSS Resetをベースに自分なりにカスタマイズした下記のものを標準的に使っています。
YUIのリセット用CSSの一番大きな特徴はH1、H2など見出しタグも全て同じ文字装飾にリセットしている点です。
@charset "utf-8";
/*reset*/
html {
color: #000;
background: #fff;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
line-height: 1.5;
}
table {
border-collapse: collapse;
border-spacing: 0;
font-size: inherit;
font: 100%;
}
fieldset,
img {
border: 0;
}
img {
vertical-align: bottom;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: 400;
}
ol,
ul {
list-style: none;
}
li {
list-style-type: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: 400;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
font-size: smaller;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%;
}
legend {
color: #333;
}
body {
font: 12px "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", "Lucida Grande", sans-serif;
letter-spacing: .2em;
font-feature-settings: "palt";
}
.mincho {
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", "Times New Roman", Times, "HG明朝B", "ＭＳ 明朝", serif;
}
#container {
overflow: hidden;
}
input[type=submit] {
-webkit-appearance: none;
}
*:after {
display: block;
clear: both;
}
.cf {
zoom: 1;
}
.cf:after {
content: "";
}
@media (max-width:767px) {
img {
max-width: 100%;
height: auto;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-sizing: border-box;
}
body {
-webkit-text-size-adjust: 100%;
}
input,
textarea,
select {
font-size: 16px
}
/*common*/
a {
transition: all 0.3s linear;
word-wrap: break-word;
overflow-wrap: break-word;
}
a:link,
a:visited {
text-decoration: none;
color: #666;
}
a:hover {
text-decoration: none;
color: #999;
}
button {
background: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
.cfはフロートをクリアするためのショートコードなので
floatではなく完全にflexboxでコーディングする場合、不要です。
フォントの指定も游ゴシックや游明朝も入れていますが、クセ（コーディング上の）も強いので場合によっては削除しても良いかもしれません。
#container {
overflow: hidden;
}
で、特にスマホで横ブレなど起きないように設定しています。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-sizing: border-box;
}
でpaddingやborderなどBOXの横幅に影響するものは全て「込み」で表示されるように指定しwidthの横幅指定からはみ出さないようにしています。
一部色指定なども入れているので、コーディングするデザインに合わせて一部改変して使っています。
※2023.01.06 URLなど長い半角英数字をリンク内で折り返すようにCSS追加
※HTMLテンプレートはこちら
