Lucky bag::blog: ピュア CSS なプレゼン用スライドショー
前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。 ピュアCSS なプレゼン用スライドショー サンプル <div id="section-01" class="section"> <!-- 1ページ目 --> … </div> <div id="section-02" class="section"> <!-- 2ページ目 --> … </div> <div id="section-0
Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite
タイトル長っ！ まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ（CSS3も含む）にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。 Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。 上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちな
Lucky bag: : blog: 背景画像に使える透過 GIF
斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！ 使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。 斜線 oblique-line_1px.gi
グリッドレイアウトのための背景画像 - 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 単位って
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 の幅
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 仕様書（邦訳）へのリンク
プロパティ -> CSS 仕様書（邦訳）へのリンク 各プロパティから仕様書（邦訳）の当該箇所へのリンクです。( en | ja )
iTunes ミュージックビデオをダウンロードする方法
iTunes ミュージックストア上のミュージックビデオをローカルに落とす方法ってのを試してみた。 How-To: Download music videos from iTunes ミュージックストアの左メニューに『ミュージックビデオ』メニューがあるんだけど、日本のミュージックストアにはまだまだビデオが揃ってない。一方、米国の方とかだと今日現在で 596 本あったりするんで、そっちで試してみた。 ミュージックストアの左メニューから『Music Videos』を選択する。 登録されているビデオがサムネールで表示されるんで、落としたいビデオを選択する。 small もしくは Large 上で右クリック -> "iTunes ミュージックストア URL をコピー" 「.:UNEASYsilence:. - iTunes Music Videos」へアクセスし、URL をペーストして "submi
Firefox で使える about: - lucky bag
Firefox にはスキームとしてabout: が用意されていて、例えば about:config とロケーションバーに打つことで内部変数へアクセスすることが可能ってのは結構知られてる。「about: などの擬似 URL」によると、モジラ（ Netscape Navigator ）の頃にはこの about: ホゲホゲがかなりあったらしいんだけど、現在 Firefox でも使用できるものは下記の通り（だと思う）。 about: about:config about:cache about:credits about:plugins about:buildconfig about:blank about:mozilla 最後の about:mozilla ではイースターエッグとして「モジラの書」からの引用（？）を見ることができるんだけど、文言を見る限りではもしかしたらモジラのやつは違う文言だっ
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
Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張 - lucky bag
blog.tokyoace4.com - Firefoxで表示画面をpngにするextention (2005年9月 5日 17:53) screen grab! こりゃ便利だ。 とてつもなく便利だ。感動した。... 続きを読む 脳無しの呟き - Screen grab! (Firefox Extension) (2005年9月 5日 20:10) 『Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張』（Lucky bag::blog）で知ったのだが、これはスゴイ。仕事でサイトのスクリーンショッ... 続きを読む Happy Hour - 続：WEBキャプチャツール (2005年9月 5日 20:13) ちょーどタイムリーな記事はけーん。 Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張 FireworksのExtensionにもあるそうです。 素... 続きを読
CSS の値に変数を使用する - lucky bag
例えば、サイトに使用しているカラーとかが決まっていたとして、CSS で色を要素等に指定していくわけだけど、指定する値に変数が使えれば便利じゃね？ってのを実現したのが CSS-SSV 。 CSS-SSV // ShaunInman.com 上記サイトより css-ssv.php をダウンロードして、CSS ファイルを置いてあるディレクトリにアップ。.css の拡張子でも php と認識させられるように .htaccess で下記のように設定。 AddType application/x-httpd-php .css php_value auto_prepend_file /CSS ファイルを置いてあるディレクトリへのローカルパス/css-ssv.php 準備はこれで完了。変数を定義するには下記のような感じにする。 @server variables { BaseColor: #86B933;
Lucky bag::blog: CSS を作成する際のお約束
CSS を作成している際に、当然の如くブラウザによって描画結果に違いが出てくるわけで、ムキーとか言いながらその差異を埋めていく作業が一番面倒っちゃあ面倒。んで、ボックスモデルやその他ブラウザごとのバグ以外で、極力そう言った差異を少なくするためには、一番最初に全称セレクタを使ってブラウザのデフォルトスタイルを消してしまうのが手っ取り早い。 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; } ここらへんは基本だと思ってたんだけど、未だにこれをやっていなくて、あのブラウザとこのブラウザで見た目が違うんですけどってのは結構いたりする。上記に text-decoration: none; や font-size: 100%; なんかを加えても良いかも知れないけど、最低限マージンとパディングは無くしておくことをお薦
Lucky bag::blog: 画像サイズを em で指定
「width 属性と height 属性の話」のエントリーを書いたあとに見つけた「CSS Scale Image Html Tutorial」はなかなか興味深かった。 一般的なブラウザでは、表示メニューから文字サイズを大きくしたり、小さくできたりする（ IE はフォントサイズを px 指定してあると変更不可だけど）。もっと先進的なのは、Opera のズーム機能で、こちらは文字のみならず画像も拡大・縮小できるわけだけど、CSS の em で画像のサイズを指定することで、Firefox や IE などでも文字のみならず画像も拡大・縮小できるぜって話。 サンプル scale_image.html サンプルを作ってみたんで、見てもらえば分かると思う。同じ画像に対して、上は img 要素の width、height 属性でサイズを指定しており、下は CSS にて、単位 em を使って指定している。ブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
