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

WEBCRE8TOR.COM

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

前回は<footer></footer>セクションのコーディングを行いました。
今回はjQueryを使ったスライドショーの実装を行います。
そしていよいよ現在のデザインのコーディングの最終回です。

ページのメインブロックである<article></article>セクション、
その内側に、ページのメインコンテンツを表示する<div id=”main”></div>、
そしてサイド要素である<aside><aside>のコーディングを行います。

この記事の目次

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

jQueryを使ったスライドショーの設置・設定

index.htmlとmain.cssの記述が終わったら今度は画像のスライドショーを実装しましょう。
アニメーションの動きや、クリックして動的に切り替える動きなどを実装する場合、
一般的にはJavaScriptというプログラム言語を使います。

まずはスライドショーの動きの確認。

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

画像スライドショーが実装されていますね。
今回はこれを簡単に実装します。

jQueryとは

ただ、JavaScriptを使ってアニメーションなどの処理を行うと、
何十行にも及ぶコードを記述する必要があり、
初心者にはとても扱うことができません。

そこで、記述するコードを極めて短く簡単にするために、
一般的にも広く使われている「jQuery」というライブラリを使って、
記述を行ってみましょう。

参考URL：jQueryってなに？超初心者向け入門講座 – ウェブ企画ラボ

ライブラリとは、使うことが多い複数のプログラムを再利用しやすい形でひとまとまりにしたもので、jQueryを使うことによってライブラリからプログラムを呼び出しているような感じです。感覚としては、jQueryは有能な通訳さんのようなものですね。

jQueryの読み込み

使用するにあたり、まずはそのjQueryの本体を読み込んでみましょう。
index.htmlの<head></head>内にjQueryを読み込む記述を追加します。

<link rel=”stylesheet” href=”css/main.css”>と<title></title>の間を一行改行し、ハイライトされている行を記述してください。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>ウェブデザイン演習</title>
</head>
<body>
<!-- <body>〜</body>の記述は省略 -->
</body>
</html>

jQueryプラグインの読み込み

jQuery本体とは別に、プラグインと呼ばれる機能を拡張する仕組みを使います。
例えばjQuery本体はスマートフォン、プラグインはアプリと考えれば関係性がわかるかなと思います。

jQueryプラグインを読み込む際にはそのプラグイン用のCSSが必要な場合が多く、
それも合わせて<head><head>セクション内か</body>直前に読み込む必要があります。

プラグインの読み込み

今回はbxSliderという画像のスライドショーを生成する仕組みを持つプラグインを導入します。
まず、以下のURLを開いてください。

bxSliderインストールページ：https://bxslider.com/install/

ページを開くと左側に①②③とピンクの数字があります。この記述の追記をHTMLファイルに行なうことで簡単にスライドショーを実装することができます。

index.htmlに読み込みの実行と指定を記述

では以下の記述を行います。

jquery.bxslider.jsとjquery.bxslider.cssの読み込み

まず、<link rel=”stylesheet” href=”css/main.css”>の下を1行改行し、
ハイライトされている<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css”>を記述。

次に、<title>ウェブデザイン演習</title>の上に一行あけて、
ハイライトされている<script src=”https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js”></script>を記述してください。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<title>ウェブデザイン演習</title>
</head>
<body>
<!-- <body>〜</body>の記述は省略 -->
</body>
</html>
bxSliderの実行

読み込みだけだとプラグインが実行されません。
実行するには対象の要素に「JavaScriptを実行しなさい」と指示する必要があります。

今度は、</body>の上に一行あけ、ハイライトされている行を記述しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<title>ウェブデザイン演習</title>
</head>
<body>
<!-- <body>〜</body>の記述は省略 -->
<script>
$(function(){
   $('.bxslider').bxSlider({
     auto:true,
     speed:2000,
     pause:2000
   });
});
</script>
</body>
</html>

<script></script>タグはJavaScriptの記述を行うタグです。

index.htmlにスライドショーを表示させる記述を追加

次に、index.htmlの<body></body>タグ（HTMLの表示領域）内にある、
<nav></nav>セクションと<article></article>セクションの間を1行改行し、
以下のハイライトされているコードを記述しましょう。

index.html

