「CSS3 Design Book」 渡辺希久子 著 (ソーテック社)
という本を見ているんですが、
腑に落ちない点があります。
それはサンプル文書のタイトル文に
おそらくその文書そのものと思われる文書への
リンクが張られていることです。
例えば 119ページ
<h1><a href="http://www.samplesite/">Sample
Site Title</a></h1>
な感じです。
他の文書へのリンクを張る意味なら分かりますが、
自分自身へのリンクを張る意味がどこにあるんでしょうか?
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
「クリックミスを防ぐような作り方をする」というユーザビリティーがあります。
これは、「この情報が欲しいけれど、どこ(どの文字)をクリックするとそのページにたどり着けるだろうか」
という判断をしやすくする作り方です。
例えば。
<a href="map.html">地図を表示</a>
地図を表示するには<a href="map.html">ここ</a>をクリック
ブラウザで見てみると、概ねこのようになると思います。
----------------
地図を表示
地図を表示するにはここをクリック
----------------
下の表示になっている時に、「地図」の部分をクリックしても地図は表示されません。
これがクリックミス(またはカーソルの形が指の形に変わらないことを確認する手間)として、ユーザビリティーの低下と判断されます。
ロゴマークをクリックするとサイトトップに移動するという固定概念(通念)もありますし、
また、そういう作りになっているサイトも非常に多いです。
SEOとして意味は無くても、
ユーザビリティーとして「サイトトップに戻りたい」という人が、一発でサイトトップに戻れる仕組みを作っておく仕組みがあると便利です。
それがロゴマークやページタイトル、サイトタイトルなどからのリンクを作っておく方法で、
結果的に、<h1><a href="/">タイトル</a></h1>このような作り方になります。
該当の書籍がどのような作り方をされているのかわかりませんが、
テンプレートやSSI/CGIのインクルードを使用してサイト内ページの全てに同じように表示している場合は、
サイトトップからサイトトップへのリンクが貼られることも、しばしば起こりえます。
が、これはメンテナンスしやすくしているだけなので、それ自体に重要な意味はありません。
他のページでユーザビリティーの向上を狙っているのが本来の目的(意味)です。
ご回答ありがとうございます。
>SEOとして意味は無くても、
>ユーザビリティーとして「サイトトップに戻りたい」という人が、
>一発でサイトトップに戻れる仕組み
>結果的に、<h1><a href="/">タイトル</a></h1>このような作り方に
なるほど。
ユーザビリティーという観点を自分は
今まで重視してなかったかなあと反省・・・。
No.3
- 回答日時:
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ではなく、
ご回答ありがとうございます。
>h1は最上位の見出しですから通常はtitleと同じものになることが多いと思います。
自分もそういう固定観念をもってました。
今回、ちょっと考えなおさないといけないなと
反省して、fc2ブログを見ていると
(カスタマイズ可能だからテンプレートにもよるが)
h1 が
サイトタイトル
h2 が
記事のタイトル
となってますね。
title は
サイトタイトル 記事のタイトル
となっています。
Googleで検索して出てくるのは
サイトタイトル 記事のタイトル
だからGoogleは title を見ているんでしょうね。
No.2
- 回答日時:
その本は読んでいないと前置きさせていただきまして、
> 正しい理解は、
> サンプル文書(sample1.htmlとします)の
> h1はサイト・トップページ(index.htmlとします)
> のタイトルであって、
> サンプル文書(sample1.htmlとします)の
> タイトルでないということなのかな。
sample1.htmlのh1に書かれているのは、トップページのタイトルというより
サイト名だと想定すると自然ではないでしょうか。
サイト名(またはロゴ)は各ページにあるのが普通ですよね。
質問者様にはh1=ページタイトル、という固定観念があるように思います。
h1にはそこまで具体的な意味付けはありませんので、詳しくはググってみてください。
私であればこのケースではh1を使わずに<div id=title>とかで済ませますが、
著者の人はh1を好むのだと思います。
ご回答ありがとうございます。
>サイト名(またはロゴ)は各ページにあるのが普通
>著者の人はh1を好むのだと思います。
そういうことなんですね。
だんだん納得がいってきた。
>h1=ページタイトル、という固定観念がある
と言われればそうですね。
トップページへのリンクは
p 要素のなかに書いておけばいいくらいに
考えていました。
No.1
- 回答日時:
その本を読んだ訳ではありませんが、<h1></h1>をCSSでその「サイトのロゴ」画像を表示して
その画像をクリックした時にTOPページを表示するようにするためだと思います。
本来<h1></h1>は規約上そういう使い方はしない方が良いので、
しっかりとhtmlのタグの規約も勉強されて、CSSも勉強されると良いと思います。
コメントありがとうございました。
実は自分で考えて、
ちょっと分かってきました。
「その文書そのものと思われる文書へのリンク」
というのはわたしの誤解で、
正しい理解は、
サンプル文書(sample1.htmlとします)の
h1はサイト・トップページ(index.htmlとします)
のタイトルであって、
サンプル文書(sample1.htmlとします)の
タイトルでないということなのかな。
FC2ブログなんかでもそうなってます。
しかしsample1.html のh1に書くのはそのサンプル文書の
タイトルであるべきじゃないでしょうか
(今までずっとそういう理解でいた)。
SEO的にもどうなんですかね。
まだちょっと腑におちない。
それともWEBの仕組み全般へのわたしの理解が足りないんですかね・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- 数学 『この文を〇○○』 1 2022/11/07 00:16
- その他(SNS・コミュニケーションサービス) ハッシュタグを使って文章を作る女の心理 2 2023/03/09 12:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- 中学校 作文のテーマってこれで大丈夫でしょうか 3 2022/07/01 10:15
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- 日本語 一家言という熟語は、現在もよく使われていますか? 4 2023/02/15 12:28
- 中学校 中2、宿題の意味がわからないです。 4 2022/08/13 13:42
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- 日本語 高1古文1学期で本当に死亡してます。助けてください。 【範囲】古典文法(写真) 【つまり始め】(写真 4 2023/08/01 13:52
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSで、contentsがfooterに重な...
-
AWSのhtml
-
携帯サイト、ナノでのタグ編集...
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
<section>タグと<div>タグ
-
複数のボタンを等間隔に、かつ...
-
オシャレな区切り線はありませ...
-
リストで画像を右に表示したい
-
音声ブラウザ、スクリーンリー...
-
3カラムレイアウトで「常に残り...
-
idとclassの指定方法
-
HTMLでのコメントアウト
-
CSSレイアウト IEでclear指定...
-
RMS レフトナビ問題
-
div要素が重なってします
-
ホームページ初心者です。入力...
-
【ヒトの神秘】美男美女から何...
-
CSSでつくったメニューのアニメ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報