HTML入門講座｜ウェブサイトの構成について学ぼう | ページ 3

<header>タグでホームページの上部を作ってみよう

うさタブ

それでは実際、タグを使ってホームページの上部を作ってみるッピ！

うさタブ

<body></body>の間に

<header>
<nav>
<a href="http://janken.chu.jp">トップページ</a>
</nav>
</header>

と入力するッピよ～

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="JavaScript,HTML,CSS,プログラミング学習">
<meta name="description" content="キャラの会話で楽しく学べるプログラミング学習サイト">
<title>遊んで学んでジャンケンポン！</title>
</head>
<body>

<header>
<nav><a href="http://janken.chu.jp">トップページ</a></nav>
</header>

</body>
</html>

ユウキ

おっ、リンクが貼れた！

<header>タグの解説

うさタブ

<header>タグは、ホームページの上部を作るために

2010年以降導入されたタグッピ！

ここにはサイトの【ナビ】となるリンクや、サイトの顔になるイメージ画像を置くッピヨ～

<nav>タグの解説

うさタブ

ナビゲーションを作るためにオススメされているタグ・・・

それが<nav>タグッピ！

ナビとは、サイトの大まかな案内図のことッピヨ～！

<main>タグでホームページの中央を作ってみよう

うさタブ

次は、ホームページの中央、目玉となるメインコンテンツを作ってみるッピ！

うさタブ

<body></body>の中に

<main>
<article>
<h1>ウェブサイトのデザインの基本</1></article>
<section>
<p>
ホームページやウェブサイトは、主に３つのブロックで成り立っています。
上部のヘッダー、中部のメインコンテンツ、下部のフッターです。
</p>
</section>
</main>

と入力するッピよ～

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="JavaScript,HTML,CSS,プログラミング学習">
<meta name="description" content="キャラの会話で楽しく学べるプログラミング学習サイト">
<title>遊んで学んでジャンケンポン！</title>
</head>
<body>

<header>
<nav><a href="http://janken.chu.jp">トップページ</a></nav>
</header>

<main>
<article>
<h1>ウェブサイトのデザインの基本</1></article>
<section>
<p>
ホームページやウェブサイトは、主に３つのブロックで成り立っています。
上部のヘッダー、中部のメインコンテンツ、下部のフッターです。
</p>
</section>
</main>

</body>
</html>

ユウキ

お、文字が沢山でた！

<main>タグの解説

うさタブ

<main>タグは、ホームページの中央を作るために

2010年以降導入されたタグッピ！

ここにはサイトのメインコンテンツを置くッピネ！

<article>/<section>タグの解説

うさタブ

HTML5で新しくでた、<article>と<section>タグ・・・

この中にコンテンツの画像や説明を付け足していくッピ！

ユウキ

<main>タグと何が違うんだ？

どう使い分ければいいのコレ

うさタブ

使い方としては

<article>と<section>を<main>タグで囲っていくイメージッピな～

ユウキ

なるほどなー

<h1>/<p>タグの解説

うさタブ

中に使ったタグの解説ッピネ！

<h1> …… 見出しを作るタグ

<p> …….. 段落を作るタグ

ッピ！

<ul>/<li>タグの解説

うさタブ

中に使ったタグの解説ッピネ！

<ul> …… リストを作るタグ

<li> …….. リストの項目を作るタグ

ッピ！

<footer>タグでホームページの下部を作ってみよう

うさタブ

そして最後、

ホームページの後ろを飾る、フッターを作成するッピ！

うさタブ

<body></body>の中に

<footer>
<address>Copyright © 2020 遊んで学んでジャンケンポン！ All Rights Reserved.</address>
</footer>

と入力するッピよ～

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="JavaScript,HTML,CSS,プログラミング学習">
<meta name="description" content="キャラの会話で楽しく学べるプログラミング学習サイト">
<title>遊んで学んでジャンケンポン！</title>
</head>
<body>

<header>
<nav><a href="http://janken.chu.jp">トップページ</a></nav>
</header>

<main>
<article>
<h1>ウェブサイトのデザインの基本</1></article>
<section>
<p>
ホームページやウェブサイトは、主に３つのブロックで成り立っています。
上部のヘッダー、中部のメインコンテンツ、下部のフッターです。
</p>
</section>
</main>

<footer>
<address>Copyright © 2020 遊んで学んでジャンケンポン！ All Rights Reserved.</address>
</footer>

</body>
</html>

ユウキ

おお、だいぶ印象が変わった！

<footer>タグの解説

うさタブ

<footer>タグは、ホームページの下部を作るために

2010年以降導入されたタグッピ！

ここにはサイトの著作権表示やロゴマーク、サイトマップ等を置くッピネ～！

<address>タグの解説

うさタブ

<address>タグは【著作権表示】や【メールアドレス】によく使われてるタグッピネ～

うさタブ

この先の見た目を整えるデザインについては、CSSの知識が必要になるッピ！

もっとオシャレを追求して、ライバルと差をつけたいときは、CSSのページでさらなる学習ステップを踏むッピよ～！

全体のコードの確認

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="JavaScript,HTML,CSS,プログラミング学習">
<meta name="description" content="キャラの会話で楽しく学べるプログラミング学習サイト">
<title>遊んで学んでジャンケンポン！</title>
</head>
<body>

<header>
<nav><a href="http://janken.chu.jp">トップページ</a></nav>
</header>

<main>
<article>
<h1>ウェブサイトのデザインの基本</1></article>
<section>
<p>
ホームページやウェブサイトは、主に３つのブロックで成り立っています。
上部のヘッダー、中部のメインコンテンツ、下部のフッターです。
</p>
</section>
</main>

<footer>
<address>Copyright © 2020 遊んで学んでジャンケンポン！ All Rights Reserved.</address>
</footer>

</body>
</html>

学習のまとめ