Firefox 2.0.0.11

Opera 9.25

Internet Explorer 6

前回の記事で述べたように WWW ブラウザ の乗り換えと並行して、此処のテンプレートを新規で作成し直しました。何度か本サイトを訪問して頂いた方は気が付いたかもしれませんが…先日までは公式テンプレートを改造したものを使用していたのですが、レイアウトや文書構造を見直してみると、一から作った方がいいと思い、現在のテンプレートを作成しました。テンプレートの仕様はこのサイトの仕様にもなります。仕様は以下のようになっています

• 文字エンコードは EUC-JP ¹
  本来ならば、一般的な UTF-8 (Unicode) で記述したいのですが JUGEM の仕様上できない様です…
• 文書型定義 (DTD) は XHTML1.0 Transitional DTD
  とてもじゃないが XHTML1.0 Strict DTD では lint ² が通らない。サイトの機能上、必要な要素や属性が廃止されている為 Strict よりは要素やその属性の使用が緩和されている Transitional となっています
• 視覚 UA を対象にした CSS はレベル 3 まで使用
  視覚効果を狙っただけのものなので、内容自体には差違はありません。現在 Working Draft ³ の段階ですが CSS は試験的にレベル 3 も使用しています

  ---

• サポートしている UA
  サポートしている UA は Firefox 2, Opera 9, IE6 辺り ⁴ です。他の WWW ブラウザでは試していません。基本的に確認作業は Firefox 2 で行い、Opera 9, IE6 と順に確認しています。CSS の実装状況が絶望的な IE についはレイアウトが致命的に崩れない限りは切り捨てていきます
• CSS において使用している単位
  使用している単位は全て相対単位を使用しているので WWW ブラウザのウィンドウのサイズを変更してもみっともなく水平スクロールバーが現れたりする事はないはずです ⁵
• JUGEM の仕様上、発生してしまう lint のエラー
  JUGEM のブログは HTML テンプレート内に記述した独自タグを動的に置き換えて生成しています。その生成する内容に lint でエラーが発生する要素の記述がある為、これは避けようができません ⁶

  ---

• 2 カラム構成
  2 カラム構成でもご覧の様に記事が左カラム、メニュー、広告などは右カラムになっているので、記事主体の構成となっています
• Javascript に依存していない
  レイアイト、内容表示を行うにあたって Javascript に依存していないので Javascript を無効にしていてもブラウジングできます
• 外部リソース未使用
  テンプレート部分において画像などの別リソースが必要となるようなデザインはしていないので、ブラウジングが軽く、素早く表示される事を念頭に作成

大雑把なレイアウトはこんな感じ…

• ヘッダー
  ブログ名、ブログの概要、水平カレンダーなどのヘッダー部分
• 左右のカラムをラッピングするブロック要素
  • 左カラム
    ページナビゲーション、記事本体、コメント記入、トラックバック
  • 右カラム
    各種メニュー、広告
• フッター
  ブログ全体でのページナビゲーション、コピーライト、サムライト表示

如何に今まで使っていたテンプレートがやっつけ作業の改造ものだという事が今回の作業で解りました…('A`) テンプレートで使用している CSS などは今後記事にしていきたいと思います

1. IANA character-sets を参照
2. Another HTML-lint gateway を参照
   lint とは糸屑、埃などという意味。つまり HTML の埃をチェックします
3. CSS 3 - W3C Working Draft を参照
4. 掲載しているスクリーンショットが各ブラウザでの結果です。ダウンロードリンクは右カラム recommends の各種ボタンからジャンプできます
5. border 関係のプロパティなど、ごく限られた部分で px 単位を使用しています
   CSS の仕様だと px は相対だと記述されていますが、この単位は出力先依存です。参考: CSSの単位
   あと IE でウィンドウサイズの横幅を縮めていくと右のカラムがあっさりと下に落ちてしまいます…('A`) これは IE の挙動がオカシイので私のせいではありません
6. この件に関しては運営サポート側に要望として挙げているのですが…('A`)