プロが教える店舗&オフィスのセキュリティ対策術

「CSS3 Design Book」 渡辺希久子 著 (ソーテック社)
という本を見ているんですが、
腑に落ちない点があります。

それはサンプル文書のタイトル文に
おそらくその文書そのものと思われる文書への
リンクが張られていることです。

例えば 119ページ

<h1><a href="http://www.samplesite/">Sample
Site Title</a></h1>

な感じです。

他の文書へのリンクを張る意味なら分かりますが、
自分自身へのリンクを張る意味がどこにあるんでしょうか?

A 回答 (4件)

「クリックミスを防ぐような作り方をする」というユーザビリティーがあります。



これは、「この情報が欲しいけれど、どこ(どの文字)をクリックするとそのページにたどり着けるだろうか」
という判断をしやすくする作り方です。

例えば。

<a href="map.html">地図を表示</a>
地図を表示するには<a href="map.html">ここ</a>をクリック

ブラウザで見てみると、概ねこのようになると思います。

----------------
地図を表示
地図を表示するにはここをクリック
----------------

下の表示になっている時に、「地図」の部分をクリックしても地図は表示されません。
これがクリックミス(またはカーソルの形が指の形に変わらないことを確認する手間)として、ユーザビリティーの低下と判断されます。


ロゴマークをクリックするとサイトトップに移動するという固定概念(通念)もありますし、
また、そういう作りになっているサイトも非常に多いです。
SEOとして意味は無くても、
ユーザビリティーとして「サイトトップに戻りたい」という人が、一発でサイトトップに戻れる仕組みを作っておく仕組みがあると便利です。
それがロゴマークやページタイトル、サイトタイトルなどからのリンクを作っておく方法で、
結果的に、<h1><a href="/">タイトル</a></h1>このような作り方になります。


該当の書籍がどのような作り方をされているのかわかりませんが、
テンプレートやSSI/CGIのインクルードを使用してサイト内ページの全てに同じように表示している場合は、
サイトトップからサイトトップへのリンクが貼られることも、しばしば起こりえます。
が、これはメンテナンスしやすくしているだけなので、それ自体に重要な意味はありません。
他のページでユーザビリティーの向上を狙っているのが本来の目的(意味)です。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

>SEOとして意味は無くても、
>ユーザビリティーとして「サイトトップに戻りたい」という人が、
>一発でサイトトップに戻れる仕組み

>結果的に、<h1><a href="/">タイトル</a></h1>このような作り方に

なるほど。

ユーザビリティーという観点を自分は
今まで重視してなかったかなあと反省・・・。

お礼日時:2012/06/05 18:16

H1からH6は、仕様上は見出し(heading)であって


『見出しの要素は、その章・節で述べられる話題を短く記すものである。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
です。h1は最上位の見出しですから通常はtitleと同じものになることが多いと思います。
 このリンク先に具体的な使用例が書かれています。<div class="section">についてひとつの見出しがあります。

 特に、HTML5では見出しのレベルは、<section>要素(や<header><footer><article>などセクショニングコンテンツ)にひとつずつh1~h6が入るべきと期待されています。見出しの階層はh1~6の数値ではなく、セクショニングコンテンツの階層で見出しレベルを判断します。

 それらを考慮すると、h1にその文書の見出しでないものを入れるのは変です。

 実際に、CSSや外部プログラムにて、目次番号を自動生成させる場合(CSS2のカウンター)に、Sample
Site Titleは、おかしなことになります。

 あまり、書籍を参考にしないほうが良いです。そもそも、正しい内容は仕様書に記載されているものですから、それを読めばわかるはず。仕様書を読んでない、理解していない人にしか本は書けない。・・・仕様書の存在(や内容)を知ってりゃ、本なんて書く必要ないです。無知だから恐れを知らずに書ける。(経験者)

 そもそもCSS3なんて、まだ確定すらしていないので、ベンダーフィックスが大変で使い物にならない。せいぜい適用されなくても影響がない程度の使い方しかできません。
 ウェブの世界、仕様書に『利用中のブラウザをユーザがアップグレードするのに比較的長い時間がかかるということは、 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )・・』と書かれているように、実際に新しい技術が普及するには、大変な時間がかかります。

『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 』と勧告(1999年12月)されて、十数年経つのにいまだにtransitinalやframesetのページが生産されている現状を見てもね、


 いまだにHTML4.01strictではなく、
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

>h1は最上位の見出しですから通常はtitleと同じものになることが多いと思います。

自分もそういう固定観念をもってました。

今回、ちょっと考えなおさないといけないなと
反省して、fc2ブログを見ていると
(カスタマイズ可能だからテンプレートにもよるが)

h1 が

サイトタイトル

h2 が

記事のタイトル

となってますね。

title は

サイトタイトル 記事のタイトル

となっています。
Googleで検索して出てくるのは

サイトタイトル 記事のタイトル

だからGoogleは title を見ているんでしょうね。

お礼日時:2012/06/05 18:08

その本は読んでいないと前置きさせていただきまして、



> 正しい理解は、
> サンプル文書(sample1.htmlとします)の
> h1はサイト・トップページ(index.htmlとします)
> のタイトルであって、
> サンプル文書(sample1.htmlとします)の
> タイトルでないということなのかな。

sample1.htmlのh1に書かれているのは、トップページのタイトルというより
サイト名だと想定すると自然ではないでしょうか。
サイト名(またはロゴ)は各ページにあるのが普通ですよね。

質問者様にはh1=ページタイトル、という固定観念があるように思います。
h1にはそこまで具体的な意味付けはありませんので、詳しくはググってみてください。

私であればこのケースではh1を使わずに<div id=title>とかで済ませますが、
著者の人はh1を好むのだと思います。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。


>サイト名(またはロゴ)は各ページにあるのが普通

>著者の人はh1を好むのだと思います。

そういうことなんですね。
だんだん納得がいってきた。

>h1=ページタイトル、という固定観念がある

と言われればそうですね。

トップページへのリンクは
p 要素のなかに書いておけばいいくらいに
考えていました。

お礼日時:2012/06/05 18:01

その本を読んだ訳ではありませんが、<h1></h1>をCSSでその「サイトのロゴ」画像を表示して


その画像をクリックした時にTOPページを表示するようにするためだと思います。

本来<h1></h1>は規約上そういう使い方はしない方が良いので、
しっかりとhtmlのタグの規約も勉強されて、CSSも勉強されると良いと思います。
    • good
    • 0
この回答へのお礼

コメントありがとうございました。

実は自分で考えて、
ちょっと分かってきました。

「その文書そのものと思われる文書へのリンク」
というのはわたしの誤解で、
正しい理解は、
サンプル文書(sample1.htmlとします)の
h1はサイト・トップページ(index.htmlとします)
のタイトルであって、
サンプル文書(sample1.htmlとします)の
タイトルでないということなのかな。

FC2ブログなんかでもそうなってます。

しかしsample1.html のh1に書くのはそのサンプル文書の
タイトルであるべきじゃないでしょうか
(今までずっとそういう理解でいた)。

SEO的にもどうなんですかね。

まだちょっと腑におちない。

それともWEBの仕組み全般へのわたしの理解が足りないんですかね・・・。

お礼日時:2012/06/05 03:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!