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

ヘッダーの作り方
webページの構造を作る

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

headerfooter、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ページの構造を決めよう!

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>

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

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

このページではサンプルテキストCopyright©~の部分をフッターとして設定します。 書き方はヘッダーと同じで「フッターとして表示したい部分」を「footer」で囲みます。

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

<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>
スマホで副業するならアフィリエイトがオススメです。 なぜ?って、それは失敗してもリスクがなく    
html確認

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

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

段落を設定してみよう

文章を書く時は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の使い方は下のページを参考にして下さい。

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

divを使ってグループにまとめる事で、グループごとの編集ができるようになります。 例えば、今見てもらっている私のブログでいえば、サイドバーを右に、メインコンテンツを左に、みたいに位置の移動や グループごとに背景の色などを変える事ができるようになります。

デザインの編集以外にも意味はありますが、 今はとりあえず「デザインのためにdivを付ける」と覚えて下さい。

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

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の設定の仕方を紹介しますね

続きのページは↓↓

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

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

それと、このページは「html・css入門!初心者でも見るだけで自由自在に」のページの続きでもあります。 「イマイチわからない」「html・cssをもっと簡単に知りたい」 という時はhtml・css入門!初心者でも見るだけで自由自在にをご覧ください。