(cache) WEBページ全体の構造を作ってみよう！【html入門】

さて、前回はWEBページに表示するテキストを入力しましたね。ここからは、webページ全体の枠組みを作っていく「構造化」について紹介していきます。

headerやfooter、divなどのhtmlタグを使って「このテキストは何のためのものなのか」ということを一緒に設定していきましょう！またhtml入門という事で、「なぜこの場所にタグを使うのか」なども一緒に解説していきますね。

このページは「htmlファイルの実践的な作り方を覚えよう！」の続きです。上のページで作ってもらったテキスト(htmlドキュメント)を使って「webページの構造化」について紹介していきます。まだテキスト（htmlドキュメント）を作っていない方は、下からコピペして下さい。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門！初心者でも見るだけで自由自在に</title>
</head>
<body>

安月給さよなら！本当に稼げるか実験記   <!--ヘッダー用テキスト-->
 
ホーム             　  <!--ここからメニュー用テキスト-->
遊び
仕事
パソコン
アフィリエイト　　　　  <!--ここまでがメニュー用テキスト-->
 
「2016年07月」一覧   　<!--大見出し用のテキスト-->
 
狙ったキーワードで上位表示！アクセスが増えるキーワード選びのコツ　     <!--ここから本文用テキスト-->
スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
この記事ではスマホ
 
稼げるスマホ広告をパソコンでチェック！便利なツールご紹介
アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか？
今はパソコンより
 
アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは
良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、始める前に注意しなければならない落と
 
スマホで副業するならアフィリエイト！稼ぐための新戦略
スマホで副業するならアフィリエイトがオススメです。 なぜ？って、それは失敗してもリスクがなく　　　 <!--ここまでが本文用テキスト-->
 
 
Copyright© 安月給さよなら！本当に稼げるのか実験記 All Rights Reserved.        <!--フッター用テキストです。長くなるので省略させてもらいました-->
 
</body>
</html>

目次

webページの構造を決めよう！

webページのタイトルをヘッダー（header）に、著作権情報などをフッター（footer）に表示させましょう！そのためには「この部分はヘッダーだよ」「この部分はフッターだよ」という事を示すタグを使います。

何のためにヘッダーやフッターを書くかというと、検索エンジンにwebページの内容（構造）を正しく伝えるためです。（検索結果で上位を取るため）この後に紹介するnav、section、article、その他、なども「このテキストがどういう意味か」「どこの部分か」という事を検索エンジンに正しく伝えるために書きます。

例えば「ここはタイトル」「ここはサイトのメニュー」「ここは補足」「ここは本文」などなど。

そのwebページ内の意味が伝わらないと「このページは何のページなの？」って検索エンジンが思っちゃいます。そうなると検索順位は上がりづらいですよね。なので基本的には「検索結果で上位をとるために書く」と考えて下さいね。

ちなみにヘッダーやフッターなど（その他も）は書かなくても、webページは問題なく表示されます。ですが見た目に問題なくても、webページの内容（構造）は正しく伝わっていません。

作るからには、検索結果で上位になりたいですよね。なのでしっかりと構造化するようにしましょうね。！

ではヘッダーとフッターの書き方から紹介していきますね。

ヘッダーとフッターを書こう！

まずはヘッダーの書き方です。ヘッダーには、サイトのタイトルや導入文、イメージ画像など「ページをアピールする内容」を表示させます。

<header>
ヘッダーの内容
</header>

上のように「ヘッダーとして表示させたい内容」の前後を「header」で囲みます。

では、ヘッダーとして表示させたい部分をヘッダーで囲んでみましょう！（サンプルのテキストでいうと「安月給さよなら！本当に稼げるか実験記」の部分）

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門！初心者でも見るだけで自由自在に</title>
</head>
<body>
 
<header>
安月給さよなら！本当に稼げるか実験記   <!--ヘッダー用テキスト-->
</header>
 
ホーム             　  <!--ここからメニュー用テキスト-->
遊び

<!--以下省略-->
 
</body>
</html>

次はフッターの書き方です。

フッターには、お問合せ先、関連するリンク、著作権情報など「ページに関係する補足的な情報」を書きます。

ではフッターを書いてみましょう！

<footer>
フッターの内容
</footer>

スマホで副業するならアフィリエイト！稼ぐための新戦略
スマホで副業するならアフィリエイトがオススメです。 なぜ？って、それは失敗してもリスクがなく　　　 <!--ここまでが本文用テキスト-->
 
<footer>
Copyright© 安月給さよなら！本当に稼げるのか実験記 All Rights Reserved.        <!--フッター用テキストです。長くなるので省略させてもらいました-->
</footer>

</body>
</html>

