Home > P.054

P.054

  • Last Modified: 2009年3月12日 00:19

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 ( ZIP アーカイブには解説文は含まれていません。)

解説 (1)

先ほどのソースの 2007 年 1 月 9 日の部分を書き換えて、次のようにしてみましょう。

XHTML

<div class="section">
  <h3 id="pr-20070109">2007-01-09 - 業務再開のお知らせ</h3>
  <p>新オフィスにて業務を再開しました。新しいお問い合わせ先、および新オフィスへのアクセスは、<a href="info/map.html">マップページ</a>をご覧ください。</p>
</div>

解説 (2)

このようなソースの場合でも、他の文書(あるいは同一文書のナビゲーション部分など)からフラグメント参照を行う場合、同様に「合同会社 LH3 Studio - プレスリリース」というタイトルの文書の全体をレンダリングした後、「 2007-01-09 - 業務再開のお知らせ」という見出し の部分がちょうど画面上に現れるように自動的に調節して表示します。

これらは同じような挙動ですので、 「フラグメント参照された際に、該当部分が画面上にちょうど現れるようになる要素に id 属性を指定すればいい」 と思ってしまいがちです。 しかし、もし 「フラグメント参照がなされたリンクをレンダリングする場合は、その参照がなされた部分のみレンダリングする」 という UA 、あるいはそうしたオプション機能が登場したらどうでしょうか?

書籍上には書いていませんが、書籍刊行にあわせて短期集中連載を行った連載:実践Web Standards Designのススメ|gihyo.jp ... 技術評論社という特集の中で、第6回 CSS3のセレクタを使用してみようという記事を公開しました。

その記事中にて、 :target 擬似クラスを用いた Yellow Fade Technique の手法を紹介しています。 その手法を、このページの XHTML ソースに活用したサンプルを作りました。 2-3-13-2.html を :target 擬似クラスに対応したブラウザ (CSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧を参照 ) で表示し、 h3 に id を指定したリンクおよび div.section に id を指定したリンクをそれぞれクリックしてみてください。 「フラグメント参照がなされたリンクをレンダリングする場合は、その参照がなされた部分のみレンダリングする」とは少々異なりますが、「フラグメント参照がなされたリンクをレンダリングする場合は、その参照がなされた部分を強調してレンダリングする」というイメージが掴めると思います。

CSS

div.section div.section {
  margin: 15em 1em; /* フラグメント参照が分かりやすいように、上下のマージンを大きくとる */
  padding: 0 10px;
  border: 1px dotted red;
}

h3 {
  margin: 0;
  padding: 0 10px;
  border: 1px dotted red;
}

*:target {
  background: #ffdb47 url(fade.gif) 0 0 repeat; /* フラグメント参照された際は fade.gif (アニメーション GIF )を表示し、アニメーション表示が終わった際に改めて background-color で #ffdb47 の背景色を表示する */
}

Download

Home > P.054

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top