ウェブデザイン演習 第10回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第10回

前回はロゴや電話・メールフォームへのリンクが表示された<header></header>セクションのコーディングを行いました。今回は、サイトのグローバルメニューが表示された<nav></nav>セクション、ページの最下部、連絡先や著作権表記のある<footer></footer>セクションのコーディングを行います。

今回もindex.html・main.cssへの記述を行います。ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。

Visual Studio Codeの起動と日本語化。

Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。

index.htmlおよびmain.cssは前回（第09回）までのコーディングが問題なく終わっていれば以下のようなコードになっているはずです。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
      <div class="container">
        <h1><img src="img/header/logo.png" width="350" height="50" alt="ウェブデザイン演習" /></h1>
        <div class="contact">
          <p class="tel"><img src="img/header/tel.png" width="230" height="25" alt="086-000-0000" /></p>
          <p class="mail"><a href=""><img src="img/header/mail.png" width="230" height="15" alt="メールフォームでのお問い合わせ" /></a></p>
        <!-- /.contact --></div>
      <!-- / .container --></div>
    </header>
    <article>
    </article>
    <footer>
    </footer>
  <!-- / #container --></div>
</body>
</html>

main.css

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

a {text-decoration: none;}

ul {list-style: none;}

input[type="text"],
input[type="submit"] {-webkit-border-radius: 0;}

img {
  border: 0;
  max-width: 100%;
  line-height: 1em;
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic;
}

header,
nav,
menu,
article,
section,
main,
aside,
footer {
  display:block;
  margin: 0;
}

html,body {
  height: 100%;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  font-family: 'Hiragino Kaku Gothic ProN',Meiryo;
  text-align: center;
}

body {
  background-image: url(../img/bg.png);
  background-repeat: repeat;
  background-position: center center;
}

#container {
  width: 100%;
  min-width: 1040px;
  _height: 100%;
  height: auto !important;
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}

header,nav,article,footer {
  width: 100%;
  min-width: 1040px;
}

.container {
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}

header .container {
  padding-top: 30px;
  padding-bottom: 20px;
  overflow: hidden;
}

header h1 {
  float: left;
  width: 350px;
}

header .contact {
  float: right;
  width: 230px;
}

header .tel,
header .mail {
  text-align: right;
}

header .tel {
  margin-bottom: 10px;
}

この記事の目次

index.htmlへの記述（<nav></nav>セクション編）

ではまずはindex.htmlにWebサイトのグローバルナビゲーションである<nav></nav>セクションの内側のコーデイングを行いましょう。<header></header>に比べてこれは簡単。

まずはindex.htmlの<nav></nav>の開始タグと終了タグの間（内側）に、以下のハイライトされている4〜10行目のコードを行いましょう。

index.html

<!-- 〜上部省略〜 -->
    </header>
    <nav>
      <ul>
        <li><a href="#">トップページ</a></li>
        <li><a href="#">会社概要</a></li>
        <li><a href="#">企業理念</a></li>
        <li><a href="#">業務内容</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
    <article>
<!-- 〜下部省略〜 -->

<nav></nav>セクションの内側に<ul></ul>を入れ子にし、さらにその内側に<li><a></a></li>を入れ子にしていますね。 <ul></ul>というHTMLタグは、<li></li>というリスト要素を表示させるために使います。<li></li>はリストの項目を意味するもので、<ul></ul>はリストの一括りと考えてください。

参考：<ul>: 順序なしリスト要素 – HTML: HyperText Markup Language | MDN

参考：<li> – HTML: HyperText Markup Language | MDN

今回はナビゲーションなので、サイト内のページ移動に使うページリンクのリストです。

main.cssへの記述（<nav></nav>セクション編）

次にmain.cssへの記述。main.cssを開いて前回の続きから記述を行なっていきましょう。
前回記述した最後の行を改行しハイライトされている7〜11行目・13〜17行目のコードを記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

header .tel {
  margin-bottom: 10px;
}

nav ul {
  width: 1000px;
  overflow: hidden; /* 回りこみ解除 */
  margin: 0 auto; /* autoを使って中央寄せ */
}

nav li {
  float: left; /* li一つ一つを左寄せにして横並びに */
  width: 200px;
  height: 50px;
}

margin・paddingへの個別指定と一括指定

<header></header>セクションの内側の<div class=”container”></div>の指定の時もmarginとpaddingについて説明しましたが、今回はその時の記述方法とは少し書き方が違いますよね。 

前回はmargin-topやmargin-leftなど、全てバラバラに一つずつ指定する方法を紹介しましたが、今回はmarginやpaddingを一括指定する方法を紹介します。

以下に<p></p>タグでmarginを指定したものが2つありますが、方法は違えど表示結果は同じものになります。

CSS

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

p {
  margin: 10px 20px 30px 40px; /* 上 右 下 左 */
}

marginプロパティの場合は上部外側の余白（margin-top）を開始位置として時計回りに「上 → 右→ 下→ 左」という順番で一括指定できます。paddingに関しても全く同じです。

さらに上下が同じ値、左右が同じ値である場合、以下のような指定ができます。

CSS

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

p {
  margin: 10px 20px; /* 上下 左右 */
}

marginプロパティの左右の値に「auto」を記述すると左右等分の余白が自動算出されます。
これを利用し、ブロックの中央揃えを実現しています。

次に<li></li>タグの内側の<a>タグの指定を行います。先ほど記述したコードの下の行を改行しハイライトされている9〜18行目のコードを記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

nav li {
  float: left;
  width: 200px;
  height: 50px;
}

nav li a {
  display: block; /* inline要素であるaタグをblock要素化 */
  width: 100%; /* li（幅200px）の中でボックスの幅いっぱいに */
  height: 100%; /* li（高さ50px）の中でボックスの高さいっぱいに */
  text-indent: 100%; /* CSSスプライト その1：テキストの開始位置を表示領域の外へ*/
  white-space: nowrap; /* CSSスプライト その2：改行させない*/
  overflow: hidden; /* CSSスプライト その3：はみ出した文字を消す*/
  background-image: url(../img/nav/ul.png); /* 背景画像のURLを指定 */
  background-repeat: no-repeat; /* 背景画像を繰り返し描画しない */
}

CSSスプライト

<header></header>セクションのロゴや電話番号は<img>でマークアップしましたね。
<nav></nav>セクションの<ul></ul>もボタン画像なので、同じように<img>タグを使えばいいんじゃないか？と思うかもしれないですが、<nav></nav>セクションの場合はその方法は適していません。

画像点数が増えるとサーバーへのリクエストが増えるため描画が遅くなる

<img>タグにすると<li></li>１つ１つに画像が必要で、今回の場合は画像を5枚も用意しなければいけません。マウスを乗せた時の画像を考えると10枚になります。ブラウザのことを考えればこの10枚の画像ファイルをそれぞれ指定することでサーバーへのリクエスト数が増え、読み込みサイズや回数が増えると最終的に描画が遅れてしまうことになります。

画像を背景画像として使うことで読み込みを1回で終わらせる

そこでまず考えなければいけないのは、どうやってリクエスト回数を減らすか？です。
そのために最適なテクニックが今回紹介するCSSスプライトで、その考え方は以下の画像のようなものです。

lesson10_2

今回の場合、10枚の画像を1回ずつ計10回の読み込みが必要だったものを、
10枚を1枚の画像にまとめて読み込みを1回にすることでリクエスト回数を減らすテクニックです。

CSSスプライトはcssで指定を行う

CSSスプライトはhtml側ではなくcss側で指定を行います。background-imageプロパティで背景画像として指定し、background-positionプロパティを指定することで背景画像ファイルの表示位置を思い通りに指定することができます。

指定は<li><a>◯◯</a></li>のそれぞれ（計10行）に行いますが、指定する背景画像は前回画像アセットで書き出したたったの1点のみ（nav/ul.png）です。

CSSスプライトの工程

CSSスプライトの工程は以下です。

  1. ボタン内に表示されたテキストを消す
  2. 背景画像関連の全体指定をする
  3. 背景画像の描画位置の個別指定をする

CSSスプライトに関しては、以下の記事がとても詳しく説明されています。

身につけておきたいWebサイト高速化テクニック #6｜HTTPリクエスト数削減テクニック02：CSS Sprite編 ｜ Developers.IO

ボタン内に表示されたテキストを消す（text-indent + white-space + overflow）
プロパティ・値の説明
プロパティ 指定の効果 値
text-indent ブロック内のテキストの行の前に置く空白の幅の指定 数値（0・1em・2em・・・など）
white-space 要素内のホワイトスペースをどのように扱うかの指定 normal（初期値）・nowrap・pre・prewrapなど

今回記述したmain.cssに、「text-indent: 100%;」「white-space: nowrap;」「overflow: hidden;」との指定がありますが、これは<li><a></a></li>の中の文字を表示領域の外に追いやるテクニックを使っています。

なぜそんなことをしているかというと、何も指定しないと背景画像の上に文字が表示されてしまうからです。背景に使う画像にはすでに文字が書いてあるので文字は邪魔ですよね？

「overflow: hidden;」は前回解説したように要素が親要素の外にはみ出した場合の処理でしたね。
今回初登場の「text-indent: 100%;」でテキストの文頭の余白を横幅100%にする（１行目を全て余白にする）ことでテキストの開始位置を領域外に設定し、同じく今回初登場の「white-space: nowrap;」によってテキストの折り返しを禁止しています。

「overflow」「text-indent」「white-space」の3つの合わせ技を行うことで、
まるでそこには文字なんて存在していなかったかのように領域外に追いやることができます。

背景画像関連の全体指定をする（background-image、background-repeatの指定）

上記の合わせ技によって文字は消せましたが、併せて背景画像の指定をしなければいけません。
<body></body>セクションの指定の際に少し解説しましたが、まず<li><a>◯◯</a></li>の背景画像の指定に関する「background-image」と「background-repeat」について説明します。

background-imageは背景に使う画像のURLを指定するもの、background-repeatは背景画像を繰り返し描画するかどうかの指定です。今回の場合はbackgorund-imageで指定した画像を使い、繰り返し描画はしない、という指定を行っています。

再びmain.cssへの記述を行いましょう。先ほど記述した「nav li a」の指定の下を改行し、ハイライトされている14〜18行目、20〜24行目のコードを記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

nav li a {
  display: block; /* inline要素であるaタグをblock要素化 */
  width: 100%; /* li（幅200px）の中でボックスの幅いっぱいに */
  height: 100%; /* li（高さ50px）の中でボックスの高さいっぱいに */
  text-indent: 100%; /* CSSスプライト その1：テキストの開始位置を表示領域の外へ*/
  white-space: nowrap; /* CSSスプライト その2：改行させない*/
  overflow: hidden; /* CSSスプライト その3：はみ出した文字を消す*/
  background-image: url(../img/nav/ul.png); /* 背景画像のURLを指定 */
  background-repeat: no-repeat; /* 背景画像を繰り返し描画しない */
}

nav li:nth-of-type(1) a {background-position: 0 0;}
nav li:nth-of-type(2) a {background-position: -200px 0;} /* 左から-200pxずらす */
nav li:nth-of-type(3) a {background-position: -400px 0;} /* 左から-400pxずらす */
nav li:nth-of-type(4) a {background-position: -600px 0;} /* 左から-600pxずらす */
nav li:nth-of-type(5) a {background-position: -800px 0;} /* 左から-800pxずらす */

nav li:nth-of-type(1) a:hover {background-position: 0 -50px;} /* 上から-50pxずらす */
nav li:nth-of-type(2) a:hover {background-position: -200px -50px;} /* 左から-200px、上から-50pxずらす */
nav li:nth-of-type(3) a:hover {background-position: -400px -50px;} /* 左から-400px、上から-50pxずらす */
nav li:nth-of-type(4) a:hover {background-position: -600px -50px;} /* 左から-600px、上から-50pxずらす */
nav li:nth-of-type(5) a:hover {background-position: -800px -50px;} /* 左から-800px、上から-50pxずらす */

