私が勤務する会社でコーディングのルールを決めることになりました。
ルールの中でリセットCSSはなにを使用するか。という議題になったので、私が調べた内容と、結論を記録しておこうと思います。
最後には、私が使っているノーマライズCSSを載せておくので、なにを使っていいか迷っている人は、使ってみてください。コピペOKで、すぐに使えます！
リセットCSSをベースにして独自のノーマライズCSSを作成する。
結論から書きますが、リセットCSSは公開されているものをダウンロードしてきて、ノーマライズCSSを書いていくのが1番早く、リセット漏れもないのでオススメです。
リセットCSSとは。
まず、初心者の方のために簡単にリセットCSSのことを書いておきます。
リセットCSSとは、ブラウザ間の差異をなくすために設置するCSSです。
主要なブラウザはいくつかありますが、それぞれHTMLタグに適用されているデフォルトのスタイルが微妙に違います。
そのため、Chromeでは問題なくても、Safariでは表示が崩れてしまう。とうようなことが発生します。
以上のことから、ブラウザ間での表示崩れをなくすために、リセットCSSは用いられます。
中には、HTMLタグによってはデフォルトのスタイルに大きな差異があるものもありますので、デザインが大きく崩れてしまうこともあります。
リセットCSSを設置するメリット。
こちらも初学者のために書いておきます。
- ブラウザ間の差異をなくせる。
- ブラウザ固有のバグを修正できる。
- チーム開発のときにエラーを見つけやすくなる。
他にもあるかもしれませんが、以上３つが主なメリットとなります。
リセットCSSの読み込みは自分のスタイルの前に読み込む。
リセットCSSは、必ず自分が適用させるスタイルの前に読み込みましょう。
よく初心者の方が間違うのは、リセットCSSを自分の記述したスタイルの後に読み込ませてしまい、自分の記述したスタイルが適用されない。
なんてことがありますので、当然ですが読み込ませるときは先に読み込ませます。
<head>
//リセットCSS
<link href="reset.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>読み込みはCDNを使わず読み込ませる。
リセットCSSは、必ずCDNを使わずに、ファイルを作成し、サーバーに設置したものを読み込ませましょう。
理由は、CDNで読み込ませていると、ホスティングされたデータが更新されたときに、デザインが崩れてしまうことがあるからです。
最悪の場合データのホスティングがなくなる可能性もあります。
リセットCSSが変更されると、デザインが崩れるとこ以上に、Webサイト自体が崩壊するほどの崩れになる可能性もあります。
シンプルなサイトであれば、そこまで影響を受けることがないかもしれませんが、複雑なサイトになればなるほど、リスクが高くなります。
そのため、リセットCSSは必ずダウンロードして、直接読み込ませるようにしましょう。
リセットCSSの種類は３種類ある。
では、次にリセットCSSの種類を書いておこうと思います。
一言でリセットCSSといっても、種類ごとに分けると３種類あります。
| CSS | 違い |
| リセットCSS | デフォルトのスタイルを全てなくします。 |
| ノーマライズCSS | デフォルトのスタイルを全てなくした上で、統一したスタイルを適用させます。 |
| サニタイズCSS | デフォルトのスタイルを全てなくした上で、統一したスタイルを適用させ、さらに扱いやすいようにスタイルを指定します。 |
以上が、リセットCSSの種類です。
以降、簡単に解説していきます。
リセットCSS
ブラウザ間のデフォルトを打ち消すだけが、リセットCSSです。
それ以外は、リセットCSS上ではスタイルをなにも適用させません。
全てのスタイルが打ち消されるのですっきりしますが、逆にいうとすべてのタグにスタイルを適用させなくてはなりません。
そのため、コードの記述が増えてしまう。というデメリットがあります。
ノーマライズCSS
ノーマライズCSSは、リセットCSSで打ち消したのちに、汎用性の高いHTMLタグへ事前にスタイルを適用させておきます。
これで、リセットCSSに比べて、コードの記述量を少し抑えられるという感じです。
チームで開発する場合は、どこまでを共通として認識するのか。事前に打ち合わせしておきましょう。
サニタイズCSS
サニタイズCSSは、デザインのベース（テンプレート）を決めるようなイメージです。
扱いやすいようにスタイルを適用させるだけでなく、ホバーのアクションやレスポンシブのデザインなど、予め設定しておきます。
正直、案件によっては邪魔になる可能性もあるので、良し悪しです。
結局、どれを使うのがいいのか。
私は、ノーマライズCSSをオススメします。
理由は、リセットCSSだけでは記述が増えてしまい、ノーマライズCSSだと設定しすぎ、案件ごとの調整が手間と感じたためです。
ノーマライズである程度、初期値だけを決めておき、記述は増えますが肝心なスタイルは案件ごと設定していくのがいいでしょう。
ベースのリセットCSSの選定。
ここからは、私が使っているリセットCSSを載せておきます。
以下をベースとさせていただき、リセットCSSを作成いたしました。
GitHub : Destyle.css
こちらのCSSは、すべてのスタイルを消し去ってくれます。
綺麗さっぱり、デフォルトのスタイルがなくなるので、スタイルが当てやすくなります。
Destyle.cssがサポートしているブラウザ。
Destyle.cssは、以下のブラウザをサポートしています。
- Chrome
- edge
- Firefox ESR+
- Internet Explorer 10+
- Safari +
- Opera
十分なサポート範囲を確保してくれていますね。
完成したノーマライズCSS。
それでは、Destyle.cssをベースとしてノーマライズCSSを作ってみましたので、以下にコードを記述しておきます。
@charset "UTF-8";
*,
::before,
::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-style: solid;
border-width: 0;
min-width: 0;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
}
main {
display: block;
}
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}
pre {
font-family: monospace, monospace;
font-size: inherit;
}
address {
font-style: inherit;
}
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: inherit;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit;
}
button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
cursor: default;
}
:-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
}
option {
padding: 0;
}
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
[type=number] {
-moz-appearance: textfield;
}
label[for] {
cursor: pointer;
}
details {
display: block;
}
summary {
display: list-item;
}
[contenteditable]:focus {
outline: auto;
}
table {
border-color: inherit;
border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}
body {
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
a {
-webkit-transition: 0.5s;
transition: 0.5s;
display: inline-block;
}
@media (min-width: 800px) {
a[href^="tel:"] {
pointer-events: none;
}
}
span {
display: inline-block;
}
img {
max-width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
-webkit-filter: blur(0);
filter: blur(0);
-webkit-transform: rotate(0.0001deg);
transform: rotate(0.0001deg);
}
*::before,
*::after {
-webkit-transition: 0.5s;
transition: 0.5s;
}リセットCSSに捕捉した記述。
リセットCSSに私が補足で追記した記述を解説していきます。
使う際は、自分が使いやすいように、もしくはチームで決めた内容を追加して貰えばいいと思います。
約物半角の処置を行う。
約物半角の処理をbodyに適用させています。
body {
// 約物半角（効果がないフォントは、yakuhan.jpで対応）
font-feature-settings: "palt";
}ただ、Opentypeフォント以外には適用されません。
適用されない場合は、Yakuhan.jpを活用して対応します。
約物半角やYakuhan.jpの使い方については、下記の記事をご覧ください。
WEB制作の仕事を始めて、最初にハマったこと。それが、約物半角（ヤクハン処理）でした。 とういか、約物半角ってなに？って感じから始まりました。 なので、業務中に「ヤクハン処理されてけど！」って言われてもなんのことだか・[…]
mainをdisplay: block;にする。
IE9 〜 IE11の対策として設定してあります。
IE9 〜 IE11では、mainタグはinlineがデフォルトのため、blockと指定してあります。
main {
display: block;
}aタグのtelリンクはスマホのみ有効にする。
パソコンでは、動作しないようにしています。
ブレイクポイントは、適宜修正してください。
@media (min-width: 800px) {
a[href^="tel:"] {
pointer-events: none;
}
}aタグのtelリンクについて詳しく知りたい方は、下記の記事をご覧ください。
電話番号の記述に<a href="tel:"></a>を利用して、電話番号への発信リンクを貼る方法を調べたので、備忘録として残しておきます。 PCでは、電話番号への発信リンクは無効にしたいので、その方法も載せておきます。[…]
imgタグへFirefoxのバグ対策をする。
Firefoxのバグ対策で以下のように指定してあります。
img {
-webkit-filter: blur(0);
filter: blur(0);
-webkit-transform: rotate(0.0001deg);
transform: rotate(0.0001deg);
}Firefoxでは、svg画像をY軸方向に動作させたとき、画像がブレたり、縮小拡大を繰り返すバグが発生します。
そのため、filterとrotateを適用させています。
原因と対策については、下記の記事で詳しく解説しています。
FirefoxでCSSアニメーションの挙動がおかしくなる現象に遭遇しました。アニメーション自体は、複雑なものではなく、よくあるありきたりなアニメーションでした。Firefoxは、シェアも低いわけではないので、今後のために記録を残しておきま[…]
リセットCSSとノーマライズCSSの書き方と注意点。
以上、私が作成したノーマライズCSSでした。
リセットCSSも自ら書くこともできますが、記述漏れがあったりなど、なにかと面倒なことが多いです。
それであれば、配布されているデータをもとにして、活用していく方が効率的です。
ノーマライズCSSについては、「自分が使いやすいように＝どの案件でも書いている記述」を思い出して書いてみてください。
私が作ったノーマライズCSSには、私が毎回書いている記述を中心に書いてあります。
上記で解説した３つの記述以外にもあります。
例えばインライン要素だけど、実際は幅や高さを指定することの多い要素ってありますよね。
aタグとかspanタグとかです！
a {
transition: .5s;
display: inline-block;
}
span {
display: inline-block;
}そういった要素にもあらかじめインラインブロック要素になるように、プロパティを設定しています。
こうすることで、「あれ？なんで幅効かない？」ということも防げますし、毎回すべてのタグにdisplay: inline-block;もしくは、display: block;と指定する手間を省いています。
例にあげたように、自分が使いやすい、毎回記述しているものに、あらかじめスタイルを適用させておきましょう。
事前にスタイルを適用させておくことで、重複したコードの記述が減り、可読性が上がります。
可読性が上がれば、ミスもなくなり、最終的には作業効率もアップするはずです。
ただ、書きすぎには注意が必要です。
ノーマライズCSSに記述したのを忘れていて想定外の動きやスタイルになってしまい、二度手間になることがあるります。
コーディングしていて頻出する記述だけに絞っておきましょう。