3-3. header部分のCSSを書く

このチャプターでは、header要素のCSSを記述していきます。

余白を調整する

まずはheader要素の下側、main要素との間に余白を入れます。

/* ============================ */
/*  .header
/* ============================ */

.header {
  margin-bottom: 40px;
}

margin-bottomとして、下側のみ40pxの余白を入れました。

ページタイトルにスタイルをあてる

つづいてh1要素にスタイルをあてていきます。

今回h1とh2の見出しにはGoogle Fontsを使用するので、CSSを記述する前にまずGoogle Fontsを読み込む準備をします。

Google Fontsを読み込む

Google Fontsのサイトに行き、使用するフォントを選択します。今回は「Fascinate Inline」というフォントを使用します。

使用するフォントページの右上にある「Get font」ボタンをクリックします。

つづいて、「Get embed code」ボタンをクリックします。

「Web」タブを選択すると、埋め込むコードとCSSが表示されます。

コードの埋め込み方法はつぎの2つです。

<link>：HTML文書のhead要素内に記述する
@import：HTML文書のhead要素内にstyle要素で記述、またはCSSファイルに記述

今回は@importを使用し、CSSファイル内でGoogle Fontsを読み込みます。どちらを使用しても、フォント表示のCSSは同じです。

CSSファイルの@charset "utf-8";のすぐ下の行に、以下を記述します。

@charset "utf-8";

/* font@google */
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');

@import（アットルール）

@import url('');は外部のCSSファイルを読み込むための記述です。先のチャプターで最初に文字コードを指定しましたが、このとき記述した@charsetとおなじ「アットルール」です。

url()は以下のような指定が可能です。また、括弧内のくくりは'...'でも"..."でもどちらでも構いません。

/* 絶対URL */
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');

/* 相対パス */
@import url('./style_parts.css');
@import url('../style_parts.css');

/* ルートパス */
@import url('/css/style_parts.css');

@importは、@charsetに続いてCSSの最初に読み込ませるのが一般的です。基本的には、Google Fontsなど外部サービスで提供されるCSSを読み込む場合に使用することがほとんどかと思います。

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

h1要素のCSSを記述を.headerのあとに追加します。ここでは下方向の余白、文字色、フォントサイズ、テキストの配置場所などを指定しています。

h1 {
  margin-bottom: 10px;
  color: #eb5b00;
  font-size: 2.5em;
  font-weight: 400;
  font-style: normal;
  font-family: 'Fascinate Inline', system-ui;
  text-align: center;
}

以下の3つはGoogle Fontsで指定されているCSSをそのまま記述します（順番は入れ替えています）

font-weightプロパティ
font-styleプロパティ
font-familyプロパティ

font-weightプロパティ

font-weightプロパティは、フォントのウェイト（太さ）を指定するプロパティです。normal（初期値）やboldという指定のほか、複数のウェイトが用意されているフォントの場合は、100〜900（100刻み）の数値で指定することもあります（Google Fontsは数値での指定が一般的です）

normalの指定は数値では400、boldの指定は数値では700に該当します。

font-styleプロパティ

font-styleプロパティは、フォントのスタイルを指定するプロパティです。指定できる値は以下ですが、フォントにそれぞれのスタイルが用意されていることが条件となります。

normal：通常体（初期値）
italic：筆記体（イタリック体 / フォントにitalicがない場合はobliqueに変換）
oblique：斜体（フォントにobliqueがない場合はitalicに変換）

日本語などの2バイト文字フォントではあまり馴染みのないものですが、これらの指定は主に英字体フォントに対して適用されます。

text-alignプロパティ

text-alignプロパティは、テキスト（表のセル内テキストも含む）の水平（横）方向の位置を指定するプロパティです。指定できるのは以下の値です。

left：左寄せ（初期値）
center：中央寄せ
right：右寄せ

単位`em`について

この項目の最後に、font-sizeプロパティの値で指定しているemという単位について解説します。

emはpxや%と同様にCSSで使用できる単位のひとつです。相対的な単位で、その要素に適用されている「フォントサイズ」の値（親以上の要素から継承されている値）を基準とし、「基準値にemで指定した値を掛け合わせた数値」がおおよそ表示される値になります。

1emはフォントサイズの基準値とイコールです。body要素のフォントサイズを基準とする場合、そのフォントサイズが1remであれば、「1rem = 16px = 1em」になります。

本ハンズオンのh1要素には、font-size: 2.5em;というCSSをあてています。この表示サイズは、h1要素にもともと適用されている値（1rem = 16px）に2.5を掛け合わせた「40px (16px * 2.5)」になります。

実際の例

以下のHTMLとCSSを例として解説します。HTML文書はbody要素内のみ記述しています。

<body>

  <p>テキスト①</p>
  <p class="text2">テキスト②</p>

  <div class="box">
    <p>テキスト③</p>
    <p class="text2">テキスト④</p>
  </div>

</body>

body {
  font-size: 1rem;
}

.text2 {
  font-size: 1.2em;
}

.box {
  font-size: 20px;
}

この結果は以下のようになります（画像で表示しているので、すこしぼやけています）

計算式と表示される値はつぎのとおりです（計算の結果値はおおよその数値）

body要素内のフォントサイズは1rem=16px（基準値）
- テキスト①：16px（body要素から継承されたフォントサイズ）
- テキスト②：16px * 1.2 = 19.2px
.box要素内のフォントサイズは20px（body要素から継承されたフォントサイズを上書き / .box要素内の基準値）
- テキスト③：20px（.box要素から継承されたフォントサイズ）
- テキスト④：20px * 1.2 = 24px

emはCSSの単位として、単位を指定するほぼすべてのプロパティで使用可能ですが、font-sizeの指定にとくに向いている単位です。見出しなどで使用する場合は、「本文のフォントサイズに対してだいたい1.2倍くらいの大きさ」というように、なんとなくの感覚値として指定しやすいかと思います。

なお、emの値には1より下の数値（小数点含む）も指定可能です。この場合、フォントサイズは基準値よりも小さくなります。

表示確認

この状態でstyle.cssを保存し、index.htmlをブラウザで開くと、以下のように表示されます。キャプチャ画像はこれまでのブラウザ表示幅ではなく、コンテンツにフォーカスして撮影しています。

h1見出しのフォントがGoogle Fontsで指定したフォントに変わり、設定した色なども反映されています。また、header要素の下側余白も確認できます。

プロフィールアイコンにスタイルをあてる

つづいてプロフィールアイコンにスタイルをあてていきます。

CSSの記述は以下です。h1のCSSに続いて記述します。

.prof_icon {
  margin: 0 auto 20px;
  width: fit-content;
  border-radius: 50%;
  overflow: hidden;
}

プロフィール画像を表示するためのfigure要素を、画像幅で中央配置します。marginの一括指定で、下側に20pxの余白も追加しています。また、画像はCSSで角を丸めています。

widthプロパティの値fit-contentとは

先のチャプターで解説したとおり、widthプロパティは要素の横幅を指定します。また、heightプロパティは要素の高さを指定します。これらのプロパティの値には、「数値＋単位」のほかに、fit-contentという値を設定することができます。

fot-contentは、この値を指定した要素が内包するコンテンツ（子要素）から幅を自動的に算出します。また、fit-contentで算出された値は、要素の表示幅（ブラウザの画面サイズなど）に合わせて自動的に可変します。

プロフィールアイコンの画像はHTML文書では以下のように指定しているので、画像サイズである80pxを算出し、widthプロパティに指定したfit-contentの値として自動的に当てはめます。

<figure class="prof_icon"><img src="./images/icon.png" alt="プロフィールのアイコン" width="80" height="80"></figure>

ブラウザの表示幅が80pxになることはあまりないので、表示幅により画像サイズが可変するというのはこの状態ではわかりづらいですが、仮に画像のサイズをwidth="500" height="500"とするなどして確認してみてください。

CSSを記述していると、レスポンシブ対応などでしっかりと要素の値を指定することが難しいという場面もでてきますが、そういったときにwidth: fit-content;という指定はとても便利です。

border-radiusプロパティ

border-radiusプロパティは、要素の角（正確には外角）を指定するプロパティで、指定した数値分だけ要素の角を丸めます。

border-radiusプロパティは、値の指定方法により角丸にかなりデザイン的なバリエーションを持たせることが可能です。ここでは標準的なもののみ紹介します。

なお、本ハンズオンでの指定のようにborder-radiusプロパティの値を50%とすると、正方形の要素の場合は正円になります。

/* 4方向すべて同じ値で丸める */
border-radius: 10px;

/* 正方形の要素を正円に丸める */
border-radius: 50%;

/* 左上10px、右上0、右下10px、左下5px */
border-radius: 10px 0 10px 5px;

/* 左上と右下10px、右上と左下10% */
border-radius: 10px 10%;

/* 左上5px、右上と左下4px、右下10px */
border-radius: 5px 4px 10px;

/* 最初の半径の値10% / 半径の値20px */
border-radius: 10% / 20px;

