第2回 HTMLの構造

webページのほとんどはHTMLによって作られている。

まずは枠組みを知ってほしい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにタイトルを書く</title>
</head>
<body>
ここに本文
</body>
</html>

「!DOCTYPE html」というのはHTML5を使うための宣言である。以前のHTML4.01の場合は「!DOCTYPE HTML PUBLI “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd”」という宣言をしなければならなかった。

「html lang=”ja”」は日本語であるという宣言だ。

「head」で囲まれている部分は、このページの情報を表す部分である。ユーザーからは見られることはない部分だが、結構めんどくさい設定をしなければならない。が、今は特に考えなくてもいいだろう。最低限「meta charset=”UTF-8″」と「title」を入れてもらえればいい。

meta charset=”UTF-8″は、文字コードの設定である。Shift_JISなども使われることがあるが、多くの場合はUTF-8にしたほうが無難だろう。

titleはこのページのタイトルである。ここでいうと「javascriptでwebアプリ作成を開設」という部分だ。好きに書いてくれてかまわない。

「body」は、ユーザーから見られる部分である。主にこの部分をいじくってサイトを制作していく。

覚えてほしいタグ

<></>のことをタグという。ここでは少なくとも覚えてほしいというタグを紹介する。

<h1></h1>~<h6></h6> 見出し
<div></div> 囲まれた部分を一つの塊とみなす
<p></p> 段落
<ul><li></li></ul> リスト

これくらいでいいだろう。あまり多すぎると覚える気もうせてしまう。

特に多く使うのがdivである。一つ一つ使い方を見ていこう。

h1~h6

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>h1~h6</title>
</head>
<body>
<h1>javascriptでwebアプリ制作を解説</h1>
<h2>javascriptでwebアプリ制作を解説</h2>
<h3>javascriptでwebアプリ制作を解説</h3>
<h4>javascriptでwebアプリ制作を解説</h4>
<h5>javascriptでwebアプリ制作を解説</h5>
<h6>javascriptでwebアプリ制作を解説</h6>
</body>
</html>

とりあえずメモ帳を開いてこれを入力してほしい、もちろんコピペでもかまわない。そしたら保存をしてもらうのだが、その時の拡張子を.htmlにしてほしい。(普通に保存すると拡張子は.txtになってしまう。)

作成したhtmlファイルを開くと、webページっぽいものが出てくるはずだ。これで1hとh6の大きさを見てほしい。見たままの通りにh1のほうが大見出し、h6に行くほど小見出しというように使うことができる。段組みをする上では重要な要素だ。

div

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにタイトルを書く</title>
</head>
<body>
<div>
ここに本文
</div>
</body>
</html>

特にdivを入れても変化はないだろう。しかし、divは一番多く使うであろう要素だ。例えばcssをある部分だけに反映させたいときに、divで囲めば簡単に実現できる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにタイトルを書く</title>
</head>
<body>
<div style="color:#0ff">
ここに本文
</div>
</body>
</html>

例えばこのようにdivで囲まれた部分だけ色を付けることができる。

p

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにタイトルを書く</title>
</head>
<body>
<p>ここに本文</p>
</body>
</html>

これもdivと違いはほとんどないが、次のような使い方をする。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにタイトルを書く</title>
</head>
<body>
<div>
<p>今日はいい天気ですね。このような日は、外でピクニックをしたいものです。</p>
<p>もしよければ、ご一緒しませんか?</p>
<p>私はサンドイッチを作っていくつもりです。……お好きでしたよね?<p>
<p>お返事お待ちしております。</p>
</div>
</body>
</html>

というように改行の役目をしてくれます。pタグを抜いて、ソースコード内で改行をしたとしても、htmlファイルで開くと改行されていません。

ul,li

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにタイトルを書く</title>
</head>
<body>
<h2>連絡事項</h2>
<ul>
<li>水筒を持ってくること</li>
<li>ハンカチとティッシュを持ってくること</li>
<li>おやつは500円以内</li>
<li>バス酔いのある人は朝のうちに酔い止めを飲んでくること</li>
</ul>
</body>
</html>

このようにulのなかにliを記述する。liで表されて部分の最初に点が次いで、リストを表現することができる。これも結構使うので頭の中に入れてほしい。

まとめ

これだけでも、HTMLでできるのはこれくらいである。しかし、ブログなどを見てみるとアニメーションだったり、綺麗な配色がされていたりと、見栄えがかなり良いものが多いだろう。これらはcssによってあらわされている。

だから、ウェブ制作にはHTMLとcssが欠かせないといわれているのだ。どちらか一つだけでは、ウェブページと呼ぶにはあまりにも情けないものが出来上がってしまう。

最低限上記の4つを覚えてもらえると、このサイトでは十分である。要所要所に新しいタグが出てくることもあるだろうが、そのつど説明をさせてもらう。

プログラミングがすぐにできる人というのは、自分で改造したり、コードを記述したりするのは好きな人である。暇があったら、自分でサイトを作成してみることをおすすめする。