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 用 迷惑メールの未読数を見えなくしてボールド
グリッドレイアウトのための背景画像 - lucky bag
ウェブページをグリッドレイアウトするのであれば、あらかじめ CSS で背景画像にルーラーみたいな画像を指定しておけば制作時に便利じゃね？ってアイデア。 Subtraction: Grid Computing… and Design Airbag - Ruler. Using a Background Image Grid to Lay Out Your Web Site | Smiley Cat Web Design つうことで、自分が使いやすいと思う方眼画像をちゃちゃっと作ってみた。 gif画像（ご自由にどうぞ） grid.gif (GIF 画像, 200x200 px) 実際に適用してみたサンプル グリッドレイアウトのための背景画像のサンプル ルーラーの最小単位は 5px で、それより若干濃い線が 10px 、さらに濃い線が 50px、んでもって薄いグレーの背景が 100px 単位って
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
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: Firefox で開いているタブを Expos
ここ最近のマックの UI では Exposé が最強って思ってるんだけど、その機能を Firefox のタブで再現できる foXpose がいい感じ。 ネットで何か調べもんをしていると、Firefox のタブを余裕で 10 個以上開くなんて事がある。タブが増えればそれだけタブ幅が狭くなってくるわけで、そうなってくると当然ページタイトルが判別できなくなって、どれがどれか分かんなくなってくる。そんな時 foXpose をインストールしてれば、ステータスバーにある foXpose ボタンで今開いている全てのページをサムネール化、目的のページを選択っつうまさに Exposé な機能。スバラシス！ Ctrl（command) + Shift + X のショートカットも用意されているんだけど、Web Developer Extension 入れてると「ページの縮小」とバッティングしちゃうんで、Web
Lucky bag::blog: プロパティから CSS 仕様書（邦訳）へのリンク
プロパティ -> CSS 仕様書（邦訳）へのリンク 各プロパティから仕様書（邦訳）の当該箇所へのリンクです。( en | ja )
カーボンヒーターを買う時のポイント - lucky bag
昨年の今頃は、ハロゲンヒーターが暖房器具売り場を席巻していた訳だけど、今年はそれに代わってカーボンヒーターが目玉商品らしい。ハロゲンヒーターなんてほとんど見ない。んで、今日そのカーボンヒーターを買ったった。 このカーボンヒーターっつうのは、熱伝導率の高いカーボンを利用してるだけあって、約 2 秒ほどであっと言う間に暖かくなる。カーボンヒーターを買う時に気をつけなければいけないのは、使用されているカーボンが国内製か中国製かってこと。注意してよく見てみると色が全然違う。中国製カーボンはホント真っ黒で、国内製カーボンは濃いグレーってのが分かるはず。分かりづらいけど、この写真は国内製のカーボン。 同じカーボンでも実は暖かさが全然違うらしい。例えば、ほとんどのヒーターには 450W と 900W の 2 モードがあったりするんだけど、中国製カーボンの 900W の暖かさは 日本製カーボンの 450W
CSS だけでフォトギャラリー - lucky bag
CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。 gallery.html (X)HTML は下記のように、画像を順不同のリストで並べている。 <ul id="gallery"> <li><a href="#empty-anchor"><img src="01.png" /></a></li> <li><a href="#empty-anchor"><img src="02.png" /></a></li> <li>
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
Lucky bag::blog: float の問題を overflow で解決
float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。 CSS - Clearing floats 簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。 floatサンプル01 container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。 floatサンプル02 しかし、container に幅と overflow を指定すれば解決します。 #container { background-color: #ddffb
訪問済みリンクを一工夫する - lucky bag
リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。 visited_link_sample.html サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。CSS は下記のような感じで、a 要素に対してそれぞれ a:link、a:hover、a:visited で一つの背景画像の位置を変えることで見せ方を変えている。 li a { padding-left: 25px; line-height:180%; background:URL(mark.png) no
便利なオンラインツール ColorBlender - lucky bag
ウェブサイトやその他デジタルなデザインをする際の色を決めるのに ColorBlender は便利なツールかも知れない。 ベースカラーを決める 基本的にはベースカラーを決めてあげれば自動的に他 5 色を計算してくれる。ベースカラーを決めるには RGB （レッド／グリーン／ブルー）また HSV （色味／彩度／明暗）の2 種類の方法をラジオボタンから選択し、スライダーを動かせば良い。 スライダーの横にある Variations から近似色を選択することも出来る。また、Editing mode のラジオボタンから Direct Edit を選択することで、ベースカラー以外の色をスライダーを使って変更することも可能。 作成したブレンドを保存する ColorBlender の良い点は、作成したブレンドに名前を付けて保存できること。もちろん、作成したブレンドを複数保存することも可能。ちなみに、これはクッ
Lucky bag::blog: CSS で画像ポップアップ
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
