line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
外部CSSの文字コード指定 - lucky bag
XHTMLなりHTMLでは、xml宣言やhead内のmeta http-equivで文字コードの指定を行います。CSSに関してもW3Cの仕様書にスタイルシートが分離したファイルに存在する場合，利用者エージェントは，次の優先順位を守り，文書の文字符号化を決定しなければならない。と明記してあります。 "Content-Type"フィールドのHTTP"charset"パラメーター @charsetの@規則 参照する文書の言語機構。例えば，HTMLの場合は，LINK要素の"charset"属性 基本的に外部CSSファイルが英数字だけの記述の場合や、html文書と同じ文字コードであれば指定の必要はないと言われたりもします。しかし、font-familyでＭＳ Ｐゴシックやヒラギノ角ゴ Pro W3などと指定する場合もありますし、@charsetを指定しないとネスケ6では誤った解釈をする場合があるよう
CSSによる段組レイアウトのフレームワーク - lucky bag
CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。 CSS による段組レイアウト ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。 また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。 ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。 という非
俗に言う 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 させる
固定幅ベースの elastic レイアウトサンプル
elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
「実践 Web Standards Design」という本を書きました - lucky bag
お知らせというか宣伝。九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせて頂きました。3ping.org の wu さんと hxxk.jp の真琴さんとの共著です。2007 年 2 月 23 日頃 から書店に並び始めるみたいです。Amazon にはまだ載っていないようです。ちなみに、カバーデザインを見せて頂いた瞬間から執筆者の間では通称「ホップ本」（真琴さん命名）ということになってます。たぶん。 書籍名 : 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips ページ数 : 436 ページ 定価 : 3,200 円 最初に wu さんから共著のお誘いを頂いたのが 2006 年の 5 月頃。6 月に行った打ち合わせ後の著者 3 人での飲みは、気のせいか
Lucky bag::blog: ピュア CSS なプレゼン用スライドショー
前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。 ピュアCSS なプレゼン用スライドショー サンプル <div id="section-01" class="section"> <!-- 1ページ目 --> … </div> <div id="section-02" class="section"> <!-- 2ページ目 --> … </div> <div id="section-0
Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
ブラウザ上でワイヤーフレームが作れるFrametastic - lucky bag
ワイヤーフレームっつうと、デザインの前にページ内の構成要素を明確にするもので、作成に使うツールはイラレやフォトショップ、エクセルやパワーポイントなど、人によって違うのかもしれない。そんなワイヤーフレームをブラウザ上で簡単に作れるウルトラ ライトウェイトな Frametastic なんてのを見つけた。ちなみに、今のところは Firefox のみでしか使えないみたい。 In-Browser Wireframe Prototyping with Frametastic What I’ve really longed for is an ultra-lightweight, simple tool for producing wireframes right inside the browser. No flash, no java, darn it - no server even - just
Lucky bag::blog: CSS3 の Selectors と CSS3 Advanced Layout Module
増えているものや削除されたものがあるみたいね。とりあえず、メモとして現状 CSS3 で追加されたセレクタを全て抜き出してみる。 E[foo^="bar"] foo 属性値が文字列 bar で始まる E 要素にマッチ E[foo$="bar"] foo 属性値が文字列 bar で終わる E 要素にマッチ E[foo*="bar"] foo 属性値が部分文字列 bar を含んでいる E 要素にマッチ E:root ドキュメントのルートである E 要素にマッチ E:nth-child(n) 親の中で n 番目の子である E 要素にマッチ E:nth-last-child(n) 親の中で最後から数えて n 番目の子である E 要素にマッチ E:nth-of-type(n) 同じ要素名を持つ兄弟の n 番目の E 要素にマッチ E:nth-last-of-type(n) 同じ要素名を持つ兄弟の最後か
視覚的に分かりやすい CSS セレクタの手引き - lucky bag
CSS2.1 で特定の要素を指定する場合には、下記のセレクタ等を使用して当該要素を選択出来る。 全称セレクタ * {background: #fff;} 全ての要素 タイプセレクタ p {background: #fff;} 全ての p 要素 子孫セレクタ div p {background: #fff;} div 要素の子要素（下位）のp 要素 子供セレクタ div > p {background: #fff;} div 要素の直接の子要素（直接下位）のp 要素 隣接セレクタ p + p {background: #fff;} 同じ親要素を持つ p 要素に継続する p 要素（兄弟） :first-child 疑似クラス div p:first-child {background: #fff;} div 要素内で一番最初に出現する p 要素 この中で子供セレクタ、隣接セレクタ、:first
Lucky bag::blog: 個人的に気に入ってるユーザースタイルシート
今んとこ、ガチで不動のレギュラーメンバーな自分のユーザースタイルシートを晒してみる。userstyles.org で見つけたやつとか、自分で書いたやつとか。ちなみに、ユーザースタイルシートの管理は Firefox の 拡張 Stylish で。 livedoor Reader 用 各記事タイトルの下にある"元記事"って部分を URI に置き換えて表示 @-moz-document domain("reader.livedoor.com") { div.item_info { text-indent: -3em; } div.item_info a { visibility: hidden; } div.item_info a::after { visibility: visible; content: attr(href); } } Gmail 用 迷惑メールの未読数を見えなくしてボールド
カラー関連の情報を CSS 内に記述 - lucky bag
CSS ファイル内に Color Glossary を記述しておくってのは、複数人で CSS を管理する際はもちろん、自分にとっても明快なんで、とても良いアイデアだと思う。 Garrett Dimon / CSS Maintenance Tip: Use a Color Glossary Glossary をもとに CSS ファイル内を検索・置換で色の変更なんかも簡単にできるし、メンテナンス性が高まるのは言うまでもない。こういった記述は、自分（またはグループ）が分かりやすいように関連づけて明記しておくのが良いと思う。例えば、ヘッダの色とか、見出しの色とかのパーツ単位でも構わないんじゃないかと。 んでもって、ウチの場合はちょっと拡張して、CSS 内に下記のようにカラーネーム、Hex 値と RGB 値の記述をしている。 /*================ColorScheme========
IE 7 用の CSS ハック - lucky bag
この記事で紹介しているハックとは別のソリューションを「IE7 を含むモダンブラウザ向けの CSS ハックまとめ」と言う記事で紹介しているので、合わせてご覧になって見ると良いかもしれません。 Internet Explorer 7 の Beta 2 Preview が公開された。んで、公式的にはバグを取り除くんで現存する CSS ハックは使えなくなるよってことだったんだけど、早速 IE 7 向けの CSS ハックが報告されている。 iBloom Studios | Articles | The IE7 CSS Hack カラクリとしては、IE7 が対応していない :lang() 疑似クラスを使うって方法らしい。下記のような (X)HTML を例とする。 <body lang="ja"> <div id="contents"> <p>foo</p> </div> </body> これに対して、
Lucky bag::blog: プロパティから CSS 仕様書（邦訳）へのリンク
プロパティ -> CSS 仕様書（邦訳）へのリンク 各プロパティから仕様書（邦訳）の当該箇所へのリンクです。( en | ja )
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
