私のサイトが出来るまで。HTMLとCSS実践編その1

[ Web関係 ]

「何でいきなり実践編なんだよ」とかいうツッコミは無しで。

暇なので、私のサイトの作り方でも解説しようかなと。

まずはテキスト

とりあえずHTMLを書くわけです。

はじめにテキストでサイトの構造を適当に記述。本文が先。ナビゲーションは後。

何となく気持ち悪いので私はナビゲーションにも見出しを付けてます。適切な見出しになってないような気がしますし、結局CSSでdisplay:noneってやってるからアクセシビリティ向上の役に立ってるわけでもないんですけどね。

der Gegenwart

どうでもいい雑記そのXX

ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト
200X年XX月XX日XX時XX分XX秒

目次

メインメニュー

サイト情報
雑記帳
リンク集

書いたテキストをマークアップ

次に書いたテキストを適当にマークアップ。私の場合、サイト名をh1要素にしていません。サイト名は見出しじゃないかな、みたいな感覚的な判断です。論理的な理由があるわけじゃありません。

日時をp要素にするのはすごく微妙。っていうか不適切だと思う。段落じゃないし。ul要素にしちゃう方がまだマシ。

<title>der Gegenwart</title>
<h1>どうでもいい雑記そのXX</h1>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト</p>
<p>200X年X月XX日XX時XX分XX秒</p>
<h2>目次</h2>
<h3>メインメニュー</h3>
<ul>
<li><a href="sample.html">サイト情報</a></li>
<li><a href="sample.html">雑記帳</a></li>
<li><a href="sample.html">リンク集</a></li>
</ul>

その他の要素を記述

一通りテキストのマークアップが終わったところで、html要素とか、head要素とか、meta要素とかを記述。

えーっと今回はXHTML1.1で書こうと思うので、http-equiv属性を持つmeta要素で、文字コードとメディアタイプを指定しません。理由はAcademic HTMLのXHTML解説 Section 21に詳しく載っています。「Re: XHTML1.1のMIMEタイプ - 徒書」にもその辺のことが触れられていたり。

<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>der Gegenwart</title>
<meta name="author" content="Rusica" />
<link rel="stylesheet" type="text/css" media="screen,tv" href="css/style.css" />
</head>
<body>
<h1>どうでもいい雑記そのXX</h1>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト</p>
<p>200X年X月XX日XX時XX分XX秒</p>
<h2>目次</h2>
<h3>メインメニュー</h3>
<ul>
<li><a href="sample.html">サイト情報</a></li>
<li><a href="sample.html">雑記帳</a></li>
<li><a href="sample.html">リンク集</a></li>
</ul>
</body>
</html>

最後にDOCTYPE宣言とXML宣言

全部終わったら目視でミスがないことを確認。OKだったらDOCTYPE宣言とXML宣言を書いて基本的な作業は終わり。idとかclassは必要に応じてあとから足します。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>der Gegenwart</title>
<meta name="author" content="Rusica" />
<link rel="stylesheet" type="text/css" media="screen,tv" href="css/style.css" />
</head>
<body>
<h1>どうでもいい雑記そのXX</h1>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキスト</p>
<p>200X年X月XX日XX時XX分XX秒</p>
<h2>目次</h2>
<h3>メインメニュー</h3>
<ul>
<li><a href="sample.html">サイト情報</a></li>
<li><a href="sample.html">雑記帳</a></li>
<li><a href="sample.html">リンク集</a></li>
</ul>
</body>
</html>

その2はまた後ほど。

2007年5月26日土曜日 23時02分04秒