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

WEBCRE8TOR.COM

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

前回は、main.cssのリセットを行いましたね。

CSSリセットはブラウザでのWebサイトの見え方の差異を最低限にする。

・・・ということが目的でした。
さて、今回ですが・・・

CSSリセットを行った中で、最後にこんな指定を行ったと思います。

main.css

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

今回はこの中から・・・

  • header
  • nav
  • article
  • aside
  • section
  • footer

以上のHTMLタグの解説を行っていこうと思います。
今回は非常に項目が多いので、コードの記述は行いません。

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

htmlでそれぞれのブロックに使う各要素の説明

ますはHTMLで使う各ブロックの説明を行い、それぞれの役割を下の表で見てみましょう。

header サイトのヘッダー(ブロックのヘッダー)
nav サイトのナビゲーション
article メインコンテンツ
section 見出しと文章のセット
aside サイド要素
footer サイトのフッター要素(ブロックのフッター)

以上のものは、以前講義で解説した<div></div>タグと同じようにブロックなんですが、特に役割を持たない<div></div>タグとは異なり、それぞれ明確に役割や意味を持ったHTMLタグになります。

ここからは、龍弥デザインのクライアント、「株式会社松本鉄工」さんのWebサイトを参考にして、どのHTMLタグがどこに使われているのか、その役割は何なのか?の解説を行います。

株式会社松本鉄工」さんのWebサイト自体はかなり前に制作したので、現在ではもっと簡潔にコードを記述することが出来ますが、どれくらいのコード量を記述するようになるのか基準を知るためには「株式会社松本鉄工」さんのWebサイトのソースコードを見るのが最適です。

header

<header></header>タグ(セクション)は、読んで字の如く、サイトのヘッダーのブロックの構成を行う時に使用します。

<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。 文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。

<header>の中には、通常は<h1>–<h6>や <hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。

引用元:<header>-HTML5タグリファレンス

lesson06_header

参考画像でいうと、赤い枠で囲った左寄せのロゴマークとか右寄せのお問い合わせ電話番号だとかを記述している部分ですね。

<header></header>タグの記述例

HTML

<header>
  <h1>ウェブデザイン演習</h1>
  <p class="tel">086-293-1100</p>
</header>

基本的な記述方法は<div></div>タグと同様に、内側の要素を囲うように使用します。

参考サイトの<header></header>タグの構成

また、実際に「株式会社松本鉄工」さんのWebサイトで使用されている<header></header>セクションのHTMLのソースコードは以下のような感じ。

HTML

<header id="top">
 <div class="container">
  <hgroup>
   <h1><a href="http://matsumototekko.co.jp/"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/logo.png" width="202" height="51" alt="株式会社 松本鉄工" /></a></h1>
   <h2><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/read.png" width="232" height="51" alt="80mの工場と、895平方メートルの組立専用工場で、お客様の声に応えます。" /></h2>
  </hgroup>
  <div class="content">
   <!--<p class="english"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/english_comingsoon.png" width="120" height="40" alt="ENGLISH Coming Soon" /></p>-->
   <p class="recruit"><a href="http://matsumototekko.co.jp/recruit/" target="_blank"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/recruit_off.png" width="120" height="40" alt="採用情報" /></a></p>
   <ul class="social">
     <li class="tw"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://matsumototekko.co.jp/" data-text="各種産業機械設備の設計・製作・据付・メンテナンス 株式会社 松本鉄工" data-lang="ja">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
     <li class="fb"><iframe src="//www.facebook.com/plugins/like.php?href=http://matsumototekko.co.jp/&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21&amp;appId=109660672470678" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe></li>
     <li class="hb"><a href="http://b.hatena.ne.jp/entry/http://matsumototekko.co.jp/" class="hatena-bookmark-button" data-hatena-bookmark-title="各種産業機械設備の設計・製作・据付・メンテナンス 株式会社 松本鉄工" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async></script></a></li>
   </ul>
   <ul class="nav">
     <li><a href="http://matsumototekko.co.jp/"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/local/home.png" width="61" height="14" alt="HOME" /></a></li>
     <li><a href="http://matsumototekko.co.jp/inq.html#privacy"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/local/privacy.png" width="116" height="14" alt="個人情報保護方針" /></a></li>
     <li><a href="http://matsumototekko.co.jp/company.html#access"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/local/access.png" width="66" height="14" alt="アクセス" /></a></li>
   </ul> 
   <ul class="size">
     <li><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/local/size.png" width="79" height="14" alt="文字サイズ" />
      <ul class="textresizer">
        <li><a href="javascript:void(0)" onclick="setActiveStyleSheet('medium'); return false;"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/local/size/medium.png" width="16" height="16" alt="中" /></a></li>
        <li><a href="javascript:void(0)" onclick="setActiveStyleSheet('large'); return false;"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/local/size/large.png" width="20" height="20" alt="大" /></a></li>
      </ul>
     </li>
   </ul>      
   <ul class="contact">
     <li><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/local/contact/tel.png" width="177" height="19" alt="TEL 086-427-2272" /></li>
     <li><a href="mailto:mic@matsumototekko.co.jp"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/local/contact/mail.png" width="176" height="19" alt="mic@matsumototekko.co.jp" /></a></li>
   </ul>
  <!-- /content --></div>
 <!-- /container --></div>
