Category sw.

だいたい決まった構造の HTML を書くようになってきたので、俺の場合を紹介してみる。body 以下を書く。

  1. body
    1. (div#all)
      1. h1#top
        1. a
      2. div.section#navigation
        1. h2
        2. (p#skip-to-main-content)
          1. a
        3. map
          1. ul
            1. li#navigation-home
              1. a
            2. 以下似たようなのが続く
      3. div.section#content
        1. div.section
          1. h2
          2. 内容
        2. 以下似たような(ry
      4. div.section#footer
        1. address

おおむね上のような感じ。っていうか ol, li で書くとすげぇ大変なんですが!!

これはもちろん現実的にこうなっただけであって、いろんな妥協に溢れている。

body 直下の div#all なんてもちろんいらない要素だけど、実際問題 CSS 書くときに、これがあるだけで、クロスブラウザ用の無駄にややこしいハックを減らせるので、安全になる。幅も広がる。

div#navigation map なんて、パっと見変な風に見えないかもしれないけど、ぶっちゃけた話、こじつけられた div 要素みたいなもの。意味的には問題ないので、使ってみると結構便利。ただし display: block を書かないとハマるときがある。こいつには一枚多く背景に画像突っ込めるわけだ。あと実は p#skip-to-main-content も、アクセシビリティの配慮とか、そういうの関係なく、あると便利な要素の一つ。サイトによっては書かなかったり (そもそもナヴィゲーションがないとか) するけど。

できるだけ意味をこじつけて、div じゃない要素を使おうとしているだけ。いろいろ置換してけば div 厨になるんです。なんでもいいけど、悪いのは微妙な仕様の CSS と、その CSS に対応してない IE なんですよ!! 俺は悪くない! 放せ!

  1. トップ
  2. sw
  3. 俺的 XHTML 構造
  1. トップ
  2. web
  3. 俺的 XHTML 構造
  1. トップ
  2. csS
  3. 俺的 XHTML 構造

上のセクションに続き (とはいえ書いたのはこっちが先だ。つまり、まだ今「上のセクション」はない) 割と理想的な XHTML の姿と、CSS 2.0 の本来の姿。 True Power of CSS

body 直下に h1 を置き、サイト名やら、文書タイトルを書き直すのはバカらしい。既に title 要素を書いているのだから、それを利用すべき。これで hn の数字が全体的に一個減る。

本当はフッタ情報 (書いた人やら、連絡先やら) も body 内に書くものじゃない気がする (どっちかといえばメタデータなはず) けど、とりあえず仕方ないので address 要素置いてる。CSS からリンクは作れないし、フッタっぽく表示させるのは困難。

  1. トップ
  2. web
  3. CSS 本来の力・XHTML のあるべき姿
  1. トップ
  2. sw
  3. CSS 本来の力・XHTML のあるべき姿

icho にデフォルトで搭載される予定らしい MetadataManipulator について。

とりあえず基本的に icho に依存しないので自分のサイトで実験することにする。Javascript 入れていれば左上になんか出てるはず。たぶん。

どこまで決めうちしていいか考え中なので、いまのところ MetadataManipulator 自体はソース生成しかやってない。ピョコピョコさせたり、CSS 的に欲しい要素を補完するのも外側。

link 要素の出現順に何も考えずにソース生成すると CSS が適用しずらいのでいくつか MetadataManipulator の外側で修正してある。内側に入れるか悩む。入れるんだろうけどどうやって入れるか悩む。

  1. あんまり役に立たない。next, prev はいいけど……
  2. in-page heading が役に立ちそうだけどうまいことナビゲーション生成するのがめんどい。汎用性云々。ながったらしいし。h2 だけ抽出とかにすればいいのか。
  3. 実装が定まらない。クラスっぽくするかモジュールっぽくするか。
  4. マルチリンガルじゃない。"in-page heading" っていう文字列を埋め込んでる。"ja-jp,ja;q=0.8,en-us;q=0.5,en;q=0.3" とかいう文字列を優先順位高い順に配列に突っ込む関数は書いたけど、どの時点で実行するか迷う。
  5. あんまりときめかない。

# IECSS の問題があるけど本質じゃないのでとりあえず放置

var mmul = document.getElementById("MetadataManipulator-Local-RelatedLinks-Dd").childNodes[0];
var fill = function (linkName) {
var ret = getElementsByClassName("MetadataManipulator-" + linkName, "li", mmul);
if (ret.length < 1) {
ret = document.createElement("li");
ret.className = "MetadataManipulator-" + linkName;
ret.appendChild(document.createTextNode(linkName));
} else {
ret = ret[0].parentNode.removeChild(ret[0]);
}
return ret;
}
// 順番を保証・これ以外の rel は copyright の次以降に。
var standard_link_rel = ["start", "prev", "next", "contents", "index", "glossary", "help", "copyright"];
var links = {};
standard_link_rel.each (function (i) {
links[i] = fill(i);
});
standard_link_rel.eachWithIndex (function (i, index) {
mmul.insertBefore(links[i], mmul.childNodes[0+index]);
});
with (mmul.parentNode) {
style.left = "-201px";
if (document.all && document.attachEvent) mmul.parentNode.addEventListener    = document_addEventListener;
addEventListener("mouseover", function (e) {
style.left = "0px";
}, true);
addEventListener("mouseout", function (e) {
style.left = "-201px";
}, true);
}

ながったらしい CSS との組み合わせです。see base.css

  1. トップ
  2. sw
  3. MetadataManipulator
  1. トップ
  2. web
  3. MetadataManipulator