要素名	内容
header	タイトル、サイトの導入文、ロゴ画像など「ページをアピールする内容」を書く場所
footer	ページに関連するリンク、お問合せ先、著作情報など「ページ全体に関係する補足情報を書く場所」

hタグで見出しを設定しよう

文章の内容を伝えるために見出しを設定しましょう！内容によって大見出し、中見出し、小見出しというふうにh1~h6を状況によって使い分けます。

<h1>見出しの書き方</h1>
<p>文章</p>
        <h2>見出しについて</h2>
        <p>文章</p>
             <h3>見出しの注意点</h3>
             <p>文章</p>

見出しを設定するタグはh1、h2、h3、h4、h5、h6まであります。 h1が大見出しで、h2、h3・・・の順番でレベル（階層）が変わります。

正しい使い方: 「h1」⇒「h2」⇒「h3」⇒「h4」⇒「h4」

間違った使い方: 「h4」⇒「h1」⇒「h3」⇒「h3」

基本的には「h1からh6の順番で書く」と考えて下さい。

「h1」⇒「h2」⇒「h3」⇒「h4」⇒「h2」⇒「h3」

こういう書き方も見かける事があるかと思います。この場合マークアップの仕方によっては正しくなくなる事があります。詳しくは別ページで説明でしますので、（html・css入門！初心者でも見るだけで自由自在にの続きで）今は「h1からh6の順番で書いておけばok」と覚えて下さい。

そして、基本的にはh1は各ページに1個、h2~h6は複数使って大丈夫です。

※html5の場合h1は何個でも大丈夫です。
詳しくは別ページ（html・css入門！初心者でも見るだけで自由自在にの続きで）で説明します。

とりあえず今は、h1は各ページ1個だけと考えて下さい。

マークアップの仕方によっても変わりますが、検索結果上位に入るためにはh1が一番重要になります。なのでh1に書く内容は気合を入れて考えましょうね！

hタグの書き方

h1：大見出し
h2：中見出し
h3～h6:小見出し

<h1>見出し</h1>

<h2>見出し</h2>

<h3>見出し</h3>

<h4>見出し</h4>

<h5>見出し</h5>

<h6>見出し</h6>

h1～h6の表示例: h1; h2; h3; h4; h5; h6

h1~h6で表示されるサイズが変わります。

ですが「この見出しは大きくしたいからh〇を使おう」っていうふうに使うのは止めときましょう！あくまでも、重要度によって使い分けて下さいね。

h〇のサイズを変えたい時はcssで調整します。

では上の画像を例にして実際にサンプルテキストに入力してみましょう！

<header>
安月給さよなら！本当に稼げるか実験記   <!--ヘッダー用テキスト-->
</header>

ホーム             <!--ここからメニュー用テキスト-->　  
遊び
仕事
パソコン
アフィリエイト　　　<!--ここまでがメニュー用テキスト-->
 
<!--大見出し用のテキストにh1を入力--> 
<h1>「2016年07月」一覧</h1>   　


<!--中見出し用のテキストにh2を入力-->
<h2>狙ったキーワードで上位表示！アクセスが増えるキーワード選びのコツ</h2>　     
スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。この記事ではスマホ

<!--中見出し用のテキストにh2を入力--> 
<h2>稼げるスマホ広告をパソコンでチェック！便利なツールご紹介</h2>
アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか？今はパソコンより

<!--中見出し用のテキストにh2を入力--> 
<h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、始める前に注意しなければならない落と
 
<!--中見出し用のテキストにh2を入力-->
<h2>スマホで副業するならアフィリエイト！稼ぐための新戦略</h2>
スマホで副業するならアフィリエイトがオススメです。 なぜ？って、それは失敗してもリスクがなく

入力が完了したらブラウザで確認してみましょう！見出しによってサイズがしっかり変わっていますよね。

次は段落を設定しましょう

段落を設定してみよう

文章を書く時はpタグを使って段落を設定します。関連する文をまとめましょう。

<p>文章</p>

p要素を設定したテキストには、段落が適用されます。

<p>
テキスト1。
テキスト2
</p>

表示例1: テキスト1。テキスト2

<p>一つ目の段落</p>
<p>二つ目の段落</p>

表示例2: 一つ目の段落; 二つ目の段落

では実際に入力してみましょう。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門！初心者でも見るだけで自由自在に</title>
</head>
<body>

<header>
<p>安月給さよなら！本当に稼げるか実験記</p>   <!--ヘッダー用テキスト-->
</header>
 
ホーム             　  <!--ここからメニュー用テキスト-->
遊び
仕事
パソコン
アフィリエイト　　　　  <!--ここまでがメニュー用テキスト-->
 
<h1>「2016年07月」一覧 </h1>
 
