モックアップ作成 – ブラウザ標準のスタイルをリセット

スタイルシートを作り込むにあたり、まずは各ブラウザのデフォルトスタイルをリセットします。

ブラウザのデフォルトスタイルとは

各ブラウザ(IE、FireFox、Chrome、safari等)は、HTMLのタグ毎にデフォルトスタイルというものをそれぞれ独自に持っており、同じHTMLファイルをブラウザで表示してもその見た目はブラウザごとに異なってしまいます。

例えば先日作った single.html を Safari で表示すると以下のようになりますが、

on Safari

同じファイルを IE11 で表示すると次のようになってしまいます。

on IE10

一見変化がないように見えるかもしれませんが

  • フォントや文字の大きさ
  • 行間の幅
  • 字間の幅
  • ウィンドウ内の余白
  • フォーム(ボタンやテキストボックス)のスタイル

などはブラウザによって微妙に違うので、スタイルシートで細かくデザインを作り込むうえではかなり悩ましいことになります。

これを極力回避するため、スタイルシートを記述していく際には事前にリセット用のスタイルシートを読み込み、ブラウザ間の差異を一旦リセットしておく必要があるというわけです。

Compassでリセット用のスタイルシートを書く

このリセット用スタイルシートについてはネット上に様々な書式のものが公開されています(以下はその一例)。

ただ今回は、せっかく Sass & Compass を導入しているので、Compassで提供されているリセット用CSSを使うことにしようと思います。

というわけで早速、style.scss を以下のように編集します。

import compass/reset

「@import “compass/reset”;」をSCSSファイルに記述することで、Compassが提供しているリセット用スタイルシートを挿入することができます。

Sublime Text3で「Command + b」キーをクリックして style.scss から style.css を生成します。

開くと以下のような記述が追加されています。

なお、上記のコードのうち「/*」と「*/」で囲まれたコメント部分にはこれから作るWordPressテーマの基本情報を書くことになっています。どんなことを書くかについては、後日詳しく説明する予定です。

このスタイルシートを読み込んでいる single.html をブラウザで開くと・・・

reseted html on Safari

また、IE11で開いた場合は・・・

reseted html on IE11

こんな感じにブラウザの独自スタイル(文字の大きさ、余白など)がリセットされているのがわかります。

 

次回はさらに Sass & Compass を使ってスタイルシートを記述していこうと思います。