フリーのブログからMixiやMySpaceなどSNSも含めて、毎日日記を書いたり閲覧することが習慣となっている方は多いかと思います。ブログ閲覧者（利用者含む）は総務省の調べで国内ブログを少なくとも月に１度は閲覧しているインターネットユーザは2007年3月末には3455万人に達すると予想されています。またブログの35％がタグを使っており（2007年2月）、今後もブログ利用者数の増加と共にタグ付きブログが増えていくことでしょう。今回はXHTMLを使ったコラム作成という事で、いつも通りいくつか使用例を挙げながら順を追って紹介しようと思います。ホームページを作成した事のある方は既に把握している事かと思いますが、HTMLを知らなくてもWebブラウザから手軽に情報の発信・更新ができるサービスを利用している方が圧倒的に多いのが現状です。詳しくは下記にありますが、ブログサービスやシステム環境によって、細かい表記が行なえないものもありますが一読するといくつか参考になる点がありかと思います。
XHTML（構造）+CSS（見栄え）は当たり前に
まずHTMLとXHTMLは混同されがちですが住む世界が違います。汎用的に使うことができるXML言語で再定義されたのがXHTMLで端的には下記構図になります。
- HTML≠XML
- XMLの一部がXHTML
- HTML≠XML（XHTML）
ホームページ作成支援ソフトDreamweaverはすでにデフォルト（初期設定値）はXHTMLになりました。Webテクノロジーの多くがXMLを基盤として発展しておりハイパーテキストマークアップ言語の開発はXHTMLに受け継がれています。従来のHTMLには存在しなかった名前空間やスキーマが利用できる等、将来的なデータの再利用性が確保されている特徴があります。
HTMLに留まる理由をあげるとすれば例えばホームページリニューアル時の既存ページとの整合性問題や、クライアントPCの諸事情でブラウザがIE4.0を使用せざるを得ないなど特殊なケースでしょうか。XHTMLはHTMLに比べ、略記・省略ができなかったりと細かい記述の違いがあります。詳細は割愛しますがボキャブラリ（要素・属性）がほぼ共通するため習得が容易です。HTML/XHTMLは3種類の文書型によって使用できる属性と使用できない属性に別れます。FramesetはSEOやアクセシビリティ上のデメリットが大きすぎるので採用していなくTransitionalやStrictを採用しているケースが多いようです。昨今MovableTypeやWordPressなどに代表されるCMSでは勿論のこと、XHTMLで構造を定義しCSSで見栄えを整えているサイトが当たり前のように増加してきました。
本サイトもMovableTypeを使用し、CSSで見栄え調整を入れています。
今回取り上げるタグ一覧
| テキスト | ||
|---|---|---|
| 1 | h1～h3 | 見出し |
| 2 | p | 段落（パラグラフ） |
| 3 | br | 改行 |
| 4 | em | 強調 |
| 5 | strong | より強い強調 |
| 6 | blockquote | 引用文（ブロックレベル） |
| リンク | ||
| 7 | a | アンカー（リンク） |
| スタイルとレイアウト | ||
| 8 | i | 斜体 |
| 9 | b | 太字 |
| 10 | u | 下線 |
| 11 | font | フォントに関する設定 |
| 12 | hr | 横罫線 |
| 13 | center | 中央揃え（非推奨要素） |
| 画像とオブジェクト | ||
| 14 | img | 画像 |
| 基本構造 | ||
| 15 | div | 汎用ブロックレベル要素 |
| リスト | ||
| 16 | ul | 番号なしリスト |
| 17 | ol | 番号付きリスト |
| 18 | li | リスト項目 |
| テーブル | ||
| 19 | table | 表 |
| 20 | tr | 横方向一列 |
| 21 | th、td | ヘッダセル、データセル |
| 22 | caption | 表タイトル、説明文 |
| 23 | thead、tbody | 表ヘッダ、表本体 |
※本サイトのコラムニストが良く使うタグを中心に抜粋しました。勿論その他多数存在します。
使用例
それではXHTMLのソースコードと、本サイトでの表示結果を紹介します。
１． h1～h3 見出し
▽ソースコード
▼表示
※コラムタイトルにh1を自動的に使用しており、サブタイトルのh2、h3を主に使う事が多いです。
２．p 段落（パラグラフ）
３．br 改行
▽ソースコード
▼表示
※HTMLでは<br>と表記しいていましたが、XHTMLでは<br />です。半角スペースを空けて/で閉じます。
４．em 強調
５．strong より強い強調
▽ソースコード
▼表示
６．blockquote 引用文（ブロックレベル）
７．a アンカー（リンク）
▽ソースコード
▼表示
※<div class="cite"></div>はCSSで右寄せに定義しています。
８．i 斜体
９．b 太字
１０．u 下線
１１．font フォントに関する設定
▽ソースコード
▼表示
１２．hr 横罫線
▽ソースコード
▼表示
１３．center 中央揃え（非推奨要素）
１４．img 画像
１５．div 汎用ブロックレベル要素
▽ソースコード
▼表示
１６．ul 番号なしリスト
１７．ol 番号付きリスト
１８．li リスト項目
▽ソースコード
▼表示
１９．table 表
２０．tr 横方向一列
２１．th、td ヘッダセル、データセル
２２．caption 表タイトル、説明文
▽ソースコード
▼表示
※rowspan="n"(縦にマージするセルの数)
※colspan="n"(横にマージするセルの数)
※<table></table>、<tr></tr>、<td></td>、<th></th>はCSSで文字の中央揃えや色彩、padding、border、marginなど必要に応じて定義しています。
２３．thead、tbody 表ヘッダ、表本体
▽ソースコード
▼表示
※width="n"(セルの横幅指定)。px(ピクセル)指定も出来ますが%（パーセント）指定の方が汎用性があります。
※div align="left"（左寄せ）｜"center"（左寄せ）｜"right"（右寄せ）
XHTMLコードの確認方法
ホームページ作成支援ソフトをお持ちの方であれば、ソースコードと表示結果を確認しながらの作成となる為、不要かと思います。お持ちでない方は入力したテキストファイルをhtmlファイルへ保存しなおしブラウザで開く事である程度確認する事ができます。
CSS（見栄え）が適用されていない為、本コラムのような表示とは違って殺風景かと思いますが間違ったコードの場合、明らかに表示が崩れますので分かるかと思います。
その他、機械的にチェックするサイトもあります。
上記URLに接続後、下記赤枠の箇所にコラム本文をコピー＆ペーストして「チェック」押下にて採点方式で結果が出ます。
マイナス採点に全て対応するのは状況により困難です。常日頃から気になったブログはソース（IEの場合、「表示」→「ソース」）を確認するなど参考にして行くと良いです。
求む（平成19年12月23日迄に投稿）
アクセスランキング応援していただける人は→ クリック して下さい。
『連山』でコラムを書いてくれる人は→ クリック
