印刷用 CSS で背景画像を印刷させる方法 - lucky bag
media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。 wg:Printing CSS background images (sort of) カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくい
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
@import を使ってブラウザに CSS を読み込ませない方法 - lucky bag
特定のブラウザに CSS を読み込ませたくない方法の一つとして、 @import を使う hack がいくつかある。そういった hack を使いたい場合には、各 hack の@import 規則と適用ブラウザを一覧表にまとめたサイトが便利。 Hide CSS from browsers :: @import 縦に@import 規則、横に各ブラウザの対応状況、W3C CSS 検証サービス（W3C CSS Validator）に通るか、その際にエラーが出るのか警告が出るのかが分かるようになっている。プラス記号（ + ）は、その @import 規則を読み込むことが出来、マイナス記号（ - ）はその @import 規則を読み込むことが出来ない。 また、各 @import 規則の通し番号をクリックすることで、現在使用しているブラウザがその @import 規則で CSS を読み込む事が可能かを
Lucky bag::blog: IE で min-width を指定する方法
IE は min-width に対応していないんだけど、「Stu Nicholls | The CSS Playground」でスクリプトを使わず CSS だけで擬似的に min-width を指定する方法が紹介されていたんで、ざっくりとご紹介。この方法は、Win IE のみに効く方法で、Mac IE では機能しない模様。サンプルとして下記の (X)HTML を使用してみる。 <div class="container"> <div class="box"> <div class="contents"> 内容 </div> </div> </div> これに対して、幅 90% で最小幅 400px の指定をしてみる。IE5.5 と IE6 に対応したパターンと IE5.01 と IE5.5 と IE6 に対応したパターンの２種類の方法がある。 実際に試してみたサンプル IE5.5 と IE
Mac版 Internet Explorer 5 の CSS バグと回避方法 日本語訳
以下の文書はウェブ制作者にとって非常に有用な文書でしたが、サイト自体が消滅していたようなのでキャッシュからサルベージしました。 この文書を公開することについては翻訳者さまへメールで連絡をとっていますが、まだご返答を頂いていません。なので、申し出によっては公開を止める可能性もあります。何か問題がありましたら eiji.fukushima@gmail.com までご連絡ください。 また、以下の文書は、ほぼ元のままで手を加えておりません。従ってリンク切れしているものもあります。また、画像はサルベージできませんでした。 公開者 福島英児 公開日 2007-07-31T11:05:00+09:00 この文書について Apple Developer Connection - Working with CSS - CSS Hints for Internet Explorer 5 の日本語訳です。200
CSSによる段組レイアウトのフレームワーク - lucky bag
CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。 CSS による段組レイアウト ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。 また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。 ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。 という非
CSS が valid でなければいけない理由って何ですか？ - lucky bag
って質問されたら、これだ！っていう答えが思いつかない。valid ではない CSS ってのは、単純な記述ミスとかではなくて、例えば Safari の複数背景画像や Opera の opacity なんかの先行実装、もしくは -moz 系などの独自実装を使うことで invalid となっているケース。 (X)HTML で invalid だと、パーサが処理出来ないとか内容が表示されないとかクリティカルな issue が発生するかもしれないけれど、CSS では意図して invalid なコードを書くケースってのがあると思う。それが良いか悪いかは別にしてね。 んで、タイトルの問い。仕様に沿った記述をすべきっていう真っ当な回答があるんだろうけど、なんかこう膝を打つような回答って何だろ。あなたが書く CSS は valid ですか？ valid であろうと心がけていますか？ そうあるべき理由って何で
Lucky bag::blog: プロパティから CSS 仕様書（邦訳）へのリンク
プロパティ -> CSS 仕様書（邦訳）へのリンク 各プロパティから仕様書（邦訳）の当該箇所へのリンクです。( en | ja )
Lucky bag::blog: CSS の習得度レベル 5
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り
Validator は完璧じゃない - lucky bag
(X)HTML や CSS やフィードなどが、仕様に準拠しているかチェックしてくれる Validator がいくつかある。こういったチェックツールってのはケアレスミスなんかを発見するのにスンゲェ便利なわけだけど、盲目的にチェック結果を信じてしまうのはよろしくない。 例えば、一個前のコメントで書いたけど、CSS Validator にもバグがある。単位なしの整数値を line-height の値に指定するとエラーを吐く。line-height: 1.0; などと小数点付きの実数値で指定するとエラーを回避できるんだけど、小数点なしの整数値でも Valid 。仕様書を見ても、小数点なしの整数値は不正だなんて書いちゃいない。 Firefox の拡張「Html Validator for Firefox and Mozilla」でも、ins 要素にブロック要素を内包させてるとNotice: inse
Lucky bag::blog: MTの画像アップロード作業簡略化
何を今更って言うMTカスタマイズの小ネタです。新規エントリーなどで、画像をアップロードする際に、ポップアップ画面で毎回「ローカル・サイト・パス」にチェックを入れて、ディレクトリ名を入れる作業を簡略化する方法です。 CGIを置いてあるディレクトリ内のtmpl/cms/upload.tmplを弄ります。変更する箇所は、２３行目から３１行目の部分です。 <div class="field"> <input type="radio" name="site_path" value="0" checked="checked" /> <<MT_TRANS phrase="Local Archive Path">>/ <input name="extra_path_archive" /><br /> <input type="radio" name="site_path" value="1"
RSS 用の XSL を公開してみる - lucky bag
MT のデフォルトのテンプレートに、Syndicate this site (XML) ってリンクがあったりして、良く分からない人がクリックしちゃうと XML のソースが表示されて、なんじゃこりゃってのがあるかも知れない。そこで当サイトでは、ブラウザで閲覧してもそれなりに見えるように、浅い知識ながら簡単な XSLT で変換していたりするんだけど、何となくその XSL ファイルを公開してみようかなって今突然思いついたんで、大した物じゃない（いや、マジで）けどご入り用なら如何でしょうかとか言ってみたりして。 xsl.zip ダウンロードして解凍すると、RSS1.0、RSS2.0、Atom0.3 それぞれに対応した XSL ファイルと共通の CSS ファイルが入っている。 atom.xsl Atom0.3 用の XSL ファイル rdf.xsl RSS1.0 用の XSL ファイル rss.xs
俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
ID の名前によって IE は印刷時にスクリプトエラー - lucky bag
どうやら、IE の新しいバグが見つかった模様。 Eric's Archived Thoughts: When Printing Kills 事の発端は、A List Apart のアーティクル「Facts and Opinions About PDF Accessibility」を印刷しようとすると、“Object doesn’t support this property or method” というスクリプトエラーが表示される不具合があると。んで、調べてみたところ、(X)HTML コード内のID 名に Tags と付与していた部分が引っかかっていたらしい。な、なんだってー！っつうことで、試してみた。 deth_by_id_testpage.html IE 6 で印刷しようとしたら、下記のエラーメッセージが表示された。 なんのスクリプトも使ってないのにスクリプトエラーですってよ。もしかし
こんなセレクタが CSS にあれば便利なのにと思うセレクタ - lucky bag
CSS を書いていると、こんなセレクタがあれば便利なのになぁと思うものがある。例えば、 F 要素を含む E 要素にマッチさせるセレクタ。img 要素を含む li 要素は list-style-type: none; みたいな。そんなセレクタをオレオレ仕様で無駄に考えてみる。 F 要素を含む E 要素ってのを結合子を使った文脈セレクタ系で実装しようとすると、子供セレクタを逆にして E < F とか。さしずめ親セレクタってな感じか。 li < img { list-style-type: none; } あー、これは無いな。子供セレクタと区別しにくいし、対象要素が宣言ブロック {…} の直前ではなくて遡るってのは何となくカスケーディングという思想に反するかな。 そうなると擬似クラス系か。CSS3 のセレクタで、最新版の草案では無くなっちゃったんだけど、ひとつ前の版には内容擬似クラス（Conte
Lucky bag::blog: 印刷用 CSS に必要なこと
拙サイトにおいて印刷用 CSS の需要と必要性がどれほどあるのかは微妙だけど、とりあえずは用意していたりする。んで、作成した当時にこうした方が良いかなってな事がいくつかあったんで、何となく書き残しておく。いや、別にネタがないとかそう言うことじゃ (ry 基本的に紙媒体を対象とするもんだから、通常のスクリーン用 CSS を作成する時とは考え方が変わってくる。 不必要な要素を非表示 ナビゲーションやらサイドカラム、フォームなんかは必要ないんで、display: none; にしてプリント用紙を節約。 フォント関連 ポイントで決め打ちする。拙サイトの場合は、本文 10pt にしてある。後は、本文などの長文系は明朝系のフォントを指定した方が読みやすい。 色は使わずモノクロ 余計な色を使ってインクを使わせないって事と、モノクロプリンタのユーザに対しての配慮。そして、なるべくスミ 100% などのベタ
CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
Lucky bag::blog: 画像サイズを em で指定
「width 属性と height 属性の話」のエントリーを書いたあとに見つけた「CSS Scale Image Html Tutorial」はなかなか興味深かった。 一般的なブラウザでは、表示メニューから文字サイズを大きくしたり、小さくできたりする（ IE はフォントサイズを px 指定してあると変更不可だけど）。もっと先進的なのは、Opera のズーム機能で、こちらは文字のみならず画像も拡大・縮小できるわけだけど、CSS の em で画像のサイズを指定することで、Firefox や IE などでも文字のみならず画像も拡大・縮小できるぜって話。 サンプル scale_image.html サンプルを作ってみたんで、見てもらえば分かると思う。同じ画像に対して、上は img 要素の width、height 属性でサイズを指定しており、下は CSS にて、単位 em を使って指定している。ブ
フッタを常に下部に配置 - lucky bag
コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに Safari とマック IE では動作しないっぽい。 footerサンプル 実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。 html と body への指定 サンプルのソースを大雑把に分けると下記のような構造になっています。 <div id="container"> <div id="contents"> <div id="header">ヘッダ</div> 内容 </div> <div id="footer">フッタ</div> </div> まず、html と body の高さを 100% と指定しておきます。 container への指定 次に、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
404 Not Found