ページをまるごとを作れるようになろう
一般的なWEBサイト制作に必要な要素は、前回までである程度紹介しました。今回は、いよいよWEBページ全体をまるごとマークアップしてみましょう。
RERUN
全体構造の要素をマークアップしよう
まずは、Chapter01で紹介した、全体構造の要素を記述しましょう。
- 「Chapter22」フォルダ内の「index.html」をテキストエディタで開く
- 下記を参考に、全体構造の要素をマークアップ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>架空の会社 Dummy</title>
</head>
<body>
</body>
</html>- 上書き保存
コンテンツをマークアップしてみよう
全体構造の要素を記述したら、<body>要素内に、コンテンツを記述していきます。文章の意味や役割に合わせて、Chapter06 〜 Chapter17で紹介した要素や、前回紹介した <small>要素などを使い分けてマークアップしましょう。
- 「Chapter22」フォルダ内の「index.html」をテキストエディタで開く
- 下記を参考に、コンテンツをマークアップ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>架空の会社 Dummy</title>
</head>
<body>
<h1>
架空の会社 Dummy
<a href="index.html"><img src="images/logo-dummy.png" width="240" height="80" alt="架空の会社 Dummy"></a>
</h1>
<h2>メインメニュー</h2>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">企業情報</a>
<ul>
<li><a href="#">会社概要</a></li>
</ul>
</li>
<li><a href="#">よくある質問</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
<p><img src="images/main-visual.jpg" width="960" height="400" alt="私たちは、架空の製品でお客様を幸せにする架空の会社です。"></p>
<h2>Dummyのこだわり</h2>
<p>当社は、スピード、クオリティ、プライスの3つのバランスが大切だと考えています</p>
<h3>スピード</h3>
<p>とにかく、<em>迅速にお客様の要望に対応するため</em>、残業や休日出勤を惜しみません。</p>
<h3>クオリティ</h3>
<p><em>最高峰のクオリティを確保するため</em>、社員に一切の妥協を許しません。</p>
<h3>プライス</h3>
<p><em>リーズナブルな価格を実現するため</em>、社員の給料を徹底的にコストカットします。</p>
<h2>Dummyブログ</h2>
<h3>私の息子が当社ホームページの「お問い合わせフォーム」を作成しました。</h3>
<p>こんにちは、社長です。先日私の息子のボブが、当社ホームページに「お問い合わせフォーム」を作ってくれました。...<a href="#">もっと読む</a></p>
<h3>私の息子がホームページの勉強を始めました。</h3>
<p>こんにちは、社長です。私の息子のボブが「ホームページを作れるようになりたい」と言い出しました。...<a href="#">もっと読む</a></p>
<p><a href="#">Dummyブログをもっと見る</a></p>
<h2>関連リンク</h2>
<ul>
<li><a href="#">Dummy Cooking Studio</a></li>
<li><a href="#">Cafe Dummy</a></li>
</ul>
<address>
〒129-0815<br>
東京都架空区架空5-1-1 架空ビル5F
</address>
<p><small>© 2016 Dummy All Rights Reserved.</small></p>
</body>
</html>- 上書き保存し、ブラウザで確認
RERUN
コンテンツの階層やページの構造をマークアップしよう
コンテンツを配置できたら、Chapter19 〜 Chapter20で紹介した要素を使って、コンテンツの階層やページの構造を記していきましょう。
- 「Chapter22」フォルダ内の「index.html」をテキストエディタで開く
- 下記を参考に、コンテンツの階層やページの構造をマークアップ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>架空の会社 Dummy</title>
</head>
<body>
<header>
<h1>
架空の会社 Dummy
<a href="index.html"><img src="images/logo-dummy.png" width="240" height="80" alt="架空の会社 Dummy"></a>
</h1>
<nav>
<h2>メインメニュー</h2>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">企業情報</a>
<ul>
<li><a href="#">会社概要</a></li>
</ul>
</li>
<li><a href="#">よくある質問</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<p><img src="images/main-visual.jpg" width="960" height="400" alt="私たちは、架空の製品でお客様を幸せにする架空の会社です。"></p>
</header>
<main>
<section>
<h2>Dummyのこだわり</h2>
<p>当社は、スピード、クオリティ、プライスの3つのバランスが大切だと考えています</p>
<section>
<h3>スピード</h3>
<p>とにかく、<em>迅速にお客様の要望に対応するため</em>、残業や休日出勤を惜しみません。</p>
</section>
<section>
<h3>クオリティ</h3>
<p><em>最高峰のクオリティを確保するため</em>、社員に一切の妥協を許しません。</p>
</section>
<section>
<h3>プライス</h3>
<p><em>リーズナブルな価格を実現するため</em>、社員の給料を徹底的にコストカットします。</p>
</section>
</section>
<section>
<h2>Dummyブログ</h2>
<article>
<h3>私の息子が当社ホームページの「お問い合わせフォーム」を作成しました。</h3>
<p>こんにちは、社長です。先日私の息子のボブが、当社ホームページに「お問い合わせフォーム」を作ってくれました。...<a href="#">もっと読む</a></p>
</article>
<article>
<h3>私の息子がホームページの勉強を始めました。</h3>
<p>こんにちは、社長です。私の息子のボブが「ホームページを作れるようになりたい」と言い出しました。...<a href="#">もっと読む</a></p>
</article>
<p><a href="#">Dummyブログをもっと見る</a></p>
</section>
</main>
<aside>
<h2>関連リンク</h2>
<ul>
<li><a href="#">Dummy Cooking Studio</a></li>
<li><a href="#">Cafe Dummy</a></li>
</ul>
</aside>
<footer>
<address>
〒129-0815<br>
東京都架空区架空5-1-1 架空ビル5F
</address>
<p><small>© 2016 Dummy All Rights Reserved.</small></p>
</footer>
</body>
</html>- 上書き保存し、ブラウザで確認
RERUN
今回で基本的なHTMLの学習は終了になります。次回はHTML入門講座の総合練習問題として、課題にチャレンジしてみて下さい。