ニケラオ » ウェブログアーカイブ » 私も見た…

» ウェブログのアーカイブ » 私も見た… Niquelao - CSS 私も見た… 2006年11月11日 投稿者 Rumoroso この記事は逆から始めようと思う。背を向けて書くつもりではなく、結論で述べるアドバイスを引用（blockquote）から始めるつもりだ： 独創的であって、あの隠しフィールド（「ほぼ隠し」）が生成する枠を表示したいのでなければ、解決策は簡単だ。「display: none」を適用すれば直る。 私のアドバイスは、隠しフィールドにクラスを付けてから今書いたプロパティを適用しようとしないことだ。代わりに、Firefoxが属性セレクタを理解して解釈することを利用できる： [css]input[type=hidden] { display: none; }[/css] 本題へ… いや、この記事は理論上隠されるべきもの（hiddenタイプのフィールド）をどうマークアップするかについてではない。理論上と言うのは、Firefoxブラウザでは、CSSが有効で、フォームフィールドに「display」プロパティの特定の値を宣言すると、隠しフィールドが隠されなくなり、ブラウザによってレンダリングされるようになるからだ（Firefoxブラウザで例を見ればわかるし、我々を信じて言っていることを信じるなら、以下のスクリーンショットでも確認できる）。 ここまで来ると疑問が浮かぶかもしれない：「hidden」フィールドにdisplayを適用するのはなぜか？隠しフィールドの目的が表示せずに情報を渡すことなら、なぜ表示したいのか？… 答えは簡単で、おそらく例でよりよく理解できる： 次のフォームがある： [html] [/html]…これに基本スタイルを適用する： [css]form { border: 2px outset; background-color: #CCCCCC; } fieldset { margin: 20px auto; width: 500px; border: 1px solid; padding: 10px; } legend { font-size: 1.5em; color: #000; } label { font-weight: bold; font-size: 1.1em; } fieldset input { display: block; width: 90%; height: 1.3em; line-height: 1.3em; margin-left: 5%; font-size: 1em; } p { text-align: center; margin: 1em 0; } fieldset p { text-align: left }[/css] フォームフィールドにdisplay: blockを適用して、改行を引き起こし、ラベルテキストが上に来るようにした。テキストフィールドのすぐ上にラベルを配置することで、生成される匿名テキストボックスがフィールドのボックスとより広い接触面を持ち、視覚的に両者の関連性をより良く、より速く伝える（しかも、これが私の好きな配置方法だ、それで終わり）。 視覚的に理解しやすいかもしれない： 前の画像では、同じフォームをマークアップする3つの方法を示している。最初のものではラベルテキストをフィールドの上に配置し、接触面が大きくなる。他の2つでは、テキストをラベル付けするフィールドの隣に置くと接触面が減少することがわかる。さらに、3つ目はフィールド同士を揃えようとする問題を示している。 さらに、この方法ならすべてのテキストフィールドを左揃えにできる。これは多くの場合望ましいが、ラベルがフィールドに先行する場合に競合を生む可能性がある（ラベルは通常同じ長さではないため）。 問題は、「input」にこのプロパティを与えると、Firefoxで、しかもFirefoxだけで、隠しフィールドがレンダリングされ、空のブロックとして表示されることだ。 正しい動作かバグか？ IEの動作を見れば、これが起こらないことがわかる。この時点で、IEの批判者たちはFirefoxが正しいことをしていると言っているだろう。なぜならオーディションではいつも善玉役に選ばれるからだ。この場合は各自が結論を出すべきだが、その前にいくつか提起したい（いや、4つだ、「いくつか」は話し方の一つだ）： プログラマーが隠しフィールドが作るボックスを表示したいと思うだろうか？ デザイナーがプログラマーのやることを無視して勝手に表示しようとするだろうか？ 仕様にはこう書かれていないか：hidden controls: Authors may create controls that are not rendered but whose values are submitted with a form. Authors generally use this control type to store information between client/server exchanges that would otherwise be lost due to the stateless nature of HTTP. The INPUT element is used to create a hidden control。（hidden control）？ 隠しフィールドが作る空のボックスを表示する目的は何か？ 解決策 独創的であって、あの隠しフィールド（いや「ほぼ隠し」）が生成する枠を表示したいのでなければ、解決策は簡単だ。「display: none」を適用すれば直る。 私のアドバイスは、隠しフィールドにクラスを付けてから今書いたプロパティを適用しようとしないことだ。代わりに、Firefoxが属性セレクタを理解して解釈することを利用できる： [css]input[type=hidden] { display: none; }[/css] …そして一つの考察 Firefoxの開発者たちは、オーラ、魂、幽霊…といった他の隠されたものを表示しようと考えたことがあるだろうか？ この記事をIker Jiménezに送る前に、彼らがそれを実現するのを待つべきだろうか？ カテゴリー: CSS —> コメントのフォローはRSS 2.0フィードでできます。コメントを残すか、あなたのサイトからトラックバックを送ることもできます。 前の記事: でも、賢いだろう!! 次の記事: ロースがなければ、何でも「ノー」で食べる！ コメントを残す 名前とメールのフィールドは必須です 私たちを追加… 特に注目するタグ 一般 アクセシビリティ bert bos blockquote bug cañas 引用 cite 動作 知識 CSS escuas 標準 fieldset Firefox フォーマット フォーム フォント hidden ie IE 7 情報 javascript legend リスト niquelando 必須 opera ビーチ q squash 休暇 w3c WCAG xhtml この作品はCreative Commonsライセンスの下にあります。

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.