• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / HTML初心者 / 6.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成

6.どの部分にどのタグを使えばいいのか確認しワイヤーフレームを元にHTMLファイルを作成

池田祐太郎 | 2013年10月12日 公開

ここからは実践です。ワイヤーフレームと呼ばれるラフを書いて、まずはウェブページをどのように構成するかを考え、そこに見合ったHTMLタグをどのように使えばいいのか書いていきます。
デザイン部分は端折りますが、実際にウェブサイトを制作する際のプロセスだと思っていただいてOKです。
完成形のHTMLタグとサンプルファイル有り。ページ末に掲載しています。

目次

  • 1 まずは構成を練る
    • 1.1 何を載せたいのか
  • 2 ワイヤーフレームを作る
    • 2.1 まずは大まかにページ全体の構造を書く
    • 2.2 細部を作っていく
    • 2.3 HTMLタグを割り振る
  • 3 適材適所にタグを使用する
    • 3.1 始まりの部分、ヘッダーエリア
      • 3.1.1 header
      • 3.1.2 h1
      • 3.1.3 ul>li>a
    • 3.2 ページの最重要部分、メインエリア
      • 3.2.1 div#main
      • 3.2.2 h2
  • 4 大見出し
      • 4.0.1 p
  • 5 大見出し
      • 5.0.1 h3, img, p
  • 6 大見出し
    • 6.1 中見出し
    • 6.2 中見出し
    • 6.3 メインエリアの横に位置する、サイドバー
      • 6.3.1 aside
      • 6.3.2 h4, p
      • 6.3.3 小見出し
      • 6.3.4 ul>li>a>img
      • 6.3.5 小見出し
    • 6.4 下の要素、footerエリア
      • 6.4.1 footer
      • 6.4.2 h5
        • 6.4.2.1 メニュー
      • 6.4.3 ul>li>a
        • 6.4.3.1 メニュー
        • 6.4.3.2 メニュー
        • 6.4.3.3 メニュー
        • 6.4.3.4 メニュー
  • 7 完成!
  • 8 大見出し
    • 8.1 中見出し
    • 8.2 中見出し
      • 8.2.1 小見出し
        • 8.2.1.1 メニュー
        • 8.2.1.2 メニュー
        • 8.2.1.3 メニュー

まずは構成を練る

ホームページを作ろう!と思いついても、「ではどこから作っていけばいいのだろう?」と思うのが普通です。ここでは、その基本となる「どのようにページを構成するか」を考えます。

何を載せたいのか

ここが一番の軸になります。ウェブページを作るにあたって、何を載せたいか?どんな情報を載せるか?
もっと言えば、このページを見る人がどんな情報を得てもらいたいか?を考えましょう。
例えば、パン屋さんが自分のお店をもっと広く知ってもらいたいとしたら、どんなパンが売られていて、それぞれのパンに対しての想いや情熱、製造工程などを載せ仕込みから店頭に並ぶまでを掲載等がホームページに掲載する情報として浮かびます。
他に、ウェブサービスを展開する会社がサービスをもっと使ってもらうためのサイトであれば、そのサービスの概要、そのサービスはどんなメリットがあるか、他社の同サービスと比べてどこが秀でいているか、よくある質問と答えなどなど、ユーザーにとって便利な情報を載せるべきでしょう。
何を載せたいのか?言い換えれば、どんな情報を得て欲しいか?という情報を掲載します。

ワイヤーフレームを作る

構成が出来上がったら、ワイヤーフレームと呼ばれるページの構成を視覚的にわかりやすくした構成図を作ります。手書きでも、Illustratorのようなドローソフト、エクセルやワードなど、各々使いやすいものでOKです。大事なのは、無理しないことです。

まずは大まかにページ全体の構造を書く

大まかに全体の構造を考えましょう。例えば以下のように。

wireframe_for_blog_01

最初にヘッダー部分、真ん中にメインのエリアが左に、サイドバーとなるエリアを右、一番下にはフッターのエリア。
とてもシンプルですね。大体のホームページにはヘッダーとメインエリアとフッターは入ることがほとんどなので、サイドバーが入るかどうか、くらいかもしれません。

細部を作っていく

先ほどの「何を載せたいのか」で考えた載せたい情報を元に中身を割り振っていきます。
例えば、最初にサイトのロゴが画面の上にきて、その下に他のページへのリンクするメニュー。次にメインとなる大枠があり、右にサイドバーとしてサブの情報。一番下にはサイト内リンクや、関連ページへのリンク集、プロフィール用のテキスト…などなど、「こんな感じのレイアウトにしたい」というのを思いのまま書いてみましょう。

wireframe_for_blog_02

