CSS・ブログ時代のblockquote活用方法

    後藤大地  [2008/08/18]

    HTMLの要素のひとつにblockquote要素がある。blockquote要素は引用文を掲載する場合に使われる要素で、視覚的には左右にインデントを作る効果がある。blockquote要素自身は登場以来変わっていないが、今後はもっと適切な使い方があるかもしれない。SitePointに掲載されているKevin Yank氏のBlockquote: Then and Nowにblockquote要素に関する興味深い話がまとめらている。

    同ドキュメントはまずblockquote要素に関する歴史的な状況遷移を説明している。当初は同じ視覚効果がありしかも文字数が短いという理由でblockquote要素の用途にdd要素が使われていたが、HTML規約に準拠するためにその用途ではdd要素ではなくblockquote要素が使われるようになったという。

    インデント機能かわりに使われたblockquote要素の例 - Blockquote: Then and Nowより抜粋

    より深いインデントを得るためにblockquote要素を入れ子にした記述が使われることもあったが、現在では記述を意味的に正しいものにすることの有益性への理解やCSSでデザインできる自由度の向上もあり、blockquote要素は本来の目的使われるようになったという。特にブログのようにほかのブログのドキュメントを引用することが多い現在では、blockquote要素は本来の使われ方をされているというわけだ。

    Kevin Yank氏はさらに、blockquote要素にcite属性を指定し、引用元ドキュメントのURIを記載することを薦めている。今のところblockquote要素のcite属性を視覚的に活用するWebブラウザは存在しない。しかしながら意味的にblockquote要素にcite属性を指定することは興味深く、今後のWebブラウザの対応や検索エンジンの対応で優れた活用が実現できる可能性もある。

    cite属性を使ったblockquoteの使用例 - Blockquote: Then and Nowより抜粋

    Cite-relの方法で記述した場合の例 - Blockquote: Then and Nowより抜粋

    同氏はさらに Cite-rel Draft Specification 2006–02–21を例にあげ、現状のままでも意味的な正しさを保ちながらリンクを表示するという視覚表示も持ち、検索エンジンにおいても効果のある記述ができることを説明している。cite属性についてはSitePoint CSS Reference説明があるので興味がある場合にはチェックしてみるといいだろう。

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン