固定幅ベースの elastic レイアウトサンプル
elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
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 |
Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite
タイトル長っ！ まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ（CSS3も含む）にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。 Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。 上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちな
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::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
ウェブページをグリッドレイアウトするのであれば、あらかじめ 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 単位って
del.icio.us タグがファイルタイプをサポート - lucky bag
どうやら、del.icio.us では、ブックマークしたもののファイルタイプによって、自動的にシステムタグに分類されるようになったらしい。 [delicious-discuss] media support Niall Kennedy's Weblog: del.icio.us tags by file type どういう事かっつうと、mp3 や MPEG なんかをブックマークすると、そのメディアタイプによって、system tags に分類される。 system:media:audio タグに含まれるもの *.mp3 は "system:filetype:mp3" *.wav は "system:filetype:wav" system:media:video タグに含まれるもの *.mpg は "system:filetype:mpg" *.mpeg は "system:filetyp
Lucky bag::blog: CSS Reboot に見るウェブデザインのトレンド
以前にも取り上げた事があったけど、CSS Reboot ってのは、ウェブサイトのリデザインを期日を決めて一斉に行なうイベント。多分もう 3 回目くらいだと思うんだけど、5 月 1 日に 2006 Spring が行なわれたばっか。CSS Reboot のサイトでは、リデザインしたウェブサイトが紹介されてて、誰でも気に入ったサイトに投票できるようになっている。ちなみに、CSS Reboot のその場でクリックするだけで評価できる vote 機能は、シンプルで良いな。送信した後に、Total score も表示されるし。 んで、Christian Montoya が今回の Reboot でのデザインのトレンドについて書いていたんだけど、大雑把に書き出してみると下記のような感じ。 1024px の幅 Silk Icons の使用 暗い背景に明るい色のテキスト 大きめのフッタ 1024px の幅
del.icio.us のブックマークを表示するスクリプト
ソーシャルブックマーク del.icio.us が新しい試みを提供している。del.icio.us にログインした状態で、下記のアドレスにアクセスすると自分のブックマークを自サイトに表示するための JavaScript を生成することが出来る。 del.icio.us / doc / feeds / js 設定出来る項目は下記の通り。 表示するブックマーク数 タイトル Tag の表示有無 extended の表示有無 del.icio.us のアイコン表示有無 bullets の設定 特定 Tag の表示設定 これらの設定がリアルタイムで上部のスクリプトと左のプレビューに反映される。また、CSS で見栄えを変えたい場合は、http://del.icio.us/doc/feeds/js/styling にて実際の (X)HTML のソースコードを確認することが出来る。 お手軽にサイドバーなど
Lucky bag::blog: CSS の習得度レベル 5
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り
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::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