<!-- 〜上部省略〜 -->
    </nav>
    <div id="slider">
      <ul class="bxslider">
        <li><img src="img/slider/img_01.jpg" /></li>
        <li><img src="img/slider/img_02.jpg" /></li>
        <li><img src="img/slider/img_03.jpg" /></li>
      </ul>
    <!-- / #slider --></div>
    <article>
<!-- 〜下部省略〜 -->

これでindex.htmlへの記述は完了。

main.cssに<div id=”slider”></div>の指定の記述を追加

最後に、たった今記述した<div id=”slider”></div>への指定をmain.cssに記述します。
すでに記述されている「nav li:nth-of-type(5) a:hover」と、「footer」の指定の間を1行改行し、ハイライトされているコードを記述してください。

main.css

/* 上部省略 */
nav li:nth-of-type(5) a:hover {background-position: -800px -50px;}

#slider {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0 0;
}

footer {
  height: 100px;
  position: absolute;/* #container内で絶対配置 */
  left: 0px;/* 左から0px */
  bottom: 0px;/* 下から0px */
  background: #5b0400;
}
/* 下部省略 */

記述が終わったら、index.htmlをブラウザで開いて、
スライドショーが動くかどうか確認してみてください。

今回はスライドショーの実装方法の解説を行いましたが、
スライドショーは比較的初心者向けの簡単なものが多く、
実装できるjQueryプラグインは星の数ほど存在します。

そのため、jQueryプラグイン練習がてら使ってみるには、
スライドショーのjQueryプラグインがもってこいです。

要件にあったプラグインをいろいろと試してみると、
Webサイト制作の経験の上ではとてもい勉強になりますよ。

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

今回も「画像アセット」機能を使って<div id=”main”></div>でポップアップする画像の書き出しを行おうと思います。今回はPhotoshopの基本設定は割愛します。

レイヤーパネルを開く

まずレイヤーパネルを開きます。
今回の画像は、<article></article>セクション内の<div id=”main”></div>の中にありますので、Photoshopデータでも同じように「article」フォルダ内に画像のレイヤーが存在します。

まずレイヤーパネルの「article」フォルダを開き、
さらにその中の「#main」「entry」とフォルダを開きましょう。 

「article」フォルダlesson11_article

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

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

<div id=”main”></div>のポップアップする画像「dog.jpg」

今回は<div id=”main”></div>タグの中の<section></section>タグに、
本文の段落として<p></p>タグを追加していますよね。

その段落の中に<img />タグを使って画像を読み込んで、
<img />タグ自体を<a></a>タグで囲うことによってリンクをつけています。
リンクをクリックするとページは開かず画像が開く仕組みです。

「article」フォルダの中の「#main」フォルダの中の「entry」フォルダの中に「dog」と名前の付いたレイヤーを以下のように書き換えてください。

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

変更前「dog」lesson11_entry

変更後「dog.jpg」lesson11_entry

 htmlフォルダに移動する

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

確認後、画像が存在していれば、
そのまま「html」フォルダの中の「img」フォルダに、
「dog.jpg」を移動しましょう。

構成の確認

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

lesson11_folder1

これで完璧。

コーディングの準備

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

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<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>
    <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>
    <div id="slider">
      <ul class="bxslider">
        <li><img src="img/slider/img_01.jpg" /></li>
        <li><img src="img/slider/img_02.jpg" /></li>
        <li><img src="img/slider/img_03.jpg" /></li>
      </ul>
    <!-- / #slider --></div>
    <article>
    </article>
    <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>
  <!-- / #container --></div>
<script>
$(function(){
  $('.bxslider').bxSlider({
    auto:true,
    speed:2000,
    pause:2000
  });
});
</script>
</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;
}

nav ul {
  width: 1000px;
  overflow: hidden;
  margin: 0 auto;
}

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

nav li a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../img/nav/ul.png);
  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;}
nav li:nth-of-type(3) a {background-position: -400px 0;}
nav li:nth-of-type(4) a {background-position: -600px 0;}
nav li:nth-of-type(5) a {background-position: -800px 0;}
nav li:nth-of-type(1) a:hover {background-position: 0 -50px;}
nav li:nth-of-type(2) a:hover {background-position: -200px -50px;}
nav li:nth-of-type(3) a:hover {background-position: -400px -50px;}
nav li:nth-of-type(4) a:hover {background-position: -600px -50px;}
nav li:nth-of-type(5) a:hover {background-position: -800px -50px;}

#slider {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0 0;
}

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

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

footer address {
  float: left;
  font-style: normal;
  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;
}

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;
  letter-spacing: normal;
}

footer li a {
  color: #fff;
  text-decoration: underline;
}

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

footer .copyright {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  font: normal 12px/30px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;
  text-align: center;
  color: #fff;
  background: #400f09;
}

そして今回でこのデザインのコーディングは最後になります。

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

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

手順は以下。

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

以上です。

<article></article>の<div id=”main”></div>部分のHTMLコーディング

index.htmlに<div class=”container”></div>の追加

まずは編集中のindex.htmlを開き、<article></article>の間に1行あけて、
下記のハイライトされている<div class=”container”></div>を記述してください。

index.html

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

今回も中の要素を中央寄せするために、<div class=”container”></div>を追記します。
次は中央揃えしたブロックの中で右寄せ・左寄せする対象である、
<div id=”main”></div>ブロックと<aside></aside>ブロックの記述をしましょう。

index.htmlに<div id=”main”></div>の追加

次に、先ほど記述した<div class=”container”>の下に1行あけて、
ハイライトされている<div id=”main”></div>を記述してください。

index.html

<!-- 〜上部省略〜 -->
    <article>
      <div class="container">
        <div id="main">
        <!-- /#main --></div>
      <!-- /.container --></div>
    </article>
<!-- 〜下部省略〜 -->

<div id=”main”></div>はページのメインコンテンツの中でも最重要部分の本文を記述するブロックです。見本ページでいうと左側の記事のある白いブロックですね。

<section></section>

次に、先ほど記述した<div id=”main”>の下に1行あけて、
ハイライトされている<section></section>を記述してください。

index.html

<!-- 〜上部省略〜 -->
        <div id="main">
          <section>
          </section>
        <!-- /#main --></div>
<!-- 〜下部省略〜 -->

<section></section>は記事単体で使っています。
後述する記事タイトルと犬の画像、本文部分を包括したブロックになります。

今回のコーディングでは記事が一つの状態ですが、
記事数が増えると<section></section>が増えていくという作りを想定しています。

<h2></h2>

次に、先ほど記述した<section>の下に1行あけて、
ハイライトされている<h2></h2>を記述してください。

index.html

<!-- 〜上部省略〜 -->
        <div id="main">
          <section>
            <h2>記事AAA</h2>
          </section>
        <!-- /#main --></div>
<!-- 〜下部省略〜 -->

<h2></h2>は見本ページでいう「記事AAA」と書いている記事タイトルのブロックです。

<p></p>

次に、先ほど記述した<h2></h2>の下に1行あけて、
ハイライトされている<p></p>を記述してください。

index.html

<!-- 〜上部省略〜 -->
        <div id="main">
          <section>
            <h2>記事AAA</h2>
            <p><a href="./img/dog.jpg"><img src="img/dog.jpg" /></a></p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
          </section>
        <!-- /#main --></div>
<!-- 〜下部省略〜 -->

<p></p>は文章の一つの段落を意味します。

<p>－HTMLタグリファレンス

参考ページにありますが、段落を構成するのではなく、改行のみを行うのであれば<br />を使います。

<article></article>の<div id=”main”></div>部分のCSSコーディング

<article></article>の追加

まず<article></article>の内容を追記します。
編集中のmain.cssを開き、前回コーディングした#slider {〜}と、footer {〜}の間を1行改行し、ハイライトされているarticle {〜}、そしてarticle .container {〜}を記述してください。

main.css

/* 〜上部省略〜 */
#slider {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0 0;
}

article {
  padding: 30px 0 130px;
}

article .container {
  overflow: hidden;/* main と aside を横並びにするために追加 */
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

<article></article>はメインコンテンツ部分です。
さきほどのindex.htmlの記述の際にはこの中に<div class=”container”></div>を記述して、さらにその中に<div id=”main”></div>を記述したと思います。

<article></article>ブロック内で<div class=”container”></div>を使って中央揃えを行い、
<div id=”main”></div>ブロックを左に、<aside></aside>ブロックを右に寄せたものが見本ページです。

<div id=”main”></div>の追加

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

main.css

/* 〜上部省略〜 */
article .container {
  overflow: hidden;/* main と aside を横並びにするために追加 */
}

#main {
  float: left;/* mainを左寄せに*/
  width: 720px;
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

<div id=”main”></div>は見本サイトでいう左側の記事の部分です。
ここでは「左寄せ」と「横幅」を指定していますね。

<section></section>の追加

次に<div id=”main”></div>の内側、<section></section>の指定です。
先ほど記述した#main {〜}の下を1行改行し、
ハイライトされている、#main section {〜}を記述してください。

main.css

/* 〜上部省略〜 */
#main {
  float: left;
  width: 720px;
}

