3-1. ベースをつくる

このチャプターでは、CSSのベースを作成します。リセットCSSやサイトで使用するカラー、フォントなどを設定します。

CSSファイルを作成する

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

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

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

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

@charset "utf-8";

文字コードの指定は大文字の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;
}

コメントの書き方

コメント（/* ... */）で「リセットCSSの記述箇所である」ことをわかるように記載しておきます。このように見出し的にコメントを入れておくと、あとでコードを見返すときに探しやすくなります。

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

margin / paddingプロパティ

先のチャプターで説明したように、HTML要素はボーダーを挟んで「マージン領域（外側 / margin）」と「パディング領域（内側 / padding）」を持っており、ブラウザのデフォルトCSSにより余白が調整されています。

この余白をそのまま残してCSSを記述（コーディング）することも可能ですが、デフォルト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の書き方でOKです。

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

指定する単位は混同していても問題ありません（margin: 5em 30px;など）

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

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

* {
  box-sizing: border-box;
}

セレクタに指定している*は、「すべてのHTML要素」を表します。たとえば以下のようにすると、div要素配下のすべてのHTML要素が対象になります。

div * {
  margin: 10px;
}

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はインラインレベル要素や表（table）のセル（thやtd）に対して指定できるプロパティで、以下のような場合に指定します。

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

指定できる値はいくつかありますが、代表的なものは以下です。

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

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

max-widthプロパティ

max-widthは「要素を表示する最大幅」を指定します。高さの最大幅を指定するmax-height、逆に最小幅を指定するmin-widthやmin-heightというプロパティもあります。

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

  • width: 100%;：要素の親要素の横幅いっぱいに表示される（親要素の横幅より小さい場合、引き伸ばされる）
  • max-width: 100%;：要素の横幅である「500px」が表示される最大幅になる

単位は%以外にもpxやemなど指定可能です。

heightプロパティ

heightは要素の高さを指定します。単位はpxや%、emなど指定可能です。

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

なお、値はautoが初期値です。これは対象のHTML要素に合わせて自動的に高さ（あるいは横幅）を算出します。

width heightどちらかに長さの値が指定されている状態でもう一方のプロパティの値にautoが指定されている場合は、長さが指定されているプロパティの値に応じてもう一方の長さが自動的に算出されます。

img要素にwidthとheightの属性地が指定されている場合にCSSでheight: auto;と指定すると、画像の横幅がブラウザの表示幅に合わせて縮小あるいは拡大されるにつれ、高さが自動的に算出されて表示されます（width: auto;の場合はheightの値に応じて自動的に算出されます）

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

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

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

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

ベースを整える

スタイルリセットを終えたので、次はベースの見た目を整えていきます。ここで行うのは、以下の2つです。

  • body要素にスタイルをあてる
  • link要素にスタイルをあてる

body要素にスタイルをあてる

body要素にスタイルをあてて、サイト全体の文字色や背景色、フォント周りの設定を行います。

以下、CSSを記述します。

/* ============================ */
/*  base
/* ============================ */

html {
  scroll-behavior: smooth;
}

body {
  color: #143d60;
  font-size: 1rem;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  line-height: 1.8;
  background-color: #fdfbee;
}

body要素に指定しするCSSは、基本的には文字周りや背景色の指定がメインで、body要素内に記述されたHTML文書の基準になります。基準のCSSであればhtml要素に対して書いても間違いではないのですが、html要素は「ルート要素」ともいって大元の根幹を成すものなので、基本的にスタイルの指定は大元ではせず（上書きせず）、その直下のbody要素で指定するとよいです。

scroll-behaviorプロパティ

scroll-behaviorプロパティは、アンカーリンクなど同一ページ内でのスクロール時の挙動を設定します。このプロパティについては、html要素に対して指定するのが一般的です。

指定できる値は主に以下の2つです。

  • auto：同一ページ内に移動するリンクをクリック時、同一ページ内を瞬時にスクロール移動する（初期値）
  • smooth：同一ページ内に移動するリンクをクリック時、同一ページ内をアニメーションを伴って滑らかにスクロール移動する

「トップに戻る」ボタンを押すとページ上部にするするとスクロールして移動する、あの挙動です。JavaScriptを記述して実装していた機能ですが、ブラウザ側で対応が進み、最近のブラウザではCSSのみで実装できるようになっています。

今回のハンズオンでは実際にこの機能は利用しませんが、記述しておいて損はないので、このまま記述しておきます。

colorプロパティ

colorプロパティは文字色を設定します。指定できる値は主に以下です。

  • 固有名称：red blueなど（指定できる名称のカラーコードはこちら参照）
    • transparentは透明色
  • HEX値：#000 #fff #339aecなど16進数の表記
  • rgb値：rgb(255 124 127 / 0.2)などRGB値とアルファ値（透過度 / 省略可）の表記
  • HSL値：hsl(0 70% 80% / 0.25)などHSL値とアルファ値（省略可）の表記
  • HWB値：hwb(30 20% 0)などHWB値とアルファ値（省略可）の表記

他にもLab()やlch()、oklab() oklch()などで表記できます。

font-sizeプロパティ

font-sizeプロパティはその名のとおりフォントサイズを指定します。指定できる単位はpxや%、remやem、計算式を入れるcalc()などを使用して算出も可能です。また、滅多に使用しませんがsmall medium largeと指定することも可能です（この場合、ブラウザが適切な値を算出します）

ここでは1remと入れています。サイズの単位についての解説は別の機会にまわしますが、remは「root em」の略で、ルート要素（html要素のこと）のfont-sizeを基準とする単位です。リセットCSSなどでルート要素のfont-sizeの指定を触っていなければ（初期値のままであれば）、「1rem=16px」で計算されます。

であれば16pxという指定でも問題ないだろうというところですが、どちらでも構いません。

ただし、pxはどのデバイスでも固定値（絶対値）のため、ユーザー側でデバイスやブラウザ設定でフォントサイズを調整している場合、ユーザー側の変更がきかないという可能性があります（筆者の環境では、body要素にfont-size: 16px;と指定した場合、Google Chromeにおいてブラウザ設定のフォントサイズ指定がききませんでした）

これは筆者個人の感覚になってしまいますが、font-size: 1rem;と指定しておくと、ブラウザに対してなんとなく柔軟性があるような気がします。

font-familyプロパティ

font-familyプロパティではフォントファミリーの指定をします。指定は複数可能で、それぞれのファミリーをカンマで区切って指定します。「Hiragino Sans」など、間に半角スペースの入るファミリーは、ダブルクオーテーション（"）またはシングルクオーテーション（'）で囲みます。CSSファイルの1行目に@charset "utf-8";の記述があれば日本語名でも指定可能ですが、現在はこれらも半角英数字で指定するのが一般的です。

複数指定されているファミリーは左から順番に読み込まれ、そのファミリーがブラウザで表示できなければ、次が読み込まれていきます。ここで指定している'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serifについて、Windows環境ではヒラギノフォントは標準ではインストールされていないため、3番目に指定しているメイリオフォント（Meiryo）が使用されます。

font-familyの指定についてはどれが正しいということはないですが、現状ではMac用にヒラギノ、Windows用にメイリオを入れておくとよいかと思います。また、Google FontsでWebフォントを利用することも可能です（このハンズオンでは、h1とh2のフォントファミリーで使用しています）

なお、どのフォントファミリーを指定するにせよ、ゴシック体の場合はsans-serif、明朝体の場合はserifをそれぞれ末尾に指定しておくことをおすすめします（この指定により、他に指定したファミリーがまったくなくても、PC側で最適なフォントを表示できます）

line-heightプロパティ

line-heightプロパティは行間を指定します。値の指定方法はいくつかあり、初期値であるnormalはブラウザで用意されているスタイルに依存します。数値とpxや%、emという単位で指定することも可能です。

本ハンズオンでは、以下のように指定しています。

line-height: 1.8;

単位なしの数値で指定した場合、この値にフォントサイズを掛け合わせた値が行間として設定されます。フォントサイズはirem=16pxで指定しているので、「16*1.8=28.8」がこの場合の行間値になります。CSSではline-heightを使用する際は通常はこの単位なしの値を設定するのが一般的です。

background-colorプロパティ

background-colorプロパティは、要素の背景色を指定します。指定できる値は先述のcolorと同じです。

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

body要素にCSSをあてた状態のindex.htmlのキャプチャ画面

フォントや背景色、行間が前回と比べると整えられました。はじめのうちは、すこしCSSを書いてはブラウザで確認しながら進めるとよいです。

link要素にスタイルをあてる

次はリンク部分のCSSを書いていきます。

/* ============================ */
/*  link
/* ============================ */

a {
  transition: all 0.3s;
}

a:link,
a:visited {
  color: #143d60;
  text-decoration-line: underline;
  text-decoration-color: #eb5b00;
  /* text-decoration: underline #eb5b00; /* Safari以外は一括指定でも可 */
}

a:hover,
a:active {
  color: #eb5b00;
  text-decoration: none;
}

