2007年7月アーカイブ

「Web 標準の日々」初日を終え、まったり中。レポートみたいなのははてなダイアリーの方にとりあえずその場の勢いで書いた。本当はセッション3の「富士通の実践、アクセシビリティ/ユーザビリティ。そしてファインダビリティ」も受講したんですが、資料配布なし、録音を認めていなかったので、エントリはしてません。記事としてはあるんですが、この辺表に出さない方がいいのかと思って。聞いておけばよかった。。

で、自身のエントリにレスを付けるのも変な話ですが、分かりやすいと思ってこうします。
「float プロパティを使用する場合はその要素の幅の明示が必要」に対するコメントをいくつかいただいてますが、それにちょっち返答と言うか、自分の考え方を残しておきます。

• 2007年07月13日 kits CSS 2.1 だと仕様が少し変わっています。 http://hp.vector.co.jp/authors/VA022006/css/css21_visudet.html#float-non-replaced-width
• 2007年07月15日 NiPeke 2.1 なら shrink-to-fit するぜ？　2.1 には日本語で言う『明示的な幅〜』というのも無いような

• 最近のモダンブラウザは概ねCSS 2.1の仕様に沿ってレンダリングされるから、最新ブラウザのみが対象であ れば必要ないかもしれないと思う今日この頃。e_luck
• 2.1 なら shrink-to-fit するぜ？　2.1 では日本語で言う『明示的な幅〜』という部分も変更されていますね Kaminogoya

確かに CSS 2.1 では幅の明示は必要ないです。そして CSS 2.1 が草案（まだ最終草案の段階ですよね？）であるにもかかわらず、すでにブラウザ側が実装しているのも知っています。
でもこれは個人的な思いなんですが、現段階で「内容に合せて縮めた幅を算出する」と言う仕様があったとしても、実際に勧告してみないと分からないじゃないですか。ワーキンググループメンバーの主義主張でひっくり返る可能性だって無いわけではないですし。と言うかそっちの方は全然詳しくないし参加もしてないですし分かりませんが、未だ CSS 2.1 が10年くらいずっと今の状態であるわけなので、何が起こってもおかしくないと言うか。

と言うのが率直な感想で、いくら実装面で CSS 2.1 がほぼ準拠されているとは言え、限りなく公式に近いデファクトスタンダードだと思います。
それが良い悪いの話じゃなく、現段階の仕様には可能な限り準拠した方が将来に対するリスクは少ないんじゃないかな、と感じるんです。もっとも、この話は実装面にも依存するので、何とも言えませんが。この辺はあっちのブログで書いたように、会社的な考えにもなるんですが。
もちろん必ずしも仕様準拠ありきとまでは言いませんが、でもそれを踏まえた上で（今ならば）選択する余地はあると思うんです。幅を明示するかしないかとか。

でも思えば (X)HTML 文書は HTML なのか XHTML なのか、HTML なら 4.01 なのか 5 なのか、XHTML なら 1.0 なのか 1.1 なのかって選択できますけど、CSS は選択できないんですよね（HTML 5 はまだ選択肢として無いけど、例みたいな感じで）。まあこれは別に問題があるわけじゃないからいいのかな。パッと思いつくほど CSS のバージョン宣言しなければならない仕様差異があるわけじゃないし。CSS 3 だとまた話は違ってくるだろうけど。

なんかタイトルに「の」が連続してるけどいいや。

「水平方向のナビゲーションの作り方」のはてなブックマーク見て、誰も float プロパティの使い方に疑問を抱いてないのを見て不安になった。

CSS 2 の仕様書内で float プロパティ（浮動体）は以下のように書かれています。

浮動ボックスは，明示的な幅をもたなければならない。明示的な幅は，置換要素の場合は，'width'特性, 又はその組込み幅によって割り当てられる。

ここである「width 特性」と「組込み幅」とはそれぞれ以下の意味となる。

width 特性とは

スタイルシートとの width プロパティを使用すること。
ちなみに「特性」は単に「プロパティ（Property）」を和訳した単語。

組込み幅とは

仕様書内では実寸法と表記されている。

実寸法 (Intrinsic dimensions)

環境によって決まるのではなく，要素自体によって定義される幅及び高さ。 CSS2では，すべての置換要素が, そして置換要素だけが, 実寸法で現われるとする。

組込み幅の定義をもっと具体的に表すと「img 要素・object 要素の width 属性もしくは画像やオブジェクト自体の幅、input 要素・select 要素の size 属性、textarea 要素の cols 属性」がこれに相当する。

なので、画像の回り込みに以下のような記述をすることは問題ない。

img {
    float: left;
    margin-right: 10px;
}

img 要素には幅があるので、スタイルシートで幅を与えることは（意図してその画像自身の幅と異なる大きさをしたいしたい場合以外であれば）無い。

ただし、幅を持たない要素は必ず width プロパティを使用する必要がある。
ここではリストを利用しているので、そのサンプルをそのまま使わせていただくが、通常であれば以下のように指定する。

HTML サンプルソース

<ul id="navigation">
  <li>編集</li>
  <li>削除</li>
  <li>追加</li>
</ul>

スタイルシートサンプルソース

#navigation {
  list-style: none;
}

#navigation li {
  width: 2em;
  float: left;
  background: transparent url(arrow.gif) no-repeat scroll left center;
  padding-left: 12px;
  margin-right: 15px;
}

もっとも、リストにある文字数によって幅を変える場合はかなり面倒なことをしないと行けないので、やはり display: inline; を使用するのが簡単と言えば簡単ですが。

全然関係ないですが、サンプルのソース上では「追加」になっているのに表示結果の画像では「新規追加」になっているのは直した方がいいと思います。

追記 2007年7月17日 11:04

CSS 2.1 では、と言う話を受けて別途エントリしました。そちらもご確認ください

• Re: float プロパティを使用する場合はその要素の幅の明示が必要

いつもいつも「アレ書こう」とか「コレ書こう」とか思っても、実際に筆を取ることが皆無になりつつあるのを脱却したいと感じる今日この頃。

今回はフロントエンド周りの話でも Mac の話でもなく、お知らせです。告知です。

自分が一番下っ端の会社でブログをやることになりました。
ここと同じく、(X)HTML・CSS の話題を中心にやっていきますが・・・はてさて、ネタが続くかどうかｗ
あとたろさんの技術周りの話や社長の週間プラコアらしき内容もあるので、別にフロントエンド関連の話題に興味が無い人でもある程度カバーできるかと。

これでブログ5つ目です。ちょっとどうにか考えないといけない状況に立たされてきた気がします。

次、同じく弊社で初の自社サービスである「商材マッチングサイト Makit」をリリースしました。パーソナルサービス向けと言うわけじゃないですが、会社の事業の1つとしてやっていくつもりです。

最後に全然関係ない話をすると「Web 標準の日々」に行きます。どのセッションを選択するか大体決まったところです。どこかでお会いすることがあればよろしくお願いします。