RedLine Magazine : 気になった初期化CSS
気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが
横並びの画像を均等配置する | ヨモツネット
横並びの画像や inline-block の要素を、均等配置 (justify) にするための CSS コードです。 IE 6, Firefox 2, Opera 9.6, Safari 3 で意図したとおりに表示されることを確認しました。 動作確認用の demo 説明 以下のようなコードを準備します。 HTML のソースコード例 <ul class="images"> <li><img src="img01.png" width="100" height="100" alt="" /></li> <li><img src="img01.png" width="100" height="100" alt="" /></li> <li><img src="img01.png" width="100" height="100" alt="" /></li> </ul> この HTML ソースコ
CSS だけで複数の box の高さをそろえる | ヨモツネット
CSS だけで複数の box の高さをそろえる方法についての demo と解説です。この方法では JavaScript は使用しません。 テキストが数行程度の box に限定されてしまいますが、JavaScript のエラーの心配がなかったり、JavaScript を無効にしている環境にも対応します。 動作確認用の demo box の高さが変わる要因のほとんどは、テキストの量によるものなので、テキストの入るp要素などにheightをemで指定します。max で 3 行とするなら div.sample p.sampleText{ height:4.8em; line-height:1.1; overflow:hidden; } のように指定します。 1 行の高さは 1.1 em、box の高さは 4.8 emで 3 行分 + バッファを指定します。 em で高さを指定しているので、フォン
雑貨kUkan
飲み口が広いって大事な気がします。 ぐびぐび飲みまくれるほうが、水分補給がはかどるというもの。そしてパッキンがないのもいいですね。もう、世の中からパッキンを減らして欲しい限りです。
clearfixの決定版を作る －IE編－
今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか、あらためておさえておこう。本来なら、ひとつでも多くの種類、バージョンのブラウザでfloatをクリアできる（もしくは同じ効果を得られる）ことをもって、決定版とすべきなのだろうが、ここでは少し違う方針をとりたいと思う。簡単にいえば、CSS自体の正しさとか美しさを優先したいということだ。逆に、そのためには古いバージョンのブラウザなどは犠牲になってもしょうがない、と考えている。ここでいう「決定版」を定義してみよう。 1. 文法的に正しいこと このこととイコールとするには異論があるかもしれないが、「W3Cのvalidatorを通ること」と言い換えることもできる。少なくとも、通らないより通るほうがいい。 2. 内容的に理にかなっていること、意味不明でないこと いわゆるCSS
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
この数値文字参照がすごい! 2008 年版
早いもので今年ももうこの季節である。文字実体参照に比べて覚えづらい数値文字参照、その中でも使用頻度の高いものにスポットを当てる「この数値文字参照がすごい!」の 2008 年版をお届けする。 第 1 位: 〜 (〜) 満場一致。文句なしでぶっちぎりの首位に立ったのはご存知「波ダッシュ」。その ややこしい背景 を考えれば HTML での表記は可能な限り避けて他の表現で代替したいところ。たとえば英語圏では「いつからいつまで」「どこからどこまで」の「から」は en ダッシュ (–) を使うことが多いみたい (ソース: Dash - Wikipedia, the free encyclopedia) なのでそうしてみたり。 とはいえやむを得ずニョロニョロするしかない場合も多い。そんなときはあわてずこの数値文字参照を。その結果、まわりから「なんか汚くね?」と軽く却下されても、来年こそは負
のっちメソッド 2: なりゆき幅で横並び
以前に書いた のっちメソッド: One pixel notched corners の改良版。まずはスクリーン・ショットを。 Gmail の「ラベル」なんかでも使われている、ボックスの四隅が 1 px 欠けた疑似角丸的な表現。これを CSS のみで実現するテクニックが「のっちメソッド」なわけだが、幅が固定のボックスにしか適用できなかった。そこで上図のように内容に応じて縮む「なりゆき幅」を実現するのが今日のお題。 まずはマークアップ。それぞれのボックスはブロックかインラインかを問わず二重の要素でラップされている必要がある。例えばこんな感じ: <ul> <li><a href="#">HTML/XHTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <ul> CSS では、まず float
横並びにしたリスト項目の区切り
こんなふうに、横並びにしたリスト項目の間に区切りを表示させたいときにどうするか? すべての項目に区切りを表示させてしまうと区切りがひとつ多くなってしまうので、なんらかの工夫が必要になってくるわけです。 <ul> <li><a href="/">Home</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/portfolio/">Portfolio</a></li> <li><a href="/about/">About</a></li> </ul> 上記のようなマークアップを例に、CSS でリスト項目を float: left; または display: inline; で横に並べ、各項目の左側にボーダーまたは背景画像で区切りを配置する場合を考えてみます。 おそらくもっともスマートなのは、いったんすべての項目に
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
