各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

HTML5の書き方(第2回)~新要素について~

  • publish_advertise
2013/03/19

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、HTML5の具体的な書き方のうち、head要素に含める各種情報の書き方を簡単にご紹介いたしました。

 

今回は、HTML5で新しく追加された要素のうち、階層構造や区画を示すことのできる要素の中から、いくつかを抜粋してご紹介いたします。

 

以下に記した38行のHTML5ソースには、body要素内に、header、footer、nav、section、asideの各要素が書かれています。

 

これらは、HTML5で新しく追加された要素の一部です。

それぞれ、HTMLに構造上の意味を付加したり、区画を明示したりする役割を果たします。

 

 


<!DOCTYPE html>
<html lang=”ja”>
<head>
   — (省略) —
</head>
<body>
   <header>
      <p>HTML5のサンプルをご紹介!</p>
      <h1>HTML5サンプル</h1>
   </header>
   <nav>
      <ul>
         <li><a href=”/”>HOME</a></li>
         <li><a href=”/sample/”>SAMPLE</a></li>
         <li><a href=”/about/”>ABOUT</a></li>
      </ul>
   </nav>
   <section>
      <h2>HTML5のサンプルいろいろ</h2>
      <p>サンプルをご紹介。</p>
     : : :
   </section>
   <section>
      <h2>HTML5+CSS3のサンプルいろいろ</h2>
      <p>CSSを加えたサンプルをご紹介。</p>
     : : :
   </section>
   <aside>
      <h2>ブログロール</h2>
      <p>最新のエントリはこちら</p>
     : : :
   </aside>
   <footer>
      <p>Copyright (C) 2013, HTML5 SAMPLE.</p>
   </footer>
</body>
</html>


 

上記ソースに含まれる各要素について、簡単にご紹介いたします。

 

◆header要素(ヘッダ)

ヘッダを示す要素です。上記のサンプルソースでは「ページのヘッダ」として利用していますが、「セクションのヘッダ」としても使えます。また、後述のnav要素を使ったナビゲーションをここに含んでも構いません。従来のHTMLで、例えばdiv要素を使って <div> ~ </div> のように記述していたのとは違い、明確にヘッダであることが示せます。

 

◆nav要素(ナビゲーション)

ナビゲーションであることを示す要素です。

上記ではメインメニューを構成するようなul要素を含んでいますが、他にも「パンくずリスト」や特定コーナー内のローカルなナビゲーションを含んでも良いでしょう。

 

◆section要素(区画)

「コンテンツの区切り」を示す要素です。ページ内に複数の話題が含まれている際に、同一の話題の範囲を示す際に活用します。この要素内には、必ずh1要素やh2要素などの
「見出し」を含むようにします。もし、適当な見出しが書けないようなら、それはsection要素を使うのには適していない区切りだということです。

 

その場合は、div要素やhr要素など、その他の要素を使いましょう。

なお、先のサンプルではh2要素で見出しを作っていますが、見出しの階層はsection要素内で振り直すことも可能ですから、h1要素を使っても構いません。

 

◆aside要素(脇)

ここに含まれている内容が「メインコンテンツではない」ことを示す要素です。

補足情報や広告など、本編から分離しても問題のない内容を記述する際に使います。

 

◆footer要素(フッタ)

フッタを示す要素です。上記のサンプルでは「ページのフッタ」として利用していますが、「セクションのフッタ」としても使えます。

 

従来のHTMLで、div要素を使って例えば<div> ~ </div> のように記述していたのとは違い、明確にフッタであることが示せます。

 

上記にご紹介した要素の中で、「必ず使わなければならない」要素は1つもありません。すべて必要に応じて使えば良いものです。

 

しかし、うまく活用すると、分かりやすいHTMLソースにできますから、ぜひ使ってみてください。

 

次回は、HTML5で作られた様々なデザインのテンプレートをご紹介いたします。

 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  続きを読む>>
続編
2013.03.14
HTML5の書き方(第1回)~head要素について~
2013.03.21
HTML5の書き方(第3回)~テンプレート紹介~

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る