〜中略〜
</header>

・・・めっちゃ長いです。はみ出してます。それほど大きなブロックではないにも関わらず、実際にはかなりのコード量によって構成されているわけですね。

<head></head>と<header></header>は完全な別物!

なお第4回でindex.htmlの基本部分の記述を行った際に<head></head>タグが出てきましたが、これはサイトのデザイン制御を行うCSSや動きの制御を行うJavaScriptなどの外部ファイルを読み込むモニターに表示されないブロックです。

今回解説した<header></header>タグは、モニターに表示される部分のサイトやブロックのヘッダーの役割を持ったものであり完全に別物なので注意してください。

nav

<nav></nav>タグ(セクション)は、ページの主要なナビゲーションの部分に使用します。どのサイトにもサイト内の別のページにリンクする時に使うグローバルナビゲーションというものがありますが、ここは大抵<nav></nav>タグでマークアップを行います。

<nav>は、ナビゲーションであることを示す際に使用します。ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。

他のページにリンクした箇所のすべてを<nav>~</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。

引用元:<nav>-HTML5タグリファレンス

lesson06_nav

参考画像でいうと、赤い枠で囲ったメイン画像の下の、サイトの各ページへのリンクをまとめたもの、つまりグローバルナビゲーションを囲っている部分です。

<nav></nav>タグの記述例

HTML

<nav>
  <ul>
    <li><a href="./index.html">トップページ</a></li>
    <li><a href="./company.html">会社概要</a></li>
    <li><a href="./contact.html">お問い合わせ</a></li>
  </ul>
</nav>

上記のように、<nav></nav>セクションではページのナビゲーションという性質上、ほとんどの場合ページリンクを埋め込んだリストを記述することになります。

参考サイトの<nav></nav>タグの構成

株式会社松本鉄工」さんのWebサイトで使用されている<nav></nav>セクションのソースコードは以下のような感じ。

HTML

<nav>
  <ul>
    <li><a href="http://matsumototekko.co.jp/"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/nav/home_off.jpg" width="100" height="65" alt="HOME" /></a></li>
    <li><a href="http://matsumototekko.co.jp/about.html"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/nav/about_off.jpg" width="145" height="65" alt="私たちの想い" /></a></li>
    <li><a href="http://matsumototekko.co.jp/service.html"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/nav/works_off.jpg" width="120" height="65" alt="事業内容" /></a></li>
    <li><a href="http://matsumototekko.co.jp/flow.html"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/nav/flow_off.jpg" width="270" height="65" alt="お客様の声をカタチにするまで" /></a></li>
    <li><a href="http://matsumototekko.co.jp/company.html"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/nav/company_off.jpg" width="120" height="65" alt="会社概要" /></a></li>
    <li><a href="http://matsumototekko.co.jp/inq.html"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/header/nav/inq_off.jpg" width="145" height="65" alt="お問い合わせ" /></a></li>
  </ul>
 </nav>

テキストが長い分とてもボリュームが多いと思いがちですが、先ほどの記述例と同じく、とてもシンプルに<nav></nav>タグの内側に<ul></ul>タグがあり、その中に<li></li>があります。

<a></a>タグに関してはウェブデザイン演習 第03回で解説したように、内部や外部へのリンクの役割をもったHTMLタグです。

article

<article></article>タグ(セクション)はその内容が単体でも独立完結する内容を記述するために使用します。下記引用にもありますが、例えばブログの記事単体などは<article></article>タグでのマークアップが適切です。

<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。

引用元:<article>-HTML5タグリファレンス

・・・が、この<article></article>タグと、後に出てくる<section></section>タグはその違いが非常にわかりづらく、現場でもどちらを使用すればいいのか判断に困るものでもあります。

