グリッドレイアウトのための背景画像 - 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 単位って
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 サンプ
CSS3 の否定疑似クラスの使いどころ - lucky bag
CSS3 の否定疑似クラス :not() って、使う機会があまり無さそうとか思ってたんだけど、Bite Size Standards で属性セレクタと組み合わせた使用例が紹介されてて、なんかそのピンポイントで指定できてる感がクール！つうか、そうか、そういう使い方かぁ。 input[type="text"]:not([size]) { width: 15em; } 上記コードを解説すると、type="text" な input 要素で size 属性が指定されていないものは width: 15em; ってことになる。うーん、これをユーザスクリプトで指定しておくのも良いかも。size が指定されてなくて入力欄の幅が狭いのって意外とストレス感じるし。 自サイトでも、クラスや ID をわざわざ付与してなくても否定疑似クラス使って指定できるもんって他にもありそう。例えば、(X)HTML の方で wi
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: Firefox で開いているタブを Expos
ここ最近のマックの UI では Exposé が最強って思ってるんだけど、その機能を Firefox のタブで再現できる foXpose がいい感じ。 ネットで何か調べもんをしていると、Firefox のタブを余裕で 10 個以上開くなんて事がある。タブが増えればそれだけタブ幅が狭くなってくるわけで、そうなってくると当然ページタイトルが判別できなくなって、どれがどれか分かんなくなってくる。そんな時 foXpose をインストールしてれば、ステータスバーにある foXpose ボタンで今開いている全てのページをサムネール化、目的のページを選択っつうまさに Exposé な機能。スバラシス！ Ctrl（command) + Shift + X のショートカットも用意されているんだけど、Web Developer Extension 入れてると「ページの縮小」とバッティングしちゃうんで、Web
カーボンヒーターを買う時のポイント - lucky bag
昨年の今頃は、ハロゲンヒーターが暖房器具売り場を席巻していた訳だけど、今年はそれに代わってカーボンヒーターが目玉商品らしい。ハロゲンヒーターなんてほとんど見ない。んで、今日そのカーボンヒーターを買ったった。 このカーボンヒーターっつうのは、熱伝導率の高いカーボンを利用してるだけあって、約 2 秒ほどであっと言う間に暖かくなる。カーボンヒーターを買う時に気をつけなければいけないのは、使用されているカーボンが国内製か中国製かってこと。注意してよく見てみると色が全然違う。中国製カーボンはホント真っ黒で、国内製カーボンは濃いグレーってのが分かるはず。分かりづらいけど、この写真は国内製のカーボン。 同じカーボンでも実は暖かさが全然違うらしい。例えば、ほとんどのヒーターには 450W と 900W の 2 モードがあったりするんだけど、中国製カーボンの 900W の暖かさは 日本製カーボンの 450W
フォトショップのチュートリアルサイト - lucky bag
フォトショップ持ってるんだけど、イケてるっぽいウェブ用素材の作り方が分からないとか、フィルターを使った加工方法が分からないって人は何下に多いのかもしれない。かと言って、教則本は値段もそれなりにするし、必要としないチュートリアルも載ってるんで、なんだかなぁって思っている人は Tutorial Select.com を一回覗いてみると良いかもしれない。 無料のチュートリアル このサイトではフォトショップだけでなく PHP や Flash などのチュートリアルを様々な人たちが投稿してくれているんだけど、一番多いのはフォトショップ関連。もちろん海外サイトなんで解説は英語なんだけど、画像付きで解説しているんで英語分かんなくてもなんとかなっちゃう。多分。恐らく。もしかしたら。 とりあえず、上部メニューから「Top viewed tutorials」へ行くと、閲覧されている数が多い順にソートしてあったり
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: CSS デザインギャラリー
世の中には (X)HTML + CSS の素ん晴らしいデザインでレイアウトされている方なんつうのはそりゃ沢山いるわけで、そんなサイトを集めたデザインギャラリー（ショーケース）サイトってのを見ていると、おいおいフォトショップ腕自慢かよって感もあるけど、結構インスパイアされたりされなかったり。そんな CSS デザインギャラリーサイトで自分が知っているものをちょっとまとめてみた。（ちなみに順不同） CSS Vault » The Web's CSS Site CSS Beauty | CSS Design Showcase Unmatched Style | CSS Design Gallery and Design Inspiration. CSS Drive css thesis: sites, that's all. » screenspire.com | the leading full
訪問済みリンクを一工夫する - 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
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
IE7 Beta の CSS に関する対応状況 - lucky bag
IEBlog でも発表されているけど、Windows Vista と IE 7 のベータ版がデベロッパーに配布されている。個人的に気になるのは IE 7 の方なんだけど、mezzoblue で IE 7 Beta の CSS 周りに関してスクリーンショットと共に報告がされている。 IE7 CSS Updates IE には数々の酷いバグがあったり、未対応の CSS セレクタがあったりするんだけど、その辺りに関して対応されているもの、まだ対応されていないもの等をざっと抜き出してみた。 対応されているもの PNG 画像への対応 Peekaboo Bug （完全ではないかも知れない） Guillotine Bug （完全ではないかも知れない） 未対応のもの Line-height Bug Border Chaos Italic のオーバーフロー Doubled Float-Margin Bug
Firefox のサイドバーを強化する機能拡張 - lucky bag
ここ最近インストールした Firefox の機能拡張の中で、All-In-One Sidebar が自分の中で地味にヒットした。 インストールすると Opera のサイドバーのように左横にボタンが表示される。んでもって、サイドバーに「機能拡張」「ダウンロード」「テーマ」「DOM インスペクタ」「JavaScript コンソール」等々が表示できるようになるっつうシロモノ。ちなみに、Ez Sidebar を入れてるとコンフリクト起こすみたい。ヘタするとプロファイルがぶっ壊れるらしい。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefox でページ情報からメディアを取得 - lucky bag