5. Advanced
5-B.汎用XHTMLテンプレート
XHTML1.0 Strictの汎用テンプレート
※ちょっと難しい内容になってます。ビギナーの方は、このページはとばして読んでください。前出の万能テンプレートはビギナー向けに編集時の効率を考えてHTMLで記述したものですが、 今後、Web標準の品質を満たすにはXHTMLが基本となります。
そこで、業務用にも使える汎用XHTMLテンプレートをXHTML1.0 Strictで記述してみました。
標準的な2カラム～3カラム構成に対応しており、Webアプリ構築などの上級ユースで本領発揮します。
国内の代表的なWeb標準チェッカーであるAnother HTML-lintや 世界的に権威あるW3C Markup Validationに通しても遜色ない品質になっています。 さらにdiv系の論理構造については、CSS ZenGarden、BiND、CyberGarden等、XHTML品質に定評のあるソースコードを参考に、 誰が見ても一目瞭然な命名規則を採用しました。
ただし、XHTMLはイイコトばかりではありません(特にStrictの場合)。端的に言うと、厳密なタグ配置が要求されるため 手書きだとかなり編集効率が落ちます。
しかもXHTMLの標準文字コードはUTF-8であるため、メモ帳(S-JIS)などでは編集することができず 秀丸のような高機能エディタが必要になってきます。
なので、趣味で手書きサイトを楽しむ分にはHTMLで十分、という割り切りも必要ではないかと思っています。
ダウンロード方法
このXHTMLテンプレートは中級者以上向けなので、お手数ですがソースコード等はご自分で取得してください。 手順は次の通りです。■XHTML: サンプル画像をクリックし新ウィンドウを開きます。 ブラウザの「ソース表示」機能でソースコードを表示させ、秀丸等のエディタにコピペしてUTF-8で保存してください。 (メモ帳だとUTF-8は使えないので注意)
■CSS: 下記の「CSSをダウンロード」リンクを右クリックし、「対象をファイルに保存」等でセーブ。 エディタで開いてUTF-8で保存してください。UTF-8以外だと日本語コメントのあるCSSは動作しなくなる事があります。 (相対パスはXHTML側で任意のものに書き換えてください)
■画像： 下記の画像専用リンクからひとつずつ右クリックで「画像を保存」してください。 (相対パスはCSS側で任意のものに書き換えてください)
なお、配色や画像はご自分でオリジナルのものに書き換えて使ってください。 再配布等も自由ですが、趣味でやってるので予告なくバージョンアップする場合があります。
Style2 - 柔軟なリキッドスタイル (2カラム)
XHTMLはローカルメニュー部分のみ強化し、リキッドスタイル(幅可変)のCSS'style2'を適用したもの。
幅が可変なので画像を使わないシンプルなサイトに適している。システムの管理画面などにも便利。
ビルボード(看板エリア)は不可視にしてある。
使用画像は「背景」のみ。
このCSSをダウンロード
Style1 - オーソドックスなリジッドデザイン (2カラム)
XHTMLはStyle0と共通。リジッドスタイル(幅固定)のCSS'style1'として追加。
２カラムレイアウトで、超オーソドックスなのがポイント。いじり倒すのに最適。
使用画像は「ビルボード(看板)」と
「背景」の2種。
このCSSをダウンロード
Style0 - 汎用XHTMLテンプレート (CSSなし)
XHTML1.0 Strictで書かれた汎用テンプレート。CSSなしバージョン。
構造的には3カラムレイアウトまで対応可能(要調整)。
XHTMLソースコードをちょっと見たいとき用に。
付録
論理構造(DOM)について
このXHTMLテンプレートは、大きく分けて「▼ヘッダー」「▼コンテンツ」「▼フッター」の３エリアから構成されています。 細分化すると次の通りです：
DOMツリー
| エリア名 | obj名 | 重要度 | 共有ルール(推奨) | 備考 |
|---|---|---|---|---|
| ▽ページ | #page | 必須 | Styleのみ | --- |
| ▼ヘッダー | #header | 必須 | Styleのみ | --- |
| ・・タイトル | #title | 必須 | Styleのみ | --- |
| ・・・見出１(h1) | h1 | 必須 | Style, Data 絶対共有 | サイト名相当・txt形式 |
| ・・ビルボード | #billboard | 省略可能 | Style, Data 任意共有 | 看板画像 |
| ・・グローバルナビ | #globalnavi | 省略可能 | Style, Data 絶対共有 | list形式 |
| ▼コンテンツ | #content | 必須 | Styleのみ | --- |
| ・・ローカルナビ | #localnavi | 必須 | Style, Data 任意共有 | list形式 |
| ・・メイン | #main | 必須 | Styleのみ | --- |
| ・・・トピックパス | #topicpath | 省略可能 | Style, Data 自動継承/手動入力 | txt形式 |
| ・・・見出２(h2) | h2 | 任意 | Styleのみ | ページタイトル相当 |
| ・・・ブロック | .block | 任意 | Styleのみ | --- |
| ・・・・見出３(h3) | h3 | 任意 | Styleのみ | txt形式 |
| ・・・・アーティクル | .article | 任意 | Styleのみ | --- |
| ・・・・・見出４(h4) | h4 | 任意 | Styleのみ | txt形式 |
| ・・・・・見出５(h5) | h5 | 任意 | Styleのみ | txt形式 |
| ・・サブナビ | #subnavi | 省略可能 | Style, Data 任意共有 | --- |
| ▼フッター | #footer | 必須 | Styleのみ | --- |
| ・・フットナビ | #footnavi | 省略可能 | Style, Data 絶対共有 | list形式 |
| ・・コピーライト | #copyright | 必須 | Style, Data 絶対共有 | txt形式 |
| ・・・クレジット | #credit | 必須 | Style, Data 絶対共有 | txt,画像etc |
おまけ：メニュー等の共通化について
これはサンプルなので、メニュー部分はベタなXHTMLで記述してありますが、 実際にサイトを管理する時にはメニュー等を共通化したくなる事もあるかと思います。
それには今のところ３つの方法があります：
①iframeタグでメニュー専用HTMLと置き換える -- 最も簡単な方法ですが、iframeによって幅が固定されてしまいます。 (前出の万能テンプレートがこの方法です)
②javascriptにメニューを書いて<script>から呼び出す -- 多少javascriptの知識があればできますが、SEOには不利です。 (このウェブガイドで用いている手法です)
③jQuery等のAjax機能を用いて、<div>内にメニュー用HTMLを呼び出す -- 最も洗練された方法で、一度設置すれば②より簡単に管理できますが、Ajaxの理解が必要です。
上記の手段はあくまで管理のしやすさを重視したもので、SEO効果を狙ったものではありません。 (SEO対策で最大の効果を得たいならメニューを共通化すべきではありません)
それでも僅かながらSEO効果があるとすれば①≧③＞②の順になると思われます。