はちど

ボードゲームのレビューなど。

*

HTMLを書こう、な!

      2013/10/29

Hachiです。
BoardGameGeekな友人たちと久しぶりに新しいゲームを開拓しました。
7Wonders(世界の七不思議)というゲームです。

ロードスの巨像アルテミス神殿マウソロス霊廟など世界有数の遺産を建築していきつつ化学開発や戦争を行って勝利点を集めていくゲームです。
あっさり説明するとCivilizationっぽいゲームにも見えますが、世界観がそんな感じなだけで、ゲームシステムとしてはMagic the Gatheringのドラフトが近かったりします。
このゲーム、勝利点を稼ぐ手段がたくさんあって、単に勝利点カードをたくさん集めれば勝てるというわけでないのが面白いところです。
まだ10戦程度しかプレイしていないので、とりあえずルールを把握したという段階で明確な戦略がまだできていませんが、どんなゲームでもそのくらいの頃が一番楽しいですね。
# その段階を超えても楽しめるゲームは、今のところカタンプエルトリコくらいでしょうか。

閑話休題。
前回の記事で、HTML5とはなんぞ、ということを説明しました。
その記事を書いているなかで、これからWebに関するさまざまな記事を書いていくにあたり、説明しておかなければならない基本をまとめる必要性を感じました。
自分にとっても大事な知識なので、丁度良い復習と思って、しっかり書いていきます。
# 別にポートフォリオサイトの制作が滞りまくってるとかそんなんじゃないんだからね!

はじめの一歩 – HTMLの骨組み

はい、いきなりですがソースです。


上記のソースはhtmlを書く上でほぼ必ず記述するタグのセットであり、これだけでWebページとして完全に成立しています。
このソースをそのままメモ帳にコピペして、拡張子を.htmlにして保存したものをダブルクリックすれば、ブラウザが立ち上がりWebページとして閲覧することができるはずです。
一般的なWeb開発環境ではこの程度は自動的に挿入されますし、エディタ開発でもコピペで済ませてしまうところなのですが、ひとつひとつ理解するために以下で詳しく見ていきます。

<!DOCTYPE html>

前回の記事で説明したとおり、ドキュメントタイプ宣言文です。
「ここから先に書いてあるのはHTML5だよ!」という宣言をしています。
今まではこの一行を抜かしても問題はなく、現にこの記述をしていないWebページもたくさんありますが、HTML5の場合はこれの有無で一部ブラウザの挙動が変わったりするので、入れた方が閲覧確認が捗ります。多分。

<html>

htmlのタグは一般的に<anything>と</anything>の組み合わせで使われ、前者から後者までの間にタグの効果が適用されます。
そして、一番最初の<html>は、「このタグで閉じられている中にあるものがこのhtmlの内容ですよ」ということを示しています。

<head>

このタグで囲まれている部分は、HTMLヘッダといって、直接ブラウザの見える部分には反映されないことを記述します。
後述するWebページのタイトルや、ページ中に使うスタイルシート、スクリプトを指定する部分です。

<meta charset=”Shift_JIS”>

これはmetaタグといって、Webページの基本要素を指定するためのタグです。
ここでは、本文を表示するためのエンコード方式を指定しています。Shift_JISのほかにutf-8がよく使われます。
# 入力するテキストのエンコード方式に合わせてください。
# といっても分からないと思うので、WindowsならShift_JIS、Macならutf-8を使えば無難です。

ちなみに、上記エンコード方式の指定方法はHTML5準拠の記述で、headタグの開始直後くらいに記述する必要があります。
それ以前は


と書く必要がありました。
HTML5は下位互換性があるので、これを使っても問題はないのですが、長いし一部間違えやすく、私は積極的に新しい記述方法を使っています。

<title>page title</title>

Webページのタイトルを指定する部分です。
titleタグに挟まれた中に書いてある言葉は、ブラウザのタブなどに記述されます。

<body>

Webページの内容を表すタグで、headタグと対を成すものです。
bodyタグに挟まれた部分が、ブラウザの中に記述される内容になります。

<p>html body</p>

とりあえず挿入したダミー本文。
pタグは文章の段落を表します。paragraphのpです。

以上がHTMLの超基本構造です。
先にも書きましたが、これらのタグは大抵の場合コピペで済ますようなものです。
しかし、Webページを作るにあたって「やりたいことを正しく実現するにはどうするか」、「やりたいことができなかったのは何が原因か」を考えるときには、この基本的な構造を正しく理解しておくことも重要だと思い、解説してみました。
次はCSSの書き方と適用方法でも書いてみようかと思います。

sns-widget

更新情報の確認にはこちら!

 - HTML基礎講座, Web技術