「css」タグアーカイブ

html内に余計な記述をせず、floatを解除するcss

cssのtipsでは久々に目から鱗だったので、自分メモ。よくある左にナビゲーション左に本文を(または逆に)配置するレイアウト。左右に寄せたい要素float:left;またはfloat:right;を指定した場合、背景が消えたり、内容より短い高さになってしまう。flotで寄せた内容は親要素に含まれず、親要素にhightを指定していないとfloatした小要素より短くなってしまう仕様によるもの。

今までは、clear:both;を指定した<br />や空の<div></div>を最下部に入れて処理してたけど、空のdivやら意味のない要素をhtml内に記述するのはなんだか気が引ける。そう思って探してみたら、html内には余計な空要素等を追加することなく、cssだけで処理する方法が紹介されてました。

clearfixでfloatを解除 | d-spica

続きを読む html内に余計な記述をせず、floatを解除するcss

このエントリーをはてなブックマークに追加
はてなブックマーク - html内に余計な記述をせず、floatを解除するcss
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

CSSとpng画像1つだけで作るグラーデーションテキストエフェクト

これはなかなかいいアイデア。あくまでもテキストはテキストデータとして保持したまま、見た目だけグラデーション。 CSS見れば、「ああ、なるほど」って感じで複雑な事はしていない。発想がキラリです。

続きを読む CSSとpng画像1つだけで作るグラーデーションテキストエフェクト

このエントリーをはてなブックマークに追加
はてなブックマーク - CSSとpng画像1つだけで作るグラーデーションテキストエフェクト
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

ボックス要素のサイズを表示するブックマークレット“XRAY”

xray_t.png

久々に便利そうなブックマークレットを発見。調べたいページで登録したブックマークレットをクリックするとのボックス要素の、表示位置、サイズや、margin、padding、borderの上下左右の幅、positionやfloatの状態を表示。

XRAY :: for web developers

続きを読む ボックス要素のサイズを表示するブックマークレット“XRAY”

このエントリーをはてなブックマークに追加
はてなブックマーク - ボックス要素のサイズを表示するブックマークレット“XRAY”
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

Firefoxで高さ 100% の Flash が1/5しか表示されない

恥ずかしながら知らなかったんで、自分メモ。

フルスクリーンのFlashサイトを作成中、Mozilla系ブラウザ(Firefox,Netscape,Mozilla)だけFlashの高さが半分以下で表示されてしまい、バグとは知らず勝手にハマる。

続きを読む Firefoxで高さ 100% の Flash が1/5しか表示されない

このエントリーをはてなブックマークに追加
はてなブックマーク - Firefoxで高さ 100% の Flash が1/5しか表示されない
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

SBSのBlueDot、サービス改善に向けてアンケート

bluedot_form.ong_t.jpeg

ブックマーク登録時のインターフェースが特徴のソーシャルブックマークサービスBlue Dotから、サービス改善に向けてのアンケートの案内メールがきてました。

今使っているSBSは老舗deliciousと、このBluedot。Blue Dotの投稿時のU/Iはなかなか使い勝手がよくて好きなんだけど。登録したブックマークを後で見るときの使い勝手がイマイチなんだな。主に利用するdeliciousは、これでもかってほどシンプルな感じが実は使い勝手にも有利に働いてて。大量のブックマークを斜め読みするときなんかはこっちの方が実は見やすかったり、それとよく利用するのが「自分が登録したサイトを同様に登録してる他人は、他にどんなサイトを登録してるのか」みれる機能。実はこれが主に利用する部分だったりする。「このサイトをべた褒めしてるこの方は、いったい他にどんなサイトを見てるのか?」てな感じで他人様のブックマークをたどって未知の情報へつながっていく感じ。GoogleやYahooで検索して探す手もある訳だけど、ある程度好みの予想がつく(当たってるかはわからんが)他人様のブックマーク集をのぞくことで「キーワード」検索ならぬ「好み」検索。

「好み/趣味趣向」というのは曖昧すぎて、単語で表現するのが非常に難しい(少なくとも自分には)。「ちょっと昔っぽいような、60年代?いや70年代?風?でカラフルなんだけどそんなビビッドすぎない感じの雰囲気で…」とかGoogleで探しても見つからん訳ですよ。いや見つかるんだろうけど、頑張れば。SBSをたどっても、もちろん一発では見つからん訳ですが、趣味趣向が同じベクトルを向いているであろう他人様を発見したときは、ちょっとした宝の山(大げさ)だったりする訳で。他人様のブックマークをブックマークしては暇なときにつらつらのぞいて楽しむわけですよ。

余談ですが、冒頭のサムネールのリンクで開く画像はBlue Dotのアンケートページ。フォームのデザインはなかなか悪くないなと。CSSでチェックボタンを画像に変えてる部分。ユーザビリティ的に「普通と違う」デザインには賛否両論ではあろうかと思いますが、ブラウザデフォルトのちまちましたチェックボタンよかずっとクリックしやすくて、地味に関心。

このエントリーをはてなブックマークに追加
はてなブックマーク - SBSのBlueDot、サービス改善に向けてアンケート
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

winIE 5.5/6 で透過pngを表示する(2)

linkablePNG.png 前回、windows IE 5.5 / 6 でもアルファチャンネル付きpngファイルを透過表示する方法を取り上げました。

IEに実装されているフィルター機能alphaImageLorderを利用して、winIEでも半透明のpngを表示できるのですが、この方法で背景画像を貼り込んだブロック要素内ではリンクがクリックできない状態になってしまいます。 続きを読む winIE 5.5/6 で透過pngを表示する(2)

このエントリーをはてなブックマークに追加
はてなブックマーク - winIE 5.5/6 で透過pngを表示する(2)
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

winIE 5.5/6 で透過pngを表示する(1)

pngOpacity-thum.jpg 自サイトを一から作り直してる最中で、背景にアルファチャンネル付きpngで透過する背景を使おうかと。今時は多くのブラウザが24bit png のアルファチャンネルに対応しているので、基本的にはimgタグで張り込むのもCSSでブロック要素の背景に張り込むのscrなりurlなりで指定するだけで何らgifやjpgとかわらずに使える…のが理想なのですが、最も普及しているFuckin’ブラウザ「Windows版 InternetExplorer」だけは未だにアルファチャンンネルを利用した24bit透過pngに対応していません。既にbeta Previewがリリースされ、正式リリースが待たれるIE7では標準対応するようですが、リリース後も当分の間は旧バージョンを利用するユーザーが多いであろうことは否めません。

そこで、調べてみるとIE5.5 / 6でも透過pngを表示することが可能とのこと。ieお得意の独自実装機能を利用します。 続きを読む winIE 5.5/6 で透過pngを表示する(1)

このエントリーをはてなブックマークに追加
はてなブックマーク - winIE 5.5/6 で透過pngを表示する(1)
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

IE7 CSS実装検証

【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (MYCOMジャーナル)

MYCOMジャーナルの特集で、現在ベータリリース中のInternet Explorer7のCSS実装状況をIE6やFirefoxと比較しながら24項目にわたって検証しています。これを見る限り頻繁に問題点として取りざたされる部分においてはほぼ標準に準拠する形になってきているようですね。いくつか不具合も指摘されてますが、beta2を対象にした記事なのでその後のバージョンで改善されている、あるいは改善予定の部分もあるかもしれません。

このエントリーをはてなブックマークに追加
はてなブックマーク - IE7 CSS実装検証
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]