ブラウザ(Win) CSSセレクタ対応状況まとめ (2010年5月14日版)
下記サイトのセレクタテストで調べた結果です。調べた日は2010年5月14日です。(以後バージョンアップで対応状況は変化すると思います) CSS3 Selectors Test - CSS3 . Info Firefox Saf...
>>「ブラウザ(Win) CSSセレクタ対応状況まとめ (2010年5月14日版)」の続きを読む...
2010年05月14日 10:02 | Red | コメント (0) | トラックバック (0)
CSS セレクタ総復習 (2010年5月版)
CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://ww...
>>「CSS セレクタ総復習 (2010年5月版)」の続きを読む...
2010年05月10日 13:59 | Red | コメント (6) | トラックバック (0)
DW用 CSS3対応セレクタコードヒント
2010.04.04追記 このエントリ書いて寝て起きたら修正版が出てた!仕事速い!このエントリの下の方で属性セレクタがなんたらかんたら…と書いてる部分に対して、修正してくださってます。 CSSセレクターコードヒント修正 - dwlog.ne...
>>「DW用 CSS3対応セレクタコードヒント」の続きを読む...
2010年04月03日 21:33 | Red | コメント (2) | トラックバック (1)
近況とか。CSS,PHP雑記の巻。
しばらく更新を怠ってたので、なんか書こうかなーと。 最近のもろもろ。雑記。日記。チラシの裏とも言う。 CSS関連 雑記 IE三兄弟にモヤモヤしてた。 検証ブラウザにIE8を含まなくちゃならなくなってから、IE6.7.8のIE三兄弟の対応にイ...
>>「近況とか。CSS,PHP雑記の巻。」の続きを読む...
2010年04月03日 21:11 | Red | コメント (3) | トラックバック (0)
CSS テキストリンクもボタンっぽくポチっとする
最近CSS関連の情報ってCSS3のお話が多いんだけど、今日は初歩的なところに戻って昔よくあったみたいな小ネタ。 こちらのページにテキストリンクもボタンリンクみたいにクリックしたらヘコませようぜっていうお話がありました。 >>Ma...
>>「CSS テキストリンクもボタンっぽくポチっとする」の続きを読む...
2010年02月02日 11:19 | Red | コメント (0) | トラックバック (0)
CSS 画像の一部を使う3つの方法
こちらの記事でCSSを利用して画像の一部分だけを表示させる3つのテクニックが載ってました。タイムリーに実務で使うかも!とか思ったのでメモがてらにエントリ。 3 Easy and Fast CSS Techniques for Faux Im...
>>「CSS 画像の一部を使う3つの方法」の続きを読む...
2009年09月28日 12:49 | Red | コメント (2) | トラックバック (0)
印刷用CSSのお話
最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの...
2009年07月02日 23:31 | Red | コメント (11) | トラックバック (0)
カラム落ちとか自分のコーディングとかの話
先日の自分もプロパティの書き順とかのエントリに頂いたブクマコメントでこういうのがありました。forestkさん、コメントありがとー。 padding, margin が width, height の側に無いと調整してたら 「カラム落ちした...
>>「カラム落ちとか自分のコーディングとかの話」の続きを読む...
2009年03月01日 16:03 | Red | コメント (3) | トラックバック (0)
自分もプロパティの書き順とか
CSS HappyLife の中の人がTwitterでブログのネタが無いってぼやいてたので、プロパティ(宣言)の書く順番が気になるからそれネタにしてくだせーってリクエストしたら書いてくださったヽ(´ー`)ノ 自分のプロパティの書き順とか|C...
2009年02月27日 19:38 | Red | コメント (7) | トラックバック (2)
OLリスト 番号だけ画像なしでスタイルを変更
こちらのページより、面白いなーと思ったCSSネタ。 CSS Code Snippets : 15 Wicked Tricks | DevSnippets 上記ページの8番目の「Style Your Ordered List」の部分。これはO...
>>「OLリスト 番号だけ画像なしでスタイルを変更」の続きを読む...
2009年02月01日 14:52 | Red | コメント (9) | トラックバック (0)
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)
>>081205:追記 解決しました (追記:081205)はてブのコメント見たらこの下記の症状が出ない方もいらっしゃるみたい。私が検証に使ってるIE6はIETesterのものと「IE6 standalone の落とし穴」ってい...
>>「IE6 → 透過PNG+overflow=混ぜるな危険(追記有)」の続きを読む...
2008年12月04日 23:19 | Red | コメント (12) | トラックバック (0)
display:table関連を使って横並び均一配置
IE8でdisplay:table関連が使えるようになったとのことで実験。これ、素直にCSSだけで実現できたらいいなーと思ってる。あと何年後?って話だけど。(IE的な意味で)先に書いておきますが、全然実用性はないです。単なる実験というか練習...
>>「display:table関連を使って横並び均一配置」の続きを読む...
2008年11月04日 13:32 | Red | コメント (2) | トラックバック (0)
Firefox3とFirefox2のselectの幅
そんなこんなで共存することにしたFx3とFx2なんですが、さっそく共存させてよかったと思った事がありました。 今コーディング中のサイトでこういう見た目にしたいデザイン部分があったんですよ。単純にリストをfloatさせてselectを横並びに...
>>「Firefox3とFirefox2のselectの幅」の続きを読む...
2008年07月01日 17:03 | Red | コメント (0) | トラックバック (0)
よく使うhtmlとCSSのソースセット
読んで字のごとく、よく使うhtmlとcssのソースセット。プロパティはよく使いそうなやつで値は全部空。自分用ストックだったりするので、もしコピペする場合は状況に合わせていろいろ追加やカットしてくらさい。 ナビゲーション部分用のソース サイト...
>>「よく使うhtmlとCSSのソースセット」の続きを読む...
2008年04月11日 12:55 | Red | コメント (2) | トラックバック (0)
CSS3 :target擬似クラスでイメージギャラリー
最近CSSネタも出尽くした感じで自分でもなかなかこれ面白いよ、と書ける新鮮なネタもないので、海外のサイトで見かけて面白かったものをご紹介。 普段クリックして画像を差替えるイメージギャラリーっぽいものを作る際はjavascriptを使ったりす...
>>「CSS3 :target擬似クラスでイメージギャラリー」の続きを読む...
2008年02月14日 14:48 | Red | コメント (5) | トラックバック (1)
overflow を使用したボックス背景のこと
幅、高さ、overflow:auto;を指定したボックスの背景に画像を指定した場合、IEでだけ背景の表示が変。やりたかったことは固定サイズのボックスに背景画像を指定して中身がそのボックスの高さより溢れたらスクロールしてほしいという内容。とり...
>>「overflow を使用したボックス背景のこと」の続きを読む...
2007年12月12日 16:15 | Red | コメント (5) | トラックバック (0)
半透明ボックスに関するメモ
※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背...
2007年12月08日 15:07 | Red | コメント (9) | トラックバック (0)
IE7のフォント絡みでこんな話があった
Twitter経由でこんなCSSのフォントサイズに関するバグを教えて頂きました。(バグと呼ぶのか、仕様と呼ぶのかは分かりませんが)発端はfloralさんのこの発言。 IE7で検証した?http://redline.hippy.jp/lab/...
>>「IE7のフォント絡みでこんな話があった」の続きを読む...
2007年09月27日 13:50 | Red | コメント (6) | トラックバック (0)
気になった初期化CSS
コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておく...
2007年09月26日 16:01 | Red | コメント (0) | トラックバック (0)
サーバサイドCSS、Smart*CSSを試してみた
こちらの記事を拝見して興味津々で試してみました。 >>ウノウラボ Unoh Labs: 「サーバサイドCSS」という選択 >>Smart*CSS | Lism.in 一言で言うと、こういうものらしいです。 Smar...
>>「サーバサイドCSS、Smart*CSSを試してみた」の続きを読む...
2007年09月13日 20:06 | Red | コメント (3) | トラックバック (0)
変な定義リストをスッキリさせたい
随分前の話になるんだけど、別の制作会社のスタッフがコーディングしたコンテンツの中でdl(定義リスト)が使われてる部分があった。意味的にその場面で定義リストを使うのは間違いじゃないと思うし、それは問題ないんだけれど、少しソースに違和感があった...
2007年08月18日 16:19 | Red | コメント (8) | トラックバック (0)
油断大敵 focusさん
WindowsにSafariがインストールできるようになって、試してみた方もいらっしゃると思いますが、自分もSafari3を入れてみました。お友達に「Safari3では検索ボックスは酷くなかったね」と前回発覚した「検索フォーム続編:Safa...
2007年08月06日 17:27 | Red | コメント (0) | トラックバック (0)
フォントサイズ問題のために100.01%を指定
70 Expert Ideas For Better CSS Coding | Smashing Magazineをいつかちゃんと読み直そうと印刷までしておいたのだが忘れてた。今日夕方やっと読み直したので今日はその文書からの話。 上記ページ...
>>「フォントサイズ問題のために100.01%を指定」の続きを読む...
2007年06月11日 22:31 | Red | コメント (2) | トラックバック (0)
StylishでユーザーCSSを楽しむ
Firefoxのアドオン、「Stylish」 このアドオンをFirefoxに追加すると、ユーザスタイルを簡単に作れたり、管理できたりするという優れもの。何をどうすればいいのかなどはhamashunさんちのロドリゲスさんとキャシーさんの解説が...
>>「StylishでユーザーCSSを楽しむ」の続きを読む...
2007年06月07日 05:09 | Red | コメント (0) | トラックバック (0)
font-size:82% って何?
なんとなくずっと気になってた事があったので書いてみる。 とある友人がcssにいつも(かどうかは知らないけど)「font-size:82%;」を指定してるのを見て「なんでこの『82』という数字が出てくるんだ、男らしく80とかキリのいい数字...
>>「font-size:82% って何?」の続きを読む...
2007年06月01日 12:40 | Red | コメント (2) | トラックバック (0)
CSSで文字サイズに画像サイズを合わせる
テキストサイズの可変に伴いCSSで画像サイズを変更する方法を3つ。 まずサンプル。 >>文字サイズに画像サイズを合わせるのサンプル 説明・・・はサンプルページを見れば何がしたいのか分かるような気もするけど一応書いてみる。どのパタ...
>>「CSSで文字サイズに画像サイズを合わせる」の続きを読む...
2007年05月23日 06:32 | Red | コメント (4) | トラックバック (0)
Thanks! CSS Mania.
腰が抜けました。あのCSSギャラリーの『CSS Mania』に登録してもらえました。 こんなサイトが。こんなサイトが。。。 調子に乗って人生の記念に、とキャプチャとりまくりました。完全にいちびってます。なんで登録されたかというと、『自分で申...
>>「Thanks! CSS Mania.」の続きを読む...
2007年04月10日 22:27 | Red | コメント (8) | トラックバック (2)
CSSでポップアップネタ・改正版
以前に書いた「CSSでポップアップネタ」という記事のサンプルの件。SafariやmacIEでは表示が変なんです、とLe Archeの冥さんからこちらの記事で教えて頂いた。 冥さんが撮ってくださったキャプチャによるとこんな感じ。 背景色を指定...
2007年04月05日 13:44 | Red | コメント (14) | トラックバック (0)
検索フォーム続編:Safari だと酷すぎる
で、一晩空けて親切な方がSBMのコメントにて「Safari だとひどい」と教えてくださった。しかもーースクリーンショットまで作ってくださりました。で、こんな感じ。(forestk様、ありがとうございます。直接画像にリンクするのもアレだったん...
>>「検索フォーム続編:Safari だと酷すぎる」の続きを読む...
2007年03月26日 16:04 | Red | コメント (4) | トラックバック (0)
CSSで検索フォームの見た目を変更
ネタがなくなってきたので、このブログ内のデザインネタでも。 タイトルの通り、検索フォームをcssで見た目を変えてしまおうという内容。 このエントリの右上部分に検索フォームを置いてるわけですが、とりあえずまずは変更する見た目の画像を用意。私...
>>「CSSで検索フォームの見た目を変更」の続きを読む...
2007年03月26日 00:00 | Red | コメント (8) | トラックバック (0)
画像置換問題その後。
で、あなた今回のリニューアルで例の画像置換問題(CSS有効で画像無効)部分についてはどうしたのという話。別ブログの方でもその問題に関する雑感は書いてたんだけど、今回こっちのブログで使った方法はこんな感じ。 今回のデザインは普通のheader...
2007年03月25日 00:16 | Red | コメント (0) | トラックバック (0)
CSSで半透明ボックス
そろそろCSS3のプロパティで各ブラウザに先行実装されてるものを使ってみようかということで、今回は「opacity」を使って半透明ボックスでもやってみようかと。 いつものごとく実験ページ >>Redline Magazine 半...
2007年03月19日 15:35 | Red | コメント (0) | トラックバック (0)
CSSでリモートロールオーバー実践編
先日の「CSSだけでリモートロールオーバー」の続編。とりあえず、今もこういうのトップページで見かけるなーというものを作ってみた。javascriptやフラッシュを使った仕様が多い気がするが、jsオフやフラッシュのプラグインに依存しない感じで...
>>「CSSでリモートロールオーバー実践編」の続きを読む...
2007年03月11日 22:44 | Red | コメント (0) | トラックバック (0)
CSSだけでリモートロールオーバー
リンクテキストやボタンの部分と離れた所にある画像を、hover時にcssだけで差し替えようという主旨。以前はjavascriptを使って同様の事をしてたんだけど、なんとなくcssだけでもできそうな気がしたので実験。なんとなくうまくいった。 ...
>>「CSSだけでリモートロールオーバー」の続きを読む...
2007年03月10日 20:48 | Red | コメント (0) | トラックバック (0)
bodyにfont-size:62.5%を指定すると・・・
20 pro tips - .net magazineというページを拝見して。 「7. Set fonts using ems」の部分を拝見して初めて知ったネタなんだが、bodyに対してfont-size: 62.5%を予め指定しておくと...
>>「bodyにfont-size:62.5%を指定すると・・・」の続きを読む...
2007年03月06日 22:53 | Red | コメント (2) | トラックバック (0)
見出しを縦書きにして回りこませたい
・・・という夢を抱いて実験。 見出しを縦書きにして画像化すれば簡単な話なんだが、画像作るのが面倒な時にサクっと実現できないものかと。 IE限定のwriting-modeによる縦書きじゃなくて、どんなブラウザでも使えるようにしたいと考えてい...
>>「見出しを縦書きにして回りこませたい」の続きを読む...
2007年03月03日 13:57 | Red | コメント (0) | トラックバック (0)
floatの親ボックスをoverflowで伸ばす
CSS - Clearing floatsという記事を拝見して。左記ページでは冒頭で『floatを利用したレイアウトに関する一般的な問題はfloatボックスを含む親ボックスがそのfloatボックスの最後まで高さを伸ばしたがっていないというこ...
>>「floatの親ボックスをoverflowで伸ばす」の続きを読む...
2007年02月27日 13:22 | Red | コメント (2) | トラックバック (0)
CSSでunderlineをカスタム
A List Apart「CSS Design: Custom Underlines」という記事で紹介されていたTips。記事自体は随分前に書かれたものだが、使えそう感が漂っているので試してみる。 上記サイトで紹介されていたのはこんなソース...
>>「CSSでunderlineをカスタム」の続きを読む...
2007年02月22日 13:22 | Red | コメント (0) | トラックバック (0)
CSSで敢えてイメージマップ
CSSでイメージマップを実現する 最近使用機会もだいぶ減少してきた「イメージマップ」別名「クリッカブルマップ」。一般的には画像をまず配置して、areaタグで位置を指定してリンクなんかを設定する。今回はそれをCSSでやっちまおうという試み。 ...
2007年01月25日 13:26 | Red | コメント (5) | トラックバック (0)
cssでポップアップネタ
この記事には後日追記の補足記事があります。実際のソースやサンプルもこの記事内のものよりまともになってますので、こちらの補足記事をご覧下さい。 リンクなどに補足を加えたい時、aタグにtitleを指定してツールチップを表示させたりするケースもあ...
2007年01月19日 15:38 | Red | コメント (0) | トラックバック (0)
あまり知らないかもしれないclearの話
一般的にclearプロパティとは「回りこみを解除する」という解説が多く、100%その通りなのだが、どういう仕組でフロートさせたボックスを解除しているのかについてはあまり触れられてない気がするので今日のネタはそんな話。 私の愛読書「Web標...
>>「あまり知らないかもしれないclearの話」の続きを読む...
2007年01月13日 14:08 | Red | コメント (5) | トラックバック (0)
印刷用cssのリンクを属性セレクタで活用する
印刷用のスタイルシートを適応させる際にリンク部分に:afterとcontentプロパティを使って指定しているaタグのリンク先urlを表示させるTipsはいろんなサイトでよく見かける通り。 例えばこういう感じ。 リンクテキストの後ろにu...
>>「印刷用cssのリンクを属性セレクタで活用する」の続きを読む...
2007年01月12日 14:12 | Red | コメント (0) | トラックバック (0)
IE7向けハック
昨日コーディングをしていて、どうしてもIE7だけいう事を聞いてくれない箇所があったので、IE7のみに適応させるハックを探してみた。 普通の箇所は「>」を使ったハックでFirefoxやらNNやらと一緒の指定でいう事を聞いてくれるのだが・・・う...
2006年12月18日 14:37 | Red | コメント (2) | トラックバック (0)
CSSだけのリンク集
何かとcssネタが好きなので、サイト内にcssネタだけのリンク集っていうか、del.ici.ous、はてな、LivedoorClipから、cssとタグ付けされたネタだけを引っ張ったものを置いてみた。 >>RedlineMagaz...
2006年12月07日 22:16 | Red | コメント (0) | トラックバック (0)
テーブル背景を1行おきに着色する
テーブルの背景に1行ごとに色を入れて、ユーザーに情報を分かりやすく掲載する手法をよく見かける。少し前なら該当tdに背景色をhtmlソース内で指定したりもしていたが、最近はcssでの制御がメインだろう。 そんなテーブルの背景に効率的に色を入れ...
2006年12月05日 15:31 | Red | コメント (0) | トラックバック (0)
リストの隙間はIE7では大丈夫だった。
昨日書いた「リストタグを使用時のIEでの変な隙間を消す」というエントリの補足。 友人とチャットしてて「これってIE7ではどうなんでしょう?」とか言われて「多分Firefoxと同じ表示なんじゃないかなー?」とか言いつつ、結構それが気になって気...
>>「リストの隙間はIE7では大丈夫だった。」の続きを読む...
2006年11月08日 14:47 | Red | コメント (0) | トラックバック (1)
リストタグを使用時のIEでの変な隙間を消す
私的覚え書き。 リストタグを使用してメニューを作ったりする際にIEだけに変な余白が入る事がある。それを解消するネタ。 >>問題のサンプル・こんな感じ。 Firefox等で見るとちゃんとメニューの間が詰まっててOKなのだが、IEの...
>>「リストタグを使用時のIEでの変な隙間を消す」の続きを読む...
2006年11月08日 00:42 | Red | コメント (8) | トラックバック (2)
FOUC
忘れないように私的メモ。 先日読んだ「CSS Zen Garden Book」の中に書かれていたFOUC(Flash of Unstyled Content)。 外部cssファイルをlink要素を使用せずに@importで読み込んだ場合、...
2006年10月27日 22:42 | Red | コメント (0) | トラックバック (0)
gif使わずcssだけでアニメーションロールオーバー
すごい発想のcssネタを発見したので紹介したいと思う。 アニメーションgifもFlashも使用せずにスムーズな動きをするアニメーションロールオーバーを実現させている。但し、プロ仕事で実用的かといえば・・・多分効率的でない。その辺の理由は下を...
>>「gif使わずcssだけでアニメーションロールオーバー」の続きを読む...
2006年10月22日 14:02 | Red | コメント (3) | トラックバック (0)
タイトル背景上で左右に何かを分けて入れたい
cssでタイトル画像を背景化して、その上のテキストデータで文字を入れるというテクニックは結構主流だと思う。管理も楽だし。 どんなんかって・・・こんなんの事です(↓) 以前「そういう時に左右に分けて内容を入れたい時どうしたらいいんだろう?」と...
>>「タイトル背景上で左右に何かを分けて入れたい」の続きを読む...
2006年09月23日 15:54 | Red | コメント (0) | トラックバック (0)
cssで更新の楽なリンクギャラリーを作る
リンクサムネイルを簡単に作れるAPIとかいろいろあるみたいだけど、ページ全体をサムネイル化してしまうのでちょっと小さくなってサイトの雰囲気が見難い気がしたのでcssベースで楽に更新していける方法を考えてみる。 当然API系ツールに比べると若...
>>「cssで更新の楽なリンクギャラリーを作る」の続きを読む...
2006年09月20日 01:44 | Red | コメント (0) | トラックバック (0)
hrタグの使い道を考える
このサイトの状況は段組部分の背景をそれぞれの段組をまとめているブロックの背景として表示する定番技を使っているわけだけど、floatを使っているので当然IE以外のブラウザでは背景がちゃんと縦に伸びない(伸びないっつーかそのブロックに高さがない...
2006年09月18日 00:35 | Red | コメント (5) | トラックバック (0)
フッタのナビゲーションは p なの? ul なの?
友人デザイナに「フッタの補助的なナビゲーションってあるじゃん?あれって『p』でやってる?『ul』でやってる?」と聞かれて思わず「面倒だから p・・・」と答えた。 うむ。しかし本当にタグの意味を考えるならばフッタのナビゲーションもリストにする...
>>「フッタのナビゲーションは p なの? ul なの?」の続きを読む...
2006年09月15日 22:17 | Red | コメント (2) | トラックバック (0)
スタイルシートの切替
文字サイズ可変がユーザー側で自由にできるように、文字サイズは制作者が固定すべきではない。 ブラウザの設定で文字サイズを自由に可変できるのは大変有効的だと思うのだが、実際その機能に気づいているユーザーばかりではない。 最近サイトの中に「文字...
2006年09月14日 14:05 | Red | コメント (0) | トラックバック (0)