[Σ]Sukarabe's Easy Living: 正しいHTMLとは

« 何と，はてなダイアリーにmimeTeXが | メイン | エルミタージュ展＠江戸東京博物館 »

2004年10月06日（水曜日）

正しいHTMLとは [ コンピュータ＆インターネット ]

同じように感じる人がいるんだなあ，と思うと少し安心する。特に，メニューの表示で / (Slash)などを区切りとして直接HTMLに記述することへの疑問など，共感をもって読んだ。

最初にHTMLを学んで，手でコーディングしてページを作り，ブラウザで表示させて遊んでいた頃に，メニューの書き方で相当に悩んだことがあった（笑）。

それは，論理構造と画面での表示を，どう両立するかということだった。あちこちのサイトを見ていて，ページ上方に，メニュー一覧が横並びになっているのが，すっきりして良いなと思った。そのソース・コードはどう書けば良いのだろうか。LaTeXの論理マークアップに慣れ親しんでいる身としては，当然次のような感じになる（適当）。

<div id="menu">
<ul>
<li>ホーム</li>
<li>内容A</li>
<li>内容B</li>
</ul>
</div>

これを横並びにして，しかも区切り記号を入れて，例えば，
[ホーム｜内容A｜内容B]
のように表示するには，スタイルシートをどう書けば良いのだろうか。いろんなサイトを見たのだが，HTMLソース自体に区切り記号が書いてあったりで，論理構造とスタイルが完全に分離されているものは，ほとんどなかった。

投稿者 sukarabe : 2004年10月06日 06:34

トラックバック

このエントリーのトラックバックURL:
http://njet.oops.jp/cgi/mt/mt-tb-alt.cgi/399

いつも拝見させて頂いております。どちらもIEでは動きませんが、W3C信者的にはこう書くべきでしょう。

方法1. 擬似クラスと擬似要素を使う

li { display: inline }
li:before { content: " / " }
li:first-chiled:before { content:"" }

方法2. 隣接セレクタを使う

li { display: inline }
li + li:before { content: " / " }

「100点ならいいのか」のサイトの「ていうかそもそも違うんじゃ?」の段落でli:afterをつかう例が出てますが、それだと
　ホーム / 内容A / 内容B /
となってしまい、最後に余計なスラッシュが一つ増えちゃうので厳密には×ですね。

でも僕もリンクページなんかではスラッシュをじかに書き込んでリスト要素は使ってません。IE対応してないんで。MSはCSS2対応する気あるんだろうか。CSS2完全対応のIEなんか出たら、MozillaもOperaもかなぐり捨ててMS信者になるんだけどなー。

投稿者 Kenichi Tani : 2004年10月06日 08:05

Kenichi Tani様
わざわざありがとうございます。before という指定があるんですね。しかし，IEでは動かないのでは困りますね。そういえば，以前，ポジションをabsoluteにして，メニューを固定しようとしたときも (Mozillaではきちんと固定されたのに）IEでは，ずるずるとスクロールしてしまいました。困ったものです(笑)。

投稿者 sukarabe : 2004年10月07日 20:07

コメントしてください

comment spam対策のため，名前とメールの入力が必須になっていますが，メールアドレスは公開されません。Web SiteのURLは任意です。Type Key IDをお持ちの方はType Keyをサイン・インしてくださってもいいです。