HTML の見出しをめぐる議論
先週は数日にわたって頭痛がひどくて、意識的に電脳から距離を取るようにしていたんですが、この周辺の話題については、色々な意見が出ていて楽しく拝見してました。
ただ、ひとつ気になったのは、思った以上に多くの方々が、現有の...ないし自分の周辺で目にするモデルの枠内だけで仕様書の内容を捉えてしまっているところ。
| 固定リンク | コメント (2) | トラックバック (2)
2007-07-11
2007-06-03
Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?
Kuruma さんが、先日の XHTML+CSS (r)evolution, 3nd に対する、とっても良いレポートと論評をアップしていて、参加者された方には是非とも一読をオススメしたいのですが、いくつか気づいた点がでてきたので蛇足気味ではありますが、一応、書き留めておきます。
| 固定リンク | コメント (2) | トラックバック (1)
2007-05-30
論理構造を文脈に読み換えながら class 名を考える
最近、一部で話題に上がっている POSH にも、"Use good semantic-class-names" という実践項目がありますが、今日はその class 名のつけ方について、最近、思い至ったことから。
POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational.
基本的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。（ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。）
例によって、あくまで試案であり、選択肢です。（というか、そもそも僕自身が試行錯誤の最中。）是非や取捨は各自でご判断ください。
関連リソース
- Naming conventions table（And all that Malarkey）
- Web Authoring Statistics: Classes（Google Code）
- コード共有のためのネーミングルール（我的春秋）
| 固定リンク | コメント (9) | トラックバック (0)
2007-05-28
定義リストの違和感（続）
前回の続きです。
念のため DTD を見直してたら（チェックしたのは HTML 4.01 Strict の DTD）、なんか激しく不安をかき立てられるような記述が..。
| 固定リンク | コメント (0) | トラックバック (0)
2007-05-26
定義リストの違和感
実は前々から定義リストの記述モデルって、どうにも気持ち悪いなと感じてます。
他所さまであまり突っ込んでいるのを見かけないので、僕の知識不足か誤解から来ているのかな..と、ずっと口にするのを避けてたんですが、HTML WG が発足して、HTML のモデルに関する議論が（少なくとも欧米では）盛んになってきていることもあるので、恥をかくのを覚悟で、書き留めておきます。
何かご存知の方は、是非、ご教示を。
| 固定リンク | コメント (8) | トラックバック (0)
2007-04-30
hr要素は改名して、インライン要素とするのが活路かも
なんだか br要素の話が賑やかなようなので便乗。(^ ^;)
- ここで改行ったら改行（カナかな団首領の自転車置き場）
- br 要素（カナかな団首領の自転車置き場）
- 私はbr要素が好きじゃない（der Gegenwart）
- br要素は好きじゃない（sky line blog）
- br 要素問題は CSS2.1 で解決か!?
どちらかというと現行規格ではなく、次世代規格の話になるので、少なくとも批判とかじゃありません。平たくいえば「br, hr 要素を論理セパレータとして見なすとこんな感じかな？」「その特性を活かすなら、仕様をこう変えた方がいい気がする」的な話です。
ちょっと小難しそうな感じがする方は、前置きはスルーして、ユースケースとサンプルコードだけ眺めてもらって、まったく支障ありません。っていうか、次世代規格の話だし、需要自体もそんなにたくさんあるようなネタでもないし、いっそ、全部まるごとスルーしてもいいかも。(笑)
構造本位か見栄え本位かは文脈や用法次第
まず <br/>, <hr/>, <seperator/>要素が構造か見栄えかの問題ですが、結論だけいってしまえば、僕はこれは文脈や用法次第だと思います。どちらにもなりうる、と。たとえば、「第3章の4段落目」と「56ページの16行目」は、それぞれ対象が文章にあるのか、書籍媒体にあるのかの違いがあるだけで、両方とも構造を示してますよね。もちろん、ホワイトスペースの調整のための見栄え本位な改行だってありえるでしょうし。
（そういえば、大学で編集の雑用をしていた時分、テキストファイルや Word 文書の行末に、ご丁寧にも毎行、改行を入れてくれる人が後を絶たなかったのを思い出しました。(^ ^;) ）
<br/>, <hr/>, <seperator/>要素の特性
ちなみに、これらの要素だからこそできる、構造化や意味づけの用法として、どんなものがあるかなんですが、鍵となるのは、おそらく空要素タグという性質になるかと思います。
ならば、空要素タグの性質とは何か？
真っ先に思い浮かぶのは、それは構造を持てない（＝子孫や内容を持てない）という性質。この性質は一般に空要素タグの短所や限界として捉えられることが多いんですけど、実は裏を返せば、ツリー構造（もしくは入れ子構造）を成していなければならないという、SGML or XML系マークアップ言語の制約に影響される部分が少なくなることも意味しています。
この辺に絡むこととして、表題のようなことを前々から考えてたので、ちょっとまとめてみました。動機が上掲の議論とは別のところからきているので、はたして参考に値するかどうかはわかりませんけど。
| 固定リンク | コメント (1) | トラックバック (0)
2007-04-10
Re: 正しくHTMLを書こうと心がけている人に5つの質問
Rusica さん＠der Gegenwart の正しくHTMLを書こうと心がけている人に5つの質問に何となく反応してみました。
- HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む）
- 採用しているDTDとその理由をお答えください。
- 何故正しくHTMLを書いているのですか？
- W3CとWHATWG、どちらに期待してますか？
- あなたにとってHTMLとは何ですか？
- テキストエディタ追記: （状況に応じて、割と節操なく変えてます。Windows: EmEditor, Crescent Eve | MacOS X: skEdit, JEditX, Smultron, Carbon Emacs+PSGML, mi | IDE: Aptana, Oxygen）, Web Developer（Firefox 拡張）, Total Validator（Firefox 拡張）, Firebug（Firefox 拡張）, 追記: Copy URL+（Firefox 拡張）
- 普段は XHTML 1.0 Strict。ただし、状況に応じて XHTML 1.1 や XHTML 1.0 Transitional, HTML 4.01 Transitional を選択することもあります。追記: 前方後方どちらの規格にも対応しやすい Strict を軸に、使用要素や更新作業者が誰になるかといった種々の条件によって、最適なものを選択。
- 第一にメンテナンス性と分業効率のため。第二に機械処理のしやすさ（されやすさ）のため。
- どちらも。というか、相乗効果を期待してます。追記: 特に要素にするか属性にするかをめぐる議論（time 要素と datetime 属性 etc.）とか。
- Web 文書フォーマットの現実的な落としどころ。
| 固定リンク | コメント (2) | トラックバック (0)
2007-03-09
なぜ XHTML で 5W1H のマークアップなのか？
ちょっと思い立って、5W1H の XHTML マークアップの手段について、少しずつ整理してみることにしました。理由や意義については、また別エントリーを立てるとして...
というわけで、理由と意義、あと注意点などについて、ちょっと書き留めておこうと思います。
| 固定リンク | コメント (0) | トラックバック (0)
2007-03-07
When? を軸にした Webアプリケーションモデル
| 比較項目 | カレンダー型 | 年表型 |
|---|---|---|
| 事例 | ||
| 特性 |
|
|
| 固定リンク | コメント (0) | トラックバック (0)
5W1H のマークアップ 1: When（日時）
ちょっと思い立って、5W1H の XHTML マークアップの手段について、少しずつ整理してみることにしました。
理由や意義については、また別エントリーを立てるとして、とりあえず今日のところは、When?（いつ？）...つまり、日時のマークアップ手段から。
| 固定リンク | コメント (0) | トラックバック (0)
2007-02-08
link 要素をナビゲーションに利用することの注意点（改訂）
［2007-02-08 18:00: 内容を増訂しました。］
パンくずリストがベストとは限らない（WWW WATCH）で、link 要素を使ってページ間を関連づけるという方法が解説されています。本文でも指摘されているように、ブラウザの実装上の問題で、現実的にはナビゲーションとしては使えませんけど、セマンティックウェブという観点で見れば、むしろパンくずリストなどよりも、よほど重要な要素には違いないので、僕も興味深く拝見させていただきました。（「参考までに」で済ませてしまうのは、ちょっともったいないくらい。）
- 実装面について
- 機能として標準実装されている Opera に加え、Firefox 向けの可視化 Tips が FirefoxでOperaのようなlink要素を表示させる「Mozeraナビ=叢ナビ」 (インターネット帳面)と、link 要素を可視化してみる（double-team.org）で紹介されています。
ただ一点だけ気になったのは、「本来パンくずリストのようなナビゲーションは link 要素として記述するのがマークアップ的には自然だったりします」という一文です。（「ページ間の関係を示す」のには link 要素の方が良いという点はまったく同感ですが、パンくずリストの目的自体が、そもそも「ページ間の関係を示す」ことではなく、"サイト構造全体の中における現在位置の提示" にあるのではないでしょうか？）ブラウザの実装面から現実的な選択肢とはなりえないことを差し引いても、少なくとも現時点では、僕個人は、パンくずリストと link 要素は完全に切り離した方がいいように思います。おもな理由は以下の通り。
| 固定リンク | コメント (0) | トラックバック (0)
2007-02-06
パンくずリストのマークアップ
ちょっと前に パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種（CSS HappyLife）というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は（も？）(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。（気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。）
| 固定リンク | コメント (4) | トラックバック (1)
2007-01-31
配色管理用の CSS をモジュール化する
今日は再現性の高いスタイル（プロパティの集合）ごとに、CSS セレクタをグループ化して管理する事例として、ちょっと前から制作中のサイトで実践している、配色管理の方法を紹介してみようと思います。（とっくに似たようなことを実践されている方も、きっといらっしゃると思います。お気づきの点があれば、細かいことでもご教示・ご指摘いただけましたら幸いです。）
（なんだか、CSS が主題のエントリーって、随分、久しぶりのような気がする..。）
配色管理モジュールの作成方法
- 色に関するスタイルをすべて、この配色管理モジュールに集約する。
- 別出した color.css は、@import で上位 CSS ファイル（もしくは HTML ファイル）から読み込ませるようにする。
- セレクタは、同一スタイルごとにグループ化する。（注意: CSS セレクタ、グループ化の落とし穴）
- セレクタは、浅い階層の一般的なものを先に、深い階層の特殊なものを後に、一意なものを最後に記述する。（上書き予防）
- 階層の深さがすぐに把握できるように、セレクタは冗長に表記する。
- IE 6- 用のスタイルを別途定義しない場合は、子セレクタ・隣接セレクタ・属性セレクタなどは使わず、子孫セレクタで構造を記述する。
ブランディングのためのスタイルガイド、もしくは Color glossary などと考え方が若干似ていますが、要は色に関する設定だけをモジュール化して、独自の CSS ファイルに別出します。
- ［参考］Color glossary
| 固定リンク | コメント (4) | トラックバック (0)
2007-01-26
コード共有のためのネーミングルール
最近、CSS の使いまわしなどを視野に入れ、一部で class名や id名の共有というテーマへの関心が徐々に高まりつつあるような印象です。microformats なんかも、その流れのひとつといえるでしょう。
- Naming conventions table（And all that Malarkey）
- もう、class名やid名で悩まないんだからっ！！（CSS HappyLife）
- (X)HTML の id/class における命名規則（purprin さん CSS Flight プレゼンスライド）
名前の共有はコードの共有のための（複数人で同一コードを編集・転用する）重要なファクターのひとつですし、非常にいい傾向だとは思うんですけど、実際につけられている名前を見てみると、シブい顔をせざるを得ない事例が結構あるようです。
| 固定リンク | コメント (4) | トラックバック (3)
2007-01-23
(X)HTML, XML のコメント記述位置
コメントの記述位置について以下のようなエントリーを目にしましたが、目から鱗です。というか、未熟にも今まで気づきませんでした。(- -;;ゞ
コメントは、対象となる要素の中に記述すべし
デザイナさんにより書き方はいろいろあるかもしれないが、
<!-- hoge start --> <div id="hoge"> // 中身 </div> <!-- hoge end -->こうじゃなくて、
こうしてほしい。
<div id="hoge"> // 中身 <!-- /hoge --> </div>divの中に終了を示すコメント入れなくてどーする！（構造を考えてみれば分かることですよね？）
コレ、論理構造の妥当性の面もそうですが、内部構造を、XSLT やら DOM やらで操作する時に、決定的な違いが出てきますよね。
| 固定リンク | コメント (3) | トラックバック (0)
2007-01-09
WebKit が CSS 3 box-shadow に対応
WebKit のナイトリービルドが box-shadow プロパティ（-webkit-box-shadow）に対応してます。これはうれしい実装情報ですね。ほかのブラウザでも、こうやって角丸やドロップシャドウに、だんだん画像を使わなくても良いようになってくると良いのですが。
WebKit とは？
要するに Safari のベースになっている Cocoa ベースのブラウザコンポーネントです。
サンプル
WebKit CSS 3 box-shadow Example
WebKit での CSS 3 box-shadow プロパティは、-webkit-box-shadow: [右方向の影の長さ] [下方向の影の長さ] [ぼかし半径] [色]; で指定します。たとえば -webkit-box-shadow: 2px 2px 2px #666; のような具合です。
W3C のドラフトでは、カンマ区切りで複数の光源によるドロップシャドウ効果も想定しているようですが、WebKit では、今のところそこまでは対応していないようです。ただ -webkit-border-radius と組み合わせれば、ボックスに角丸＋ドロップシャドウ効果を同時につけることができます。
WebKit での表示状態
| 固定リンク | コメント (0) | トラックバック (0)
2006-12-14
CMS の見出しレベルに悩む
（追記: タイトルをより内容に合うように変更しました。本文も若干修正しましたが、内容に関わる変更はありません。）
最近、CSS よりも、関心が XHTML に傾きがちな管理人です。(^ ^;) 今日は、目下、裏でせっせと制作中の MovableType サイトのコーディングからのネタです。
このココログもそうですけど、ブログツールを含む何らかの CMS を使っていると、「幾つめの見出しレベルからスタートしたらいいんだ？」、「別のサービスから引っ越したら、見出しレベルが１つズレちゃった」、「文書構造をカスタマイズしたので、これまでの見出し要素のレベルを調整しないといけないよな..」。そんなことで困った経験とか、過去にありませんか？
| 固定リンク | コメント (0) | トラックバック (0)
2006-12-09
タグクラウドのマークアップ
最近 巡回しているサイトで、ちょっと面白いエントリーがあったので、紹介がてら、自分でも考えてみようかと。
Marking Up a Tag Cloud （24 Ways）
del.icio.us, Flickr, Technorati の (X)HTML ソースを比較しながら、タグクラウドの適切なマークアップについて考察しているエントリーです。といっても、著者の Mark Norman Francis は、これらにいきなりダメ出しをしています。いわく、「問題は、みんな間違っていることだ」（The problem is, everyone's doing it wrong.
）と。
| 固定リンク | コメント (0) | トラックバック (1)
2006-11-27
abbr は本来 機械のための要素 —マークアップは誰（何）のためのものか？
さきの２つのエントリーと関連して。
abbr を使わずに直書きするのが最善？
ANOTHER PIECES（id:xcezx さん）の「abbr 要素 その2」というエントリーで、次のようなご指摘をいただきました。（id:xcezx さん、ありがとうございます。個人的にこういう前向きな批判や議論は大歓迎です！）
「CSSを処理しないテキストブラウザや音声読み上げブラウザでは、やはり略語のフルスペルは表示されないよね。」というのがユーザビリティ的な観点から、満点をあげられない理由。
ユーザビリティを考えるなら、小賢しいテクニックなど使わずに、"XHTML (eXtensible HyperText Markup Language)" とかした方がよっぽどいい気がする。
結論からいえば、この指摘は大変ごもっともで、括弧でくくってベタ打ちテキストを直書きするのが、一般的には最善の策といえます。（一応、「略語に振り回される今日この頃」の方で選択肢として挙げたつもりではあるんですけど..。(^ ^;) ）
abbr要素 + title属性よりも直書きの方がアクセシビリティ的に良い理由には、id:xcezx さんが指摘されているテキストブラウザ上で表示されないことに加え、 IE 6- が abbr 要素に非対応なこともあります。
ただ、もしこれに「音声ブラウザ」（スクリーンリーダー）での「ユーザビリティ」を加えるとなると、話は少し変わってきます。
| 固定リンク | コメント (0) | トラックバック (0)
2006-11-26
abbr の title 値を CSS でポップアップ
非対応ブラウザ: 
4.x
4.x折角、caramel*vanila の lomo さんが、前のエントリー（略語に振り回される今日この頃）にフォローアップして下さったこともあるので、僕の方でもちょっとだけ＋αをつけてみます。
略語に対してつける <abbr> 要素には、その原語なり原表記なりを title 属性の値に記述するのが普通です。モダンブラウザのデフォルト設定なら、<abbr> で括られた個所にマウスを乗せると、title 属性の値がツールチップの形で表示されます。
でも、ツールチップでは文字が小さくて見にくいですし、またマウスを乗せない限りは、何の略語であるのかが、結局わからないままです。そこで、その title 属性値（つまり原語）を CSS だけを使ってWebページ上に表示してみましょう。
| 固定リンク | コメント (4) | トラックバック (1)
2006-11-10
Web 標準志向 XHTML / CSS リファレンスのための５つの改善要素
今日は、ちょっと逃避で、大分前の書きかけ（未公開）エントリーを引っ張り出してきてみました。ちょっとここ数日、落ち着かなくて..。
最近、つくづくよく思うのは、"Web 標準コーダーのための XHTML / CSS リファレンス" みたいな感じの、携帯に便利でコンパクトなリファレンスブックが欲しいなということです。今でもたくさんの HTML / CSS リファレンスは出版されているわけですが、イマイチしっくり来るモノがないというのが実感です。ぶっちゃけ、既製品には、ユーザビリティ的に色々と顔をしかめたくなる点が多くて..。従来品との相違点でいえば、大体、次の５つのポイントに集約できるかと思います。
| 固定リンク | コメント (0) | トラックバック (0)
2006-10-21
SyntaxHighlighter: ソース表示用ライブラリ
対応ブラウザ: 6+ 
1.0+ 
8.5+ 
2.0+ 
3.4+
6+ 1.0+ 8.5+ 2.0+ 3.4+(X)HTML や CSS などのソースコードの表示に、Mochikit にもバンドルされている、SyntaxHighlighter を試用してみました。設置も利用も比較的 お手軽で、MT や WordPress といった CMS を利用している方の選択肢になるかも。（参考: MochiKit: 軽量 JavaScript ライブラリ）
入手先
SyntaxHighlighter の特徴
長所
- ソースコードを文法にしたがって色分けできるので、とても見やすい
- 行数が表示されるので、話題にしているコードの場所を示しやすい
- ソースコードをそのままコピペできる
- ベタ打ちのソースコードを <textarea class="code"> で括るだけなのでラク
- HTML/XML タグのエスケープが原則必要ない
- JavaScript を切っていても、ソースコード自体はアクセシブル
短所
- Perl, Lisp に対応していない
- 必要なページごとに指定された内容の script タグを、HTML 文書の末尾に毎度毎度 挿入しなくてはならないのが、若干 煩瑣（仕方ないといえば、仕方ないけど。）
- 言語ごとに js ファイルが分かれていて、その都度、必要なものだけ関連づける必要がある
（かといって、最初からすべての js ファイルを、すべてのページ末に貼り付けるのは、あまりに芸がない）
（もちろん上記の短所は、JavaScript を使いこなせる方なら、ある程度はハックして解決できるでしょうけど..。）
| 固定リンク | コメント (0) | トラックバック (0)
2006-10-17
CSS 3 は Konqueror がアツイ！
（CSS 3 の最新情報を扱った CSS3.info が、各種モダンブラウザにおける、CSS 1〜3 セレクタ対応状況のテスト結果を報告しています。テストケースは全部で 578 にも及び、IE 6, IE 7, Firefox 1.0, Firefox 1.5, Opera 8.5, Opera 9, Safari 2.0, Safari ナイトリーテスト版（r16925）, Konqueror 3.5 が対象。JavaScript で動作する testsuiteは、Lucky bag::blog でも取り上げられていた、先日 公開されたものが利用されています。（ただし :hover, :active, :focus, :selection といったダイナミック擬似クラスはテストの対象外。）
主要な最新ブラウザが軒並み 350±7/578 の範囲内で対応しているのに対し、IE 7 が 330 と出遅れているのがわかりますが、それより驚くべきは（ 6項目の小さなバグを残すものの）Konqueror 3.5 が 570/578 ものテストをクリアし、すべてのセレクタに対応していることです。（Konqueror は K-Desktop Environment（KDE）が conqueror = 征服者 に掛けてつけた名前で、"コンカラー" と読みます。）
| 固定リンク | コメント (0) | トラックバック (1)
2006-10-14
CSS Nite LP, Disk 1 レポート（その３）
イベントからもう５日も経って、旬も過ぎているのにも関わらず、いまだダラダラと一方的に勝手な意見を並べ立ててますが、CSS Nite LP, Disk 1のレポートも、これで本当にラストです。(^_^;;)
| 固定リンク | コメント (0) | トラックバック (1)
2006-10-13
CSS Nite LP, Disk 1 レポート（その２）
遅くなってすみません。CSS Nite LP, Disk 1 のレポート、続編です。
後半はアクシデントで順番が入れ替わった境祐司さん、Opera CSO の Charles McCathieNevile さん、そして矢野りんさんのお三方。ただ、境さんのプレゼンのレポートも長くなっちゃったので、これもちょっと分けます。それにしても、前半のお三方も含め、実際、本当に豪華なメンバーですよね。(^ ^;)
| 固定リンク | コメント (2) | トラックバック (1)
2006-10-11
CSS Nite LP, Disk 1 レポート（その１）
CSS Nite LP Disk 1 に行ってきました。
Web 関係でこのテのイベントに出席するのは初めてですが、さすがに花形業界だけあって、参加者も多くて、皆さん関心が高いですね。（ただ、個人的な印象としては、参加者の皆さん、質疑応答の時とか、少々大人しすぎるような気も..。(^ ^;)）少し遅れての入場になってしまったんですが、トップバッターの境さんがトラブルで遅れて来られるとのことで、入場したときには Mozilla Japan の瀧田さんがプレゼンをされてました。以下、発表順に僕の個人的な感想を残しておきます。
| 固定リンク | コメント (4) | トラックバック (0)
2006-10-07
HTML エディタとしての Carbon Emacs
Dreamweaver などがまだ Intel Mac に対応していないこともあって、目下、色々なエディタを試用しながら、自分に合ったモノを探しています。ポイントは以下の通り。
- Intel Mac + Tiger でも動作すること
- UTF-8 の読み書きに対応
- GREP（正規表現検索や置換）ができること
- シンプルな UI
- 軽量・軽快なこと
- 要素・属性・属性値・コメントなどの色分け機能
- 要素名・属性名・属性値などのコンプリーション（補完）機能
- 閉じタグのコンプリーション（補完）機能
- DTD, RelaxNG, XML Schema などからのパーシングができること
- もしくは文法チェック（validation）がエディタ内でできること
最後の２点は欲を言えば..といったレベルの希望なんですけど、それでもいくつか候補は上がってます。そのうちの一つが今回 取り上げる Carbon Emacs（+ PSGML）です。
| 固定リンク | コメント (7) | トラックバック (2)
2006-05-25
CSS だけでポップアップヘルプ
対応ブラウザ: 1.5 8, 9 2.0
（動作未確認の環境が多いので暫定。動作報告歓迎。(^ ^;)）
1.5 8, 9 2.0 （動作未確認の環境が多いので暫定。動作報告歓迎。(^ ^;)）
最近、Ajax や JavaScript ネタが多かったので、今日は CSS ネタで。
ネタの出処は、O'Reilly の "Cascading Style Sheets: The Definitive Guide" などでもお馴染みの Eric A. Meyer が運営している下位サイトのひとつ: CSS/edge から。テーマは CSS だけでポップアップを作成（"Pure CSS popup"）すること。ちなみに Eric Meyer は、W3C の CSS の test suite の作成を手掛けてたりもする Web 標準側の人ですが、このサイトでは、（Web 標準には違いないけれども）ブラウザでの実装や普及もまだまだこれからという、もっとも先端（あるいは異端）な CSS テクニックを積極的に紹介しています。とても興味深い記事が多いですが、当然、運用法を誤ると、アクセシビリティ的に問題が生じることがあるので注意が必要です。
今回ここでは、この Eric Meyer のエントリーをちょっとアレンジして、インラインテキストのポップアップヘルプを作成してみます。今日はサンプルとソースをいっぺんに出してしまいましょう。以下の CSS ソースの点線で囲われた部分の上にマウスカーソルを乗せると、Firefox (Gecko 系ブラウザ)、Opera、Safari ならポップアップヘルプが現れるはずです。
HTML
<p>このあたりは段落内の本文です。<span class="term"><dfn>用語</dfn><span class="annotation">（このあたりは用語に対する注釈です。）</span></span>このあたりは段落内の本文です。</p>
CSS
span.term:hover（マウスが乗った時のポップアップなので、まず term クラスを持つ span 要素（span.term）全体に対して:hover ダイナミック疑似クラスを適用する。） span.annotation（次いで、あらかじめ display: none; を適用している、span.term の子孫要素の span.annotation を display: block; で可視化させる。） {
display: block;
width: 320px;
position: absolute;（position を絶対位置指定にして、span.annotation をレイヤー化させる。必要に応じて z-index でレイヤーの順序を調整する。）
left: -4em;
bottom: 5em;
background: #eeddaa;
}width: 320px;
position: absolute;（position を絶対位置指定にして、span.annotation をレイヤー化させる。必要に応じて z-index でレイヤーの順序を調整する。）
left: -4em;
bottom: 5em;
background: #eeddaa;
CSS セレクタ、グループ化の落とし穴
対象:
（CSS を解する ほぼすべてのブラウザ？）
（CSS を解する ほぼすべてのブラウザ？）
CSS ソースの比較的ポピュラーな整理法として、セレクタのグループ化というのがあります。CSS セレクタはカンマで区切って並列表記することで、複数のセレクタに対して同時に同一のスタイルを設定することができます。
| 個別にスタイルを指定 | セレクタをグループ化 |
|---|---|
|
tr#descendant td div div {
background-color: green;
}tr#child > td > p {
background-color: green;
}tr#adjacent th + td + td p {
background-color: green;
}tr#sibling-comb td span ~ p {
background-color: green;
}tr#attribute td p[class="valid"] {
background-color: green;
}tr#starts-with td p[class^="val"] {
background-color: green;
}tr#ends-with td p[class$="xml"] {
background-color: green;
}tr#lang td p:lang(zh-cn) {
background-color: green;
}tr#not td *:not(p) {
background-color: green;
}
|
tr#descendant td div div,
tr#child > td > p, tr#adjacent th + td + td p, tr#sibling-comb td span ~ p, tr#attribute td p[class="valid"], tr#starts-with td p[class^="val"], tr#ends-with td p[class$="xml"], tr#lang td p:lang(zh-cn), tr#not td *:not(p) {
background-color: green;
}
|
プロパティが共通する部分だけをグループ化して、固有部分を切り分けておくだけでも、管理が随分 楽になるので重宝します。すでに活用している方も、きっと多いのではないでしょうか？
ところが この CSS セレクタのグループ化、どうやら思わぬ落とし穴があるようです。グループ化したセレクタ群の中に、ひとつでも閲覧中のブラウザが未対応のセレクタを含むと、グループ化したほかのセレクタまで無効化されてしまって、グループ化したブロックのスタイルが適用されなくなってしまうみたいです。
| 固定リンク | コメント (0) | トラックバック (1)
2006-05-21
各ブラウザ CSS 仕様の覚書
以下は各ブラウザベンダーが公式に発表している CSS 対応表です。そのうち、見やすくまとめ直すつもりですけど、ともあれ備忘録として書き留めておきます。
- Internet Explorer（*=5, **=5.5, ++=6）
- Gecko（Firefox, Seamonky, Camino などを含む。）
- Opera 7, Opera 8, Opera 9
- Safari［PDF version の入手先］
- Konqueror（KHTML 3.4）
| 固定リンク | コメント (0) | トラックバック (0)
2006-05-16
IE 7 は ::before, ::after を実装せず
Internet Explorer 7 (IE 7) beta 2 Preview も日本語版が登場して、いよいよリリースに向けてバグ潰しに専念する段階に入ったようです。
かねてから気になっていた ::before, ::after 擬似要素ですが、どうやら IE 7 ではサポートされない、というのが真相のようですね。Google で引っ掛けてみると情報が錯綜してるし、IE Blog のコメントを見ても ::before, ::after 擬似要素に関するコメントがほとんど黙殺されていて、かなりイライラさせられましたが、ようやっと IE Blog 中に次のような Markus Mielke 氏のコメントを見つけました。
re: What’s New for CSS in Beta 2 Preview?
Friday, February 03, 2006 12:24 PM by Markus [MSFT]
Answering a couple common questions:
- :before and :after will sadly not make it into IE7.
- people reported that :hover would not work from an @import. That's a bug and already fixed in our builds.
- min/max we heard the request and working hard on it. Hopefully we make it for IE7.
-- Markus
非常に有用で需要もあるセレクタなだけにちょっと遺憾ですが、これでようやく IE 7 に合わせた CSS コーディングの準備ができそうです。(- -;)
max-width, min-width の方はサポートされる見通しみたいですね。これも重要なプロパティなので、こちらはひと安心です。(^ ^;)
| 固定リンク | コメント (0) | トラックバック (0)
Fixed design or liquid design ?
実は、目下 新しい個人サイトを構築中なんですが、ちょっとした悩みが..。
相対レイアウト（liquid design）にすべきか、固定レイアウト（fixed design）にすべきかで悩んでいます。XHTML ソースの方は、どちらを採用しても中身は変わらないんですが（というか、変わらないように書くべきなんですが）、問題は CSS や画像素材制作です。（僕の場合、実際に面倒なのは後者だったりします。お恥ずかしい話で、単に得意不得意の問題なんですけど。）
| 比較項目 | 相対レイアウト (liquid design) |
絶対レイアウト (fixed design) |
|
|---|---|---|---|
| コーディング難易度 | 高: 常に background-repeat を意識した素材制作をする必要がある。max-width や min-width への配慮も必要。 | 低: ボックスサイズや画像素材の縦横サイズを決めうちして制作できる。ボックスモデル（margin , padding, width 絡み）にさえ注意すれば、大きな問題はない。 | |
| 大画面での見やすさ | 総評 | ○: 表示領域を画面の解像度にあわせて伸縮できるので、見やすく操作しやすい。 | ×: 基本的なレイアウトは保持できる。 |
| 問題点 | 行が横に伸びすぎて読みづらくなる。（しかもそのままでは文字の大きさが小さいまま不変。） | 画面の解像度が大きくなるほど、テキストやボタンの見た目の大きさが相対的に小さくなり、操作の快適さが損なわれる。（→フィッツの法則） | |
| 回避策 |
|
|
|
| 固定リンク | コメント (0) | トラックバック (0)
2006-05-14
niftycube.js - 角丸効果 JavaScript ライブラリ
対応ブラウザ: （: 表示に乱れあり）
（: 表示に乱れあり）先日、"Nifty Corners Cube" という、ボックスの外枠に角丸効果を出すための JavaScript ライブラリを知りました。「え？今頃知ったの？」って方はともかく、「何でいまさら角丸効果を JavaScript で出す必要なんかあるの？！そんなの、CSS でできるじゃない？」と怪訝に思われる方もいるでしょうが、まずはこの niftycube.js の特徴をご覧あれ。
主要機能
- 文書構造上、無意味なブロック要素（div など）を HTML 上に記述することなく、単一の div 要素に対してでも角丸効果を出すことができる。
- （以前に紹介した behaviour.js のように）角丸効果を適用する場所を CSS セレクタで指定できる。
- CSS の背景色や背景画像などを niftycube.js が自動的に検出してくれるため、JavaScript の記述量が非常に短い。（JavaScript 初心者でも簡単に扱える。）
サンプル 1
サンプル 2
| 固定リンク | コメント (0) | トラックバック (0)
2006-04-18
リキッドレイアウトサイト事例集
IE 7 Beta のこととか、Mac 用のマシン上で Windows をデュアルブートできる BootCamp のととか、色々と書くことはあったのですが、忙殺されててなかなか書くだけの精神的なゆとりが確保できませんでした。(- -;)
久々のエントリーは Liquid Designs という、リキッドレイアウト（ウィンドウの大きさに合わせてレイアウトが伸縮する Webページ）を採用しているサイトを集めた事例集を紹介しておきます。大分前に見つけたんですけど、すっかり紹介が遅くなってしまいました。
| 固定リンク | コメント (0) | トラックバック (1)
2006-01-08
Firefox 1.5 の multi-column を試用
対応ブラウザ: （CSS Level 3）
（CSS Level 3）
Firefox 1.5 で試験的に実装されてる Multi-Column（段組み）機能を試用してみました。
うまくいけば、簡単なレポートは、今後、これで作成しようかな..とか思ってます。MS Word だと Mac や Linux ユーザーとの交換の便が非常に悪いし（僕のまわりには結構いるんです、これが。OpenOffice.org もあんまり人気ないみたいで、入れるのを嫌がる人が多いし）、テキストだと図表が入れられないし、TeX だと JIS にない Unicode 文字を扱うのがとっても面倒だし..で。実は HTML はそういう意味では結構美味しいです。贅沢を言わなければ表組みも図の配置も制御しやすいし、Unicode だってフルで扱えますし、データ交換だって再利用だってしやすいですから。
問題は段組みなんですけど、これが Firefox 1.5 で試験的に実装されたというので、早速、CSS を書いて実験。結果は、URL などの禁則処理にやや難があるものの（現時点では Firefox の仕様。url_breaker や url_breaker+ のような拡張機能もあるんですが..）、それを除けばまずまず。頑張れば、そこそこ複雑なこともできちゃいそうな感じです。印刷時の処理もなかなかです。ちゃんと紙の大きさに合わせて段組み位置を調整してくれます。(*^-^*)v
え？IE や Safari で使えなかったら、データ交換したことにならないじゃないかって？いいんです！僕個人の印刷用途が主目的なんだから！(爆)
div#page > div {
-moz-column-count: 2;
-moz-column-gap: 1.5em;
}
-moz-column-gap: 1.5em;
- サンプルページ
- CSS ソース（やっつけで書いてるので散らかってます。ごめんなさい。）
- PDF （印刷）イメージ
| 固定リンク | コメント (0) | トラックバック (0)
2006-01-07
見出しの画像をサイトマップ風 CSS で管理
<h1> の見出しを画像にされてる方は大勢いらっしゃることかと思います。（僕は普段はしてませんけど。）でも、この見出し画像ってどのように管理されてますか？直接 HTML に埋め込んでますか？それとも外部 CSS ファイルに一括して記述されてますか？どちらの方法を採っても、メンテナンスしにくいですよね。
今日は h1 の見出し画像を、独立した見出し画像管理用 CSS ファイル（h1.css）で管理する方法についてのメモです。
- 見出し画像管理用として独立したファイルを設ける（h1.css）
- メイン CSS ファイルの先頭に @import を使って h1.css を取込む
- h1 の id 名はサイト全体の中で一意（unique）にする
- id 名は HTMLファイル名と同一の名前にする
- ディレクトリも "-"（ハイフン）で区切って id 中に記述
- 見出し用画像の名前も HTML ファイル名と同一の名前にする
- h1.css にタブインデントを使ってサイトマップ風に記述
半分以上、思いつきで編み出した方法で、中身はこういうちょっとした工夫の組み合わせなんですけど、これが結構イケそうな感じです。
以前、「SEO効果と見映えを両立した見出し」というエントリーをアップしましたけど、今日はその続編みたいな内容です。
| 固定リンク | コメント (0) | トラックバック (0)
2006-01-05
JavaScript ソースが HTML から消える日
［2006-06-10 付記］このエントリーは、2006-01-05 時点のもので情報が古くなってます。現時点で把握している最新情報を「続 JavaScript ソースが HTML から消える日」にアップしましたので、あわせてご参照ください。
Behaviour.js ― JavaScript ソースを (X)HTML から完全分離できるライブラリ
昨日、職場の同僚の人がたまたま見つけた JavaScript ライブラリを教えていただたんですけど、これがもうびっくり！なんと、このライブラリがあれば、イベントハンドラーも含めて JavaScript ソースが (X)HTML の body 内から、ほぼ完全に分離できてしまいます！ しかも、HTML 内で JavaScript 関数を適用する場所は、なんと JavaScript ソース内に CSS セレクタを書き込むことで指定！あまり日本では取り上げられていないようですが、設置も簡単だし、何より HTML ソースが劇的にすっきりするので、少なくとも僕はもうコイツを手放せなくなりそうです！
はっきり言います！この behaviour.js という JavaScript ライブラリと CSS セレクタで、html/body内の属性は class や id も含めて 90% 消せるようになります！（ IE を無視できればですけど..。(^ ^;) 別に無視しなくても、70～80% は消せるかと思います。）
| 固定リンク | コメント (0) | トラックバック (6)
2005-12-28
1byteの隙間を埋める HTML の書き方（※書きかけ）
HTML を書くときに、テキストや画像の間に予期しない隙間が発生した、なんて経験はありませんか？
「予期しない隙間」だけでは分かりにくいでしょうから、ちょっとだけ例を出してみましょう。（※閲覧例に IE 6 のスクリーンショットを出しているのは、シェアの大きさと見た目のわかりやすさを優先させた結果です。Firefox や Opera、Safari などでも、大筋で似たような結果が得られます。）
サンプル事例 1: スクリーンショット
閲覧例: 6
6- ［上］HTML ソース中に改行文字やタブ文字（インデント）が入ってるテキストを IE 6 で見た時の状態。
- ［下］HTML ソースに細工を施した後で IE 6 で見た状態。
（テキストに "■" を使っているのは隙間が空いてるのを見やすくするため。なお、Firefox では "■" だと禁則処理が効いてしまって上のケースでは改行位置が不揃いに、下のケースでは横一行に表示されます。IE 6 でスクリーンショットを撮ったのはこのためです。(^_^;ゞ ）
サンプル事例 2: スクリーンショット
閲覧例: 6
6- ［上］HTML ソース中に改行文字やタブ文字（インデント）が入ってる並列画像を IE 6 で見た時の状態。（※開いてる隙間がわかりやすいように、background-color を赤にしてあります。）
- ［下］HTML ソースに細工を施した後で IE 6 で見た状態。
今日はこの隙間の原因と解決策についての覚え書きです。
| 固定リンク | コメント (0) | トラックバック (0)
2005-12-24
CSS 3 セレクタを使わなかった場合のソース
昨日の記事（「CSS 3 セレクタ最終草案リリース」）で紹介した CSS 3 属性セレクタのサンプルですが、同様のことをクロスブラウザでアクセシブルにするにはどうすればいいかという点と、その場合の(X)HTML ソースがどれだけ冗長になるかという点が抜けてましたので以下に追記しておきます。
| 固定リンク | コメント (0) | トラックバック (0)
2005-12-23
CSS 3 セレクタ最終草案リリース
対応ブラウザ: （CSS Level 3）
（CSS Level 3）CSS 3 セレクタ最終草案がほぼ予定の１ヶ月遅れでリリースされたようです。勧告まであと一息ですね。セレクタが充実してくると、class や id をタグ内に埋め込む割合が激減するので、何とか頑張って IE 7 にも実装してもらいたいところです。
ちょっと実例を出してみましょう。ソースをご覧いただければ一目瞭然ですが、以下のリンクには img タグはもちろんのこと、class や id も一切使わずにリンク先がサイト内外のいずれであるかや、リンク先のファイルタイプを CSS だけで判別して、適切なアイコンを付けています。（残念ながら IE や Opera では未対応。）
- サイト内へのリンク
- サイト外へのリンク
- メールアドレスへのリンク（ダミー）
- PDF ファイルへのリンク（ダミー）
- MS Word ファイルへのリンク（ダミー）
- MS Excel ファイルへのリンク（ダミー）
- テキストファイルへのリンク（ダミー）
スクリーンショット （Windows XP SP2 + Firefox 1.5）
| 固定リンク | コメント (2) | トラックバック (2)
ココログ試用感
早速、使ってて幾つか不満の点が発生。
- CSS が自分で直接編集できない。
- "続きを読む"のテキストを自由にカスタマイズできない。
- 原則、固定レイアウトで、大画面に弱い。
- 使い回し用画像へのリンクは絶対パスで指定しないとリンクが切れる。
<style type="text/css"><!-- @import url("http://my-chunqiu.cocolog-nifty.com/css/screen.css"); --></style>のようにパスを通して import してやることで（link 要素の外部 CSS ファイルよりも優先的に扱ってくれるので）、多少は解決できます。いささか面倒ではありますけど。(- -;)
| 固定リンク | コメント (0) | トラックバック (0)
2005-12-10
CSS（:target 疑似クラス）だけでタブ効果
対応ブラウザ: （CSS Level 3）
（CSS Level 3）なんか意外とページの整形に手間取ってしまいました。Seesaa って HTML ファイルのアップもできるんですね〜。これで Unicode さえ通れば文句ないんだけどな..。 さて、今回は表題にあるように CSS 3 の :target 擬似クラスだけでタブ効果を演出してみようという試みです。CSS 3 のセレクタ部分が予定では先月中に正式な勧告がリリースされるはずだったんですが、まだ出てないようですね。見切り発車気味ですけど、Firefox とか一部のブラウザが既に CSS 3 の一部を実装しつつあるので、まっ、いっかってことで。(笑) 2001年に勧告候補がすでに出ているとはいえ、IE 7 に反映してもらうためにも一日も早くリリースにこぎつけてもらいたいものですね。
| 固定リンク | コメント (0) | トラックバック (0)
2005-11-11
SEO効果と見映えを両立した見出し
皆さま、(X)HTML の見出し（H1, H2, H3, H4…）ってどのようにされていますか？テキスト？それとも画像？見映えやブランドイメージを重視する商用サイトや企業系サイトにとってみれば、画像をつかってできるだけ華やかに、あるいはクールに演出したいところでしょう。その一方で、最近は SEO（Search Engine Optimization: サーチエンジン最適化）効果を狙って、なるべくテキストとしてマークアップしたいという願望もあるのではないでしょうか？なかなか両立しないこの２つの条件ですが、うまい具合にこれを両立させる方法がなくもありません。（といっても、Web 標準の思想的にはちょっと良心が痛む邪道な Tips ですけど。）(^_^;)
最近使われてる手段の中には、たとえば以下のサイトのような手法をよく見かけます。
■Mint: A Fresh Look at Your Site
| 固定リンク | コメント (0) | トラックバック (0)
2005-10-23
表組みのための CSS サンプル
今日は表組み CSS について、備忘録かねがね情報共有用です。まじめに書くと長くなるので、一般的な説明はかなり省いてます。もしここで紹介している事柄に興味が湧いたけど、細かいところがよく分からないという方がいらっしゃいましたら、どうぞ遠慮なく聞いてください。逆にもっと良い方法をご存知の方がいらっしゃったら、是非ご教示くださいませ。
CSS TABLE GALLERY
http://icant.co.uk/csstablegallery/最近見つけたページで、色んな人が作成した表組み（テーブル）デザインのサンプル CSS（スタイルシート）を集めたサイトです。ただし、スタイル名をクリックすると即座にそのスタイル（というか CSSファイル）が適用されて外観が変わります（表組みの HTML 自体は固定で、本当に CSS が切り替わってるだけです）。気に入ったスタイルがあれば、Download をクリックすると CSS のソースが表示（もしくはダウンロード）されます。
ダウンロードした CSS ファイルは、そのまま datatable.css などとして普段メインで利用している CSS ファイルと同じディレクトリに保存して、メインの CSS ファイルの中に、
@import url("datatable.css");
という行を追加するだけで簡単にお目当てのテーブルのスタイルを適用できるので、関心のある方は、是非 お試しください。もちろん、直接メインの CSS ソースの中にコピペしても構いません。うーん、実に簡単だ。(^-^)v
Alter Table Row Background Colors Using JavaScript
http://www.sitepoint.com/article/background-colors-javascriptさて上のサイトでサンプルを実際に自前の (X)HTML ページに対して適用された方は、テーブル内の背景色を１行ごとに交互に変えて表組みを見やすくしたくても、それが反映されないことにお気づきになるのではないでしょうか。
そう、上のサイトではテーブルの奇数行に対して "odd" という class を設けています。これが自前の (X)HTML ソースの中に入ってなければ効きません。
<tr class="odd">〜</tr>
<tr>〜</tr>
<tr class="odd">〜</tr>
<tr>〜</tr>
でも、このようにいちいち一行ごとに class を挿入していたんじゃ、テーブルにデータを一行追加しようとしただけで、以下の行すべてに対して class を追加 | 削除しなくちゃならなくなって面倒ですよね。
class を指定せず、CSS セレクタだけで実現する方法
実はこんな余計な class を入れなくても
:nth-child(2n+1) /*奇数番目の子供要素という意味。*/
という CSS 3 のセレクタを使えば、
<table>
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
</tr>
</thead>
<tbody>
<tr>
<td>行１列１</td>
<td>行１列２</td>
</tr>
<tr>
<td>行２列１</td>
<td>行２列２</td>
</tr>
</tbody>
</table>
なんて単純で簡素なソースに対しても、簡単に一行ごとにテーブル行の背景色を変えることができます。（ class や id といった余計な属性が一切入らない点がスマートですよね。）
CSS セレクタの致命的弱点
しかし、もちろんそう簡単には問屋が卸しちゃくれません。というのも、ご承知の方もおられるかもしれませんけど、この Level 3 の CSS セレクタに対応しているブラウザなんてまだまだ少ないんですよね。（比較的 Level 3 のセレクタに対応している Firefox ですら、この nth-child セレクタにはまだ対応してません。）特にシェアのいちばんデカい Internet Explorer が Level 2 ですら満足に対応してない状況ではなかなか (X)HTML ソースも簡素になりようがないというものです。
JavaScript で一行ごとに class を自動生成
前置きが随分と長くなってしまいましたけど、ここで活躍するのがこの項目の見出しのページで紹介されている一行ごとに背景色を変えてくれる JavaScript です。簡単なソースなんですけど、要は何をしているのかって、テーブルの奇数行の tr に odd、偶数行の tr に even という class をページの読込みと同時に挿入しています。あとは CSS に .odd と .even それぞれの class のスタイルを設定するだけです。// インデントには全角スペースを使ってます。ソースをコピペする際にはご注意ください。
function alternate(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}
これも (X)HTML のソースに自分でいちいち class="odd" などと打ち込まなくて良いという点ではラクなんですが、table に id をつけることと、body 要素にも onload した時にテーブルスタイルの JavaScript 関数を呼び出させる必要があるので、そこを書き換える必要があるのが若干面倒といえば面倒です（一括置換で済むので大した手間じゃないかもしれないけど）。それに JavaScript を有効にしている環境でしか効かないのも難点ですね。ただ現状の主要 Web ブラウザでもクロスブラウザで動く点は CSS 3 に対する大きな利点です。
<body onload="alternate('resultTable')">
：
<table id="resultTable">
<tr>
<td>…</td>
</tr>
</table>
：
</body>
| 固定リンク | コメント (0) | トラックバック (0)
2005-10-05
ウィンドウの大きさによってレイアウトが変化するサイト
ちょっと面白いページを見つけたので備忘録がてらの紹介です。
Nokrev という、Jeff Wheeler 氏の運営するサイトなんですが、どこが面白いって、ブラウザのウィンドウをグイっと小さくしていくと、ある大きさでそれまで４ペインだった画面が１ペインにスッと切り替わります。おおっ、これはスゴい！何度やっても痛快。(^o^;)
つまり..
| 1 | ||
| 2 | 3 | 4 |
| 1 2 3 4 |
早速、どういう仕掛けになっているのかをチェックしてみると、どうやら JavaScript で CSS を切り替えているようです。
http://www.nokrev.com/design/res-functions.js
（以下、抜粋。）
function checkBrowserWidth()
{
var theWidth = getBrowserWidth();
if (theWidth > 940) {
setStylesheet("Regular Layout");
}
else {
setStylesheet("Low-Res Layout");
}
return true;
}
いかがでしょう？ブラウザの幅が 940px 以上の時とそうでない時とで読み込む CSS を切り替えているわけですね。CSS だけで実現している訳ではなかったのがちょっと期待はずれで残念ですが（っていうか、さすがにムリかな..）、それでも充分 UI として面白いものを見せてもらいました。ユーザビリティの応用可能性としては充分だと思います。
最近、UXGA のような巨大な画面で Webページを見る機会がちょくちょくあって、800x600（というより実質的には 780x560）の固定レイアウトに限界を感じつつあります。さりとて 800x600 → 1024x768 に表示サイズを変更しただけでは根本的な解決にはならないので、やはりリキッドレイアウト（ウィンドウサイズに応じてページが伸縮するレイアウト）に移行していくのがいちばんなのかなと思い始めているんですが、リキッドレイアウト（ましてテーブルに依存しない CSS ベースのレイアウト）は固定レイアウトと比べて難易度が非常に高いので、最近、海外のサイトを中心にあちこち波乗りして参考になるサンプルを集めている、という次第です。（どうでもいいことかもしれませんが、どうして国内の企業系サイトは Flash を使ったサイトが多くて参考になるものが少ないんでしょうね。Flash が悪いとはいいませんけど、もう少し情報の転用やリファクタを念頭においた方がいいんじゃないかと思う今日この頃です。SEO や制作コストだけが Web標準準拠のメリットじゃないでしょうに。）
何はともあれ、日々勉強ですね。
| 固定リンク | コメント (0) | トラックバック (0)
その他のカテゴリー
日記・管理情報 | 生活 / アイテム | ［Web］Ajax・DHTML | ［Web］CSS | ［Web］JavaScripts | ［Web］XHTML | ［Web］その他 | ［Web］ブックマーク（del.icio.us） | ［Web］ブラウザ / Firefox | ［Web］ブラウザ / IE | ［Web］ブラウザ / Opera | ［Web］ブラウザ（Safari, WebKit, Konqueror） | ［Web］検索エンジン・DB | ［書籍］Web | ［書籍］中国史・中国古典 | ［生活］イベント | ［生活］中国古典 | ［生活］娯楽 / スポーツ / 野球 | ［生活］娯楽 / 音楽 / iPod | ［生活］教育 | ［生活］食 | ［電脳］ソフト / IME | FEP | ［電脳］ソフト / OS / MacOS X | ［電脳］ソフト / OS / Windows | ［電脳］ソフト / フォント | ［電脳］ハード / ノートPC | ［電脳］ハード / 周辺機器
最近のコメント