xhtml上に配置したFlashが常に最前面にきてしまう件
xhtml+cssでプルダウン式ナビゲーションを作る際、 その部分が他のコンテンツと重なることになるわけだが、 その対象がFlashである場合、ブラウザによっては問題が起こる。 Flashの配置位置はブラウザが勝手に決めてしまい、z-indexプロパティで変更することができない為だ。そこで役に立ちそうな記事を発見。自分もまだ試してないけど、検討してみる価値はあるかも。
xhtml アーカイブ
2007年02月19日
2007年02月17日
仕事としてのXHTML・CSSコーディング
web標準に準拠したスマートなXHTML・CSSコーディングをポリシーとしている私ですが、プロとしてやっていくからには理想ばかり追求していられないわけです。XHTML・CSSコーディングはもちろんやりますが、その他にもテーブルレイアウトや、構文的にメチャクチャなページの更新とかもやってます（個人的には修正したいけど、規模が大きいサイトだとそういうわけにもいかないわけで、歯がゆい思いをしてます…）。
新規案件でXHTML・CSSを使いサイト構築する場合でもいろいろと制約が多いんですよね。基本的にはweb標準に準拠したXHTML・CSSコーディングを行うわけなんですが、基本的には背景画像を使用してはいけないなんて決まりがある。背景に指定した部分は印刷されないのがその理由。自分なんかは文字や挿絵が印刷できれば良いので印刷用CSSを作成するのがベストだと思うんですが、一般ユーザーはブラウザの表示まま印刷したいと考えるらしい。そういうわけで、見出しやナビゲーションバーなどもimg要素を使用することに。ま、この方法だとCSS側の指定が減るわけでIE5.0などのブラウザでも安定した表示ができるからターゲットブラウザが多い場合は楽なんだけど。
というわけで、仕事としてXHTML・CSSコーディングをする際のポイント（製作会社のスタイルにもよりますが）こんな感じでしょうか。
- ブラウザ表示のままの印刷に対応させるため背景画像は基本的に使用せず、img要素を使う。
- positionプロパティは印刷に影響与える（safariで確認）ので使用を避ける。
- swfはjavascriptから書き出す（アクティブ化対策）。
- altは画像に表示されているものを忠実に。
- 文言の全角半角統一を確認。
新しい技術は個人的に勉強するしかないかぁ～。。。
2007年01月15日
winIE6標準モードと互換モードについてのあれこれ。
webページを作成する際、W3Cの規格に沿った標準モードか、過去のブラウザと互換性を持った互換モードを選ぶことになるわけだが、そこでwin IEでちょっとした問題があるわけです。
XHTMLを作成する際、utf-8以外の文字コードを使用する場合は、必ずxml宣言をしなければならない。通常xml宣言を書いた場合（それプラスDTDをフル記述）は標準モードになるわけなのだが、win IE6はバグで互換モードになってしまう。つまり、win IE5と同等の動作をし、バグも持ち越される。
しかし、この互換モードになってしまうというバグは考えようによっては大きなメリットにもなる。ターゲットブラウザをwin IE6以上やfirefox、opera等に絞るのであれば単なるデメリットでしかないが、win IE5.xも視野に入れるとなるとかえって好都合なのだ。基本的にwin IE6互換モードとwin IE5.xは挙動が同じため、win IE6互換モードに対応させれば、特に意識することなくwin IE5.xにも対応させることが可能なため。CSSハックも同じ物を指定してやるだけでよい（CSSハックを使う際はIE7でのチェックを忘れずに）。
逆にxml宣言を取り除くと標準モードになるわけだが、このモードを使用してwin IE5.xに対応させようとすると苦労するかと思う。win IE6標準モードとwin IE5.xでは挙動が異なる為CSSハックが使えない。基本的にwin IE向けCSSハックはIE6、IE5両方に適用されてしまうため、両者のバグが一致する時のみにしかCSSハックが使用できない。IE5.xだけに個別のCSSを適用させたい場合は、条件分岐コメントを利用するという手もあるがそんなことをするくらいなら、xml宣言をしたほうが良いと思う。
というわけで今後仕事でそういう案件にかかわりそうな気がしたので書いてみたわけです（・ω・）
2007年01月14日
テーブルレイアウトの勉強はじめました。
※この記事はxhtmlカテゴリに属してますが、直接xhtmlとは関係ないです。ご了承くださいませ。
今年に入って新しい会社に勤め始めたのですが、最初に制作に関わった案件が某企業サイトの特集記事ページ。結構前から続いてる特集ページなので、そのなごりかテーブルレイアウトで作成されているのですが、自分がwebを勉強し始めたのがテーブルレイアウトからCSSレイアウトに移行し始めた時期からだったので、テーブルレイアウトの知識がほとんどなく苦労した。そんなわけでテーブルレイアウトの勉強を始めることに。
画像をふんだんに使ったテーブルレイアウトはパズルのピースをはめ込むような作業の為、画像のスライスやセルの幅の指定がCSSレイアウトよりも厳密である必要性を感じた。また、CSSレイアウトに比べ、スライスする画像の数が多くなるため、CSSレイアウトよりも作業量が多く感じた。
あとテーブルレイアウトに関して発見したことといえば、table要素の height属性。もちろんweb標準に準拠するサイトであれば使ってはいけない属性なのだが、何かと便利そうなので調べてみると…なんとHTML4.01やXHTML1.0では非推奨属性ではなく、仕様内にすら定義されてないみたい。でも、ほとんどのブラウザでは使用できるみたい。（height属性はtd、th要素であれば、非推奨ながら正式に使用可能。）
ふと思ったのだが、テーブルレイアウト（ある程度適切にマークアップされている場合は除いて）を採用していて更新の必要性のないページ場合は、テキストも画像として書き出してaltを指定してやったほうが全然効率的だと思う。ブラウザの機能で文字サイズを変更されても影響無いわけだし。
2006年12月20日
div要素で囲うのは有り？無し？
結論としては有りだと思う。もちろん、無駄にdiv要素で囲うのはNGだけど、セクションを区切るのに利用するのは有り。むしろ、自分は推奨します。
なぜなら、今後リリースされるxhtml2.0では、文書の区間分けにsection要素というものが実装されるためだ。今のうちから文書の区間分けにdivを使っていれば、xhtml2.0に移行するのが比較的容易かと思われる。ちなみにxhtml2.0ではh○要素はh要素に置き換わるので基本セットは以下のようになると思われる。
<body>
<section>
<h>大見出し</h>
<p>見出しに対する文章</p>
<section>
<h>中見出し1</h>
<p>見出しに対する文章</p>
<section>
<h>小見出し</h>
<p>見出しに対する文章</p>
</section>
</section>
<section>
<h>中見出し2</h>
<p>見出しに対する文章</p>
</section>
</section>
</body>
従来の書き方より分かり易くなったうえ、小見出しが制限無し（今まではh1～h6）に付けられるようになった。つまり、より正確に文書構造を定義することが可能になるわけだ。
ちなみにxhtmlのバージョンアップと平行してhtmlもバージョンアップが図られる予定。いろんなところで情報探ってみたところ次世代html(Web Applications 1.0)のほうは、xhtmlでは補えない部分、つまり視覚的な部分が強化される模様。
2006年11月27日
strict XHTMLページにFlashを組み込む方法
Flashが吐き出すHTMLソースはstrictでは無いので、どうすればstrictなソースが書けるか悩む人も多いはず。そこでこんなサイトを見つけたので紹介。
http://www.onflow.jp/blog/archives/2005/09/flashxhtmlembed.html
上記サイトでも説明されている通り、Flashを動かすのに最低限必要なコードはたったこれだけ。
<object data="sample.swf" width="300" height="300"
type="application/x-shockwave-flash">
<param name="movie" value="sample.swf" />
</object>
ただし、この書き方だとIEでFlashPlayerの自動更新ができないとのこと。現在のFlashPlayerの普及率を考えると無視してもよさげ。
IE7にバージョンアップしたことで。。。
IE7になって、PNG24の対応や、CSSの解釈が大幅に改善されたので、表現の幅が広がり嬉しい反面、従来のサイトの動作チェックで頭を抱えることになるだろう。
自分の場合、今までは属性セレクタを使いCSSハックを行って、各ブラウザと互換をとっていたわけだが、この場合、IE6以前のバグが修正されていないとIE７では表示に不具合を生じてしまう。属性セレクタハックがIE７では使えない為だ（逆に属性セレクタが正式にサポートされたわけだが…）。
こうなると、IE7用のハックを適用するか、HTMLに余分にタグを追加するか、もしくは今まで以上にCSSレイアウトを考慮してデザインをする必要が出てくる。
そろそろIE5.xは切っちゃっていいかな。。。
ちなみにa要素にvertical-alignをmiddle,top,bottomのいずれかを指定することで、ハックしなくても解決できました。（汗
