クライアントさんの関係から、頻繁に注釈に※を使うことがありますが、普通にテキストで入れるとインデントもかからず、あんまり美しくないです。
このことは前々から気にはなっていたんだけど、ついつい見逃してきました。
が、今日は時間があったので今後はキチンとしようと、CSSを検証してみました。
こんな感じ。
list-style-typeでの指定の場合はそれほど難しいことはないのですが、前述した※のようにW3C準拠ではないものを扱う場合には、text-indentを使ってやれば上手くいきます。ただし、マージンの取り方がブラウザ毎に微妙にちがうみたいなので、微調整が必要でちょっと面倒。
もっといい方法があれば、教えてもらえると喜びます。
IE6以前のバージョンでは<a>タグに対してpositionで位置指定を行うと、<a>タグにdisplay:blockを与えていてもテキストの部分しかクリックできなくなる問題があります。
これがバグなのか仕様なのか、よくわかりませんが、このためサンプルのように打ち出しエリアの上に<a>タグをpositionで配置し、text-indentで画像置換(テキストを隠しす)するとまったくクリックできなくなります。
HTMLはシンプルだし、どうしてクリックできないんだろう？ってことになりますが、解決方法は全然簡単で、<a>タグの背景に透過GIFをはるだけでOKです。
簡単な問題ゆえに、どつぼにハマるパターンなのでメモ書き程度に残しておきます。
ちなみに<a>タグを<div>でラップして、<div>にpositionを与えても同じ症状がでるので、IEでは<a>を位置指定するには注意が必要なようです。
コーポレートサイトを制作する場合に「HTMLを極力標準化する。」という点にいつも気をつけてます。
ここで言う標準化は、別にW3Cとかそういうのじゃなく、コンテンツ間のHTMLの差異を極力少なくする。つまり、サイト内でのHTMLの標準化です。
サンプルの場合、見ての通りbodyタグのid。つまり、aboutやproductといった名前を変えるだけで、ナビゲージョンのアクティブ化やレイアウトを調整できるようになっています。
(今回のサンプルでは、とりあえずナビゲーションの制御のみを実装)
こうした構成にしたときの最大のメリットは、やはり一括置換が効くことです。
CMSなどのシステム的なバックアップがない場合、テキストエディターなどで一括置換をするわけですが、この場合置換の対象となるソースはできるだけ同一であることが望ましい。
それなのにナビゲーションのアクティブ化のためだけに、クラスを入れてしまったりすると、その時点で一括置換はアウトになってしまう。
(正規化等を使えば、可能なのかもしれませんが…)
そういうことで、bodyにIDを振るのはとっても便利、というお話でした。
※もちろん、もっと大規模なサイトになった場合、CSS自体をコンテンツごとに切り替える、ということになるのでしょうけど。