line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Lucky bag::blog: Ajax を利用したアクセス解析ツール mapsurface
非常にライトウェイトなアクセス解析ツール mapsurface 。ベータテストの申し込みしをしてから約 10 日ほど、忘れていた頃にアカウントが貰えたんでちょっと使ってみた。 mapsurface | web page activity widget mapsurface is a web page activity widget that helps you quickly see how people find, navigate and value the pages of your web site. Google Analytics 等のサードパーティ製アクセス解析サービスは管理画面にログインしないと解析結果が確認できないわけだど、mapsurface の場合は今閲覧しているページ上でそのページの解析結果を即座に、しかも誰でも見ることができる。とりあえずテストページを作ってみたん
Lucky bag::blog: CSS の習得度レベル 5
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り
Lucky bag::blog: 維持しやすい CSS を考える
wg:Maintainable CSS CSS を維持・管理していく上で、保守性の高い CSS を作成するにはどういったことを意識して作成するだろうか。上記サイトでは個人的な好みと前置きし、いくつかアイデアを述べている。コメント欄なんかでもちょっと盛り上がってて、激しく同意できる部分もあったりそりゃ違うなとか思ったりと、色々と考えさせられた。 CSS を作成する際に自分が考えること 自分でも改めてまとめてみると何か新しい事が見えてくるかもしれないし、コメントで何かヒントやアイデアを教えてくれる人も居るかもしれないなぁとか思ったんで、ちょっとまとめてみた（上記サイトと被ってるのが多いけど）。 CSS ファイルの肥大化を抑えるよう、作成中にボツになったスタイルは必ず削除しておく。頻繁にスタイルを変えるような場合は、指定する必要のないスタイルが残っていないかチェックする。 どれだけ些細な事でも、
視覚的に分かりやすい 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
