回答:「マークアップに関する3つの質問」

マークアップに関する3つの質問というエントリーがあったので、回答してみます。
実はエントリーされた直後に見つけてたんですけど先延ばしにしてしまった…。

では答えていきます。

idとclassの使い分け方

Webtech Walkerさんとかなり考え方が似ているなぁ、といった印象です。
同じ事を言うことになると思うけれど、一応書きます。

「ID=ページ内単一の」という考え方はしていないです。
そう考える以前に、「ID=固有名詞」として捉えているので、自然とページ内で単一の物となります。

classについては、ニュアンスで申し訳ないですが、「まとまり」とか「同様の物」といった捉え方でいます。
IDと対を成す言い方をすれば、「class=一般名詞」かな?

例えば誰かの車を例に下記の文章を(無理矢理、XML気味に)マークアップしてみる。

田中歩解さん(埼玉県在住46才男性)の乗っている自動車、レクサス(LS 460 バージョンS Iパッケージ)のタイヤはとても汚れている。

XHTML?
  1. <div id="saitama-ken">
  2. <div id="hoge-tanaka" class="male" age="46">
  3. <div class="car">
  4. <div class="lexus-ls460-verS-I">
  5. <p class="tire">とても汚れている</p>
  6. <!-- /lexus --></div>
  7. <!-- /car --></div>
  8. <!-- /hoge-tanaka --></div>
  9. <!-- /saitama-ken --></div>

例題が悪い…。なんだこれ。
が、まぁこのような括りでだいたい統一しています。
埼玉県や田中さんの名前は固有名詞なのでID。
"自動車"や車名、"タイヤ"といったものは全て一般名詞なのでclass。
例え「個」を持つものだったとしても(この場合は「田中さんのタイヤ」)、同種のものが他に存在する若しくはし得る以上、classでマークアップします。

こう考えると、グローバルナビゲーションは<div id="glovalNavi">などとされることが多いですが、ナビゲーション類は通常複数存在し得るものなので、<div id="glovalNavi" class="navigation">としても良いと思う。
この場合ulやolへのlist-styleを操作するのに便利にはなるけれど、特段マークアップする必要性がなければ省略したほうが良いのかも。

Webtech Walkerさんの回答にページに1つしかでてこないからidという考えは、間違っている気がします。とあるけれど、特に「間違い」ということはなくて一つの指針として捉えてもいいのではないかなぁと思います。
サイト設計が混み合ってきたときや複数人でマークアップする際にある程度柔らかい指針は必要だと思うし。(だからといって適当にってわけじゃあないんですが)

ブログでサイトタイトルをマークアップするときの要素

トップページではサイトタイトルをH1。下層ページではページの大見出しをH1、としています。

ブログというものを考えると、それぞれのエントリーが一つのページとして成り立っているわけで、その記事のタイトル自体が本来の大見出しであるわけだから、当然記事タイトルがH1要素となります。

ブログの構成にも依るとは思うんですが、主にトップページというのはindexなわけで、表紙であると思うんです。
「そのページが何であるか」を現すのが大見出しの役割であると考えるので、トップページはサイトタイトルだけがH1要素となり得ます。

各エントリーにおけるH1要素も同じで、「そのページが何であるか」を端的に現すものだと考えます。
Webtech Walkerさんの仰るように全エントリーのH1要素をサイトタイトルにしたとすると、全エントリーで「このページは"サイトタイトル"である」と宣言しているようなものなのでは?と思ったり。
あれもこれも全部"サイトタイトル"と言われても、なんのことだかわからないですし、文書としての管理やアクセスが悪くなる気がします。

img要素のwidth属性とheight属性を指定するか

指定します。

そもそも設定しないメリットがわかりません。
レンダリングが速くなるから?そこらへんはちゃんとしたソースがないのでわかりませんが…。

あまり声を大にして言えるほどちゃんとした意見がまとまっているわけではないんですが、img要素における縦横サイズというのはちゃんとしたマークアップになっていると思うんです。
div要素とかそういったマークアップ用の存在の曖昧なタグのサイズと違って、imgというのはそれ自体がちゃんと物理的に存在し、それのサイズというものは重要な意味を持っていると思います。
これを元あるべきサイズからスタイルシートなどで変更するというのはナシだと考えています。

Webtech Walkerさんの「img要素のwidth属性とheight属性を指定しない」理由は以下のようです。

指定しないメリット

画像が表示されないときに、widthとheightを指定していた場合、指定したサイズからaltのテキストがはみ出すと、IEでは文字が切れて表示されます。

指定しないデメリット

長い文章の間に画像がいくつも含まれていた場合などに、img要素にwidthとheightを指定しておくと画像を読み込む前に表示領域を確保します。指定しなかった場合は画像を読み込むときに表示領域を確保するので文章を読んでいる途中で画像を読み込むと、読んでいた文章が下のほうにずるずるとずれていく可能性があります。

これらは指定しない理由になっていないように思います。

第一に、「画像が表示されない場合」なんていう前提がナンセンスです。そこにimg要素を設置しているのならば、画像は在って然るべきです。
もしユーザー側の設定で画像を表示しないようにしているのならば、それは制作者の意図をユーザーが無視したと考えて良いのでは。
画像というものはそのコンテンツに必要なものであるのでそれを拒否するという選択を取られた場合、制作者はどうしようもないと思います。
スペーサーや囲み画像のような前時代的な装飾要素として使われる画像であればそれも仕方ないとは思いますが、今回はそのような前提では書いていないです。

第二に、altテキストの表示エリアがIEにて小さくなるという点は問題にはならないかと思います。 IEではaltはツールチップで表示されます。FirefoxやOperaでは表示エリアは字数分だけになります。

やはり設定しないメリットと言えるほどのメリットがあまり思い当たりません。
強いて言えば、ページ数の多いサイトを構築・運営する際の管理のしやすさ、でしょうか。

どっちかというと、指摘されているページの読み込み中に起こる大幅な動きのほうがユーザーにとってはストレスではないかなぁと個人的には思います。

おわり

結構長くなってしまった。
とりあえずこんなところです。
生意気言ってますが、大目に見てやってください。

しかし、こういう設問は良いですね。改めて自分の考えをまとめる機会ができるので。

  • コメント(0)
  • トラックバック(0)
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。
08年1月にWeb制作会社を退職して、現在無職。色々考え中。

このサイトについて

RSS購読