今すぐはじめられるHTML

この記事は どもがよアドベントカレンダー2022 の12日目の記事です。アドベントカレンダーは25日までのカウントダウンなので実はこれでもう折り返しなんですけど12月なんか時間の流れはやくない?
11日目は柳雪さんのパラドゲーの現在地と今後に関する個人的雑感(続き) でした。ステラリス実は未プレイなんですが、これやったらあらゆる進捗が破壊されるな……ということをあらためて実感しました。めっちゃやりたい。やりたいがゆえに破滅が見える……。破滅が容易に予想できるゲームはいいゲーム。進捗が出たら手を出したい(破滅


今回は前回の 個人ウェブ礼賛 の続きです。

個人ウェブサイトのつくりかた

個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。

HTML とはなんぞや

原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。

ということを書くとなんだかむずかしそうに思えてくる。ただ、我々はけっこう普段からマークアップのようなことをしている。HTML を使わない人であっても。

これは直木三十五の『ロボットとベッドの重量』という作品の書き出しである。

「お前、本当に――心から、俺を愛しているかい。」
 KK電気器具製作所、ロボット部主任技師、夏見俊太郎は病に蝕まれ、それと悪闘し、そして、それに疲労してしまった顔と、声とで、その夫人に、低く話かけた。(また――病人って、どうしてこんなに、執拗ものなのかしら)
 夫人は、頭の隅で、一寸、こう眉を、ひそめてから、
「ええ、愛していますとも。」

これを読んで、おおよその人はカギカッコが使われている部分は実際に発声したセリフだと考えるだろうし、丸かっこが使われているところは心の中で思ったことだろうと考えると思う。こういう記号を使って普段から文に意味づけを行っているし、そのような意味づけされた文章を読んでいる。なんなら今している話の中でも、強調のためにカギカッコを使ったり、作品名と示すために二重カギカッコを使ったりということをしている。

ただ、こういう記号の使い方はあくまでも慣例があるだけで、決まった使い方のルールがあるわけではない。コンピュータが処理するにはそれでは困るので、ルールを決める必要があり、ブラウザでテキストデータをそれっぽく表示するためのルールが HTML という言語仕様である。

いちばん小さな HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>いちばん小さなHTML</title>
</head>
<body>
<p>Hello, world.</p>
</body>
</html>

上のテキストを、ファイル名はなんでもいいが、たとえばとりあえず hello.html というファイル名で保存して、ブラウザにドラッグアンドドロップすると、

余計な味がしない

こんな感じで表示される。これでいい。これでいいので、最初はここからはじめよう。

HTML の要素とタグと属性

最初に用語だけ説明する。

図解

覚えなくてもよいので、以下の説明中で出てきたらここを振り返ってほしい。

HTML を書く

HTML の中でブラウザに表示される本文は body 要素のコンテンツ、つまり <body> から </body> までの中身である。
head 要素は、「この HTML はこのような属性を持った文書である」ということを示すための内容で、言ってみればその HTML ファイル全体についての属性づけを行う部分である。title 要素がブラウザのタイトルバーとかタブとかに表示されるページ名になるので、ここは適宜書き換えてよい。最小限の HTML では、それ以外は特にいじらなくてよい。

p 要素は段落を表す。なぜ段落をあらわすためにタグがあるのか。body 要素を以下のようにして実際に HTML として表示するとどうなるか見てみよう。

<body>
【個人ウェブサイトのつくりかた】
個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。
【HTML とはなんぞや】
原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。
</body>

みちみち

こうなる。HTML 中では改行は無視される。HTMLファイルの内の改行は基本的には原稿の見た目を調整するためのもので、HTML としての表示に影響しない。そうと決まっているので仕方がない。

<body>
<p>【個人ウェブサイトのつくりかた】</p>
<p>個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。</p>
<p>【HTML とはなんぞや】</p>
<p>原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。</p>
</body>

だいぶ読める

段落わけをしたことでだいぶ読めるようになった。

さて、見出しのために と括っているが、こういうものこそ HTML で表現すべきだろう。

<body>
<h1>個人ウェブサイトのつくりかた</h1>
<p>個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。</p>
<h1>HTML とはなんぞや</h1>
<p>原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。</p>
</body>

一気に HTML になった

これが HTML である。まだハイパーテキストではないが、少なくともマークアップされた文書になった。基本的にこれだけわかればよい。

h1要素 は大見出しにつかう。中見出しには h2要素小見出しには h3要素 ……という具合に h6要素まであるが、 基本的に h1要素 だけ使えばよく、他の存在は一旦忘れてよい。中見出し小見出しまで使うような文章を書くことはそんなにない。そんなにでかいHTMLは手書きするべきではない。

さて、この HTML には一つ難点がある。それは、ブラウザのウインドウを横に伸ばすと……

びよーん

こうなってしまう。狭いときはウインドウ幅で勝手に折り返してくれるとうれしいが、広いからといって際限なく、画面横いっぱいまで伸びてしまうとさすがに読みにくい。

CSS を書く

というわけで、CSS を使って 見た目 を制御する。HTML は文書の構造をブラウザが読み取ってそれっぽく表示してくれるだけなので、細かいことは考慮されていない。表示については CSS という機能で表現する。

ここまでができてはじめて CSS のことを考えてよくなった。CSS が何かという説明はここでは省くが、文書の見た目を設定するためのものだと思ってくれればよい。これは HTML の中に書ける。どこに書くか。

文書全体の見た目を設定したいのだから、文書全体の属性を設定するための場所に書けばよい。ここでようやく head 要素を弄る場面が出てきた。

head 要素を次のようにする。

<head>
<meta charset="utf-8">
<title>今すぐはじめられる個人ウェブサイト</title>
<style>
h1 {
  max-width: 40rem;
}
p {
  max-width: 40rem;
}
</style>
</head>

だいたい40文字くらいで折り返す

css には max-width という要素の最大幅の設定があるので、これを使うとそれ以上広げないという幅を指定できる。幅の単位はいろいろあるが、日本人はおおよそ40文字で折り返す文章を読み慣れているので、それくらいにすると読みやすい(ためしにお手元の文庫本を開いてみると、1行38~43文字くらいになっていると思う)。もし一行それ以上長かったりすると目の左右移動が大きくなりすぎて読みにくい。

ちなみに rem は、その文書の基本文字サイズでアルファベットの M 何個分かという単位になっている。アルファベットの M は日本語の漢字かな一文字分とだいたい同じ幅なので、40rem はほぼ日本語の40文字分くらいの幅になる。

ところで、見出しがちょっとでかくてうるさいのでもう少しおとなしくしてなっているとうれしい。もちろんそれも CSS でできる。

h1 のところをこんな感じにする。

h1 {
  font-size: 128%;
  max-width: 40rem;
}

主張しすぎてない

あと、行間ももうちょっと広いほうが読みやすい。もちろん CSS でできる。

p を

p {
  line-height: 2.0;
  max-width: 40rem;
}

こうして、

余裕が出てきた

こう。

あとは、画面の左に寄ってしまうのもちょっと気になる。全体を真ん中に寄せたい。CSS で、

h1 {
  font-size: 128%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
p {
  line-height: 2.0;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

とやると、

じゃーん

これ以外にも CSS でできることはたくさんあるが、たったこれだけで、世にあるブログとそんなに変わらない本文の HTML になる。もうちょっと余白を調整したりということをしたくなったら都度 CSS を調べる必要はあるし、HTML もこれ以外に画像を表示したり太字にしたりリンクを張ったりということをしようと思うとそれぞれ調べる必要がある。ただ、本当にたったこれだけで文章だけの日記レベルのことは表現できる。思ったよりむずかしくないでしょ?

今書いたことは、インターネット老人がたびたび話す「昔はメモ帳で HTML を書いて FTP でアップしてホームページを運営していたのじゃ……」から実はそんなに変わっていない。当時の人々はこういうものを書いていた。実際にはウェブサイトのトップページなどはもうちょっと複雑だったりするが、更新されるコンテンツはだいたいこのようなものである。

もし HTML に興味を持って、HTML を勉強してみようかなと思った人は、MDN に極めて丁寧かつ正確なガイドがある。

developer.mozilla.org

ちょっと硬めの内容だが、過不足なく、ほぼ正確な HTML の仕様を、実践と知識の両面で学ぶことができる。作っているのは Firefox の開発などを行っている Mozilla という組織で、非営利なので GoogleMicrosoft に比べて中立だし、だからこそ責任を持ったコンテンツになっている*1

HTMLを手書きしてきたインターネットの民はとほほのWWW入門もよく読んできた。

www.tohoho-web.com

このサイトのすごいところは現代に至るまでアップデートがしっかり行われている点と、網羅的に解説されていて引きやすい点である。前提に技術的な知識を要求するところはあるが、俯瞰して読むのに適したサイトなので、こちらも合わせて読むとよいだろう。

けっこうな長さになったので、続きは次回。次回は Markdown というテキストフォーマットから HTML を出力して Google Firebase Hosting でワールドワイドウェブに HTML をアップしてしまうところまでをやろうと思う。


どもがよアドベントカレンダー13日目の記事は朱里さんの「ボードゲーム遊びたい&好きなやつ」です。ボドゲも好きなのでこちらの記事も楽しみ。

*1:GoogleMicrosoft営利団体なので当然といえば当然ではあるが、利益の出ないものに対してはしばしばかなり無責任な態度を取る