なお、border-radiusはこのプロパティを適用した要素の子要素には継承されません（影響を与えません）

本ハンズオンの例の場合、このままでは子要素であるimg要素は角が四角のままです。これを解消するため、つぎに紹介するoverflowプロパティを記述します。

overflowプロパティ

overflowプロパティは、要素が内包するコンテンツ（子要素）が要素のパディング領域よりはみ出す場合に、その挙動を指定するプロパティです。overflowは横（水平）方向と縦（垂直）方向の一括指定プロパティで、それぞれoverflow-x overflow-yという個別のプロパティでも指定可能です。

指定できる値はいずれも以下です。

visible：はみ出したコンテンツはそのままはみ出た状態で表示する（初期値）
hidden：はみ出したコンテンツは隠す（パディング領域で切り取られる）
scroll：はみ出したコンテンツは隠す（パディング領域で切り取られる）が、スクロール表示によりはみ出した要素もスクロールで表示される（コンテンツがはみ出していなくてもスクロールバーは表示される）
auto：コンテンツがはみ出している場合は隠す（パディング領域で切り取られる）が、スクロール表示によりはみ出した要素もスクロールで表示される（コンテンツがはみ出していなければスクロールバーは表示しない）

scrollとautoの違いは、スクロールバーが常に表示されているかどうかです。scrollは要素がはみ出していなくても常にスクロールバーが表示された状態になります。

overflowプロパティで指定できる値にはclipというものもありますが、ここでは説明を割愛し、機会があればあらためて解説します。

表示確認

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

プロフィールアイコンに角丸などのスタイルがあたっていることが確認できます。

なお、プロフィールアイコン下の説明文には、本ハンズオンではCSSはとくにあてていません。必要に応じて、ご自身でCSSを記述してください。

CSS変数（カスタムプロパティ）を利用する

header要素のCSS記述としては以上になりますが、ここからすこしCSSをカスタマイズします（この項目は必須の作業ということではないので、読み飛ばしても問題ありません）

これまでリセット・ベース・header要素のCSSを記述していて、何度か同じ色（カラーコード）を指定しました。つぎのmain要素のCSS記述でも色指定を行いますが、指定のたびに同じカラーコードを指定するのはめんどうですし、全体の色を変更したいと思ったときにカラーコードの箇所をひとつずつ訂正していく必要があり、すこし手間です。また、黒（#000000）や白（#ffffff）といった単純なカラーコードならまだしも、#eb5b00のようなコードは複雑でちょっと覚えにくいかと思います。

そこで、この項目ではカラーコードを変数として定義して、プロパティの値として何度も利用できるように設定します。カラーコードを変数化すると、色の指定に定義した変数を指定することができ、また色を変更するときは変数で定義したカラーコードの値を変更するだけで済むので、メンテナンス性も向上します。

これを「CSS変数（カスタムプロパティ）」といい、以下のように記述します。

:root {
  --blackColor: #000; /* 変数: 値; */
  --whiteColor: #fff; /* 変数: 値; */
}

.text_black {
  color: var(--blackColor); /* color: #000; と同じ */
}

.bg_white {
  background-color: var(--whiteColor); /* background-color: #fff; と同じ */
}

CSS変数の定義

CSS変数は擬似クラスの:rootセレクタ（html要素に該当）で定義します。宣言の記述は通常の宣言と同じで、プロパティ（変数）: 値;という記述です。

上記の例では、以下の箇所がCSS変数の定義部分です。

:root {
  --blackColor: #000; /* 変数: 値; */
  --whiteColor: #fff; /* 変数: 値; */
}

変数の接頭辞は、ハイフンをふたつ並べた--ではじめます。続く文字は任意の半角英数とハイフンを組み合わせて自由に決めることができます。変数は値の代わりに繰り返し利用するものなので、あまり複雑な名称にせず、また一見してわかりやすいものにするとよいです。

CSS変数の値は、CSSの値として有効なものであればカラーコード以外でも指定可能です。また、:rootの宣言ブロック内でに指定する変数値は、通常の宣言と同じく複数記述できます。

また、CSS変数の定義記述はCSSファイルのはじめのほう、リセットCSSのつぎくらいの箇所に記述します。

CSS変数の呼び出し（var()関数）

定義した変数の呼び出しは、var()関数で行います。var(変数)とすることで、定義した値が代入されます。上記の例では、以下の箇所がCSSの呼び出し部分です。

.text_black {
  color: var(--blackColor); /* color: #000; と同じ */
}

