目次へ

HTMLを書く(pythonと関係ないけど)

(HTMLが普通に書ける人は、この記事読み飛ばしちゃってかまいません)

文字列を自由に出力できるようになってくると、そこから派生した仕事がいろいろとできるようになります。今回からしばらくは、ビジュアル的に楽しい「HTML」をファイルに書き出すというスクリプトを追求していこうと思います。

HTMLってのは、名前くらいはたぶんみなさんご存じでしょう。いわゆる「ホームページ」の表示を記述するためのものですね。分からない人もご安心、ここではそのごく基本も併せて説明してみるつもりです。

最近のウェブサイトは、必ずしもHTMLだけ理解していればよいというものでもなくなって来ているのは確かです。Javascriptとかいうものも、Flashとかいうものも、複雑に絡み合って高機能なサイトを構築しています。それでもなお、一番大きな枠組みとなっているのは依然としてHTMLです。

簡単に言い切ってしまうと、HTMLってのは「こんな感じにキレイに表示してね」という指示が書き足されたテキストです。指示そのものもテキストとして書かれていますから、結局のところHTML文書ってのは完全にテキストファイルです。

テキストファイルである証拠に、例の「メモ帳」を使って作成できて、それをウェブブラウザでキレイに表示することができるんですよ。(あ、「メモ帳」じゃなくてもっといいエディタを使っているなら、それも使いましょう)

手っ取り早く、例

何はともあれ、ひとつサンプルをこしらえて表示を試してみましょう。

いつも作業に使っているディレクトリに、ひとつテキストファイルを作ります。ファイル名は何でもいいですが、firsthtml.txt とでもしましょうか。そして間髪をいれず、そのファイル名をさらに変更しましょう。firsthtml.html とします。拡張子まで書きかえてしまってください。

ファイルのアイコンが変化しましたか。今までの「テキストファイルですよ」って感じのアイコンが、狐のマークとか、eのマークとか、そんなのがついたアイコンに化けましたでしょうか。そしたら成功です。

このファイルを今から編集します。適当なテキストエディタで編集を開始して、下のようなテキストを打ち込みましょう。(分かる人へ:シフトJISエンコードで作成してください。)(分からない人へ:Windowsは指定しなければ大抵シフトJISエンコードでファイル作りますから、気にしなくていいです。)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>最初のページ</title>
</head>
<body>
<h1>できたよー</h1>
<h2>何かが</h2>
</body>
</html>

この<松葉カッコ>が、HTML的な「指示」にあたるものかな? </松葉カッコ>なんていう形のものもある… まあ、まずは丸写しにしちゃってください。

こいつを保存してからテキストエディタは終了(または最小化)し、ファイルを示すアイコンをダブルクリックしてみましょう。ウェブブラウザの中に、下のような表示が出てきましたか。

これで、HTMLを書いて、その表示を試すことに成功しました。基本はこんなもんです。

今からこのHTMLの中身を解説していきますが、いくつかは「とりあえず考えずに丸暗記・コピペでいいよ」という要素だし、いくつかはちゃんと覚えておくとよい要素です。一番心配されそうな <meta…. で始まるなんだか複雑な行は、通常、何も考えずにコピペしちゃっていい行ですのでご安心を。

よく使う要素の説明

じゃあ、HTMLを書くために最低限のマークアップ(指示)の書き方をざっと羅列してみましょう。

まずは、<なんちゃら>と、</なんちゃら>の関係について。これは(ほとんどの場合)対になっています。さっき挙げた例を見ると、<html>で始まったものが、最後に</html>で終わっていると気づきます。この<html></html>が囲んでいる中身が残りの全部です。説明する上で、今後「htmlの範囲」と呼びましょう。

で、htmlの範囲の中には、<head></head>の範囲と<body></body>の範囲があることも確認しましょう。headの範囲の中には<meta>と<title>の範囲、bodyの中には<h1>の範囲と<h2>の範囲があるのもわかりますね。(metaの範囲は「</meta>で閉じる印が見つかりませんが、まあ、こういうものもあります。何も囲む必要がない「指示」ってのもあるのです。)

何にせよ、範囲どうしが入れ子の状態になっている様子を確認してくださいね。範囲どうしが中途半端に互いに重なることはありません。たとえば下のようなことはできません。

<head>
<body>
なんちゃらかんちゃら
</head>
</body>

これだと、headの範囲とbodyの範囲が重なってるでしょ。これはだめです。

今後、<  >で囲まれたものを「タグ」って呼んだりすることがあります。

お決まりの部分

さっきのHTMLの例を再掲します。また、「ここはお決まり」という部分に印もつけていきます。

<html>  -- お決まり
<head>  -- お決まり
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />  -- お決まり
<title>最初のページ</title>  -- お決まり
</head>  -- お決まり
<body>  -- お決まり
<h1>できたよー</h1>
<h2>何かが</h2>
</body>  -- お決まり
</html>  -- お決まり

ほとんどお決まりですね。これは、どんなHTML文書を作るときにも同じように必要になる部分で、あまり深く考える必要がないところです。でも一応説明しておくと:

  • htmlタグ…この文書がHTMLであることを示すための記述。例外なく必要。
  • headタグ…このHTML文書の、言ってみれば「プロパティ」みたいなもの。表示内容とは別のいろいろな属性値で、分かる人にはメタデータといってもいいか。
  • metaタグ…metaタグは「その他」みたいな意味のタグで、いろいろな用途がある。ここでは、文書が日本語を含んで、「シフトJIS」であることを表している。
  • titleタグ…文書のタイトル。普通、ウェブブラウザのタイトルバーにこれが表示される。
  • bodyタグ…表示するものは全部このbodyタグの中に入る。
  • h1タグ、h2タグ…後述