それぞれ、14〜18行目が初期表示状態の指定、20〜24行目がマウスを乗せた状態（オンマウス）の指定です。そしてここで何やらセレクタの新しい記述方法が出てきましたよね？詳細は以下で解説します。

:nth-of-type(○) = 親要素内で◯番目の子要素に個別に指定を行う

「:nth-of-type()」は親要素の中での◯番目の要素の指定を行うものです。今回の場合、<ul></ul>タグの中には<li></li>が5つありますよね。例えば<nav></nav>の内側の<ul></ul>の内側の1つ目の<li></li>だけに指定するには、以下のように記述します。

CSS

nav li:nth-of-type(1) {
/* 1番目の<li></li>への指定 */
}

さらにその中にある<a></a>タグに指定を行うには以下のような記述を行います。

CSS

nav li:nth-of-type(1) a {
/* 1番目の<li></li>の中の<a></a>への指定 */
}

この個別指定のセレクタを利用して、背景画像の描画開始位置をそれぞれに変えて、それぞれのボタンを表示しています。

背景画像の描画位置の個別指定をする（background-position）

ここまできたら後は背景画像の開始位置の指定です。
それぞれの画像の開始位置を適切なポジジョンにずらして表示しなければいけません。

lesson10_3

background-positionは、左からいくつ、上からいくつずらすか？の数値を指定します。

今回の場合は、左からマイナス方向へ200pxずつずらし、
上から0pxのところで表示しています。

◯◯:hover {} 要素◯◯にマウスを乗せた状態の指定

要素にマウスを乗せた時の指定を行うのが「:hover」です。
今回の場合はマウスを乗せたら画像の表示位置を上からマイナス方向へ50pxずらします。

index.htmlへの記述（<footer></footer>セクション編）

再びindex.htmlの記述ですが、今度はページ内に<footer></footer>セクションを追加してページの最下部に表示させます。なお、<header></header>セクションや<nav></nav>セクションで行った、右寄せ・左寄せ・中央揃えなどのテクニックも使っています。

<div class=”container”></div>の追加

まず<footer></footer>の開始タグと終了タグの間に1行あけて、ハイライトされている3・4行目のコードを追加しましょう。

index.html

<!-- 〜上部省略〜 -->
    <footer>
      <div class="container">
      <!-- /.container --></div>
    </footer>
<!-- 〜下部省略〜 -->

第9回の<header></header>のコーディングに時にも出てきましたが、コンテンツ幅の要素（<div class=”container”></div>）を、ブラウザ幅の<footer></footer>の内側で中央揃えするために追加しています。

次は<div class=”container”></div>の内側にある要素の記述をしましょう。

左寄せする<address></address>の追加

次に<div class=”container”></div>の内側に、サイト名・住所を記載した<address></address>を追加します。先ほど記述した<div class=”container”>の下を1行改行し、ハイライトされている4〜7行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
    <footer>
      <div class="container">
        <address>
          <h2>ウェブデザイン演習</h2>
          <p>住所：〒701-0153 岡山県岡山市北区庭瀬83 ／ TEL：086-293-1100</p>
        </address>
      <!-- /.container --></div>
    </footer>
<!-- 〜下部省略〜 -->

<address></address>タグは主にサイトの問い合わせ先を明示するためのブロックです。サイト名は見出しのためのHTMLタグ「<h2></h2>」タグ、住所は段落のためのHTMLタグ、「<p></p>」タグで囲っています。

右寄せする<ul></ul>の追加

次に右側に配置するフッターナビの<ul></ul>を記述します。先ほど記述した<address>〜</address>の下を1行改行し、ハイライトされている8〜14行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
    <footer>
      <div class="container">
        <address>
          <h2>ウェブデザイン演習</h2>
          <p>住所：〒701-0153 岡山県岡山市北区庭瀬83 ／ TEL：086-293-1100</p>
        </address>
        <ul>
          <li><a href="#">トップページ</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">企業理念</a></li>
          <li><a href="#">業務内容</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      <!-- /.container --></div>
    </footer>
<!-- 〜下部省略〜 -->