#main section {
  overflow: hidden;/* section内に書くコンテンツ（画像など）によっては左寄せor右寄せでfloatを使う事があるので追加 */
  padding: 30px;/* 内側に30pxの余白をとる */
  background: #fff;/* sectionに背景色#fffをつける */
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

<section></section>はそれ自体が記事一つ分のブロックになります。記事が二つ、三つと増えるたびに、この<section></section>がその分増えていくと考えてください。

<h2></h2>の追加

次に<section></section>の内側、<h2></h2>の指定です。
先ほど記述した#main section {〜}の下を1行改行し、
ハイライトされている、#main section h2 {〜}を記述してください。

main.css

/* 〜上部省略〜 */
#main section {
  overflow: hidden;
  padding: 30px;
  background: #fff;
}

#main section h2 {
  margin: 0 0 20px;/* 下に引いた下線からの距離 */
  padding: 0 0 10px;/* 下に引いた下線までの距離 */
  font: normal 30px/40px Meiryo , sans-serif;
  color: #5b0400;
  border-bottom: 1px dotted #5b0400;/* h2の下に点線の下線を引く */
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

<h2></h2>は記事のタイトルになります。「hタグ（heading）」はタイトル部分をマークアップし、ページの内容を伝える非常に重要な要素です。

<p></p>の追加

<h2></h2>がタイトルなら、<p></p>は記事の本文です。
先ほど記述した#main section h2 {〜}の下を1行改行し、
ハイライトされている、#main section p {〜}を記述してください。

main.css

/* 省略 */
#main section h2 {
  margin: 0 0 20px;
  padding: 0 0 10px;
  font: normal 30px/40px Meiryo , sans-serif;
  color: #5b0400;
  border-bottom: 1px dotted #5b0400;
}

#main section p {
  margin: 0 0 20px;/* 段落と段落の間に距離を取るために下にmarginをとる */
  font: normal 14px/24px Meiryo , sans-serif;
}

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

<p></p>タグで段落をマークアップします。

<article></article>の<aside></aside>部分のHTMLコーディング

index.htmlに<aside></aside>の追加

まず記述するのは右側のサイド部分<aside></aside>です。
先ほど記述した<div id=”main”>の閉じタグの</div>の下を1行改行し、
ハイライトされている<aside></aside>を記述してください。

index.html

<!-- 〜上部省略〜 -->
      <div class="container">
        <div id="main">
          <section>
            <h2>記事AAA</h2>
            <p><a href="./img/dog.jpg"><img src="img/dog.jpg" /></a></p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキスト</p>
            <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
          </section>
        <!-- /#main--></div>
        <aside>
        </aside>
      <!-- /.container --></div>
<!-- 〜下部省略〜 -->

<aside></aside>はメインコンテンツ内でもメインの記事の内容から切り離しても問題のないコンテンツが配置されることが多く、ブログなどではサイドバー部分に用いられることが多くなります。

参考URL：<aside>－HTML5タグリファレンス

<ul></ul>

先ほど記述した<aside></aside>の下を1行改行し、
ハイライトされている<ul>〜</ul>を記述してください。

index.html

<!-- 〜上部省略〜 -->
        <aside>
          <ul>
            <li>
              <h2>最近の投稿</h2>
              <ul>
                <li><a href="">記事AAA</a></li>
                <li><a href="">記事BBB</a></li>
                <li><a href="">記事CCC</a></li>
              </ul>
            </li>
            <li>
              <h2>アーカイブ</h2>
              <ul>
                <li><a href="">2014年12月</a></li>
                <li><a href="">2014年11月</a></li>
                <li><a href="">2014年10月</a></li>
              </ul>
            </li>
          </ul>
        </aside>
<!-- 〜下部省略〜 -->

