hamashun.com

ブログにコードを貼り付ける方法で悩むの巻
pre要素へのスタイル指定
Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
ソースを貼付ける50の方法
pre 要素のスタイル定義とマークアップ

Blogにコードを貼り付ける際のアレコレが、あちこちで話題に上っています。
これまでに余り情報を見つけられなかったので、とても参考になりました
折角なので、僕もひとつ書いてみたいと思います。

mixi内の記事で申し訳無いのですけど、Webデザインコミュニティ内のタグ・用語 何て読んでます？？というトピックが中々に面白いです。
これはhrefとかpngとか、人によって読み方が違いそうな単語の、自己流の読み方を晒すトピックなのです。

僕もトピ内で一度書いてるのですけど、今日はマイナーなタグも探して、まとめ直してみようと思います。

• Class名とID名の命名規則(1)
• Class名とID名の命名規則(2)

前回のエントリでは、IDやClass名に使用する文字について書きました。
今回は、主にID名に関する内容です。

Youtubeを簡単にBlogに貼り付ける方法として、ページ中央カラム上部のEmbed内のソースを貼り付けるという方法があります。
しかしこのソースには<embed>タグが使用されているので、XHtmlではNot Validなマークアップになってしまいます。

これを回避する方法はいくつかあると思うんですけど、今回はJavaScriptを使って安易に解決してみたいと思います。

text-indentや他の方法でテキストを追いやって、代わりに画像を配置するテクニック、いわゆる画像置換やFIRと呼ばれるテクニックがあります。
これは音声ブラウザにおいても情報が読み上げられる事から、高いアクセシビリティを持つテクニックとされています。
主にナビゲーションなどで利用されていますが、最近では徐々に使われなくなってきているとか。
恐らくその理由は、CSSが有効で画像がオフの場合に、何も表示されないという点からだと思います。
まあ、そんな環境がどれだけあるのかは分かりませんけれど。

今回は、極力アクセシビリティを高めつつも、それなりにデザインを保てる方法をご紹介します。

文字実体参照の中に、&nbsp;という物があります。 使用すると半角スペースと同量の間隔を空けます。
これまでは何も考えずに半角スペースの代わりであると認識していたのですが、ではどういった時に使うのかという事を知りませんでした。

CSS Nite Vol.18の懇親会で行われたiwaimさんのプレゼンで、headerの部分は本当にidでいいの？という問いかけがありました。
多分、多くの人が行っているclassとidの使い分けは、複数回登場するかしないかだと思うんですけど、それはどうやら間違った基準なようです。

仕様書は？

そもそも、仕様書の定義としては、二つの違いはどうなっているのでしょうか。

id = name [CS]
この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。
class = cdata-list [CS]
この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

The global structure of an HTML document (ja)（HTML 4.01 仕様書邦訳）には、このようにあります（英語版は本人が読めないから勘弁な！）。
また、次のようにも書いてあります。

一方のclass属性は、ある要素について1つ以上のクラス名を割り当て、この要素が当該クラス/クラス群に属することが示され得る。

つまり、idは一意な名前を付ける場合に使います。
classがちょっとややこしい書き方（仕様書ってどうして解りにくい書き方なんだろう！）なんですけど、2つめの引用部分を見ると（そしてiwaimさんのプレゼンを見ると）、要素を分類する為に使える属性である事が解ります。

一意の名前と要素の分類。 これがclassとidの違いのようです。
わかりやすい例としてiwaimさんのスライドにも引用されていた、徳保 隆夫さんのTips/WebPage/class と id の違いとは？より引用します。

あなたの家で飼っている犬を、より細かな分類で雑種犬と呼ぶか、唯一無二の名前でポチと呼ぶか、そういう違いなのです。

あー、なるほど。 っていう感じです。
コーダーはclassでShunはid。 スターバックスはclassでスターバックスラテはid。 そういう事なようです。

となるとheaderは？

そう言われると、headerはclassな気がしてきます。 て言うか、そうなるとcontainerやmainColumnもclassになるような雰囲気です。
文書ツリーで親要素っぽい物にはidを振りがちですけど、むしろそれは逆なのではと。

header
│
│
├───h1
│
│
├───description
│
│
└───nav
　　　　├Home
　　　　├Blog
　　　　└Link

mainColumn
│
│
（略）

こんなツリーがあった場合には、「headerという分類に属するh1」とか、「headerに属するnavに属するBlog」という感じになるのかな。
つまり、idはこまかーい所まで突き詰めた名前で、classは大雑把な部分での名前とでも言いますか。

あ。 今ちょっと解りやすい例を思いついたかも。
classという袋の中に、idという品物が入っているみたいな？
これをheaderという袋の中に、h1やdescriptionなど各コンテンツという品物が入っていると置き換えれば･･････ほら！

ただしその他の点では？

ここまでは文書としてのclassとidの使い分けを考えてみました。
でも、特にidは文書としてだけではなく、プログラムで操作する時やアンカーを貼る時にもよく使います。
そうなると、headerにページ内リンクを貼る時にはちょっと困った事になります。

まあでも、idにせんが為に文書を変えたりするのは本末転倒だと思いますし、この辺りはアンカー用としてheaderにclassとidの両方を指定しても問題無いんじゃないかな、と思います。

ちなみに、Shunさんの職場ではidはプログラマの物。 classはコーダーの物。という区分けになっています。 これは業務を円滑にする為の判断なようです。
ただ、昨日のちょっとしたMTGでは「言ってくれれば状況によっては対応するよ」という話もありましたし、これが絶対という訳ではないようです。

まとめ

という訳で、一意の要素にはidを、グループ化する要素にはclassを。
更にWebサイトの機能として必要な部分にはidを、というのが一つの答えかな、と思いました。

おまけ

でもま、headerにidが間違いかと言うと、必ずしもそうとは言えないかと思います。
文書によっては一意かグループ化か、判断が難しい（人によって異なる）事もあるかと思いますし（例えば、ニュース記事での『東京都渋谷区に住む男性（無職 38才）』や『バールのような物』など、その記事内では一意な気もするけど、視野を広げるとグループとも取れる）。

実際の業務でどこまで追求するのか、という話もありますね。
経営側からすると、「どっちでも良いから早く仕事しる」って感じかもしれませんし。

あちこちで話題になってる、rusicaさんの正しくHTMLを書こうと心がけている人に5つの質問に答えてみます。
100問とかだと読むのも大変ですけど、5問だと簡潔で嬉しいですね！

HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む）

何度か記事にもしているez-htmlです。
外部exe呼び出し機能が激しく便利です。 ブラウザ遠隔更新ラブ。

採用しているDTDとその理由をお答えください。

このサイトはXHTML 1.0 Strictで、仕事だとXHTML 1.0 Transitionalです。
このサイトがStrictな理由は、当初の目的が就職活動の為だったので、現実的でありながら技術を見せられると判断したStrictにしました。
その役目は無事終えたので、そろそろXHTML 1.1でリニューアルしたいかも。

何故正しくHTMLを書いているのですか？

うーん、そういえば何でだろう･･････。
最初は「スゴーイ」って言われたいからだったかも。
実際は「キモーイ」って言われる事が多かったです。

W3CとWHATWG、どちらに期待してますか？

英語力とか何それおいしいの？ って感じなので、海の向こうの状況はよく分かりません。
でも、どっちでもいいので統一して欲しいとは思ってます（仕様戦争とかまっぴらごめん！）。

あなたにとってHTMLとは何ですか？

誤解を恐れずに言うと、遊び道具です。
更に誤解を恐れずに言うと、毎日遊んで暮らせて超ハッピーです。