Harukiya Archives

--/--/--

category / スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2006/07/09

category / HTML

いかにも息切れネタ切れな、苦しさすら感じるタイトルである。以前もちょっとふれたIE独自拡張のexpression()を使いつつ、広い範囲で読むことのできるWEBページをデザインしてみよう。

レイアウトにはそれぞれ利点欠点があり、ワンカラムにも当然それはあります。例えば<body>要素直下の<div id="main">というブロックをリキッドレイアウトし、かつ800px以上には広がらないようにスタイリングするには

  1. div#main { width: auto; max-width: 800px; }

のようにしますね。しかし、IEでもmax-widthを取り入れてくれないかなぁ……と、えっけんさんもこぼしてるように、IEはmax-widthを理解しません。これにはsvendtofte.com - max-width in Internet Explorerに解決案がくわしく書かれおり

  1. div#main {
  2. width: auto; max-width: 800px;
  3. width: expression( document.body.clientWidth > 800? "800px" : "auto" );
  4. /* widthの値には、body幅が800px以上なら800pxが、それ以外ならばautoが入る */
  5. }

と、することでモダンブラウザとIEで同じような効果が出せます。

ですが、独自拡張をすべてのブラウザが読むCSSに記述しておくのは標準の観点からあまりよろしくない。そこで主CSSからexpression()部分を切り取り、IE用のCSSを別に作成して条件付きコメントでリンクします。

IE専用CSS

  1. div#main {
  2. width: auto;
  3. width: expression( document.body.clientWidth > 800? "800px" : "auto" );
  4. }

HTML <head>要素内

  1. <!-- 以下、IE以外のブラウザからはコメントとして扱われる -->
  2. <!--[if IE]>
  3. <link rel="stylesheet" type="text/css" href="http://hoge.fc2.com/file/ie.css" media="screen, tv" />
  4. <![endif]-->

現実にはexpression()はjavascriptが有効になっていないと使えないシロモノなので、スクリプトで代替しておくことも可能です。こちらは条件コンパイルを使って主jsファイルに直接記述できます。

javascript

  1. /* IEのみに適用されるコード */
  2. /*@cc_on @*/
  3. /*@if ( @_jscript ) {
  4.  if ( document.getElementById && document.getElementById( "main" ) ) {
  5.   var main_width = document.getElementById( "main" ).style.width;
  6.   main_width = ( document.body.clientWidth > 800 )? 800px : auto;
  7.  }
  8. }
  9. /*@end @*/
  10. /* 以下、 モダンブラウザ・IE共に適用されるコード */
  11. ・・・

これでHTML内には、主CSSファイルと主jsファイルがひとつずつリンクされた形になり管理が楽です。

これ以外にも「そりゃちょっとなー」と思うような裏技であっても、組み込み方を工夫すればWEB標準を保てる場合は多い。というか、(拡張ばかりに力を入れず)IEがしゃんとしてくれれば一番いいと思う。

リンク

スポンサーサイト

writeback

  1. 有希之武 : どうも勝手に別次元の記事を書いてしまった有希之武です(^^;
    実は以前から、expressionが有るならまぁ~IEも良いかぁ~と
    思っていたら、sugさんのこの記事でスクリプトなんだと理解。
    自分もmax-widthとか使いたい時が以前あって、IEが対応していない事に
    「オイオイ」って愚痴ってましたが(笑)
    それでなにげにボーッと記事を眺めていたら、あれ?
    なんでW3Cは独自タグとか昔使っていたタグを使えないようにしたのかな?と
    果てなく疑問に思い早朝と言うのも忘れて目をこすりながら記事を書いた訳です。
    決してsugさんを落とし穴に入れるとか、捕獲編みで確保するとか言う意味じゃないのでw-10日16時
  2. マス : 記事を読ませていただきました。

    HRなんかでも突如委員長が「××はいけないと思います」とか言い出して、場をしらけさせるものです^^。世の中、正論だけが通用するものでもないし「今までコレで問題なくやってきたのに、どーしていけないんだ」という意見が普通です。

    ま、今回はひとり祭りということでWEB標準を表に出してますけど、順法精神からというよりは、W3Cの指標に従った方が”自分であれこれ考えたり調べたりしなくていいから楽”という部分が大きいのは内緒ですが。

    以前書いたことですけど、世の(例えば視覚系)UAが何種類あるのか知りませんし、それぞれにどんな利点またはバグがあるのかを調べる時間も僕にはありません。そこで、ある規格に従ってWEBページを作り、(たまに)機械的にチェックするという手段をとってます。

    UAのメーカーやボランティアグループ側も、どんな人間が何を書くか解らない状態では仕事ができませんから、ある規格で書かれることを想定してプログラムを組むと考えられます。そのルール(標準規格)をW3Cが策定しています。共通のルールがあるということは、それに関わる皆が楽(というと語弊が・・・高効率?)になるのですね(例えばcharsetを最初に指定することで大半の文字化けが防げるとか)。

    これがWEB標準という指標がある理由です。次に問題となるのは”そのルールは妥当かどうか?”でしょうが、この辺は過渡期な感もありますし、今後もヴァージョンアップされるでしょうから”とりあえず今あるルールに従う”で良いと思っています(できることから少しずつ)。有希之武さんの”縦書き圏の人たちには、「縦書き」が普通”と言われるのも、もっともな意見だと思いますし必要性が高まれば取り入れられる可能性もあります。

    いつになるか待てない、読者を選んでも良い、と考えるならpdfやword文章、Flash(昔、縦書き掲示板というのを見たことがある)画像化^^などのフォーマットを使うことも視野に入れ使い分けるのも良いと思います(私事ですが「軽さ軽さ」言うならプレーンテキストこそ最強、の気持ちはゆるぎません)。でも、「とにかく小説の中身こそ読んで欲しい。誰でも気軽にアクセスできるようにしたい。目の不自由な人にも伝えたい」と考えるならHTMLで文章を作ることをお勧めます。HTMLの最大の利点は互換性にあります。

    僕と有希之武さんと意見の食い違う部分は以下です。

    >今論争されているのは、「使う側」を重要視する、言わば「プロレベル」のWEB標準であり、
    >見る側、デザインする側の利便性を考えた「標準」とは違うのではと最近感じられます。

    WEB標準は、あくまでも読者ユーザ(と受信ソフトウエア側)のためのもので、製作者よりではないと考えます。有希之武さんの記事でいうなら、製作者が縦書きで見せたいという希望よりも、読者が縦書きで読みたいという希望を重視するもの、といえます。

    さて、でもIEならHTMLであっても縦書きな表示ができます。これが独自拡張なのですが、順法精神に則ったある集団には(その理由だけで)忌み嫌われます。そこで上のTipsを書いたわけですが「独自拡張はなにがなんでもダメ」ではなく、むしろ「こう裏をかいて使え!」(ルサンチマン的)な意味合いの記事です。そう読み取れないとしたら、それは僕の文章の稚拙がゆえでしょう(爆)。もじらにも独自拡張で枠線を丸めるというのがあり、前回のテンプレでは(裏をかいて)使っていましたし「これ、標準になるといいなぁ」とも思ってます。

    もうひとつ、CSS関連の未実装の件については「これくらいは何とかしろよIE」というのが僕の考えです。もしも、IEとモダンブラウザで同様な表示にしようと考えたら(ジツリキの低い方に合わせるということですから)CSSの旨みの、ある部分は捨てなければならない。僕はやってませんが。高性能(というか標準な)ブラウザでは綺麗に見え、低性能なブラウザでもそれなりに、が信条です。その上で「自分が勧めるブラウザはこれです」とリンクを張っています。FirefoxとIEで色々なWEBページ見比べてみて、それでもIEの方が良いというユーザがいてもよいと思います。

    最初に戻って、視覚系UAが何種類あるのかどんな仕様なのか調べられない以上、同デザインにする努力をするよりは、複数のスタイルシートを提供する(どれかは当るかもしれない)、ユーザシートの使い方を説明する、スタイルを切る(パージ)方法を考えるというのが、僕の今の方針です。

    ――すべては楽するために。 2006-7-10-10日21時
  3. 有希之武 : 詳しい説明ありがとうです。
    自分では中々判らない部分(調べないからだけどw)色々とうなずける事が多々あり感謝致します(^ー^)
    確かにどのブラウザでも見られるようにする為にはね最低限ので治めると言うのは判りますね。
    高機能にする為には、全てのブラウザが同じエンジンを使う必要も出てくるでしょうし。
    作る側にしても指針となるモノが存在するだけで、作業の軽減に繋がるとすれば、意義もうなずけます。
    私の場合は、凝ったデザインが趣味みたいなものなので、多様性を欲するのでしょうね。
    そう考えると、IEが最低限の対応を怠っていると言えますね。
    まぁ~私の場合は、どんなブラウザでも良いので、WEB標準ブラウザをみんなが使えばなんの問題も無いのですが(^^;-11日00時
  4. まいまい@Web標準にアプローチ : はじめまして。おはようございます。
    Yahoo!のブログ検索からやってきました。
    Web標準に興味がありましてね。

    <!--[if IE]>

    これ、ずっと疑問に思っていた記述でした。
    コメントだし、いったい何なのだろうと思っていたんです。
    やっとわかって、スッキリです。

    とっても内容のある記事ですね。
    私は、Web標準にフォーカスを当てたブログをつづっています。
    よろしければ、覗いてみてくださいませ<(_ _)>
    http://plaza.rakuten.co.jp/oyadomymy/

    ※この記事、プリントアウトしてお持ち帰りさせていただきます♪
    -11日06時
  5. マス : いらっしゃいませ、有希之武さん。
    >自分では中々判らない部分(調べないからだけどw)色々とうなずける事が多々あり
    いえ、僕もきちんと調べるより、自分なりの解釈派なので自信のない部分もあったり。ただ、構造と見映えの分離が柱ですから「なぜそうするのだろう」や「どうやればいいだろう」と考えること意識することで良い方向にむかっていくのじゃないかと思います。

    はじめまして、まいまいさん。サイトを拝見させていただきました。
    >これ、ずっと疑問に思っていた記述でした。
    条件付コメントはHTML内のどこにでも使えます。
    <!--[if IE]>
    <p>あなたのブラウザはインターネットエクスプローラーですね?</p>
    <![endif]-->
    なんてことも・・・それが何になるんだー!とかは(/ ̄▽ ̄)/オイトイテ...ト

    WEB標準が注目されてきた背景には、ブログの台頭というのがありますね。うちも500件の記事^^を抱えてます。CSSを使っていなかったら(物理タグで装飾してたら)模様替えなど絶対にやる気が起きない。
    僕はCSS寄り(?)な人間です。自分の好きなようにスタイルシートを書くために今後もWEB標準を心がけます。

    >この記事、プリントアウトしてお持ち帰りさせていただきます♪
    ×御幣 → ○語弊 に朱いれといてください(爆)-11日21時
  6.  


< Light | サッカーの話でも書いてみようか > | 表紙へ戻る | 探す | 案内


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。