ですので、この講義では区別を図るために思い切り噛み砕いて、

「<article></article>タグはメインコンテンツブロックである」と定義して解説を進めていこうと思います。

lesson06_article

参考画像でいうと、ページ上部の<header><header>セクションや<nav></nav>セクションと、後に解説するページ下部の<footer></footer>との間のブロック、つまりメインコンテンツのブロックが<article></article>だと思ってください。

<article></article>タグの記述例

HTML

<article>
  <h2>記事タイトル</h2>
  <p>ここは本文を記述していく段落の1行目です。</p>
  <p>ここは本文を記述していく段落の2行目です。</p>
  <p>ここは本文を記述していく段落の最後の行です。</p>
</article>

このように、<article></article>セクションでは、タイトルと本文によって、ブログ記事のような構成で記述を行うようになります。

ちなみに参考サイトの<article></article>タグは長すぎてとても記述できないためここでは割愛します。気になる人は「株式会社松本鉄工」さんのWebサイトを開いて「ソースを表示」などを行ってみてください。

aside

<aside></aside>タグ(セクション)は、極端な話「あってもなくてもいい」余談や補足を記述するブロックです。

<aside>タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。

ここで言う余談・補足情報とは、本文と関連してはいるけれど区別して掲載するべき内容のことです。 例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。

<aside>でタグ付けした要素は、あくまでも本文から外れる余談・補足情報ですから、 本文の流れの一部となる挿入句(カッコでくくって差し込むような内容など)に対して、<aside>タグを使用するのは適切ではありません。

引用元:<aside>-HTML5タグリファレンス

上記のように、メインコンテンツの中でもメインブロックに記述されるべき内容を<aside></aside>タグで記述してはいけない、ということですね。

lesson06_aside

参考画像でいうと、<article></article>の内側にある、左側のリンクバナーを設置した場所になります。ここにあるリンクはグローバルナビゲーションから開くこともできるので、おまけのような扱いになっていますね。

<aside></aside>タグの記述例

HTML

<article>
  <aside>
    <ul>
      <li><a href="a.html">Aページ</a></li>
      <li><a href="b.html">Bページ</a></li>
      <li><a href="c.html">Cページ</a></li>
    </ul>
  </aside>
  <div id="main">
    <!--ここはメインコンテンツ-->
  </div>
</article>

ここでは補助リンクのような記述にしていますが、補足説明などを記述することもあります。ブログのサイドバーなどは、検索ウィンドウやカレンダーなどを表示していたりしますね。

section

先ほど<article></article>タグと<section></section>タグ(セクション)は違いが非常にわかりづらく使いどころの判断に困る、というお話をしましたね。使いどころの判断をつけやすくするには以下の文章を元に考えてみるのがいいかもしれません。

<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。

セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

<section>タグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。 <article>、<aside>、<nav>もセクション要素ですが、それぞれ記事、補足情報、ナビゲーションという、より具体的な意味を持っています。 それに対して<section>は一般的なセクションを表します。

<section>は一般的なセクションを定義するタグであるため、 要素内容を記事として配信する意味合いが強い場合には、<article>を使用することが推奨されています。 また、 補足情報の場合には<aside>、 ナビゲーションの場合には<nav>を使用します。 他にも、 ヘッダに該当する場合には<header>、 フッタの場合には<footer>、 などのタグを使用するほうが、ウェブページの文書構造がより明確になるでしょう。

セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができるはずです。 見出しを付けることができない場合には、その部分を<section>~</section>で囲むのは適切ではないかもしれません。 もし、<section>タグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみると、 セクションとしてふさわしいかどうか判断しやすくなるでしょう。

引用元:<section>-HTML5タグリファレンス

・・・意味がわかりませんね。

<article></article>は見出しがなくても成り立つが、
<section></section>には見出しがないと成り立たないと考えておけばいいでしょう。

その意味からも先生は、実務での使いどころとして、
メインコンテンツブロック全体<article></article>タグで囲い、
メインコンテンツ内の見出しのある各セクション<section></section>タグで囲う、といった区別をしています。

lesson06_section

参考画像でいうと、赤い枠で囲ってある、ページタイトルと本文部分が表示されたブロックですね。多くのページではこのセクションを繰り返して1ページを構成しています。

例えば企業サイトの会社概要ページなどでは、1ページの中で・・・

  • 企業情報
  • 代表挨拶
  • 沿革

・・・などを記述していることがほとんどだと思います。

<section></section>タグの記述例

HTML

