mhrsのブックマーク - はてなブックマーク

不思議な絵の解説

コピペすると、四角の枠の中にメッセージが現れる不思議な絵コピペすると、四角の枠の中にメッセージが現れる不思議な絵原理 Firefox1やIE6がdisplay:noneで消した箇所に含まれる文字列もコピペできることを利用しています（Opera8.5では無理）。 pre要素で整形したテキストをspanで囲み、display:noneで消します。□は全角スペース。 <pre> ■■■■■■■■■■■■■■ ■□□□□テキスト□□□□■ ■■■■■■■■■■■■■■ </pre> <pre> ■■■■■■■■■■■■■■ ■□<span>□□□テキスト□□□□</span>■ ■■■■■■■■■■■■■■ </pre> span {display:none;} 消した分のスペースを確保するために、全角スペース1個を適当なインライン要素で囲み、letter-sp

mhrs 2007/04/16

『コピペすると、四角の枠の中にメッセージが現れる不思議な絵』の種明し。「コピペできるべきなのか？Operaではコピペできない。」

CSS

リンク

コンテナブロック（包含ブロック）とは

クイズの解答の前に、コンテナブロックについて。 Containing blocksのことを自分は「コンテナブロック」（あるいは単に「コンテナ」）と言ってきましたが、日本語では包含ブロックとしたほうが一般的なのかもしれません。ともかく、CSSでレイアウトを行ううえでは包含ブロックを意識することが大切です。包含ブロックの定義は以下を参照してください。 Cascading Style Sheets, level 2 revision 1 9.1.2 Containing blocks 10.1 Definition of "containing block" CSS2勧告邦訳 9.1.2 包含ブロック（Containing blocks） 10.1 「包含ブロック」の定義（Definition of "containing block"） CSS2リファレンス包含ブロックスタイルの設計と

mhrs 2006/11/03

CSSレイアウトの基礎。

CSS

リンク

このエントリー

このエントリーによって「このエントリー」というリンクアンカーを用いてこのエントリーを参照することが可能となった。リンクのアンカーテキストに「こちら」とか「ここ」とかを使うのは好ましくない。その理由の多くは「ここ」というリンクについてのリンク集に挙げられていますが、自分としてはリンクの有無で文意が変わってしまうことがとくに気になります。文章中に「このエントリー（記事）」と書かれていれば、「このエントリー」とは今まさに読んでいるそのエントリーのことを指すのが普通です。しかし、「このエントリー」がリンクアンカーになっている場合、「このエントリー」が指しているのはリンク先のエントリーのことになってしまいます（少なくとも作者の意図としては）。アクセシビリティとかリンクの本質とか以前に、文章としてどうかと思うわけです。別のエントリーにリンクする場合、アンカーテキストには「このエントリー

mhrs 2006/10/09

「こちら」リンクが良くない理由として「リンクの有無で文意が変わってしまう」點を指摘。「アクセシビリティとかリンクの本質とか以前に、文章としてどうか」

リンク

CSSレイアウトの定石　WinIE6バグ回避法

CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。フォントサイズ関係 font-sizeは%かpxで指定する。キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう（ブロックレベル要素を内包するボックスにはpaddingを指定しない。）左右ボーダーとパディングを設

mhrs 2006/06/18

「とりあえずこれくらいのことに気をつけていれば、そこそこ大丈夫」

リンク

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 フロート解除と上マージンは一緒に指定しない！フロート解除を指定した要素に、上マージンを指定しても、上マージンが利かない(;´Д`)ノ。 -------------------------

mhrs 2006/02/27

「floatとclearをわかっていれば、2カラムも、幅可変3カラムも、サイドバーだけ幅固定で本文領域幅可変3カラムも、同一のHTMLでCSSを変更するだけで実現可能」; 關聯: http://mb.blog7.fc2.com/blog-entry-61.html

CSS

リンク

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の右側に「回り込み」ます。これは確かに回り込みと呼べます。では、ブロックレベル要素を