です。titleタグは、HTML文書ごとにいろいろ変化させる必要がありますね。あとは変わりません。上の文書は、実際の表示部分だけを抜き出せば

<h1>できたよー</h1>
<h2>何かが</h2>

だけでできていると考えてしまっても差し支えありません。以後の例では、この「実際の表示部分」に該当するところ以外を省略して表します。手元で表示を試してみたいときは、ちゃんと「お決まりの部分」も書き足しながら(またはコピペで)やってくださいね。

h1, h2, h3 ...

いよいよ実際の表示にかかわるところに入っていきます。まずはサンプルにも出てきた、h1とかh2のタグ。文字列を囲むように記述するのがルールです。

<h1>h1は大見出しを意味します</h1>
<h2>h2は中見出しを意味します</h2>
<h3>h3は小見出しを意味します…</h3>

さっきの表示例で見たように、文書の見出しを作るときにこのタグを使います。h1が一番大きくて、h2、h3、h4…の順に小さくなります。まあ、h5より小さい要素を使うことはめったにないです。公式にはどこまで定義されてるんだっけ。h6だっけ。使わないけど。

表示サンプルは挙げませんが、さっきと同じだし、まあいいでしょ。

タグで囲まない部分

タグで囲まない文字列は、普通にブラウザ上に表示されます。「本文」ってところでしょうか。

<h1>python日記!</h1>
<h2>1日目</h2>
やる気まんまん
<h2>2日目</h2>
飽きた

これの表示はこんな風になります。

改行

本文などで、HTMLの中では改行したつもりでも、表示ではだらだらと行が続いてしまいます。これを明示的に改行するときは、<br/>と書きましょう。とくに囲むものはありません。

<h1>python日記!</h1>
<h2>3日目</h2>
観客さまは<br/>みなイワシ

色をつける

色をつける方法は、「スタイルシート記述」でやるのが業界では当たり前になりつつありますが、俺たちゃシロウトだし、まずは簡単に試せる<font>タグでやってみましょう。

<font color="色指定"></font>という書き方で囲むと、囲んだ部分の文字に色がつきます。色指定は書き方がたくさんありますが、まずは red, blue, green あたりが使えることを見ておきましょう。

<h1>python日記!</h1>
<h2>4日目</h2>
<font color="red">赤いきつね</font><br/>
<font color="green">緑のたぬき</font><br/>
<font color="blue">蒼いうさぎ</font><br/>

この日記を書いている人は、pythonのこととかすっかりどうでもよくなっている気配だな。

表(ひょう)

ここはちょっと面倒なんですが、後々に練習問題で使いたいので、なんとか覚えてほしいものです。

表そのものは、<table>タグで始まり、</table>タグで終わります。この中に、エクセルのシートみたいなタテヨコのマスを配置していきます。

さて、タテヨコの表は、横に長い「行」というもののカタマリだとイメージしてください。これが縦に重なって「表」を作り上げているという感じ。この「行」は、<tr>タグで始まり、</tr>タグで終わります。

ひとつ「行」の中は、今度は横方向に細切れになった「セル」が集まってできているとイメージしてください。セルっていう用語が適切か知らないけど、エクセルではこう言ってるし、わかるでしょ。セルひとつは、<td>タグで始まり、</td>タグで終わります。

これを実際の例にして眺めると、こういうことになります。

<table>
 <tr>
  <td>北西</td>
  <td>北</td>
  <td>北東</td>
 </tr>
 <tr>
  <td>西</td>
  <td>現在地</td>
  <td>東</td>
 </tr>
 <tr>
  <td>南西</td>
  <td>南</td>
  <td>南東</td>
 </tr>
</table>

tableの下は、直接はtrが集まってできています。そのtrひとつづつは、今度はtdが集まってできています。こういうこと。(見やすくするために行頭に空白を書き足したりしましたが、なくてもいいです)

実はこのままだと、表の罫線がぜんぜん表示されませんので、みづらい表になります。<table>という表記を、<table border="1">と変更してから表示をためしてみてください。下のように見えますか。見えたら成功です。

<td>のかわりに<th>っていうタグを使うと、表の値じゃなくて表の項目名みたいな感じになります。説明だけだとアレなので、例を見たほうが早いですね。

また、表のセルごとに背景色をつけることができます。<td bgcolor="色指定">って書くんですが、この色指定も、さっきのredとかblueとかが使えます。背景色は淡い色のほうがいいでしょうから、pink, cyan, yellow とかそんな色も試してみてください。(ここでは代表的な色指定を適当にピックアップして紹介しています。完全なリストは、どっかネット上を検索してね)

さて、<th>とか背景色指定を含んだサンプルは、下のような感じですね。見て確認しておいてください。

<table border="1">
 <tr>
  <th></th>
  <th>はい</th>
  <th>いいえ</th>
 </tr>
 <tr>
  <th>男</th>
  <td>22.5%</td>
  <td>77.5%</td>
 </tr>
 <tr>
  <th>女</th>
  <td>63.1%</td>
  <td bgcolor="pink">36.9%</td>
 </tr>
</table>

なんの統計値かって? 別に意味はなく、今適当に数字を考えた、架空のものですよ。

まずはこれだけ

HTMLをまともにマスターしようと思ったら、とてもこれだけでは足りません。このジャンルはこのジャンルで、習得への長い道が彼方に伸びています。ですが今回はあくまでスクリプト言語の応用としてHTMLをちょっと使いたいために寄り道をしたに過ぎず、これ以上の要素を説明するのはまたいつかの機会ということにします。

とはいえ、今紹介した要素だけで、まあまあ整った表示ができるようになると思いますよ。

ということで次回は、こいつを踏まえて、久々に練習問題編が出てくる予感です。

 
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki