こんにちは、かつコーチです。
僕は現在、プログラミングを学習していて、その学習の中で理解したことを、
毎回テーマを絞ってリアルタイムで発信しています。
今回は、19回目、ここまでHTMLの基本的なタグなどは紹介できたと思います。
そこで、HTMLだけでWebサイトを作成してみます。
もちろん、CSSがないので、見た目的には物足りないですが、
ここではHTMLを理解しているかをアウトプットします。
基本構造を書く
まずは、基本構造から書きましょう。
<!DOCTYPE html>
<html>
<head>
<title>HTML Practice</title>
</head>
<body>
</body>
</html>それぞれみていきます。
<!DOCTYPE html>は、html5を宣言しています。
「html」タグはhtml文書であることを示しています。
「head」タグは文書の中身についてどんな仕様にするのかを書きます。
今は文書のタイトルが示されています。
そして、「body」タグに文書の中身を書いていきます。
「head」タグ内を完成させる
次に、「head」タグ内を完成させます。
Visual Studio Codeなどのエディタを使っていると、Emmetとという補完機能が効いて、
勝手に記入されると思いますが、自分で打って覚えていくようにした方が良いと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Practice</title>
</head>
<body>
</body>
</html>「meta」タグで、まずは”UTF-8″の指定。
次の「meta」タグは「content=”IE=edge”」と書いてありますが、
これはWindowsのinternetExplorerが最近のものに対応していないタグなどがある関係で、
IE=edge、つまり、「今のEdgeです！」と宣言しているのです。
3つ目の「meta」タグはスマートフォン対応の文書かどうかを示しています。
この3つはおまじないだと思って、そのまま書いて良いでしょう。
「body」タグの中身を完成させる
続いて、文書そのものになる、「body」タグの中身を書いていきましょう。
heading & Paragraph 要素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Practice</title>
</head>
<body>
<!-- Heading -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<!-- Paragraph -->
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate quisquam aliquam voluptates laborum pariatur reiciendis quidem incidunt sed blanditiis iusto in atque quam assumenda sit unde, omnis recusandae alias rem?</p>
<p>Lorem ipsum dolor sit amet consectetur <a href="#">adipisicing elit</a>. Earum quisquam eveniet maxime, porro repellendus animi similique dolore, sapiente ea voluptatem et? Modi quasi obcaecati dolorem tempora, aperiam fugiat qui tempore.</p>
</body>
</html>まずは、<!– –>の部分でコメントが書かれていますね。
ここからが「Heading」の文書だと記しています。
コメント機能は表には表示されないので、開発者がわかるように書きましょう。
ポイントは自分だけでなく、誰がみてもわかるように書くことです。
また、パスワードなど漏れては困る情報は載せないようにしましょう。
その次は、見出しになる「h1」から「h6」までのタグ、
段落になる「p」が書かれています。
「p」タグの中には、「a」タグでリンクつけているものがありますね。
これをクリックすることで、他のページへ飛べます。
タグによって上下の幅が違う理由
「h1」タグや「p」タグを見ていると、それぞれ上下の幅が違いますね。
MDNのサイトを見ても、この辺の説明が難しく書かれていて、わかりませんでした。
僕の文章読解力がないだけなのですが、僕なりにわかりやすく解説します。
タグにはそれぞれデフォルト値というのが与えられています。
プログラミングは、デフォルトってすぐ横文字使ってくるので、本当に参ります。。。。
要は初期値ですね。
「h1」タグには、「この幅、この高さ、このフォントサイズと決めている」ということです。
103個あるHTML全てにそれが付いてるので、CSSでデザインする時、
これを知っていないと大変になります。
僕はこれに気づけなくて、なんで思った位置に配置されないのかなぁと思ってました。
プログラミングには全てデフォルト値がついているので注意が必要です。
ここから先は長くなってしまうので、追加した部分だけ書いていきます。
List要素
次に、Listを追加します。
<!-- Lists -->
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>ulタグは順番のないリスト。
olタグは順番があるリスト。
ul、olの直下には必ず「li」タグが存在します。
Table要素
次には、Table要素を追加します。
<!-- Table -->
<table>
<thead>
<tr>
<th>名前</th>
<th>メールアドレス</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<tr>
<td>山田さん</td>
<td>yamada@sample.com</td>
<td>30</td>
</tr>
<tr>
<td>佐藤さん</td>
<td>sato@sample.com</td>
<td>20</td>
</tr>
</tbody>
</table>table要素は慣れない内は複雑に見えてしまいますね。
「th」タグと「td」タグを使う際は、「td」タグで囲うことを忘れないようにしなければいけません。
br要素とhr要素
<br>
<hr>
<br>改行である「br」タグ、罫線が引かれる「hr」タグを追加しました。
「hr」タグは罫線を引くために(デザインのために)使ってはいけません。
あくまでも下の要素と分けるために使います。
Form要素
続いて、Form要素ですが、ここは結構複雑です。
<!-- Form -->
<form action="#" method="POST">
<div>
<label for="name">名前</label>
<input type="text" name="name">
</div>
<br>
<div>
<label for="email">メールアドレス</label>
<input type="email" name="email">
</div>
<br>
<div>
<label for="gender">性別</label>
<select name="gender" id="gender">
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">その他</option>
</select>
</div>
<div>
<label for="message">お問い合わせ内容</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<br>
<button type="submit">送信</button>
</form>「input」タグや「select」タグなどがある場合は、何かを送信する動きがあるので、
必ず、「form」タグで囲われているはずです。
ここでは、名前、メールアドレス、性別、お問い合わせ内容、送信ボタンで書いてみました。
名前の部分はテキストにあたるので、type属性をtextにしていますが、
メールアドレスはメール形式にあたるので、type属性をemailにしています。
性別は、セレクトボックスを使っています。
お問い合わせ内容は、「textarea」で書いていて、「input」タグではないので、終了タグが必要になります。
フォームでは、それぞれタグの中の属性がとても大切になってきます。
ここでは、name属性、id属性、for属性がありますが、他にもたくさんあって最初は混乱すると思います。
使う際に、その都度調べると良いでしょう。
Blockquote要素
<!-- Blockquote -->
<blockquote cite="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">
HyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTMLと呼ばれることが多い。SGMLを元に開発された。World Wide Webにおいて、ウェブページを表現するために用いられる。
</blockquote>最後は、引用文で使う「blockquote」タグです。
ここでは、HTMLの引用文をWikipediaから抜粋しました。
「blockquote」タグの中には、citeでどこから引用されたか書く必要があります。
ブラウザで表示して確認
ここまでで一旦、Webサイトを確認してみます。
こんな感じになりました。
CSSがないと物足りなさを感じますが、まずはここからですね。
ブログページを作成してみる
続いて、ページを変えてブログページを作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Practice</title>
</head>
<body>
<header>
<h1></h1>
<nav>
</nav>
</header>
<section>
<article>
</article>
<article>
</article>
<article>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>先程と同じように「head」タグを書いて、「body」タグにはブロック要素を書いてあります。
文書の最も起点となるロゴやナビゲーションには、「header」タグ、「nav」タグ。
文書の中心になる部分には、「section」タグ、「article」タグ。
予備の備考欄的な存在に「aside」タグ。
そして一番重要度が低いものは、一番下に「footer」タグをそれぞれ使っています。
ブロック要素の中身を完成させる
外枠ができたら、中身を書いていきます。
「header」タグの中からいきましょう。
<header>
<h1></h1>
<nav>
<ul>
<li>
<a href="#">ホーム</a>
</li>
<li>
<a href="#">ブログ</a>
</li>
<li>
<a href="#">お問い合わせ</a>
</li>
</ul>
</nav>
</header>「header」タグの中には、ロゴやタイトルとなる「h1」タグと、ナビゲーションの「nav」タグ。
ナビゲーションは複数のページになることが多いので、リスト表示しています。
当然、リンクで他のページへ飛ぶので、「a」タグを使っています。
続いて、中心となる「section」タグの中です。
<section>
<h2>記事一覧</h2>
<article>
<h3>記事1</h3>
<small>2019年7月1日</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam adipisci sapiente alias veritatis quas, at sequi aperiam vero, maxime voluptatem repudiandae corrupti cum ex sint eaque, qui dolore. Quaerat!</p>
<a href="#">詳しくみる</a>
</article>
<article>
<h3>記事2</h3>
<small>2019年7月1日</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam adipisci sapiente alias veritatis quas, at sequi aperiam vero, maxime voluptatem repudiandae corrupti cum ex sint eaque, qui dolore. Quaerat!</p>
<a href="#">詳しくみる</a>
</article>
<article>
<h3>記事3</h3>
<small>2019年7月1日</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam adipisci sapiente alias veritatis quas, at sequi aperiam vero, maxime voluptatem repudiandae corrupti cum ex sint eaque, qui dolore. Quaerat!</p>
<a href="#">詳しくみる</a>
</article>
</section>
<aside>
<h3>カテゴリー</h3>
<ul>
<li>
<a href="#">カテゴリー1</a>
</li>
<li>
<a href="#">カテゴリー2</a>
</li>
<li>
<a href="#">カテゴリー3</a>
</li>
</ul>
</aside>「section」タグの中には、各記事として「article」タグで括っています。
「article」タグは、それ1つで独立したものになるので、各記事ごとに必要になります。
「article」タグの中には、
- タイトルとして「h3」タグ
- 投稿した日をして「small」タグ
- 記事の内容として「p」タグ
- もっと詳しい記事を見るためのリンクとして「a」タグ
「aside」タグはカテゴリー一覧表やアーカイブ、カレンダーや広告といった、備考欄的存在で使用します。
ここでは、カテゴリー一覧を表示するためのリストを書いています。
最後に、「footer」タグの中です。
<footer>
<p>Copyright 2019 Katsuhiro Kakoi</p>
</footer>ここは、主にサイトマップやプライバシーポリシーのリンク、
コピーライトといって著作権を書いたりするところで、
記事の中でも重要だけど特に目立たせるところでもないものを。。。
なんとも曖昧な表現ですが。。。
ここでは、コピーライトを書いています。
ブラウザで表示して確認
ここでブラウザで表示して確認してみましょう。
ここでは、コードが複雑だったので、コードもまとめて表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Practice</title>
</head>
<body>
<header>
<h1></h1>
<nav>
<ul>
<li>
<a href="#">ホーム</a>
</li>
<li>
<a href="#">ブログ</a>
</li>
<li>
<a href="#">お問い合わせ</a>
</li>
</ul>
</nav>
</header>
<section>
<h2>記事一覧</h2>
<article>
<h3>記事1</h3>
<small>2019年7月1日</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam adipisci sapiente alias veritatis quas, at sequi aperiam vero, maxime voluptatem repudiandae corrupti cum ex sint eaque, qui dolore. Quaerat!</p>
<a href="#">詳しくみる</a>
</article>
<article>
<h3>記事2</h3>
<small>2019年7月1日</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam adipisci sapiente alias veritatis quas, at sequi aperiam vero, maxime voluptatem repudiandae corrupti cum ex sint eaque, qui dolore. Quaerat!</p>
<a href="#">詳しくみる</a>
</article>
<article>
<h3>記事3</h3>
<small>2019年7月1日</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique magnam adipisci sapiente alias veritatis quas, at sequi aperiam vero, maxime voluptatem repudiandae corrupti cum ex sint eaque, qui dolore. Quaerat!</p>
<a href="#">詳しくみる</a>
</article>
</section>
<aside>
<h3>カテゴリー</h3>
<ul>
<li>
<a href="#">カテゴリー1</a>
</li>
<li>
<a href="#">カテゴリー2</a>
</li>
<li>
<a href="#">カテゴリー3</a>
</li>
</ul>
</aside>
<footer>
<p>Copyright 2019 Katsuhiro Kakoi</p>
</footer>
</body>
</html>続いて、ブラウザ表示。
どうでしょうか？
CSSがないもののちゃんとしたページになっています。
まとめ
以上、今回はこれまで学んだHTMLでWebサイトを書いてみました。
CSSを学んだ後で、全体を通したコーディングすると、達成感を感じられると思います。
最初は正しいHTMLを書けないと思いますし、なにも100%きっちりなんてなかなかできません。
たくさんWebサイトを作っていく中で、綺麗なコーディングができるようになるものです。
質は大切ですが、今は量の方が大切だと感じます。
プログラミング学習において参考になれば幸いです。
学習の参考になるサイト
今やプログラミングの学習はネットで学ぶことができます。
僕もここから始めています。
ネット上にはたくさんの学習サイトがありますが、おすすめとしては、
この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です！
無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、
有料プランへ変更すれば良いと思います。
有料プランはどちらも月額980円（税込）です。
まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、
こちらからやってみることをおすすめします。
初心者へおすすめの入門書籍（※2020年5月13日追記）
ある程度、動画で学んだら、もっとしっかり学びたくなるもの。
そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。
僕のおすすめの書籍は、以下の2冊めちゃくちゃわかりやすいです。
それぞれご紹介します。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
まずは、今や鉄板のプログラミングの1冊目の本です。
知識ゼロから体系的に学べる本で、最近のWebサイトの作り方も学べて、
最後には1つのサイトを構築するまで網羅しています。
僕は後になって購入しました。
学習していて迷っている時、書籍でも勉強してみるかと思い手に取ると、
「もっと早く手にしておけば良かった。」そう思わせてくれた本です。
難しい内容がなく、3日くらいで一気に読んでしまいました。
勿論、コードを打ちながらですが、楽しくてすぐに終わりました（笑）。
その後も3周くらいして、一通り基礎を学べた本です。
プログラミング学習者で初心者の方には絶対におすすめします！
世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書
2冊目のこちらは、もう少し詳細まで書かれてあり、ステップアップされたい方に向いています。
とは言っても、初心者向けですので、無理なく読めます。
知識なくとも十分に学べますが、やはり楽しいという感覚が大切だと思うので、
動画などで勉強した後に、もっと詳しく勉強する際には、この本がおすすめです。
こちらも最後には1つのサイトを作成するまでを学べます。
