一枚の.txtがリング
利用規約のページを作らなくてはならず、ちょうどいい機会なのでテンプレートを使わずに1から組み立ててみたいと思います。まずは他ページとの関連性は考えずに1ページ作ることのみを考えて作っていきます。テキストは用意できている状態からです。
レイアウトを考える
規約ページですからシンプルに一カラムに。ヘッダー、コンテンツ、フッターと3つのエリアに分けることにしました。
HTMLのバージョンを選ぶ
本体のHTMLは思いっきりテーブルレイアウトですが、それは置いておくことにします。無難なところでXHTML1.0で書くことに決めました。
XML宣言について決める
一度UTF-8で宣言を入れてみたのですが文字化け。「サーバーから文字コードが送信されるようにしておけばXML宣言はなくても問題ありません」とのことですが、よくわからないので（あとで調べます）ブラウザの判別に合わせShift_JISを入れることにしました。
<?xml version="1.0" encoding="Shift_JIS"?>
DOCTYPE宣言
やはりここは硬派にStrictで。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
html要素に属性を指定する
最上位要素であるhtml要素に属性を指定します。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
今までひとつひとつの意味がよくわからないまま書いていましたが、こういう意味があったのですね。
- xmlns属性 – ネームスペース（要素や属性の名前が重複しないための仕組み）を指定する
- lang属性 – 言語を指定する。既存のHTMLとの互換性を保つためにxml:langとの両方を入れる
- xml:lang – XMLの予約属性。言語を指定する。
head要素にいろいろ指定
meta要素
追記：大切なものを忘れていました。こちらにも保険として文字コードを指定しておきましょうとのことです。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
author、description、keywords（制作者、概要、キーワード）の3つを指定。
<meta name="author" content="ピロ" />
<meta name="description" content="アルバムフリマランキングの規約ページ" />
<meta name="keywords" content="フリマ,利用規約" />
※スラッシュ入れ忘れに注意
title要素
ページのタイトルを入れます。
<title>アルバムフリマランキング利用規約</title>
link要素
前後のページなども指定できますがとりあえずスタイルシートを呼び出すリンクだけ。
<link rel="stylesheet" type="text/css" href="css/style.css" />
※スラッシュ入れ忘れに注意
body要素
中身に入ります。body要素の開始タグには特に何も指定していません。ここにidかclassをあててcssのセレクタにすることも考えられます。
レイアウト
div要素で3つのボックスを作りました。
<div id="header">ここにメニュー</div>
<div id="content">ここに内容</div>
<div id="footer">ここにフッター</div>
内容
あとは先ほどつくったボックスの中にテキストを入れマークアップ。ヘッダとフッタはまだ出来ていないのでおいておくとして、contentの中身をマークアップします。
- h1
- ページタイトル
- h2 h3
- ページタイトルに続く小見出しを指定
- ul ol li dl dt dd
- 数字つきのリストはol要素、用語の定義はdl要素を使います
超短縮版ですが、実際はこんな感じに。
<h1>アルバムフリマランキング利用規約</h1>
<h2>利用規約</h2>
<h3>第1条 用語の定義</h3>
<p>本規約において使用する用語の意味は、以下の意味を有するものとします。</p>
<dl>
<dt>本サービス</dt>
<dd>管理者が運営するウェブサイト上で提供する、売り手が自身のフリマサイトを宣伝することができるサービス、およびこれらに付随するサービスのことをいいます。</dd>
</dl>
<h3>第2条 管理者の役割と責任</h3>
<ol>
<li>管理者は、売り手と買い手の間で取引が行われるきっかけとなる場を提供しますが、売買契約の当事者にはなりません。</li>
</ol>
これにて一応完成。適当なところに上げてAnother HTML-lintでチェック。「よくできました」をもらうことができました。あとでヘッダとフッタの中身を入れなくてはいけませんが。
次はこのxhtmlをcssでスタイリングしてみます。
追記：申し込みの前に表示されるページはまた別に作ることにしました。
コメント