Harukiya Archives

2008/10/13

category /


2006/06/18

category / HTML

去年の祭りは初心者向けテンプレについてだった。The Day of Web Standardsは次なるステップということで飛躍してみる(色々と)。

StandardなのだからEextraやSpecialである必要はない。WEBページの基本とは何なのか、と考えることが解への近道である。さて、FC2ブログを使って世界へ向けて日記(^^)を公開したい場合の最低限のテンプレを作ってみよう。

  1. <?xml version="1.0" encoding="EUC-JP"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  4. <head>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
  6.  <meta http-equiv="Content-Style-Type" content="text/css" />
  7.  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  8.  <link rel="stylesheet" type="text/css" href="<%css_link>" /> <!-- 1 -->
  9.  <script src="<%url>file/hoge.js" type="text/javascript"></script> <!-- 2 -->
  10.  <title><%blog_name></title>
  11. </head>
  12. <body>
  13. <!--topentry-->
  14.  <%topentry_body><%topentry_more>
  15. <!--/topentry-->
  16. <%ad><%ad2>
  17. </body>
  18. </html>

HTMLだけでもいいのだけど、いちおう見映えもデザインしてみる。

  1. @charset "EUC-JP";
  2. body {
  3. margin: 0;
  4. padding: 40px;
  5. }
  6.  p {
  7. margin: 1em;
  8. line-height: 1.4;
  9. }

日々の日記(重複)も適切にマーク付けされてなければならないが、一般的な日記(文章)には、段落を表す<p>要素、複数の段落に分かれるならば、それらを纏めるための見出し<hn>要素くらいで済む。くわえて<a><img>なども織り交ぜて日記(文章)を書けば、利便性や表現はより高まる。

・・・まだ殴らないでください。さすがにコレでは過去ログにアクセスできないし、誰がいつ書いたのかもわからない。コメントも付けられない。殺風景すぎるし、遊び心もない。そこで、色々とページに付け足していくことになるのだけど、その足し方・やり方こそがWEB標準か否かを分けるのです。

ファイルのタイムスタンプ、過去ログへのリンク、書き手のプロフィールなど読み手全員に伝えたい文字列・文章はHTMLに記述する。(自分の好きな)背景色・文字色や背景画像、レイアウト情報は<!-- 1 -->のCSSファイルに記述し、必要ならばIDやclass属性をHTMLに追加する。(ブログシステムに実装されていない)表現や効果を出したい場合はスクリプトを組んで<!-- 2 -->のjsファイルに記述する。効果付けする位置が決まっているなら<script>要素もHTMLに適宜追加する。

やりたいことを順位付けし、明確に区分けすることがWEB標準につながる。ちなみに前出のテンプレ(もどき)をAnother HTML-lintにかけると満点か高得点になるはず。これは目的(世界へ向けて日記を公開)をもって真に必要なことのみを書いたからである。察しの良い方は気づいているだろうけど、WEB標準な構成をすることやHTML-lintで得点を出すことは目的・ゴールではない。むしろスタートラインといえる。そこから自分の脳内モデルに近づけていくことの方がよほど難しい。それらは概ねHTMLに書くことではない場合が多いからである。


writeback

  1. マス : このサンプルをもう少しだけいじってみた。
    いにしえの日記ツールみたいで、好きなんだけどなーこうゆうの。
    http://sug.blog2.fc2.com/?style2=hoge&index-26日22時
  2. sugar : sugさん、ありがとう。-26日22時
  3.  


< 美しいと同時になにかの恐怖を感じた | 香水椰子 > | 表紙へ戻る | 探す | 案内


ホームページ アフィリエイト レンタルサーバー FC2ブログ キャッシング