HTMLタグを割り振る

細部が出来上がったら通常はデザインを行いますが、今回はHTMLの練習なので構成ができたらHTMLタグでつくり上げる下準備をしましょう。以下の画像のようにどの部分にどのタグを使うかを考えます。

wireframe_for_blog_03

「なぜここにこのタグを使うんだろう?」と思いますよね。それをここから説明していきます。

適材適所にタグを使用する

HTMLのページでも行なったように、タグにはそれぞれ意味があります。画像にはimg、見出しにはh、リンクはa…など、ここまで読んでくればおわかりですね。これをここで使います。構成は先ほどの例で進めていきます。
ここから先はbodyタグの中に書いていきます。bodyタグまでのhtmlやheadなどの基本となる箇所は以下参考に。わからない方は以前の記事へ:「4.HTMLファイルを作ってみよう」




     
     sample site


     


始まりの部分、ヘッダーエリア

wireframe_for_blog_detail1

まずはヘッダーから。ここで出てくるのは、

header
h1
ul
li
a

です。1つずつ見て行きましょう。

header

いきなり見覚えのないタグが出てきました。これはヘッダータグといって、ヘッダ要素やナビゲーションなどのグループに使います。今回はヘッダ要素全体を囲うので使用しています。

こうなりますね。
実際にここにいろいろと入っていくので、全体の箱的なものとして考えてもらえればです。html5から対応のタグなので、html5で書きたくないという方、xhtmlやhtml4.01で書いている場合はdiv id=”header”等で代用してください。

h1

見出しのhの最重要要素、h1です。ここには今回「SAMPLE SITE」というサイト名をいれます。下層ページの場合はサイト名にかぎらずそのページで一番重要な見出しをいれることが多いです。
見出しが入るのでHTMLはこんなかんじに。

SAMPLE SITE

h1が増えました。中身はサイト名です。

ul>li>a

ul, li, aと単独のタグはわかるけど、間の「>」は何を意味するんだ?そう思った方もいるかと思います。これは「ulの中にli、またその中にa」という意味になります。HTMLにするとこう。

ulは基本的にliとセットです。今回は下層ページにリンクするメニューとして見せたいので、liの中にaタグでテキストを囲ってあげればOKですね。テキストは「MENU1」「MENU2」…みたいな感じなのでHTMLはこんなかんじに。

SAMPLE SITE

  • MENU1
  • MENU2
  • MENU3
  • MENU4

なんか、それっぽくなってきました。header部分は以上です。

ページの最重要部分、メインエリア

wireframe_for_blog_detail2

ページのキモ、メインエリア。ここにこのページの一番伝えたい情報が入ってきます。ここで使用するタグです。

div#main
h2
p
h3
img

見ていきましょう。

div#main

divはわかりますね。#は今回初めてでてきました。これはid属性のことを#で例えています。(あとあとCSSで出てくるので、シャープはid、とおぼえておくとラクです)
id属性とは以下のようなものです。

ここはwrapという名前をつけたdivのエリアです。

idという名のごとく、自由に名前をつけることができます。どういうときに使うかと言うと、divというのがたくさん同じページにでてきたときに、他と区別をするために固有のid名をつけておけば、あとでCSSで「id名がwrapという名前がついているdivに対して、そのdivだけ背景を黒くして」といった指定が可能になります。
idと似たものでclassとありますが、この違いは使える回数の違いです。idが一度だけ、classは何回でも使ってもOKです。他にも違いはありますが、とりあえず今のところはこれでOK。

ということで、div#mainのHTMLはこうなります。

参考:11.HTMLファイルにclassとidをつける

h2

次は見出しのh2。さっきh1がでてきたのでお分かりかと思いますが、このページで2番めに重要な見出しということですね。
HTMLは以下です。

大見出し

問題ないですね。

p

pタグが出てきました。文章を入れるタグでしたね。これはh2の大見出しに対する説明文章という位置づけ。

大見出し

テキストテキストテキストテキストテキストテキスト

続いていきましょう。

h3, img, p

また見出しのh3, それに画像のimg, そしてまた文章のpです。問題ないですね。同じものが二回繰り返されていますので注意。HTMLはこうなります。

大見出し

テキストテキストテキストテキストテキストテキスト

中見出し

テキストテキストテキストテキストテキストテキスト

中見出し

テキストテキストテキストテキストテキストテキスト

imgには必ずつく属性srcがあります。中身はまだ決まってないのでダブルクオーテーション連続にしています。画像が決まった段階でいれれるようにですね。仮にapple.jpgという名前の画像ファイルを表示しようとなるとこんなかんじに。

りんごの画像

