3-2. 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 url('');は外部のCSSファイルを読み込むための記述です。url()は以下のような指定が可能です。また、括弧内のくくりは'...'でも"..."でもどちらでも構いません。

また、@importは@charsetに続いてCSSの最初に読み込ませるのが一般的です。

/* 絶対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');

基本的には、Google Fontsなど外部サービスを読み込む場合に使用することがほとんどかと思います。

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に変換）

これらは主に英字体に対して適用されます。

text-alignプロパティ

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

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

単位`em`について

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

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

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

以下の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の値には0.9以下も指定可能です。この場合、フォントサイズは基準値よりも小さくなります。

この状態で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は要素の高さを指定します。このwidthやheightの値には、「数値＋単位」のほかに、fit-contentという値を設定することができます。

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

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

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

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

border-radiusプロパティ

border-radiusプロパティは、要素の角（正確には外角）を指定した数値分丸めます。正方形の要素の場合は、上記のように値を50%と指定することで正円にできます。

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

/* 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：コンテンツがはみ出している場合は隠す（パディング領域で切り取られる）が、スクロール表示によりはみ出した要素もスクロールで表示される（コンテンツがはみ出していなければスクロールバーは表示しない）

他にclipという値もありますが、すこしややこしいのでここでは説明を割愛します。

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

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

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

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

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

これまでベース、header要素とCSSを記述していて、何度か同じ色（カラーコード）を指定しました。つぎのmain要素のCSSでも色指定を行いますが、指定のたびにカラーコードを探してコピペするのはすこし手間でめんどうです。

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

CSS変数（カスタムプロパティ）は、以下のように記述します。

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

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

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

変数は擬似クラスの:root（html要素に該当）で指定します。

変数の接頭辞は、ハイフンをふたつ並べた--ではじめます。続く文字は任意の半角英数とハイフンを組み合わせます。変数は値の代わりになるものなので、一見してわかりやすいものにするとよいです。

値はCSSの値として有効なものであれば、数値＋単位などカラーコード以外でも指定可能です。また、変数と値の間には「コロン（:）」を入れ、値の終わりは「セミコロン（;）」を入れます。

:rootに指定する変数は複数記述して問題ありません。

定義した変数の呼び出しは、var()プロパティで行います。var(変数)とすると、定義した値が代入されます。

ここでは、カラーコードを変数として定義します。変数の定義はCSSファイルのはじめのほう、リセットCSSのあとくらいに記述するとよいです。

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

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

ここではベースの文字色、リンクなどの補助色、白色（main要素の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ファイルの中身です。

@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-2. header部分のCSSを書く

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

余白を調整する

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

Google Fontsを読み込む

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

font-weightプロパティ

font-styleプロパティ

text-alignプロパティ

単位`em`について

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

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

border-radiusプロパティ

overflowプロパティ

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

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

参考情報など

results matching ""

No results matching ""

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

余白を調整する

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

Google Fontsを読み込む

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

font-weightプロパティ

font-styleプロパティ

text-alignプロパティ

単位emについて

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

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

border-radiusプロパティ

overflowプロパティ

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

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

参考情報など

results matching ""

No results matching ""

単位`em`について