<nav></nav>セクションで記述したグローバルナビゲーションの<ul></ul>と同じものですね。

最下部の<p class=”copyright”></p>の追加

最後に<div class=”container”></div>の外側に、コピーライト（著作権）の記述をします。コピーライトの記述は様々な記述方法がありますが、今回は<p></p>タグに「copyright」というclassをつけます。

先ほど記述した<ul></ul>タグのさらにその下の<div class=”container”></div>の閉じタグの下を1行改行し、ハイライトされている16行目のコードを記述してください。

index.html

<!-- 〜上部省略〜 -->
    <footer>
      <div class="container">
        <address>
          <h2>ウェブデザイン演習</h2>
          <p>住所：〒701-0153 岡山県岡山市北区庭瀬83 ／ TEL：086-293-1100</p>
        </address>
        <ul>
          <li><a href="#">トップページ</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">企業理念</a></li>
          <li><a href="#">業務内容</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      <!-- /.container --></div>
      <p class="copyright">Copyright &copy; 2016 ウェブデザイン演習 Allrights Reserved.</p>
    </footer>
<!-- 〜下部省略〜 -->

<footer></footer>部分のHTMLコーディングはこれで完了。

main.cssへの記述（<footer></footer>セクション編）

次にmain.cssへの記述です。再度main.cssを開きましょう。

<footer></footer>の追加

まずは<footer></footer>に適用させる記述を行います。
main.cssの最後の行の下に1行あけて、ハイライトされている5〜11行目のコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

nav li:nth-of-type(5) a:hover {background-position: -800px -50px;}

footer {
  height: 100px;/* 高さの指定 */
  position: absolute;/* #container内で絶対配置 */
  left: 0px;/* 左から0px */
  bottom: 0px;/* 下から0px */
  background: #5b0400;
}

position

ここで「position: absolute」というものが出てきました。positionは、配置を指定するプロパティです。今回指定している「absolute」は、親要素内で絶対配置を行うという指定になります。
positionを一つ一つ噛み砕いていくと・・・

CSS

/*
positionプロパティの初期値です。
特に指定されず、実案件では一度も指定したことがしません。
*/
セレクタ {
  position: static;
}

/*
要素を絶対配置（親要素以外の要素に影響を受けない）します。
親要素（外側の要素）にrelativeを指定すると親要素の左上が基準点になり、
基準点からの絶対配置でtop・right・bottom・leftに指定した距離をとります。
*/
セレクタ {
  position: absolute;
}

/*
要素を相対配置（親要素以外の要素にも影響を受ける）します。
実案件で単独で使用することはあまりありませんが、
子要素（内側の要素）にabsoluteを使う時は毎回指定します。
逆に、親要素にrelativeを指定しないとabsoluteで指定した要素は意図しない位置に配置されることがあります。
*/
セレクタ {
  position: relative;
}

/*
絶対配置かつ固定表示を行います。
スクロールやスワイプをしても上部や下部に配置したい要素に指定します。
*/
セレクタ {
  position: fixed;
}

上記のようになります。
positionはスクロールアニメーションを配置する際に頻繁に使用します。
その場合、親要素に「position: relative;」を指定して基準点を親要素の左上に指定し、
アニメーションする要素に「position: absolute;」を指定します。（また解説します。）

さらに下で説明する「top・right・bottom・left」で指定した値を使い、
JavaScriptを使って、ページのスクロール位置によって値を変える処理をします。

left・bottom（right・top）

positionで指定したブロックに配置の座標を指定します。
leftはボックスの左端からの距離、bottomは下端からの距離です。
今回指定したleft・bottomの他にも、right（右端からの距離）・top（上端からの距離）というプロパティがあります。

CSS

/*
指定した値を使い、親要素の上端からの距離をとります。
この場合、親要素の上端から下方向に100pxの距離をとります。
*/
セレクタ {
  top: 100px;
}
/*
指定した値を使い、親要素の右端からの距離をとります。
この場合、親要素の右端から左方向に30pxの距離をとります。
*/
セレクタ {
  right: 30px;
}

/*
指定した値を使い、親要素の下端からの距離をとります。
この場合、親要素の下端から上方向に50pxの距離をとります。
*/
セレクタ {
  bottom: 50px;
}

/*
指定した値を使い、親要素の左端からの距離をとります。
この場合、親要素の左端から右方向に70pxの距離をとります。
*/
セレクタ {
  left: 70px;
}

今回の<footer></footer>セクションの指定の場合、
<div id=”container”></div>（モニタ全体）の、
左端から0px、下端から0pxの位置に絶対配置するという指定を行っています。

より具体的に言うと・・・

<div id=”container”></div>には「min-height: 100%;」を指定しているため、最小の高さは画面100%の高さと同じになります。ここで<footer></footer>セクションに対して画面の最下部に絶対配置する指定（position: absolute; left:0 ; bottom: 0;）を行うことで、コンテンツのボリュームが少なく高さが画面100%に満たない場合でも<footer></footer>を最下部に配置することが可能になります。

<div class=”container”></div>の追加

次に<div class=”container”></div>の指定を行います。
先ほど記述したfooter{〜}の下に1行あけて、ハイライトされている11〜14行目のコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}

footer .container {
  padding: 20px 0 30px;/* 上に20px、左右に0px、下に30pxの余白 */
  overflow: hidden;/* 子要素にfloatを指定するため、overflowを指定 */
}

以前も出てきたpaddingやoverfowを使っています。
今回は中央揃えした<div class=”container”></div>の内側に、
<address></address>と<ul></ul>をそれぞれ右寄せ・左寄せで配置する予定です。

第09回の講義で解説しましたが、右寄せ・左寄せを行うためには「float」プロパティを使わなければいけません。しかし子要素に「float」プロパティを使ってしまうと<div class=”container”></div>が高さを保てなくなってしまいます。加えて今回指定した「padding」も適用されなくなってしまいます。

これを解決するためにはどうすればいいんでしたっけ？？

・・・そう、「float」プロパティを指定したセレクタの親要素に「overflow: hidden;」を指定するんでしたよね。そのため<div class=”container”></div>に対して「overflow: hidden;」を指定しています。

<adress></address>の追加

次に<div class=”container”></div>の中の左側、<address></address>の指定です。
先ほど記述したfooter .container{〜}の下に1行あけて、ハイライトされている8〜12行目・14〜16行目・18〜20行目のコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

footer .container {
  padding: 20px 0 30px;
  overflow: hidden;
}

footer address {
  float: left;/* 左寄せに */
  font-style: normal;/* addressは文字が斜体になるので正体に */
  color: #fff;
}

footer address h2 {
  font: normal 14px/20px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;
}

footer address p {
  font: normal 11px/18px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;
}

フォント関連の指定を一括で行う「font」プロパティ

第8回の講義では「font-weight・font-size・line-height・font-family」を別々に指定しましたが、「font」プロパティはそれらを一括で指定するプロパティです。

CSS

p {
/* 合体して指定 */
  font: normal 14px/24px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;

/* それぞれ別に指定 */
  font-weight: normal; /* フォントの太さ */
  font-size: 14px; /* フォントの大きさ */
  line-height: 24px; /* 行の高さ */
  font-family:'Hiragino Kaku Gothic ProN', Meiryo , sans-serif; /* フォントの種類 */
}
  • font-weight：フォントの太さ（値：normal・bold・lighterなど）
  • font-size：フォントの大きさ（値：◯◯px・◯◯em・◯◯%など）
  • line-height：行の高さ（値：◯◯px・◯◯em・◯◯%など）
  • font-family：フォントの種類（カンマで区切ることで複数指定が可能）

なおfont-familyプロパティはそれ自体に細かく指定できますが、基本的には上の「’Hiragino Kaku Gothic ProN’ , Meiryo , sans-serif」でWindowsもMacも対応していると思います。

<ul></ul>の追加

今度は<div class=”container”></div>の中の右側、<ul></ul>の指定です。先ほど記述したfooter address p{〜}の下に1行あけて、ハイライトされている7〜10行目・12〜17行目・19〜22行目・24〜26行目のコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

