Liner Note

情報(ユーザー中心デザイン・ユーザビリティ)と技術(ウェブプログラミング・ウェブサービス)についてのメモ書き

要約:シンプルなマークアップを元に各ブラウザの実装レベルに応じて、様々なスタイリングをしていく方が楽だし、いろんな閲覧者が幸せになれるんじゃないかなと思った次第

全てのブラウザで同じに見える必要はないというのは前から何度か言われていることですが、もう少し具体的な文脈に落として考えてみようかな。

例えば、引用文を引用文ぽくスタイリングしたいとする、こんな感じに。

引用のイメージ例

で、とりあえずGoogle先生で調べてから頭を回してみるわけですが、

たいていは、幅固定だったり、blockquoteタグの中で使えるタグの種類や数が限られていたり、不自然な空要素があったりするわけです。要するにIE6などの後方互換性対策ですよね。こういうのは引用だけではなく、いろんなCSSスタイリングの方法論で見られます。

で、これはストリクタの戯言と言うのではなくて、なんだかスタイリングのために変な制限をかけたり、不自然なマークアップをしたりするのが、どうも機械の都合に併せて人間が動いているように思えて釈然としない気持ちになるのですね。

ちなみに私ならこう書きます。

CSSソースコード
blockquote{
  width: 70%;
  background: white url("blockquote_mark_end.png") right bottom no-repeat;
  padding: 15px;
  margin: 15px;
}
 
blockquote > *:first-child{
  background: transparent url("blockquote_mark_start.png") left top no-repeat;
}
 
blockquote p.citation{
  text-align: right;
}

これで以下のすっきりとしたコードでも、きちんとスタイリングできます(引用符のサイズが大きいため、今回は p.citation に背景画像はつけませんでした)

HTMLソースコード
<blockquote>
<dl>
<dt>引用タイトル</dt>
<dd><p>あのイーハトーヴォのすきとおった風、<br />
夏でも底に冷たさをもつ青いそら、<br />
うつくしい森で飾られたモリーオ市、<br />
郊外のぎらぎらひかる草の波。 </p></dd>
</dl>
<p class="citation"><cite>宮沢賢治氏の小説より</cite></p>
</blockquote>
引用タイトル

あのイーハトーヴォのすきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。

宮沢賢治氏の小説より

しかし、WinIE6はfirst-child擬似要素に対応していませんので、以下のように補正CSSを追加します。これでWinIE6は点線で囲まれた感じで引用を表現することになります。

CSSソースコード
blockquote{
  background: white none;
  border: 1px dotted gray;
}

このように必ずしも全てのブラウザに同じスタイリングを提供する必要はないだろうし、むしろCSSの実装レベルに応じて(実装レベルが低いものはそれなりに、高いものはそれを活かして)積極的に見せ方を変えていってもよいのではないでしょうか。

既にこのサイトはWinIE6の実装レベルやバグも考慮して(文章の読解に影響を与えない程度で)、スタイリングをWinIE6とそれ以外で区別するようにしてきました。

空要素を意識して作ったり、妙な制限に縛られたりするよりも、実装レベルに応じたスタイリングをする方が後方互換性に必要以上に引きづられることもないですし、何より楽だと思うのですがどうですかね。

You can write a document as simple as you like.
In many ways, the simpler the better.

Tim Berners-Lee

はてなブックマークでの反応に対するお答え

ブラウザに応じてとか基本的に邪魔にしか思えないからなあ。ま、どっちみち一部の受け手は発信側のページのソースをザクザクに切り刻んでスクラップにしてブラウジングするけどね。

id:imo758さんのブックマーク

邪魔にしか思えないというのはどうしてですかね。やはり違うブラウザで見たときに違う見た目になって、そのたびに考えないといけないからでしょうか。であるならば、ちょくちょくブラウザを変えて同じサイトをみることってほとんど無いですし、大きく操作に影響するほどでなければよいと思っているのですが、どうでしょう。

blockquoteの中にタイトルとか.citationとか、メタ情報を入れるのはinvalidな気がするんだ。dlで整形してるのもアウトだと思う。

id:vantguardeさんのブックマーク

本筋とは別の話ではあるんですがコメント、議論参照先はこのへん。

blockquote内は引用内容のみ入れるべきで、メタ情報は入れるべきではないと言うことですかね。私はこれについては議論はあって賛否両論あるけれども、少なくともXHTML仕様的にはinvalidではないと思っていたんですが。どっちかというと言語文法的にinvalidということですかね。それならわかります(引用タイトルを混ぜたのは確かにまずかったと思います)

