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

WEBCRE8TOR.COM

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

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

また、JavaScriptというアニメーションなどの動きを制御する言語ファイルを使った簡単なスライドショーの実装を行いましょう。

皆さんも目にしたことがあると思いますが、JavaScriptが使われている代表的なものは、
複数枚の画像を切り替えるスライドショーや、
画像をクリックした時に画像が拡大されるポップアップの機能などがあります。

今回は画像アセットを使った画像の書き出しを行い、スライドショーで使う画像の準備を行います。

この記事の目次

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

コーディングの準備

現在「index.html」と「main.css」のコーディングが問題なく終わっていれば、
以下のようなコードになっているはずです。

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;
}

そして今回進めるのは以下の状態までになります。

http://webcre8tor.com/data/lesson/footer_slider/

ひとまずDreamweaverを起動して「index.html」「main.css」ファイルを開き、
今回のコーディングの準備を行ってください。

手順は以下。

  1. Adobe Dreamweaver CCを起動する。
  2. 「html」フォルダの中にある「index」というファイルと「css」フォルダ内にある「main」というファイルを、Dreamweaverのウィンドウ内にドラッグ＆ドロップして開く。

以上です。

<nav></nav>セクションのHTML・CSSコーディング

index.htmlに<nav></nav>のコードを記述

ではまずはサイトのナビゲーションである<nav></nav>のセクションをコーデイングしましょう。
headerに比べてこれは簡単。まずはindex.htmlに、次のように記述しましょう。

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>はリストの一括りと考えてください。

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

main.cssに<nav></nav>のコードを記述

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>の指定の時も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-top）を開始位置として、
時計回りに「上 → 右→ 下→ 左」という順番で一括で指定できます。

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

CSS

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

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

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

次に<li></li>の中の<a>タグの指定を行います。

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スプライト

今回ロゴや電話番号は<img>でマークアップしていますよね。
このデザインではグローバルナビゲーションにも画像を使っているわけなので、
同じように<img>タグを使えばいいんじゃないか？というような考えもあると思います。

しかし今回のナビゲーションでは、それぞれの<li><a>◯◯</a></li>に背景画像を指定しています。
なぜかというと、同じような画像が横に並ぶため、画像を分割せずに1枚で表示ができるからです。

lesson10_2

<img>タグにすると、<li><a>◯◯</a></li>の１つ１つに画像が必要で、今回の場合は5枚も画像を用意しなければいけません。マウスを乗せた時の画像を考えると10枚になります・・・。

さらにブラウザのことを考えると10枚の画像ファイルをそれぞれ指定することでサーバーへのリクエスト数が増え、最終的に描画が遅れてしまうことになります。

今回紹介するCSSスプライトは、1枚の背景画像ファイルの表示位置を変えることでナビゲーションボタンとして表示させるという手法です。

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

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

text-indent・white-space・overflowで文字を消す

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

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

背景に使う画像にはすでに文字が書いてあるので文字は邪魔ですよね？

「overflow: hidden;」は今日も解説しましたが、要素が領域の外にはみ出した場合の処理ですね。
今回初登場の「text-indent: 100%;」でテキストの開始位置を領域外に設定し、同じく今回初登場の「white-space: nowrap;」によってテキストの折り返しを禁止しています。

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

background-image、background-repeat

上記の合わせ技によって文字は消せました。
今度は背景画像の指定をしなければいけません。

以前も簡単に説明しましたが、まず<li><a>◯◯</a></li>の背景画像の指定に関する「background-image」と「background-repeat」について説明します。

background-imageは背景に使う画像のURLを指定するものです。
background-repeatは背景画像を繰り返し描画するかどうかの指定です。

今回の場合はbackgorund-imageで指定した画像を使い、
繰り返し描画はしない、という指定を行っています。

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

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ずらす */

何やらセレクタの新しい記述方法が出てきましたよね？
この指定の詳細は以下で解説します。

: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ずらします。

<footer></footer>セクションのHTML・CSSコーディング

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

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

まず<footer>と</footer>の間に1行あけて、<div class=”container”></div>を追加しましょう。

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行改行し、ハイライトしている行を記述してください。

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行改行し、
ハイライトされている行を記述してください。

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>
<!-- 〜下部省略〜 -->

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

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

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

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

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コーディングはこれで完了。

<footer></footer>部分のCSSコーディング

今度はCSSコーディングを行います。
Dreamweaverの左上のタブが現在「index.html」になっていると思いますが、
「main.css」のタブをクリックして「main.css」の編集に切り替えてください。

<footer></footer>の追加

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

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;）を行うことで、
コンテンツボリュームが少ない場合でも、<footer></footer>を最下部に配置することが可能になっています。

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

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

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;」を指定するんでしたよね。

<adress></address>の追加

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

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;
}

floatやfontなども以前出てきましたね。

<ul></ul>の追加

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

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;

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

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

letter-spacing

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行改行し、
ハイライトされている行を記述してください。

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%に戻してあげます。

画像アセットで<div id=”slider”></div>の画像を書き出す

今回も「画像アセット」機能を使って、<div id=”slider”></div>セクションでスライドショーを行う画像の書き出しを行おうと思います。
初期設定が終わったらPSDファイルをダブルクリックしてPhotoshopで開いてみましょう。

レイヤーパネルを開く

まずレイヤーパネルを開きます。
今回は<div id=”slider”></div>の画像を書き出すので、
レイヤーパネルの「slider」フォルダを開きましょう。 

「slider」フォルダlesson10_slider

レイヤーに拡張子付きの名前をつける

次に書き出す対象のレイヤーに名前をつけます。

<div id=”slider”></div>のスライドする画像「img_01.jpg」「img_02.jpg」「img_03.jpg」

今回は<div id=”slider”></div>のスライドする画像を書き出します。
「slider」フォルダの中の「img_xx」と名前の付いた3つのレイヤーを、
それぞれ以下のように書き換えてください。

  • 「slider」フォルダ内の「img_xx」レイヤーを「slider/img_xx.jpg」に書き換える

変更前「img_01」「img_02」「img_03」lesson10_img01

変更後「slider/img_01.jpg」「slider/img_02.jpg」「slider/img_03.jpg」lesson10_img02

今回は「slider/」という文字がつきました。前々回・前回と同じく、この作業だけで「slider」というフォルダが自動的に生成され、そのフォルダ内に画像が書き出されます。

 htmlフォルダにそのまま移動する

早速書き出した画像を確認してみましょう。
作業したPSDを上書き保存してPhotoshopを終了し、書き出し先の「WebDesignExercise01-assets」というフォルダに「slider」というフォルダ、さらに「img_01.jpg」「img_02.jpg」「img_03.jpg」という画像があるかどうかを確認します。

確認後、フォルダ構成が正しければ、
そのまま「html」フォルダの中の「img」フォルダに、
「slider」フォルダごと移動してしまいましょう。

構成の確認

以下にフォルダ・ファイルの構成を明記しておきます。

lesson10_folder1

どうでしょうか？？できましたか？？

 

アンケートの結果

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

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

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

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

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

RELATED POSTS関連記事

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE