カテゴリー

キーワード

 
> HTML5で書く~まずは骨組...

HTML5で書く~まずは骨組みから HTML5実践編


2015 年 2 月 17 日 投稿    view: 48533
タグ:
このエントリーをはてなブックマークに追加

HTML5で書く 実践編

こんにちは。
WEBマーケティング部の杉尾成行です。


先日まで、主にHTML5の構造というか、理論的なところばかりを説明してきました。
ですが、実際にコードを書いてみないことにはHTMLで制作できるようになりません。
今日からHTML5を使って、実際にページ(もしくはその一部)を作ってみましょう。

まずは手順

※実際の現場ではWebページにしたい内容があって、それをマークアップしていく作業から入り、最後に骨組みを足していきます。
また、それをする前に、ディレクターやプロジェクトマネージャーのような人がどういうサイトにするのか(クライアントから聞き取りをして)決めます。
ですが、今日はあくまで練習ですので、その辺は気になさらなくて結構です。


今回の手順

1. 「旅行したい国」というサイトを作りたい。

2. ヨーロッパ編、アジア編、アフリカ編、北米南米編、オセアニア編があるけれども、今日はひとまず、ヨーロッパ編を作りたい。

3. 紹介する国はイタリア、スペイン、フランスで、それぞれの国の紹介内容を箇条書きする。

4. 箇条書きの内容は

イタリア⇒サッカー、ファッション、バッジョ
スペイン⇒サッカー、闘牛、イニエスタ
フランス⇒サッカー、フランス料理、プラティニ

とする。

5. ヨーロッパ編の下に、アジア編の紹介内容を箇条書する


現実にこんな内容の薄いページはありませんが、そこはさておき。



1.まず、「旅行したい国」がサイト名なので、最重要項目として、h1タグに入れます。
更に、それを目立つ部分に置きたいので最上部にheaderを配置し、その中に入れます。

 

こんな感じです。

<header>
    <h1>旅行したい国</h1>
</header>


2.次に、今回はヨーロッパ編のページを作るわけですが、他にアジア編、アフリカ編、北米南米編、オセアニア編があります。
ということは、これらがメニュー(ナビゲーション)になるわけです。

こんな具合に記述します。
※メニューはul要素に入れることを推奨されていますので、それに従います。


<nav>
    <ul>
        <li>ヨーロッパ編</li>
        <li>アジア編</li>
        <li>アフリカ編</li>
        <li>北米、南米編</li>
        <li>オセアニア編</li>
    </ul>
</nav>

ヘッダー部分とナビゲーション部分が完成しました。
今回はそれをサイトの上部に配置しますので、nav要素をheader内に入れます。
※これは必ずそうしなければならないわけではありません。

合わせると、こうなります。


<header>
    <h1>旅行したい国</h1>
    <nav>
        <ul>
            <li>ヨーロッパ編</li>
            <li>アジア編</li>
            <li>アフリカ編</li>
            <li>北米、南米編</li>
            <li>オセアニア編</li>
        </ul>
    </nav>
</header>


3.続いて、ページの内容に入っていきます。
「ヨーロッパ編」というのが、ページの見出しですので、それをh2要素に入れます。
「旅行したい国」と比べて重要度が低いという判断からです。

(※h要素の記述方法についてはHTML5で変更されましたが、今回のような従来と同じ使い方も認められています)


  <h2>ヨーロッパ編</h2>

それから、紹介する各国を並べていきます。
それぞれの国名は「ヨーロッパ編」に比べて重要度が低いので、h3要素に入れます。


<h3>イタリア</h3>
<h3>スペイン</h3>
<h3>フランス</h3>


4.紹介内容の箇条書きは文章なので、一つの段落としてp要素に入れます。

更に、国名と合わせたそれぞれが独立した内容なのでsection要素で囲みます。


<section>
    <h3>イタリア</h3>
    <p class="test1">サッカー、ファッション、バッジョ</p>
</section>

  <section>
    <h3>スペイン</h3>
    <p class="test2">サッカー、闘牛、イニエスタ</p>
</section>

<section>
    <h3>フランス</h3>
    <p class="test3">サッカー、オシャレ、プラティニ</p>
</section>


5.ヨーロッパ編の下に、アジア編の紹介内容を箇条書きします。


<h2>アジア編はこちら</h2>
<p>1位はなんとあの国…</p>

 

 

ここまでで出来上がったものを並べます。

 

<header>
    <h1>旅行したい国</h1>
    <nav>
        <ul>
            <li>ヨーロッパ編</li>
            <li>アジア編</li>
            <li>アフリカ編</li>
            <li>北米、南米編</li>
            <li>オセアニア編</li>
        </ul>
    </nav>
</header>

<h2>ヨーロッパ編</h2>
<section>
    <h3>イタリア</h3>
    <p class="test1">サッカー、ファッション、バッジョ</p>
</section>


<section>
    <h3>スペイン</h3>
    <p class="test2">サッカー、闘牛、イニエスタ</p>
</section>


<section>
    <h3>フランス</h3>
    <p class="test3">サッカー、オシャレ、プラティニ</p>
</section>


<h2>アジア編はこちら</h2>
<p>1位はなんとあの国…</p>

なんとなく、ページの構成が見えてきました。
ここまで来たら、完成間近です。


このページの独立した記事をariticle要素で囲みます。
更に、このページのメインコンテンツをmain要素で囲みます。


それから、補足的な部分(メインではない)部分をaside要素で囲みます。


最後に、footerをつけ、DOCTYPE宣言とhtml、head(とtitle)、body要素で囲めばページの出来上がりです。


HTMLのでき上がりはこちらです。

 

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>旅行したい国</title>
</head>
<body>
    <header>
        <h1>旅行したい国</h1>
        <nav>
            <ul>
                <li>ヨーロッパ編</li>
                <li>アジア編</li>
                <li>アフリカ編</li>
                <li>北米、南米編</li>
                <li>オセアニア編</li>
            </ul>
        </nav>
    </header>

    <main role="main">
        <article>

            <h2>ヨーロッパ編</h2>

            <section>
                <h3>イタリア</h3>
                <p class="test1">サッカー、ファッション、バッジョ</p>
            </section>

            <section>
                <h3>スペイン</h3>
                <p class="test2">サッカー、闘牛、イニエスタ</p>
            </section>

            <section>
                <h3>フランス</h3>
                <p class="test3">サッカー、オシャレ、プラティニ</p>
            </section>
        </article>
    </main>

    <aside>
        <h2>アジア編はこちら</h2>         <p>1位はなんとあの国…</p>
    </aside>

    <footer>
        <small>Copyright 旅行したい国 All Rights Reserved.</small>
    </footer>
</body>
</html>

でき上がったサイトをブラウザで見ると、こうなります。

HTML5で作ったファイルをブラウザで確認したもの


サイトを保存して、ブラウザで確認する方法はコチラです。

HTMLを書いてHTMLファイルを作り、ブラウザで確認する方法


まとめ

実際にサイトを作るときは、作成手順を自分で考える、もしくはディレクターやプロジェクトマネージャーのような人がそれを指示します。
ですので、「今回の手順」で示した部分も「Webページの作成」に関わってくる部分ですが、今回は割愛させていただきました。


明日はこのHTMLを利用して、ページのアウトラインを形成する要素について説明させていただきます。


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事