<ul></ul>は<nav></nav>や<footer></footer>の時にも出てきていますが、<li></li>というリスト要素を表示させるために使います。<li></li>はリストの項目を意味するもので、<ul></ul>はリストの一括りと考えてください。

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

先ほど記述した#main section p {〜}と、footer {〜} の間を一行改行し、
ハイライトされているaside {〜} から、aside > ul > li > ul li a:hover {〜} の部分を記述してください。

main.css

/* 〜上部省略〜 */
#main section p {
  margin: 0 0 20px;/* 段落と段落の間に距離を取るために下にmarginをとる */
  font: normal 14px/24px Meiryo , sans-serif;
}

aside {
  float: right;/* mainを右寄せに*/
  width: 240px;
}

aside > ul > li {
  padding: 0 0 30px;
}
/*
">"は直下セレクタ(子セレクタ)と言います。
ある親要素の直下にある要素を対象とするセレクタです。
この場合だと「asideのすぐ内側のulすぐ内側のliに適用する」となります。
*/

aside > ul > li h2 {/* asideの真下のulの真下のliのh2に適用 */
  margin: 0 0 10px;/* 下のulまでの距離 */
  padding: 5px 10px;/* 左と下の線（border）までの距離をとる */
  border-left: 4px solid #5b0400;/* h2の下に点線の下線を引く */
  border-bottom: 1px dotted #5b0400;/* h2の下に点線の下線を引く */
}

aside > ul > li > ul {
  padding: 5px 10px 15px;
  background: #fff;/* ulに背景色#fffをつける */
}

aside > ul > li > ul li {
  padding: 5px;
  border-bottom: 1px dotted #5b0400;/* liの下に点線の下線を引く */
}

aside > ul > li > ul li a {
  color: #5b0400;
  text-decoration: underline;
}

aside > ul > li > ul li a:hover {
  text-decoration: none;
}

footer {
  height: 100px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #5b0400;
}
/* 〜下部省略〜 */

ここでは今まで出てきたものばかり使っています。
ただ、以下のようなものが出てきてますね。

CSS

aside > ul > li {
  padding: 0 0 30px;
}

先ほどのコード内にも記述していますが、「>」を使って指定を行っていますね。

これは直下セレクタ(子セレクタ)と言います。
ある親要素のすぐ内側の子要素のみを対象とするセレクタです。
この場合「<aside></aside>のすぐ内側の<ul></ul>のすぐ内側の<li></li>に適用する」となります。

index.htmlの場所でいうと、以下の<li></li>に適用されることになります。

index.html

<!-- 〜上部省略〜 -->
      <aside>
        <ul>
          <li>
            <h2>最近の投稿</h2>
            <ul>
              <li><a href="">記事AAA</a></li>
              <li><a href="">記事BBB</a></li>
              <li><a href="">記事CCC</a></li>
            </ul>
          </li>
          <li>
            <h2>アーカイブ</h2>
            <ul>
              <li><a href="">2014年12月</a></li>
              <li><a href="">2014年11月</a></li>
              <li><a href="">2014年10月</a></li>
            </ul>
          </li>
        </ul>
      </aside>
<!-- 〜下部省略〜 -->

今回のように、<ul></ul>の中にさらに<ul></ul>が入れ子になっている場合、
ただ「li {〜}」と指定するとすべての<li></li>に適用されてしまいます。

指定を限定的なものにするために、
今回使った直下セレクタのようなものでピンポイントに指定を行うことができます。

課題の提出

1件目のデザインのコーディングが終わりましたので、
課題提出として、コーディングを行ったデータの提出を行います。
「html」フォルダのデータを提出しましょう。

提出用に「html」フォルダをまるごとzip形式で圧縮してください。

「html」フォルダをzip形式で圧縮

まず、「html」フォルダ圧縮の手順は以下。

  1. 「html」フォルダを右クリックして、「送る」→「圧縮（zip形式フォルダー）」を選択してzipファイルを作る。
  2. ファイル名を自分の学籍番号に変更する。

以上です。

zip圧縮したファイルをフォームから送信

なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。zip形式ではないファイルだと送信の際にエラーが出て送信ができませんので、必ず「html」フォルダをまるごと圧縮してzip形式で提出してください。

学籍番号（必須）
氏名（必須）
フリガナ (必須)
メールアドレス
質問など
課題ファイル

課題の提出ができたら今回の講義は終了です。

RELATED POSTS関連記事

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE