Macのメニューバーに対してフィッツの法則は正しいか
てんぽ: Macのメニューバーに対してフィッツの法則は正しいか CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど Macが上部固定メニューバーを採用している理由として、マウスでのクリックのしやすさがよく挙げられる。 Life is beautiful: OS-Xのメニューの位置が固定なのは「たとえ一点でもMicrosoftの方が正しかったこと」を認めたくないAppleの意地か？ のコメント欄で指摘されている高さ1マイルのメニューバー という概念です。 一方Macintoshでは、どれくらい動かすか考えずにマウスをスクリーンの一番上にドンと持って行けば、 マウスはスクリーンの上端--メニューを使うための正しい位置--で止まる。 これはフィッツの法則として定量化もされている（らしい）。 オブジェクトを正しくクリックするためにかかる時間(T)はオブジェクトの面積(S)が大きく、
IE6のCSSバグを視覚的にチェック
てんぽ: IE6のCSSバグを視覚的にチェック CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど IE用Acidテストとも言えるCSSバグのチェックページを作ってみました。 IE6で表示するとすべてのチェック項目で「NG」と表示されますが、正しい表示を行うブラウザなら「OK」と表示されるはずです。 IEtest (beta) 具体的にはどうやっているかというと、たとえば「position: absoluteが指定されたボックスの幅をパーセントで指定したとき、 幅の参照先を、そのボックスの包含ブロックではなく、間近の親要素にしてしまうバグ」をチェックするコードは以下のようになっています。 <div class="container"> <div class="div1"> <div class="div2"></div> </div> </div> .container {
フォーム部品はデフォルトスタイルで
てんぽ: フォーム部品はデフォルトスタイルで CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど FC2ブログ新管理画面を見て気になったのはボタンがボタンらしく見えないこと。 フォーム部品に関しては、中途半端なCSSを適用するくらいなら、ブラウザのデフォルトスタイルのほうがわかりやすいのではないかと思います。 Jakob Nielsenの「Jakobの法則」（ユーザは、大部分の時間を他のサイトで過ごしている）によれば、 ユーザは他のサイトでの経験をもとにそのサイトの機能を予想するため、ウェブサイトはデザイン標準に従うべきとしています。 個人的にはここにもうひとつの法則を付け加えたい。Jakob Nielsen風に言えば次のようになります。 ユーザは大部分の時間を同じブラウザを使って過ごしている。 つまり、ユーザの慣れ親しんだブラウザの機能や見た目をむやみに変更してはならない
IE6で最小幅を実現する
CSSでボックスの最小幅を指定するには通常min-widthを使いますが、IE6はこれに対応していません。 そこで、IE6で擬似的にmin-widthを実現する方法としてボーダーとネガティブマージンを使うものが知られています。 Lucky bag::blog: IE で min-width を指定する方法 外側のボックスのボーダーで最小幅を確保しておいて、 その上に内側のボックスをネガティブマージンで重ねる。 これだけならHTMLとCSSは次のようにシンプルで済みます。 <div> <p>ここは可変幅だけど最小幅をもつ</p> </div> div { border-right:400px solid #fff; } p { margin-right:-400px; } 実際、Firefoxはこれだけでうまくいきます。 ところが肝心のIE6はなぜかボーダー部分まで可変になってしまいます。
絶対配置要素の位置の基準
『ザ・ルールズ・オブ・スタイルシート』PDF資料18,19ページのposition:absoluteに関する説明で、絶対配置要素の位置の基準について以下のように書かれているのですが、 これはあまり正確ではない。 position: absolute 包含ブロック（左上）からの移動距離 ただし、ブラウザ実装はbodyからの移動距離 包含ブロック（左上）からの移動距離というのは正しいのですが、 ただし、ブラウザ実装は～という表現から包含ブロックについて誤解があることを読み取れます。 包含ブロックとは単に親要素のことを指すのではありません。CSSの仕様で細かく場合分けして定義された用語で、 絶対配置要素の包含ブロックは「祖先要素のうち最も近い、positionの値がstaticでない要素のパディング辺。該当するボックスがなければ、初期包含ブロック」です。 PDF資料の例では、position:
最小フォントサイズが効かない
自分はFirefoxで最小フォントサイズ14pxにしているんですが、たまに最小フォントサイズが効いていないサイトがあって気になっている。 それでも豆字なサイトで指摘されているBoom Swagger BoomのほかにEngadget Japaneseも。 アドセンス部分には確かに効いているのに。何故だろう。 コメント（2件） 北村:Re: 最小フォントサイズが効かない フォントの設定は言語ごとに分かれているので、「詳細設定」で「西欧」(など対象ページの言語)を確認してみるとよいかもしれないです。 2007年01月28日（日）15:47:33 URL 編集 みりばーる:ありがとうございます 対象言語:「西欧」を確認すると「最小フォントサイズ:10」になっていました。こちらを変更することで上記のサイトでも望みのサイズになります。ありがとうございました。 2007年01月28日（日）22:09:
clearは「floatの解除」ではない:てんぽ
コメント（1件） -:承認待ちコメント このコメントは管理者の承認待ちです 2013年02月20日（水）13:47:58 コメントの投稿 名前 件名 メール URL コメント コメントを編集・削除するにはパスワードの入力が必要です。 編集・削除用パスワード 非公開コメント 管理者にだけ表示を許可する トラックバック（3件） http://mb.blog7.fc2.com/tb.php/62-551cfb2b floatとclearの関係 昨日、「mixi」のコミュニティで見つけたサイト。 clearは「floatの解... 2006年03月27日（月）16:57:24 from ddy-w::blog フロート解除と上マージンは一緒に指定しない！ フロート解除を指定した要素に、上マージンを指定しても、 上マージンが利かない(;´Д`)ノ。 -------------------------
floatは「回り込み」ではない:てんぽ
てんぽ: floatは「回り込み」ではない CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど 「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた（float:left）なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を
このエントリー
このエントリーによって「このエントリー」というリンクアンカーを用いてこのエントリーを参照することが可能となった。 リンクのアンカーテキストに「こちら」とか「ここ」とかを使うのは好ましくない。 その理由の多くは「ここ」というリンクについてのリンク集 に挙げられていますが、自分としてはリンクの有無で文意が変わってしまうことがとくに気になります。 文章中に「このエントリー（記事）」と書かれていれば、「このエントリー」とは今まさに読んでいるそのエントリーのことを指すのが普通です。 しかし、「このエントリー」がリンクアンカーになっている場合、 「このエントリー」が指しているのはリンク先のエントリーのことになってしまいます（少なくとも作者の意図としては）。 アクセシビリティとかリンクの本質とか以前に、文章としてどうかと思うわけです。 別のエントリーにリンクする場合、アンカーテキストには「このエントリー
リストマーカーをクリック（Fx）
Firefox（1.5.0.6）でリストマーカーをクリックすると、そのリスト要素が選択される。さっき気づいた。 リストマーカー：HTMLの<li>タグでマークアップされたり、CSSでdisplay:list-itemが指定されたりしたボックスが生成するマーカーのこと。 コメント（3件） 洵:Re: リストマーカーをクリック（Fx） Σ（゜□゜三 本当ですね！ 今は専らlist-style-type: none;＋background-image: url(リストマーク);の方を使っているのですが、こういう機能があるということはちゃんとリストにはマークを指定した方がいいのでしょうか？ でもMozillaだけの機能だとすると、それ以外の環境は「リストマークがずれる」というデメリットだけが残るわけで…ちょっと残念。 2006年09月16日（土）18:39:51 URL 編集 みりばーる:Re:
div id="header"の違和感
div要素とデザインの関係 ブログ型 div要素で全体をヘッダ・フッタ・本文などに区分する。 ブログ型のdiv要素の使い方のうち、とくにh1要素（といくつかの要素）をヘッダとしてまとめることには違和感を覚えます。 （XHTML2.0型でいうところの） h1が「支配する」範囲はページ全体であると考えられるのに、以下のようにdivがその範囲を分断してしまう（木構造のバランスが悪い）からです。 <div id="header"> <h1>見出し1</h1> </div> <div id="body"> <h2>見出し2</h2> （以下略） 自分の場合、FC2ブログのテンプレを作るときには、XHTML2.0型とブログ型の中間のようなdivの使い方をしていますが、 h1を含んだヘッダdivは使いません（XHTML2.0型）。とはいえ、見栄えのためにdivを追加することもあって（ブログ型）、その場合
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