alt属性はなくても支障はないですが、SEO的に画像の説明文として入れておいたほうがいいので、セットにしておくと後がラク。
メインエリアはこんなかんじですね。

メインエリアの横に位置する、サイドバー

wireframe_for_blog_detail3

続いてサイドバー。バナーや下層ページへのリンク、新着情報表示として使ったりします。
使うタグは以下。

aside
h4
p
ul
li
a
img

aside

また見慣れないタグが出てきました。asideタグは、サイドバーに使うのに相応しいタグ。スマホ表示のときはフッターの上に移動したりさせたりします。

headerやdiv id=”main”と同じですね。見慣れないタグでも、使い方は全く一緒なんです。

h4, p

先ほどメインエリアで出てきたのと一緒ですね。

小見出し

テキストテキストテキストテキストテキスト

見出し+本文というシンプルな構造。

ul>li>a>img

入れ子要素きました。headerエリアにでてきたメニューとほぼ一緒ですね。テキストが画像に変わっただけです。バナーなので、imgが出てくるのは当然ですね。

小見出し

テキストテキストテキストテキストテキスト

※ちなみに上記の書き方で余白が空いているのは見やすいからそうしているだけであってタブキーで余白を作っています。これは改行しようが余白を開けようが表示には関係ありません。

下の要素、footerエリア

wireframe_for_blog_detail4

最後に締めくくりのフッターエリアです。

footer

これも新しいタグです。footerタグ。最初に似ているタグが出てきたのを覚えていますか?
一番最初に書いた、headerタグの対に位置するタグです。言葉の意味から推測できそうですが、フッター要素全体を囲うタグとして使用します。
ここでのタグです。

footer
ul
li
a

HTMLはこうですね。

h5

今回の中で一番弱い見出し、h5です。h系のタグは6までなのでこの下にあとひとつという具合です。
「メニュー」を見出しにしたいのでHTMLは

メニュー

こうなりますね。

ul>li>a

対に最後のタグです!これも今まで出てきたのと同じ、簡単ですね。
メニューという見出しの下に表すフッターメニュー用のリストです。そしてクリックすると別のページに飛ぶ…という風にしたいので、HTMLは以下。

メニュー
  • footer menu01
  • footer menu02
  • footer menu03
  • footer menu04

テキストリンクなので、全体をulで囲み、テキストリンクをliとaで囲ってあげればOK。
で、これが3セットあるので、単純に3つ複製してあげればOKですね。

メニュー
  • footer menu01
  • footer menu02
  • footer menu03
  • footer menu04
メニュー
  • footer menu01
  • footer menu02
  • footer menu03
  • footer menu04
メニュー
  • footer menu01
  • footer menu02
  • footer menu03
  • footer menu04

完成!

はい、これでHTMLのコーディングが出来ました!作ったファイルを「sample.html」等の名前で保存して、ダブルクリックしてブラウザで表示させてみましょう。見た目は簡素ですがhtmlタグが打てていると思います。
html, head, bodyタグも追加した完成形は以下。今回作ったサンプルファイルはこちら。ご自分のと見比べてみてください。ダウンロードは開いたあと、右クリックから「名前をつけて保存」。

いかがでしたか?意外と簡単、やっぱり難しい…色々あると思いますが、流れが掴めたのではないかと思います。次はCSSを学び装飾をしていきましょう。




     
     sample site


     

SAMPLE SITE

  • MENU1
  • MENU2
  • MENU3
  • MENU4

大見出し

テキストテキストテキストテキストテキストテキスト

中見出し

テキストテキストテキストテキストテキストテキスト

中見出し

テキストテキストテキストテキストテキストテキスト

小見出し

テキストテキストテキストテキストテキスト

メニュー
  • footer menu01
  • footer menu02
  • footer menu03
  • footer menu04
メニュー
  • footer menu01
  • footer menu02
  • footer menu03
  • footer menu04
メニュー
  • footer menu01
  • footer menu02
  • footer menu03
  • footer menu04
次の講座:7.装飾をするためにCSSを使う←目次に戻る
メールコンサルティング
WordPress保守管理サービス

Filed Under: HTML初心者 関連タグ:HTML

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
6.確認から制作まで即使えるCSSの機能(2/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. git pull してもエラーが出てファイルが反映されないときの対処法
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress サイトを多言語化するプラグイン5選(自動翻訳サービス除く)
  • ウェブサイトを自動的に多言語対応する各サービスを比較します
  • WooCommerce のバリエーションのある商品を追加して売上向上を図る
  • 目次生成プラグインの TOC+ が表示されなくなったときの対処法
  • ChatGPT の有料版「ChatGPT Plus」を使ってみた

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.