.bg_white {
  background-color: var(--whiteColor); /* background-color: #fff; と同じ */
}

それぞれHTML文書内でclass="text_black"属性値がついたHTML要素の文字色が黒、class="bg_white"属性値がついたHTML要素の背景色が白で表示されます。

カラーコード記述箇所をCSS変数に置き換える

本ハンズオンでは、カラーコードをCSS変数として定義します。ここではベースの文字色、リンクなどの補助色、白色（main要素のCSSで使用します）、背景色をCSS変数として定義しました。

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

:root {
  --baseColor: #143d60;
  --subColor: #eb5b00;
  --whiteColor: #fefefe;
  --bgColor: #fdfbee;
}

つづいて、#からはじまるカラーコードの値を記述していた箇所をCSS変数に置き換えます。

/*（略）*/


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

/*（略）*/

body {
  color: var(--baseColor);
  /*（略）*/
  background-color: var(--bgColor);
}


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

/*（略）*/

a:link,
a:visited {
  color: var(--baseColor);
  /*（略）*/
  text-decoration-color: var(--subColor);
}

a:hover,
a:active {
  color: var(--subColor);
  /*（略）*/
}


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

/*（略）*/


/* ============================ */
/*  .header
/* ============================ */

/*（略）*/

h1 {
  margin-bottom: 10px;
  color: var(--subColor);
  /*（略）*/
}

/*（略）*/

書き換えが完了したらstyle.cssを保存し、index.htmlをブラウザで開いてレイアウトや色に変わりがないことを確認します。以降のチャプターでは、CSS変数を定義した状態でCSSを記述していきます。

CSS変数は定義しすぎると逆に管理が大変になりますが、ひとつのCSSファイル内でカラーコードなど複数同じ値を指定する場合において、とても便利な機能です。

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

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

@charset "utf-8";

/* font@google */
@import url('https://fonts.googleapis.com/css2?family=Fascinate+Inline&display=swap');


/* ============================ */
/*  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
/* ============================ */

:root {
  --baseColor: #143d60;
  --subColor: #eb5b00;
  --whiteColor: #fefefe;
  --bgColor: #fdfbee;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--baseColor);
  font-size: 1rem;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  line-height: 1.8;
  background-color: var(--bgColor);
}


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

a {
  transition: all 0.3s;
}

a:link,
a:visited {
  color: var(--baseColor);
  text-decoration-line: underline;
  text-decoration-color: var(--subColor);
  /* text-decoration: underline var(--subColor); /* Safari以外は一括指定でも可 */
}

a:hover,
a:active {
  color: var(--subColor);
  text-decoration: none;
}


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

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


/* ============================ */
/*  .header
/* ============================ */

.header {
  margin-bottom: 40px;
}

h1 {
  margin-bottom: 10px;
  color: var(--subColor);
  font-size: 2.5em;
  font-weight: 400;
  font-style: normal;
  font-family: 'Fascinate Inline', system-ui;
  text-align: center;
}

.prof_icon {
  margin: 0 auto 20px;
  width: fit-content;
  border-radius: 50%;
  overflow: hidden;
}

CSSを書くことにより、だいぶ「レイアウトをつくっている」という感じが出てきたのではないでしょうか。

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

参考情報など

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

3-3. header部分のCSSを書く

3-3. header部分のCSSを書く

余白を調整する

ページタイトルにスタイルをあてる

Google Fontsを読み込む

@import（アットルール）

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

font-weightプロパティ

font-styleプロパティ

text-alignプロパティ

単位`em`について

実際の例

表示確認

プロフィールアイコンにスタイルをあてる

widthプロパティの値fit-contentとは

border-radiusプロパティ

overflowプロパティ

表示確認

CSS変数（カスタムプロパティ）を利用する

CSS変数の定義

CSS変数の呼び出し（var()関数）

カラーコード記述箇所をCSS変数に置き換える

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

参考情報など

results matching ""

No results matching ""

3-3. header部分のCSSを書く

余白を調整する

ページタイトルにスタイルをあてる

Google Fontsを読み込む

@import（アットルール）

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

font-weightプロパティ

font-styleプロパティ

text-alignプロパティ

単位emについて

実際の例

表示確認

プロフィールアイコンにスタイルをあてる

widthプロパティの値fit-contentとは

border-radiusプロパティ

overflowプロパティ

表示確認

CSS変数（カスタムプロパティ）を利用する

CSS変数の定義

CSS変数の呼び出し（var()関数）

カラーコード記述箇所をCSS変数に置き換える

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

参考情報など

results matching ""

No results matching ""

単位`em`について