footer address p {
  font: normal 11px/18px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;
}

footer ul {
  float: right; /* 右寄せに */
  letter-spacing: -.4em; /* 子要素の横並びをした際に生じる無駄なスペースを詰める */
}

footer li {
  font: normal 12px/18px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;
  padding: 0 5px;
  display: inline; /* ブロック要素のli（横幅が100%のもの）をインライン要素に変更（横並びを可能にする） */
  letter-spacing: normal; /* 親要素から継承されたスペースの削除を元に戻す */
}

footer li a {
 color: #fff;
 text-decoration: underline; /* リンクに下線を引く */
}

footer li a:hover {
 text-decoration: none; /* マウスをのせると下線を消す */
}

display: inline; = ブロック要素をインライン要素に変更する 

プロパティ・値の説明
プロパティ 指定の効果 値
display 要素をブロック要素とインライン要素のどちらとして扱うか、
およびその子要素のために使用されるレイアウト、
例えば フローレイアウト、グリッド、フレックスなどの指定		 block・inline・flexなど

displayプロパティはブロック要素とインライン要素の指定や、表示or非表示などの切り替えなど、主に表示状態の指定に使用することが多いです。

今回指定を行った<li></li>タグはブロック要素です。ブロック要素に関しては以前にも出てきましたが、何も指定しないと横幅100%になるので横並びにすることができません。だからここはインライン要素に変更します。

インライン要素への変更は「display: inline;」と指定するだけです。

letter-spacing: ◯◯; = 文字間のスペースの大きさを指定

プロパティ・値の説明
プロパティ 指定の効果 値
letter-spacing テキストの水平方向の字間のスペースに関する挙動を指定 normal（初期値）・数値など

display: inline;を指定するとちょっとした弊害が発生します。それはインライン要素同士の間に微妙なスペースが発生してしまうことです。このスペースをそのままにしておくと、marginやpaddingの値が指定した通りになりません。その対策として、letter-spacingを使って文字の間隔の調整を行います。

display: inline;で発生したスペースはおよそ1文字の40%程度です。1文字のサイズが1emなので、その40%は0.4emになります。

まず<li></li>の親要素である<ul></ul>に対して、「letter-spacing: -.4em;」として文字間を削ります。これで<li></li>と<li></li>の間は削ることができましたが、今度は<li></li>の中の文字の間隔が狭くなってしまいます。

なので、<li></li>に対しては文字間を通常に戻してあげるために「letter-spacing: normal;」を指定します。

<p class=”copyright”></p>の追加

このページの最下部にフッターがあり、フッターの中で最も下に<p class=”copyright”></p>を設置します。先ほど記述したfooter li a:hover{〜}の下を1行改行しハイライトされている7〜16行目のコードを記述してください。

main.css

/*-- 〜上部省略〜 --*/

footer li a:hover {
  text-decoration: none;
}

footer .copyright {
  width: 100%;/* position: absolute;によって横幅が100%ではなくなるので横幅を100%指定 */
  position: absolute;/* footer内で絶対配置 */
  left: 0;/* 左から0px */
  bottom: 0;/* 下から0px */
  font: normal 12px/30px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;
  text-align: center;
  color: #fff;
  background: #400f09;
}

position: aboslute;で横幅が100%ではなくなる

<p></p>はブロック要素です。ブロック要素は何も指定しない限りは横幅が100%に保たれると以前解説しましたが、ブロック要素でも「position: absolute;」や「position: fixed;」を指定すると横幅が保たれなくなってしまいます。そこで「width: 100%;」を指定することで横幅を再び100%に戻してあげます。

アンケートの結果

先週実施したアンケートの結果・・・

  1. スクロールアニメーション　53%
  2. Web動画の埋め込み　26%
  3. スマホ・タブレット対応　21%

以下のような順番になりました。

というわけで、現在構築中のウェブデザインが完成したらスクロールアニメーションの方法を紹介したいと思います。Web動画の埋め込みやスマホ・タブレット対応に関しても時間が許す限り紹介します。

とても参考になりました！！本当にありがとう！！

RELATED POSTS関連記事

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE