リセットCSSやNormalize.cssを使ってブラウザのスタイルを整えてからコーディングする方法
- acky.infoホーム
- デザインのヒント
- CSSテクニック
- リセットCSSやNormalize.cssを使ってブラウザのスタイルを整えてからコーディングする方法
リセットCSSやNormalize.cssを使ってブラウザのスタイルを整えてからコーディングする方法の概要です
CSSを指定していないHTMLをブラウザで表示すると、ブラウザの持っているCSSが適用されます。
しかし、ブラウザの持っているスタイルのままだと、文字サイズが違ったり、余白などの幅の計算が複雑になるなどコーディングの手間が増えてしまいます。
そこで、ブラウザの持っているCSSを整えてからコーディングをすると便利です。
CSSを整える方法は、ブラウザの持っているスタイルのほとんどを調整するリセットCSSを使う方法と、ブラウザの持っているスタイルをなるべく残すNormalize.cssを使う方法の2種類があります。
どちらか片方の方法が優れているということはありませんが、Normalize.cssが公開されてからはHTML・CSSのフレームワークなどでもNormalize.cssが使われているので、Normalize.cssを積極的に使うといいでしょう。
まとめ！
- Normalize.cssを使ってブラウザの持っているCSSを整える
リセットCSSを使ってブラウザのスタイルを整える方法
リセットCSSは、ブラウザの持っている余白やフォントサイズなどのスタイルのほとんどを調整してブラウザごとの差をなくして、コーディングしやすくするためのCSSです。
独自にリセットCSSを用意する方法もありますが、WEBに公開されているリセットCSSを使う方が簡単です。有名なリセットCSSでHTML5にも対応しているものは、Eric Meyer’s Reset CSS、html5doctorです。
リセットCSSを使うときは、WEBサイトからダウンロードやコピ＆ペーストをして、サイトを構築している場所へCSSファイルを保存します。
保存したリセットCSSがほかのCSSよりも先に読み込まれるように、<head>～</head>のなかにCSSへのリンクを書きます。
HTMLコード
<!-- リセットCSS --> <link rel="stylesheet" href="/css/reset.css"> <!-- そのほかのCSS --> <link rel="stylesheet" href="/css/site.css"> <link rel="stylesheet" href="/css/page.css">
独自に用意したリセットCSSの例
公開されているリセットCSSをそのまま使わずに、改変してサイト独自のリセットCSSを使うときもあります。
独自に用意したリセットCSSではfont-familyなども含めて書くことが多いです。
下のCSSはacky.infoで使っていたリセットCSSです。コメントもつけましたので、独自にリセットCSSを用意するときの参考にしてください。
CSSコード
/*全称セレクタの使用は好みが分かれますがリセット忘れがないので便利です*/
* {
margin: 0px;
padding: 0px;
}
/*firefoxで縦のスクロールバーが常に表示されるようにします*/
html {
overflow-y: scroll;
}
/*フォントファミリー、フォントサイズを指定します*/
body {
font-family: "Meiryo", "メイリオ", "Arial", "ヒラギノ角ゴ Pro w3", "Hiragino Kaku Gothic Pro,osaka", "ＭＳ Ｐゴシック", sans-serif;
font-size: 10px;
}
/*hタグも10pxから計算できます*/
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/*テキスト成形のスタイルです*/
p, li, dt, dd, table {
text-align: justify;
text-justify: inter-ideograph;
line-break: strict;
font-size: 1.6rem;
line-height: 1.8;
}
/*imgに付く枠線を消します*/
img {
border: 0px;
}
/*リストのマークを消します*/
ul,ol{
list-style-type: none;
}
/*テーブルの枠線の設定です*/
table {
border-collapse: collapse;
border-spacing: 0px;
}
/*イタリックなどがかかる文字などを通常のスタイルにします*/
address, caption, cite, code, dfn, em, th, var {
font-style: normal;
font-weight: normal;
}
/*firefoxでoptionが埋まってしまうときの対策です*/
select option {
padding: 0px 5px;
}
/*labelの上にポインターがくるとアイコンが変わるようにします*/
form label {
cursor: pointer;
}
/*:afterを使ってフロートを解除します*/
.cfix:after {
content: "";
display: block;
clear: both;
}
/*オーバーフローを使ってフロートを解除します。afterを使う方が良い場合が多いです*/
.cfixo {
overflow: hidden;
}
/*リセットしたリストのスタイルをもとに戻します*/
.ul,
.ol {
padding-left: 40px;
list-style-type: disc;
}
.ol {
list-style-type: decimal;
}
Normalize.cssを使ってブラウザのスタイルを整える方法
Normalize.cssはラウザの持っているスタイルをなるべく残しながら、ブラウザごとの差を少なくするように作られたCSSです。
スマートフォンサイトの初期フォントサイズを調整する-webkit-text-size-adjust: 100%;などのCSSも書かれていたりと、PCサイトでもスマホサイトでも使えます。
Normalize.cssをWEBサイトからダウンロードやコピペをして、サイトを構築している場所へCSSファイルを保存します。
保存したNormalize.cssがほかのCSSよりも先に読み込まれるように、<head>～</head>のなかにCSSへのリンクを書きます。
HTMLコード
<!-- Normalize.css --> <link rel="stylesheet" href="/css/normalize.css"> <!-- そのほかのCSS --> <link rel="stylesheet" href="/css/site.css"> <link rel="stylesheet" href="/css/page.css">
調整用のCSSの例
Normalize.cssはulの余白やビュレット（リストのマーク）などがそのままなので、コーディングしづらいときがあります。
リセットCSSほど調整はしませんが、いくつかのタグは調整してからのほうがコーディングしやすくなるので、リセットCSSほどではありませんがset.cssなどと名前をつけた調整用のCSSを用意するといいでしょう。
HTMLコード
<!-- Normalize.cssと調整用のCSS --> <link rel="stylesheet" href="/css/normalize.css"> <link rel="stylesheet" href="/css/set.css"> <!-- そのほかのCSS --> <link rel="stylesheet" href="/css/site.css"> <link rel="stylesheet" href="/css/page.css">
調整用のCSSコードの例
/*フォントの種類やサイズを指定します*/
html {
font-family: Helvetica, Arial,"Meiryo","メイリオ","ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro,osaka","ＭＳ Ｐゴシック",sans-serif;
color: #475355;
font-size: 10px;
overflow: hidden;
overflow-y: scroll;
}
body {
min-width: 1100px;
margin: 0;
}
/*タブレットサイズになったときの最大サイズを指定しています*/
@media (max-width: 1024px) {
body {
min-width: 100%;
}
}
/*見出しタグの指定をしています*/
h1, h2, h3, h4, h5, h6 {
line-height: 2;
margin-top: 0px;
margin-bottom: 0px;
}
/*タブレットサイズ・スマホサイズになったときの見出しタグの行間の指定をしています*/
@media (max-width: 1024px) {
h1, h2, h3, h4, h5, h6 {
line-height: 1.6;
}
}
@media (max-width: 740px) {
h1, h2, h3, h4, h5, h6 {
line-height: 1.4;
}
}
/*ボーダーを余白にふくめて計算を簡単にします*/
h1, h2, h3, h4, h5, h6,
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary,
div, span,
p,
ul, ol, li,
dl, dt, dd,
table, tr, th, td,
a, img,
*:after, *:before {
box-sizing: border-box;
}
figure {
margin: 0;
padding: 0;
}
/*テキストを使うタグの指定です*/
p,
li,
dl,
table {
line-break: strict;
word-break: break-strict;
word-wrap: break-word;
line-height: 2;
font-size: 16px;
margin-top: 0px;
margin-bottom: 0px;
}
small {
font-size: 12px;
}
@media (max-width: 1024px) {
p,
li,
dl,
table {
line-height: 1.7;
}
}
@media (max-width: 740px) {
p,
li,
dl,
table {
line-height: 1.5;
}
}
/*テーブルの中での改行の指定をしています*/
tr {
word-break: break-all;
}
/*折り返し禁止のクラスです*/
.nw {
white-space: nowrap;
}
/*画像と画像のあいだの余白を消します*/
img {
vertical-align: bottom;
max-width: 100%;
}
/*ドラッグして選択したときの文字色と文字の背景色です*/
::selection {
background: #7cc6cf;
color: #ffffff;
}
::-moz-selection {
background: #7cc6cf;
color: #ffffff;
}
/*リンクの文字とスタイルをしています*/
a {
background: transparent;
text-decoration: none;
color: #2a3297;
transition: 0.3s;
}
a:focus{
outline:none;
}
a:hover {
text-decoration: underline;
}
/*afterまたはoverflowを使ってクリアするクラスです*/
/* --after型-- */
.cfx:after {
content: "";
display: block;
clear: both;
}
/* --overflow型-- */
.cfxo {
overflow: hidden;
}
/*リストタグのスタイルを消します*/
ul,
.li_none {
list-style-type: none;
margin: 0px;
padding: 0px;
}
dd {
margin-left: 0;
}
/*リストタグのスタイルを戻します*/
.ul{
list-style-type: disc;
margin: 1em 0;
padding-left: 40px;
}
/*フォームのための指定です*/
textarea {
overflow: auto;
vertical-align: top;
resize: vertical;
}
select option {
padding: 0px 5px;
}
form label {
cursor: pointer;
}
input:placeholder {
color: #999;
}
input:-ms-input-placeholder {
color: #999;
}