今日は「リセット用スタイルシート」について、その概要と私たちの見解、またウェブサイト制作の現場で実際に利用しているオンズ独自のスタイルシート［ONZE Reset CSS］を紹介していきます。
「スタイルシート・リセット」とは？
各ブラウザにはデフォルトのCSSが設定されていますが、このスタイルはブラウザによって大きく異なるため、注意深くコーディングをしていかないと後々に各ブラウザ毎の表示の違いに悩むことになり、作業が滞る原因になります。
「各ブラウザ毎の表示の違い」は無視できない重要な問題です。
HTMLとCSSでウェブサイトのデザインを構築していくとき、この相違点を考慮せずに作業ができることが理想です。
そこで、その後のコーディング作業が捗るように「各ブラウザのデフォルトのスタイルをあらかじめリセットしておこう」というのが「スタイルシート・リセット」の基本的な考え方です。
普及している代表的なリセット用のCSS
既に広く認知され普及している有名なリセット用のCSSとして、「Reset CSS」や「normalilze.css」あたりが挙げられます。
また最近では「normalilze.css」の開発者たちが新たに制作した「sanitize.css」も注目されていますね。
これらのリセット用のスタイルシートは確かに優れていて、これまで実際に弊社の制作現場でも頻繁に利用してきた経緯があります。
しかし、さらに使いやすいようにと改良と研究を重ねた結果、結局はオリジナルのリセット用CSSをゼロから開発することになりました。
OZ Reset CSS
……というワケで。
弊社オンズが実際に制作現場で使用しているリセット用のスタイルシート、名付けて［OZ Reset CSS］を紹介します。
※2015年11月11日、バージョン「1.1」にアップデートしました。
※2021年12月22日、バージョン「1.2」にアップデートしました。
※2024年10月21日、バージョン「1.3」にアップデートしました。
/*
ONZE RESET CSS
Author: ONZE
Author URI: https://on-ze.com
Version: 1.2 - 2024.10.21
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
*,
*::before,
*::after {
box-sizing:border-box;
}
* {
border:0;
margin:0;
outline:0;
padding:0;
font:inherit;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
text-decoration:none;
vertical-align:baseline;
}
article, aside, footer, header, main, nav, article, section {display:block;}
img, picture, audio, canvas, video, svg {display:block; max-width:100%;}
br,
hr {display:block;}
ol,
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:none;}
input,
select {vertical-align:middle;}
body {
line-height:1;
line-break:strict;
overflow-wrap:break-word;
overflow-wrap:anywhere;
word-break:normal;
font-feature-settings:"palt";
-webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
}
a {-webkit-tap-highlight-color:transparent;}
以上が「ONZE Reset CSS」になります。
おすすめポイント
まず目に付く最初のポイントはユニバーサルセレクタを利用している点かと思います。
「ユニバーサルセレクタ（全称セレクタ）」とは、CSS上では * で記述され、サイト内の全要素に対して同じスタイルを適用できる便利なセレクタになります。
この「ユニバーサルセレクタ」ですが、最近までは「レンダリング速度が遅くなる」というデメリットが懸念されて「時代遅れ」的な感覚で扱われてきました。
しかし実際に検証した結果、サイトの読み込み速度等、パフォーマンスにはほとんど影響がないことが判明しています。
また最新の「sanitize.css」でも利用されており、むしろ今では「ユニバーサルセレクタを使わないほうが時代遅れ」と言えます。
関連する特筆すべき点として、［ONZE Reset CSS］ではユニバーサルセレクタで box-sizing:border-box; を指定しており、「横幅・マージン・パディング」の指定の際にありがちなエラーに対しての予防策を講じています。
body要素には text-size-adjust:100%; を指定していることがポイントで、特に携帯端末での閲覧時に懸念される文字サイズの拡大・縮小を設定しています。
またHTML5で導入された新しいタグについては display:block; または display:inline-block; で「ブロック要素」として処理しています。
文章の折り返し問題
文章の折り返し問題については、body要素で指定した3つのプロパティで制御します。
- line-break:strict; /* 単語間の改行を厳格に制御、句読点の位置で適切に改行されるように禁則処理を厳格に適用 */
- overflow-wrap:anywhere; /* 長い単語や文字列がコンテナの幅を超えた場合に途中で改行して折り返すことを許可 */
- word-break:normal; /* テキストが自然に単語単位で折り返されるように指定、単語の分割はデフォルトに依存 */
これらのプロパティを使用することで、テキストの表示と折り返しを厳密にコントロールしています。
「ONZE Reset CSS」の使い方
具体的な使い方としては、スタイルシートの先頭にこのコードを記述して、その後に各要素を上書きしてスタイリングしていくことになります。
リセット用のスタイルシートは、先に挙げた「Reset CSS」「normalize.css」「sanitize.css」の他にも、優れたCSSがいくつも存在します。
ここで紹介した「ONZE RESET CSS」は絶対の自信を持ってオススメできるものですが、必ずしもこれが最善の解決策とは限りません。
コーディングする製作者の「クセ」もあります。
プログラムのコードは、時代と流行の変化や、各デバイス・各ブラウザの仕様変更に伴い、常に改善を余儀なくされていくものです。
最初のうちは単にコピペして利用するだけで充分かと思いますが、これらをベースにして自分だけのベストなリセット用のスタイルシートの設定方法を模索してみてはいかがでしょうか。
ライセンスについて
［ONZE RESET CSS］の著作権（ライセンス）については暫定的に「GPL」としています。
著作権は放棄しませんが、どなたでもご自由にコピペしてお使いください。
感想や「ココはこうしたほうがいいのでは？」というような改善点があればお気軽に指摘していただけると嬉しいです。
ウェブサイトでお困りのときはオンズにお任せください！