UAが対応してくれるのなら、できればblockquote要素のcite属性およびtitle属性のみですませるのが一番良いのですが、それは現状できませんので(かといって、javascriptを動員するのは大げさな気がしますし)

リテラシの低いお客さんはそれだと納得してくれません。/ 分からない人はどんな説明しても分からないからなぁ / ブラウザによって見た目変えるのはいいけど、個人的にはその辺どうすんの?とか思った。

id:rusicaさんのブックマーク

仕事だったら、jQueryとかのjavascriptライブラリを使ってでも、無理矢理同じ見た目にすると思います。ただ、仕事以外ならあんまり取りたくない面倒くさい手なので、今回は修正CSS使って対処しとこうよという風に書いたのです。

プロの人はたいへんだ。

id:ageha0さんのブックマーク

いちいち修正CSS書いたりするんだったら、ちょっとぐらい変なマークアップするよ的な意見(だと読み取ったんですが)も想定してました。僕はちょっと修正CSSを書いた方が変なマークアップ繰り返すより楽かなと思ったんですよね。まぁ、提案であって押しつける気はないんでまた機会があったら考えてみてください。

言及されました、クロスブラウザ対応は運営者が楽な方法で、なるべく多くの環境に適応できるといいですね ::: creazy photographという記事もあわせてどうぞ。

キーワード:

似たもの記事

読者の皆さんの反応サイト内コメントの更新情報(RSSフィード)

読者のコメント

0

ブックマークコメント

13

他サイトの関連記事

1

読者のコメント

コメントはまだ寄せられていません

はてなブックマークでつけられたコメント

webmarksjpさんのプロフィール画像  webmarksjp
CSS
hiro_yさんのプロフィール画像  hiro_y
ブラウザのCSS実装レベルに合わせて見た目が変わってもいいんじゃない、という意見。
Rewishさんのプロフィール画像  Rewish
スタイルを統一する方が社内ノウハウの共有は楽 / でも結局はクライアント次第なのかな
m-_-mさんのプロフィール画像  m-_-m
“UAが対応してくれるのなら、できればblockquote要素の” UA先行の考え。
マークアップするときはUAなんて全て忘れろ!! 心を無にするのじゃ!!/http://d.hatena.ne.jp/m-_-m/20080107/1199707807
jamgさんのプロフィール画像  jamg
プロの人は大変だ。
/何かひっかかるんだけど、明文化出来ない。
rusicaさんのプロフィール画像  rusica
リテラシの低いお客さんはそれだと納得してくれません。
/ 分からない人はどんな説明しても分からないからなぁ / ブラウザによって見た目変えるのはいいけど、個人的にはその辺どうすんの?とか思った。
ageha0さんのプロフィール画像  ageha0
プロの人はたいへんだ。
imo758さんのプロフィール画像  imo758
ブラウザに応じてとか基本的に邪魔にしか思えないからなあ。
ま、どっちみち一部の受け手は発信側のページのソースをザクザクに切り刻んでスクラップにしてブラウジングするけどね。
simsonsさんのプロフィール画像  simsons
必ずしも全てのブラウザに同じスタイリングを提供する必要はないだろうし、むしろCSSの実装レベルに応じて積極的に見せ方を変えていってもよいのではないでしょうか
vantguardeさんのプロフィール画像  vantguarde
blockquoteの中にタイトルとか.citationとか、引用以外の情報を入れるのはinvalidな気がするんだ。
dlで整形してるのもアウトだと思う。
webmugiさんのプロフィール画像  webmugi
 IEでは効かない,けど効かなくても支障がないなら,あえてハックはしない,というのはときどきします。
tailtameさんのプロフィール画像  tailtame
うん
love210さんのプロフィール画像  love210
blockquote

他サイトの関連記事

  1. ウェブサイト

    creazy photograph

    投稿日時
    2008年06月09日
    2時ごろ
    Comment No
    #1

    クロスブラウザ対応は運営者が楽な方法で、なるべく多くの環境に適応できるといいですね

    もう寝ようと思ったんですが、せっかくリンクしていただいたので自分の考えを書いて…


トラックバックとは
この記事に言及したサイトをこちらに掲載する仕組みをトラックバックと言います。ここでは、このサイトに頂いたトラックバックを一覧表示しています。
トラックバックしてくださる方へ
この記事への言及がない記事など、トラックバック受信方針に沿っていないものは、読者にお見せしても仕方ないこともあり削除させていただいることをご了承ください。
トラックバックを受け取るためのURI