CSS/IE7のz-indexの概念 - 俺の基地
通常と異なる概念のz-index IE7のz-index属性の概念はFirefoxとかとはかなり違う・・・ｗ IE7のz-indexは同一階層間での重ね順の前後を指定するもので、グローバルに前後を指定するものではない。 そして各階層では後に書かれたものが上のレイヤーにのっかることになる。 つまり深い階層でどんなにz-indexを操作しても、その要素を含む浅い階層でz-index指定されていなければ、どんなに大きな値を入力しても、浅い階層上で後に書かれた要素よりも上のレイヤーにくることはできない・・・ なんだこれ！ そしてz-indexはpositonにrelativeやabsoluteをつけてないと効かなかったけど、この概念を導入しつつ整合性を保つにはposition指定しなくても有効なのだ。 ▲ ▼ 一番上にするには IE7ルールに従うならばbodyの閉じる直前に要素を入れてz-in
CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
CSSのプロパティをソートするPerlスクリプト
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
吹き出しを作るCSSのテスト。（追記、修正あり） - NOBODY:PLACE - MUTTER
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 吹き出し処理無しのblockquote。 「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」 「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」 「気持ち良かったですねえ。ほぼ、いきかけました」 吹き出し処理ありのblockquote。 「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」 「もう苦しいところか
Fun With CSS Shapes - Nettuts+
I bet a bunch of you don’t realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week’s screencast, we’ll figure out a way to create speech-bubbles without resorting to background images. Most of us, by now, are familiar with using the “-moz-border-radius” and “-webkit-border-rad
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
はてブのCSSをカスタマイズしてみた その２ - てっく煮ブログ
はてなブックマークが新しいデザインは気に入っていたのですが、メリハリのきいた色使いに少し飽きてきたので、シンプルなものに変えてみました。こんな感じです。 b:id:nitoyon自分が一番知りたいのは「ページのタイトル」だったので、そこを目立たせる感じで配置してみました。その他のこだわりを4箇所ほど紹介します。1. favicon の位置はてなブックマークがリニューアルしてから favicon が表示されるようになりました。これをどう扱うかが悩ましかったのですが、タイトルの横に付けてみました。デフォルトのデザインのちょっとうるさい印象も緩和できたのではないかと思います。アイコンを左に出すアイディアは tumblr のデフォルトのデザインから拝借しました。全体的に tumblr っぽく仕上げてます。 .2. ブックマーク数は digg 風にブックマーク数と B! のリンクを digg みたい
はてブのフッターを小さく固定にするユーザースタイルシート - 聴く耳を持たない(片方しか)
はてなブックマークの注目エントリーなどで、AutoPagerize機能……つまりスクロールに応じて自動的にページを継ぎ足す機能を使っていると、どんどんエントリーが追加されていくのはいいのですが、まるで逃げ水のようにフッターが下へ下へと行ってしまうのが困ってました。 かと言って、その都度 AutoPagerize機能を止めるのもメンドイし……、というわけで私はこういうユーザースタイルシートを書いています。 （動作イメージ） @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("b.hatena.ne.jp") { #footer{ position: fixed; left: auto; bottom: 0px; height: 2.5em !important; z-index: 100; /* Googl
Firefox だと沖縄県警サイトが悲惨になる件について - xenoma日記
Firefox で沖縄県警のサイトを見てみましょう。たぶん悲惨なことになっていると思います。縮小キャプチャを以下にあげておきます。 ▲左：Firefox3 右：IE7 (沖縄県警のサイトTOPのキャプチャ（部分・縮小）) IE など他のブラウザだとキレイに見えるのに、なぜ Fx では悲惨なことになるのでしょうか？ 原因の推測 スタイルシートの指定の仕方が原因かと思います。ソースを見てみます。 <link rel="stylesheet" href="css/import.css" type="text/css" media="print" /> <link rel="stylesheet" href="css/import.css" type="text/css" media="screen" /> このように同じファイル（import.css）を2度指定しています。指定されている imp
画像をマウスオーバーしたときに表示されるテキストを改行する - NOBODY:PLACE - MUTTER
画像に代替テキスト（altまたはtitle）を設定していると、 マウスオーバーしたときにそのテキストがポップアップして表示されます。 コレを改行させたいと思って色々調べてみたのでそのまとめ。 1. IEだけまともに見えればいいやって言う場合。 IEはalt属性内での改行に対応しているようなので、次の手順で改行を実装できます。 IE（Windows）の場合。 <img src="/img/mutter/2008/12/07_03_sample.jpg" alt="教祖とダースベーダー卿夢の競演 怖すぎる…" title="教祖とダースベーダー卿夢の競演 怖すぎる…" /> こんな感じ。IEでは改行されて見えます。 また似たような手段として、改行を表すコード（ ）を挿入する方法もあります。 <img src="/img/mutter/2008/12/07_03_sample.j
hxxk.jp - 各種ブラウザの CSS Selectors testsuite の検証結果のまとめ (:hover 擬似クラスや :active 擬似クラスや :focus 擬似クラスも含んだ 2008 年版 )
CSS Selectors test-suite およびダイナミック擬似クラスセレクタをチェックしてみた CSS Selectors testsuite や、「 CSS の互換性と Internet Explorer 」などから自分用のまとめ表を作りたいで、 ......まあ、 CSS Selectors test-suite - CSS3 . info はセレクタだけのチェッカですし、 CSS の互換性と Internet Explorer と組み合わせてよいまとめが作れたらいいかなと思います と書いていましたが、とりあえず CSS Selectors test-suite にて、 CSS 2.1 のセレクタおよび CSS3 のセレクタについてまとめることにしました。 CSS Selectors test-suite だと :hover 擬似クラスや :active 擬似クラスや :fo
Flickrで使われているあのクールなドロップダウンメニューを実装してみよう:phpspot開発日誌
woork: Flickr like horizontal menu This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu: Flickrで使われているあのクールなドロップダウンメニューを実装してみよう！ 次のようなクールなドロップダウンメニューを実装してみましょう。 紹介元で、HTMLと画像のサンプルが配布されています。 実装自体は次のように関数が定義されていて、 <script language="javascript"> function showMenu(id_menu){ var my_menu = document.getElementById(id_menu); if(my_menu.style.
CSS のコメントの書き方コレアレ
CSSもHTMLと同じように、ソース中にコメントを挿入することができます。 /*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。 適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。 僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。 /* ------------------------------ Header ------------------------------ */ div#header { } . . /* -------
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お☆様 - はまちおにいちゃん大好き日記
「Yahoo!ニュース」の表示速度が3～5倍に、そのからくりは……：記事の芽
はてなダイアリーで「リンク集」モジュールにCSSを当てられない件。 - NOBODY:PLACE - MUTTER
http://cssglobe.com/post.asp?id=903
【CSS】 CSSだけでマウスオーバーして画像に色を付ける（RobGoodlatte.comの場合） - NOBODY:PLACE - MUTTER