タグ

ブックマーク / blog.d-spica.com (3)

  • label のススメ | d-spica

    label のススメ 2008-07-29 0 0 XHTML/CSS CSS, label, XHTML label要素とその挙動 | Web標準Blog | ミツエーリンクス これを読んでいて,ぼくがやっていることをちょっと紹介しようと思いました。 label の働き お名前 <input type="text" name="name" id="name" size="20" /> このような場合,コントロール体であるテキストボックス<input type="text" ... />とその説明である「お名前」というテキストは,隣同士に並んではいるけれど,対応していることがはっきりマークアップされているわけではありません。 label要素を使って,次のようにマークアップすることで,「お名前」というテキストとテキストボックスをはっきり関連づけることができます。label要素内のテキストが

  • font-size指定 | d-spica

    font-size指定 2007-03-10 0 0 XHTML/CSS CSS, font-size 数で合理的にデザインする - サイズ編 で少し書いたfont-sizeについての補足です。 どのくらいの文字サイズで見られているかは,ブラウザとその設定によってまちまちです。でも,せめてデフォルトの状態では意図したレイアウト,フォントサイズで見てもらいたい,という願いもないわけではありません。font-sizeの指定をどうするか,ちょっと考えてみました。 font-sizeは%で font-sizeをpx,pt,inなどで絶対指定すると,Win IEで文字サイズの変更が出来なくなるのをご存じの方も多いでしょう。文字サイズを固定してしまうのはアクセシビリティ上少々問題があります。font-sizeはem,ex,%で相対指定(基準になるものとの比率で指定)するのがよいとされています。 Win

  • clearfixでfloatを解除 | d-spica

    clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり,途中で切れたりしたことはありませんか。 floatした要素(ボックス)を含む親要素(ボックス)のborderやbackgroundが途中で切れてしまうことがあります。 左の例では,右側のメニューが終わったあたりで,左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;

  • 1