<article>
  <aside>
    <ul>
      <li><a href="a.html">Aページ</a></li>
      <li><a href="b.html">Bページ</a></li>
      <li><a href="c.html">Cページ</a></li>
    </ul>
  </aside>
  <div id="main">
    <section>
      <h3>セクション1</h3>
      <p>セクション1の本文部分をここに記述します。</p>
    </section>
    <section>
      <h3>セクション2</h3>
      <p>セクション2の本文部分をここに記述します。</p>
    </section>
    <section>
      <h3>セクション2</h3>
      <p>セクション2の本文部分をここに記述します。</p>
    </section>
 </div>
</article>

上の記述例では、<article></article>セクションの中に<aside></aside>セクションと<div></div>タグのセクションがあり、その中に<section></section>が3つある状態です。

まだまだ理解するには至っていないかもしれませんが、記述例のような使い方をすればひとまずは「間違ってはいない」と思います。

footer

最後に、たいていの場合、ページの最下部に配置される<footer></footer>タグ(セクション)の解説を行います。

<footer>タグは、直近のセクションのフッタであることを示す際に使用します。

フッタとは、そのセクションに関する情報のことで、一般的には、誰が書いたのか、関連文書へのリンク、著作権などの情報が含まれます。作者の連絡先情報は<address>で示しますが、これを<footer>~</footer>の中に入れても良いでしょう。

引用元:<footer>-HTML5タグリファレンス

ここにある通り、<footer></footer>タグは必ずサイトのフッター部分のみに使用しなければいけない、というわけではありません。これは<header></header>タグも同様で、セクションのヘッダー情報やフッター情報などをマークアップする時にも使用することができます。

lesson06_footer

参考画像でいうと、赤い枠で囲った、ページ最下部のブロックが<footer></footer>セクションです。

<footer></footer>の記述例

HTML

<footer>
  <address>
    <h2>ウェブデザイン演習</h2>
    <p>〒701-0197 岡山県岡山市北区庭瀬83番地</p>
    <p>TEL.086-293-1100 FAX.086-293-3993</p>
  </address>
  <ul>
    <li><a href="./index.html">トップページ</a></li>
〜中略〜
    <li><a href="./contact.html">お問い合わせ</a></li>
  </ul>
  <p class="copyright">©2007-2015 Chugoku Gakuen. All rights reserved.</p>
</footer>

<footer></footer>セクションにはサイトの管理者にコンタクトが取れるように電話番号などの情報を掲載します。また、一番最後にある<p class=”copyright”>○○○○○</p>は、著作権がどこにあるのかを明記しています。

参考サイトの<footer></footer>タグの構成

HTML

<footer>
 <div class="container">
 <p class="pagetop"><a href="#top"><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/footer/pagetop_off.jpg" width="111" height="32" alt="ページの先頭へ" /></a></p>
  <div class="com">
   <img class="hidari" src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/footer/appearance.jpg" width="90" height="60" alt="外観" />
   <p><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/footer/matsumoto-tekko.png" width="152" height="19" alt="株式会社松本鉄工" />
   <br />〒712-8031 岡山県倉敷市福田町浦田501番地10
   <br />TEL 086-427-2272 FAX 086-427-1119</p>
  <!-- /com --></div>
  <nav>
   <ul>
     <li><a href="http://matsumototekko.co.jp/news">お知らせ</a></li>
     <li><a href="http://matsumototekko.co.jp/works">制作実績</a></li>
     <li><a href="http://matsumototekko.co.jp/inq.html#privacy">個人情報保護方針</a></li>
     <li><a href="http://matsumototekko.co.jp/inq.html">お問い合わせ</a></li>
   </ul>
  </nav>
  <address><img src="http://matsumototekko.co.jp/wordpress/wp-content/themes/matsumototekko/img/footer/address.png" width="327" height="10" alt="Copyright © 2012  Allrights Reserved." /></address>
 <!-- /container --></div>
</footer>

まとめ

<header></header>セクションから<footer></footer>セクションまでの解説を行いました。

ウェブデザイン演習 第04回の文書型定義ブロックの項目で解説した通り、
HTML文書にはバージョンが存在し、
今回学んでいるバージョンはHTML5になります。

今回紹介したタグは全てHTML5から使われるようになったものですが、これら全てがそれぞれに役割を持ったHTMLタグで、役割にふさわしい使い方を行うことでクローラーに良質なアピールを行うことが可能になります。

次回からは今回紹介したHTMLタグを使ったコーディングを行っていきます。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE