3-2. ベースをつくる

このチャプターでは、ベースとなるCSSを準備します。サイトで使用するカラー、フォントなどを設定します。

ベースを整える

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

html要素にページ内スクロールの挙動を設定する
body要素に文字まわりやサイト背景色の情報を設定する
link要素にリンク表示時のスタイルを設定する

html要素にページ内スクロールの挙動を設定する

html要素に対しては、以下のCSSを記述します。

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

html {
  scroll-behavior: smooth;
}

scroll-behaviorプロパティ

scroll-behaviorプロパティは、アンカーリンクなど同一ページ内でのスクロール処理が発生した際の挙動を設定します。指定できる値は主に以下の2つです。

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

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

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

なお、html要素は「ルート要素」ともいって、HTML文書大元の根幹を成すものなので、基本的にはhtml要素に対してスタイルをあてることはありませんは、このプロパティに関しては、html要素で指定するのが一般的です。

body要素に文字まわりやサイト背景色の情報を設定する

body要素では、文字まわりやサイトの背景色の設定などを行います。html要素での指定につづけて、以下のCSSを記述します。

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要素内に記述されるHTML要素（body要素の子要素）に継承されます。

これらの指定はhtml要素に対して行っても間違いではないのですが、先述のとおり、html要素は「ルート要素」ともいってHTML文書大元の根幹を成すものなので、基本的にはその直下のbody要素で指定することが一般的です。

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要素）のフォントサイズを基準とする単位です。リセットCSSなどでルート要素のfont-sizeの指定を触っていなければ（初期値のままであれば）、「1rem=16px」で計算されます。

1remで指定するか16pxで指定するか

「1rem=16px」であれば、単にfont-size: 16px;という指定でも問題ないだろうというところですが、実際にはどちらでも構いません。

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

どちらの指定でもサイトの表示に問題はありませんが、font-size: 1rem;と指定しておくと、ブラウザやユーザーに対してなんとなく柔軟性があるような気がします。

font-familyプロパティ

font-familyプロパティは、フォントファミリー（書体）を指定するプロパティです。

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

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

font-familyの指定についてはどれが正しいということはないですが、現状ではMac（iPadやiPhone含む）用にヒラギノ、Windows用にメイリオを入れておくとよいかと思います。また、一番最後にsans-serif（明朝体を指定している場合はserif）と記載しておくことで、ヒラギノもメイリオも入っていないデバイス環境（Android OSなど）でも、デバイスごとに最適な書体を表示することが可能です。

また、昨今ではデバイス環境が違っても同じフォントで表示できるよう、Google FontsなどのWebフォントを利用することも増えています。本ハンズオンでは、h1とh2でGoogle Fontsを使用しています。

line-heightプロパティ

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

ここでは以下のように指定しています。

line-height: 1.8;

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

親要素の高さが決まっており、その親要素に対してちょうど垂直方向に真ん中に表示させたい場合などは単位をつけて指定することもありますが、通常line-heightプロパティでは単位なしの値を設定するのが一般的です。

background-colorプロパティ

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

表示確認

この状態でstyle.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;
}

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

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

: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でもtext-decorationの一括指定を有効化する

なお、裏技的な記述方法になりますが、以下のようにするとSafariでも一括指定が可能になります。

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

/* 裏技（ハック）的な記述 / Safariでも表示可能 */
-webkit-text-decoration: underline #eb5b00;

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

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

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

表示確認

この状態でstyle.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」となります。

本ハンズオンにおいてセレクタ.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要素が画面の中央に配置されました。リスト項目先頭のマーカーが要素の横幅より外側に飛び出ていますが、リストの仕様なので現状はこのままで問題ありません。

また、PCでの表示ではfooter要素の下側の余白が.wrapperセレクタで指定した40px以上空いていますが、これはコンテンツの縦幅がブラウザの表示画面より短いためです。コンテンツが増えたりのちのちCSSでレイアウトを整えるなどして、要素の高さが増えて画面にスクロールが発生すると、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)のドキュメントなどもご覧ください。

3-2. ベースをつくる

3-2. ベースをつくる

ベースを整える

html要素にページ内スクロールの挙動を設定する

scroll-behaviorプロパティ

body要素に文字まわりやサイト背景色の情報を設定する

colorプロパティ

font-sizeプロパティ

1remで指定するか16pxで指定するか

font-familyプロパティ

line-heightプロパティ

background-colorプロパティ

表示確認

link要素にリンク表示時のスタイルを設定する

transitionプロパティ

text-decorationプロパティ

ベンダープレフィックスを利用してSafariでもtext-decorationの一括指定を有効化する

表示確認

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

marginプロパティ

auto値とは

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

表示確認

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

参考情報など

results matching ""

No results matching ""