3-1. リセットCSSを準備する

このチャプターでは、CSSを記述する下準備として、まずリセットCSSを準備します。リセットCSSは有志の方が公開しているものを利用することもできますが、本ハンズオンではリセットCSSを自分で記述します。

CSSファイルを作成する

まずはCSSファイルを作成します。

HTML文書のlink要素で指定したCSSファイルパスのとおりに、/cssディレクトリを作成しその中にstyle.cssファイルを作成します。CSSファイルの文字コードは、HTML文書のmeta要素のcharset属性値に合わせて、utf-8で作成します。

CSSの文字コードを指定する

CSSファイルを作成したら、1行目に以下を記述します。

@charset "utf-8";

@charset（アットルール）

@charsetは、CSSで使用する文字コードを定義するための記述です。「アットルール」ともいい、文字コードを定義する@charsetのほか、前のチャプターで紹介した@media（メディアクエリ定義）や@import（CSSファイル内で別のCSSファイルを読み込むための定義）なども「アットルール」に該当します。

文字コードの指定について

文字コードの指定は大文字のUTF-8でも構いません。二重引用符で囲み、セミコロンで終わります。

この指定は、CSSファイル内で/* ... */のコメントアウトやcontentプロパティの値などに日本語などの2バイト文字を使用する場合には必ず指定します。エディター上では問題なくても、ファイルをサーバーにアップロードした際のファイル内の文字化けを防ぐためです。

CSSファイル内で2バイト文字を使用しない場合はこの記述は必要ありませんが、記述することによるデメリットはないので、基本的には記述しておくことを推奨します。

スタイルをリセットする

各ブラウザが独自に用意しているデフォルトCSSをいったんリセットします。これによりブラウザ間のデフォルト表示の差異をなくし、CSSで記述したスタイルがおおむねどのブラウザでも同じように反映されることになります。

CSSファイルは上の行から順番に読み込まれていくので、リセット用のCSSは最初に記述します。

HTML文書で使用しているHTML要素をカンマ区切りで指定し、宣言ブロック（{}）内に宣言を記述します。

/* ============================ */
/*  reset
/* ============================ */

body, p, h1, h2, h3, ul, li, small {
  margin: 0;
  padding: 0;
}

上記は特定のHTML要素をセレクタに指定していますが、以下のように書くこともできます。

* {
  margin: 0;
  padding: 0;
}

CSSにおいて*（アスタリスク）は「ユニバーサルセレクタ（全称セレクタ）」といい、「すべてのHTML要素」に一致します。以下のように書くと、「div要素内のすべての子要素」が対象になります。

div * {
  margin-right: 50px;
}

コメントの書き方

リセットCSSを記述するにあたり、以下のようにで「リセットCSSの記述箇所である」ことをコメントとして記載しています。

/* ============================ */
/*  reset
/* ============================ */

HTML文書におけるコメントの記述は<!-- -->ですが、CSSにおいては/* ... */でコメントを記述します。VS Codeなどのエディターでは、コメントの箇所は文字色が変わります。

このように見出し的にコメントを入れておくと、あとで自分でコードを見返すときにも、目的の箇所を探しやすくなります。

/* ... */は上記のように、1行で書くことも複数行に渡って書くこともできます。コメントの区切り（飾り枠的なもの）も自由なので、いろいろなサイトのソースコードを見てみると、その人それぞれの個性が見えて面白い部分です。

余白の調整

margin / paddingプロパティ

先のチャプターで説明したように、HTML要素はボーダーを挟んで「マージン領域（外側）」と「パディング領域（内側）」を持っています。marginプロパティでは外側の余白、paddingプロパティでは内側の余白をそれぞれ指定します。

リセットCSSの記述では、セレクタに指定した要素のmarginとpaddingをそれぞれ0としています。ブラウザがそれぞれ用意しているデフォルトCSSはブラウザごとで違っており、それらを考慮しながらCSSを記述するのはかなり難度が高いので、このようにいったん余白をなくしてしまいます。

body, p, h1, h2, h3, ul, li, small {
  margin: 0;
  padding: 0;
}

上記の例では、指定したセレクタ（HTML要素）のマージン領域とパディング領域の値を、上下左右すべて0にしています。

例では一括で指定していますが、marginとpaddingは個別に指定することも可能で、それぞれ以下のプロパティを使用します。ここではmarginのみプロパティを記載していますが、paddingも同様です（marginをpaddingに読み替えてください）

margin: 0; /* 上下左右すべて0（なし） */
margin: 30px 50px; /* 上下30px、左右50px */
margin: 30px 50px 60px; /* 上30px、左右50px、下60px */
margin: 0 30px 50px 0px; /* 上0、右30px、下50px、左0（時計回りで指定する） */
margin-top: 30px; /* 上30px */
margin-right: 50px; /* 右50px */
margin-bottom: 30px; /* 下30px */
margin-left: 50px; /* 左50px */
margin-block: 30px; /* 上下30px */
margin-block: 30px 10px; /* 上30px、下10px */
margin-inline: 50px; /* 左右50px */
margin-inline: 30px 10px; /* 左30px、右10px */

margin-topをmargin-block-startというような書き方もありますが、-top -right -bottom -leftの書き方で構いません。

また、例ではすべて単位をpxとしていますが、em rem %などの指定も可能です（計算式を入れるcalc()を利用した記述方法もあります）

指定する単位は、margin: 5em 30px;のように混同していても問題ありません。

HTML要素の横と高さの計算方法を指定する

つづいて以下を記述します。

* {
  box-sizing: border-box;
}

セレクタに指定している*は先述した「ユニバーサルセレクタ（全称セレクタ）」です。「すべてのHTML要素」に一致します。

box-sizingプロパティ

box-sizingプロパティは、HTML要素の横と高さの計算方法を指定するプロパティで、指定できる値は以下です。

  • content-box：widthあるいはheightで指定した値にボーダーとパディング領域を含めない（初期値）
  • border-box：widthあるいはheightで指定した値にボーダーとパディング領域を含める

少しわかりづらいと思うので、図にまとめました。

box-sizingの振る舞いについての説明

box-sizingの初期値であるcontent-boxを指定した場合、ブラウザに表示される実際のサイズは「幅＋ボーダーの太さ＋パディング領域」になります。上図では指定された幅の500pxに、左右5pxずつボーダー（10px）と左右10pxずつのパディング領域（20px）が足された「530px」が実際の要素の横幅となります。

一方、border-boxを指定した場合は、ボーダーとパディング領域を含んだ状態で、指定した「500px」がそのまま実際の要素の横幅としてブラウザに表示されます。

content-box;はCSSを記述する際考えることが増えてしまい、意図せずコンテンツ領域からはみ出してしまった…ということも起こりやすいので、基本的にはbox-sizing: border-box;を全要素に対して指定することを推奨します。

画像（img要素）のスタイルをリセットする

リセットCSSとしては最後にimg要素のスタイルを割り当てます。

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

vertical-alignプロパティ

vertical-alignプロパティはインラインレベル要素（img要素やa要素）または表（table）のセル（thやtd）に対して指定できるプロパティです。主に以下のような場合に使用します。

  • テキストとimg要素が横並びである場合に、img要素の垂直方向の位置を決める
  • 表のセル（thやtd）の垂直方向の位置を決める

vertical-alignは縦（垂直）方向の位置を指定します。指定できる値はいくつかありますが、代表的なものは以下です。

  • baseline：要素のベースラインを親要素のベースラインに揃える（初期値）
  • top：要素の上端を行全体の上端に揃える
  • middle：要素の中央をおおむね親要素の中央に揃える
  • bottom：要素の下端を行全体の下端に揃える

初期値のbaselineを指定すると、親要素で囲われた画像の下に微妙な空白が発生するため、リセットCSSではvertical-align: middle;を指定します。

max-widthプロパティ

max-widthプロパティは「要素の横幅の最大幅」を指定します。要素の高さの最大幅を指定するmax-height、逆に最小幅を指定するmin-widthやmin-heightというプロパティもあります。いずれも単位はpxや%、emなど指定可能です。

一例として、横幅が500pxの画像（img要素）に対して、それぞれwidth: 100%;とmax-width: 100%;を指定した場合の表示は以下のようになります。

  • width: 100%;：画像は親要素の横幅いっぱいに表示される
    • 親要素の横幅より画像が小さい場合は、親要素の横幅に合わせて引き伸ばされる
  • max-width: 100%;：画像はその横幅である「500px」が表示される最大幅になる
    • 親要素の横幅が500px以上の場合、画像の横幅は500pxの状態で表示される
    • 親要素の横幅が500pxより小さい場合、画像の横幅は親要素の横幅に合わせて縮小される

heightプロパティ

heightプロパティは要素の高さを指定するプロパティです。要素の横幅の指定にはwidthプロパティを使用します。いずれも単位はpxや%、emなど指定可能です。

先述のbox-sizing: border-box;の指定をしていると、height（あるいはwidth）プロパティは、その指定値が「ボーダーとパディング領域を含めた値」になります。

なお、widthプロパティもheightプロパティも、値はautoが初期値です。これは対象のHTML要素に合わせて自動的に横幅や高さを算出します。

width heightどちらかに長さの値が指定されている状態で、もう一方のプロパティの値にautoが指定されている場合は、長さが指定されているプロパティの値に応じて、もう一方の長さが自動的に算出されます。img要素にwidthとheightの属性値が指定されている場合にCSSでheight: auto;と指定すると、画像の横幅がブラウザの表示幅に合わせて縮小あるいは拡大されるにつれ、高さが自動的に算出されて表示されます（width: auto;の場合はheightの値に応じて自動的に算出されます）

表示確認

この状態でstyle.cssを保存し、index.htmlをブラウザで開くと、以下のように表示されます。

リセットCSSをあてた状態のindex.htmlのキャプチャ画面

box-sizingの効果はまだ見えませんが、マージンとパディングがなくなっていることが確認できます。

なお、リスト項目のマーカーは消えているのではなく、リストのマージンとパディングがなくなった結果、画面から表示アウトしている状態です。

ここまでに記述したコード

ここまで記述したCSSファイルの中身です。

@charset "utf-8";


/* ============================ */
/*  reset
/* ============================ */

body, p, h1, h2, h3, ul, li, figure, small {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

リセットCSSの記述は以上です。次はベースとなるCSSを記述します。

参考情報など

このチャプターで解説したCSSのプロパティや値などについて、詳細を知りたい場合は、以下MDN (MDN Web Docs)のドキュメントなどもご覧ください。

results matching ""

    No results matching ""