上記の記述は、以下のスタイルになります。

  1. 未訪問（未クリック）および訪問済み（クリック済み）のリンクは文字色が#143d60、リンクに下線を引き、その色は#eb5b00（a:link, a:visitedの宣言ブロック）
  2. リンクにマウスが乗っている、またはクリックしているときは文字色を#eb5b00とし、下線をなくす（a:hover, a:activeの宣言ブロック）
  3. 1または2はすこしゆっくり変化（状態が遅延）する（a要素のtransitionプロパティ）

:link :hoverなど、要素に:がひとつついているものは「擬似クラス」といい、対象の要素に対して特定の状態であることを表しています。:linkであれば「リンク先がまだ訪問（クリック）されていない状態」、:hoverは「マウスなど要素に何か乗っている（要素にホバーしている）状態」を表します。

擬似クラスにはいろいろな種類がありますが、リンク部分の指定で使用する擬似クラスは主に以下です。

  • :link：リンク先がまだ訪問（クリック）されていない状態（href属性を持つ要素に対して有効）
  • :visited：リンク先が訪問（クリック）済みである状態（href属性を持つ要素に対して有効）
  • :hover：マウスなど要素に何か乗っている（要素にホバーしている）状態
  • :active：ユーザーによってクリックなどアクティブにされている状態（ボタンを押している状態など）

ここでは:linkと:visited、:hoverと:activeにそれぞれ同じスタイルをあてていますが、それぞれ個別のCSSをあてても構いません。

transitionプロパティ

transitionプロパティは要素の変化を定義するプロパティです。詳しく解説するとひとつの記事になるくらい長くなってしまうので、解説はまた別の機会にしますが、このa要素での指定は、マウスホバー時などでスタイルが変化する際にすこし遅延が発生するようになります。

text-decorationプロパティ

text-decorationプロパティは、テキストのライン装飾を指定するプロパティです。リンクに限らず、テキストに対して指定できます。

text-decorationはmarginやpaddingと同じように、以下のプロパティの値を一括指定できるプロパティです。text-decoration: underline red;のように指定します。

  • text-decoration-line：テキストに下線や上線などを付与する
    • none：装飾を行わない（初期値）
    • underline：下線を引く
    • overline：上線を引く
    • line-through：中線を引く
    • blink：テキストを点滅させる（現在は非推奨 / 代替としてCSSアニメーションで行う）
  • text-decoration-color：text-decoration-lineの色を指定する（指定できる値はcolorと同じ）
  • text-decoration-style：text-decoration-lineの線の種類を指定する
    • solid：通常の一本線（初期値）
    • double：二重線
    • dotted：ドット線
    • dashed：破線
    • wavy：波線
  • text-decoration-thickness：text-decoration-lineの太さを指定する
    • auto：ブラウザにより適切な太さで表示される（初期値）
    • from-font：使用しているフォントファイルに推奨の太さ情報が含まれていればその値を利用する（含まれていなければautoと同じ）
    • 数値＋単位：3pxなど固定で指定する（px % remなどの単位を使用可）

なお、text-decorationの一括指定は、本ハンズオン記事執筆時点でSafari（Mac Safari18.6で確認 / iOSも同様）ではtext-decoration-line以外の指定が有効になりません。このため、本ハンズオンではtext-decoration-lineとtext-decoration-colorを個別に指定しています。

Safariを考慮に入れないのであれば、また裏技的な記述方法になりますが、以下のようにするとSafariでも一括指定が可能になります。

/* Safariを考慮しない記述 */
text-decoration: underline #eb5b00;

/* 裏技（ハック）的な記述 */
-webkit-text-decoration: underline #eb5b00;

正式な実装ではなく、ブラウザのベンダー（提供元）により試験的に導入されているプロパティは、先頭に-webkit-（SafariやGoogle Chromeなど）や-moz-（Firefox）といった接頭辞をつけることで、プロパティを有効化することが可能です。「ベンダープレフィックス」と呼ばれます。

いざというときやどうしてもというときには便利な機能ですが、できればなるべく使用しない（使用は最終手段とする）ことが望ましい機能です。

現在のWeb制作においてSafariを無視することはできないので、線以外にもスタイルを指定する場合は、text-decoration-*で個別にスタイルを記述することが望ましいです。

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

リンク部分にCSSをあてた状態のindex.htmlのキャプチャ画面

リンク部分にスタイルが追加されました。リンクにマウスを乗せるとリンク色が変わり下線も消えることを確認します。

コンテンツの表示幅を整える

ベースの作成としては最後に、コンテンツの表示幅を指定して中央に固定します。

以下、CSSの記述です。

/* ============================ */
/*  .wrapper
/* ============================ */

.wrapper {
  margin: 40px auto;
  width: 90%;
  max-width: 550px;
  /* width: min(90%, 550px); /* ←まとめてこのように書くこともできます */
}

HTML文書をマークアップした際に、コンテンツ全体をdiv要素のclass属性（値はwrapper）で囲んだので、CSSではセレクタが.wrapperになります（HTML要素のclass属性値をセレクタとする場合は、値の先頭に.（ドット）をつけます）

marginプロパティ

marginプロパティは先にリセットCSSを記述した際に解説しました。ここでは要素の外側の余白として、上下に40px、左右にautoの値を一括指定しています。

以下の記述はすべて同じ結果になります。まとめられるものはまとめて書くと、コードがスッキリして読みやすくなります。

/* 記述① */
margin: 40px auto;

/* 記述② */
margin: 40px auto 40px auto;

/* 記述③ */
margin-block: 40px;
margin-inline: auto;

/* 記述④ */
margin-top: 40px;
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;

auto値とは

marginプロパティにおいて左右の値をauto（margin-inline: auto;）とすると、親要素の表示幅からコンテンツ幅を引いて2で割った数値が、左右それぞれの値となります。左右の値は同じなので、結果として要素が横（水平）方向画面の中央に配置されることになります。 1000pxの横幅のHTML要素内に500pxの横幅の要素をmargin-inline: auto;で配置すると、左右の値はそれぞれ「(1000px - 500px) / 2 = 250px」となります。

margin-inlineの説明

セレクタ.wrapperの親要素はbody要素なので、この場合は.wrapper要素がブラウザの表示幅に対して中央に配置されます。

widthプロパティ / max-widthプロパティ

widthプロパティは要素の横幅を指定します。先ほどリセットCSSを記述した際、img要素に対してのスタイルにheightプロパティで高さを指定しましたが、横（width）か高さ（height）かの違いのみで、指定する値や単位はほぼ同じです。

max-widthプロパティも、img要素に対してのスタイルで記述しました。「要素の最大表示幅」を指定します。

この2つを指定することで、要素の幅は親要素の幅に対して確実に90%の横幅を担保しつつ、コンテンツ幅は550px以上は広がらないようになります。

なお、max-widthだけを指定すると、スマホ表示（レスポンシブ対応）の際に要素が中央配置になりません。要素を中央配置する際は、かならずwidthプロパティも一緒に指定します。

また、詳しくは別の機会に解説できたらと思いますが、widthとmax-widthをまとめて以下のように記述することも可能です（コメントとして書いているコードです）

width: min(90%, 550px);

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

.wrapperにCSSをあてた状態のindex.htmlのキャプチャ画面

スマホの画面幅では、以下のように表示されます。キャプチャ画像の横幅の関係でスマホの方が文字など大きく見えてしまいますが、実際は同じです。直接ご自身の環境でもお確かめください。

.wrapperにCSSをあてた状態のスマホで見たindex.htmlのキャプチャ画面

.wrapper要素が画面の中央に配置されました。

リスト項目先頭のマーカーが要素の横幅より外側に飛び出ていますが、リストの仕様なのでこのままで問題ありません。

また、footer要素の下側が指定した40px以上余白が空いていますが、これはコンテンツの縦幅がブラウザの表示画面より短いためです。コンテンツが増えてスクロールが発生すると、footer要素の下側もちゃんと40pxの余白のみ確保されます。

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

ここまで記述した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;
}


/* ============================ */
/*  base
/* ============================ */

html {
  scroll-behavior: smooth;
}

body {
  color: #143d60;
  font-size: 1rem;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  line-height: 1.8;
  background-color: #fdfbee;
}


/* ============================ */
/*  link
/* ============================ */

a {
  transition: all 0.3s;
}

a:link,
a:visited {
  color: #143d60;
  text-decoration-line: underline;
  text-decoration-color: #eb5b00;
  /* text-decoration: underline #eb5b00; /* Safari以外は一括指定でも可 */
}

a:hover,
a:active {
  color: #eb5b00;
  text-decoration: none;
}


/* ============================ */
/*  .wrapper
/* ============================ */

.wrapper {
  margin: 40px auto;
  width: 90%;
  max-width: 550px;
  /* width: min(90%, 550px); /* ←まとめてこのように書くこともできます */
}

ベースのCSS記述は以上です。おつかれさまでした。

次はheader要素にCSSをあてていきます。

参考情報など

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

results matching ""

    No results matching ""