<h2>狙ったキーワードで上位表示！アクセスが増えるキーワード選びのコツ</h2>
<p>スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
この記事ではスマホ</p>
 
<h2>稼げるスマホ広告をパソコンでチェック！便利なツールご紹介</h2>
<p>アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか？
今はパソコンより</p>
 
<h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
<p>良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
始める前に注意しなければならない落と</p>
 
<h2>スマホで副業するならアフィリエイト！稼ぐための新戦略</h2>
<p>スマホで副業するならアフィリエイトがオススメです。 なぜ？って、
それは失敗してもリスクがなく</p>　
 
<footer> 
<p>Copyright© 安月給さよなら！本当に稼げるのか実験記 All Rights Reserved.</p>        <!--フッター用テキストです。長くなるので省略させてもらいました-->
</footer>
 
</body>
</html>

箇条書きを使ってメニューを作ろう！

次はwebページの左側に「ナビゲーションメニュー」を作ってみましょう！

ナビゲーションメニューとは、他のページへ移動するためのリンクが書いてある場所です。

メニューを作る時は箇条書き（ulタグ）を使います。 ulを使うとメニューとして配置するテキストを縦に並べて表示することができます。（cssで横に並べる事もできます）

箇条書き（ul）の使い方などについては下のページを参考にして下さい。

箇条書きを使ってグローバルナビゲーションを作ろう！（現在準備中）

では入力してみましょう

サンプルテキスト記述例
<header>
安月給さよなら！本当に稼げるか実験記   <!--ヘッダー用テキスト-->
</header>

<ul>
   <li>ホーム</li>
   <li>遊び</li>
   <li>仕事</li>
   <li>パソコン</li>
   <li>アフィリエイト</li>
</ul>

HTMLをグループ化しよう！

メニューの設定も完了しましたね。今作っているwebページには、ヘッダー、メニュー、メインコンテンツ、フッターの4つの領域を表示します。そのために、それぞれのhtml要素をまとめていきます。

まとめる事でcssでデザインの編集がしやすくなります。それと検索エンジンにその部分の意味を伝える役割もあります。

※html入門ということで、ここではdivを使った分け方を紹介します。

divを使ってまとめよう！

div要素を使うと、divで囲った部分を一つのグループとして分ける事ができます。そしてidという属性を使うと、分けたグループに名前を付けて管理できるようになります。

<div id="example"></div>
<!--「example」の部分に任意の名前を付けられる-->

idで指定した名前は、cssでデザインを編集する時に識別名として使う事ができます。（個別指定できるという事）なのでそれぞれわかりやすい名前を付けておきましょうね！（idについては後ほど、紹介します）

ではまとめてみましょう！

divの使い方は下のページを参考にして下さい。

divとブロック要素について覚えよう！（現在準備中！）

ヘッダーとフッターは「header、footer」として、さっきまとめましたね。メニューとメインコンテンツはまだまとめてません。なのでdivを使ってまとめます。

では下を参考にしてグループ化してみましょう！


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門！初心者でも見るだけで自由自在に</title>
</head>

<body>

<div id="page">

<header>
安月給さよなら！本当に稼げるか実験記   
</header>


<div id="menu">>
<ul> 
   <li>ホーム</li>             
   <li>遊び</li>
   <li>仕事</li>
   <li>パソコン</li>
   <li>アフィリエイト</li>　　　
 </ul>
</div>

<div id="main_contents">
<h1>「2016年07月」一覧</h1>   　
<h2>狙ったキーワードで上位表示！アクセスが増えるキーワード選びのコツ</h2>　     
<p>スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
この記事ではスマホ</p>
<h2>稼げるスマホ広告をパソコンでチェック！便利なツールご紹介</h2>
<p>アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか？
今はパソコンより</p>
<h2>アフィリエイトをする前に知っておきたい、
PVが少なくても売れる広告主の特徴とは</h2>
<p>良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
始める前に注意しなければならない落と<p/>
<h2>スマホで副業するならアフィリエイト！稼ぐための新戦略</h2>
<p>スマホで副業するならアフィリエイトがオススメです。 なぜ？って、
それは失敗してもリスクがなく</p>　　
</div>

<footer>
Copyrightc 安月給さよなら！本当に稼げるのか実験記 All Rights Reserved.  
</footer>

</div>

</body>
</html>

ページ全体の枠組みはこれで完了です！次はいよいよcssを使ってデザインを作っていきます。

ここからが一番面白い所ですよ。では、cssの設定の仕方を紹介しますね

続きのページは↓↓

cssの書き方をマスターしよう！(現在準備中！)

次のページでお待ちしております

以上「WEBページ全体の構造を作ってみよう！【html入門】」でしたー(^^♪

web制作の記事はこちらにも