CSS
div.foo.var { .... } SASSの拡張シンタックスかと思ったら、普通にCSSの仕様にあった・・・。マジか。CSS3 Selectors - 6.4. Class selectors The following rule matches any P element whose class attribute has been assigned a list of whitespace-sep…
「* + html ...」というセレクタがふんだんに使われていて、なんだこれ?と思ったらハックでした。→スター + ハックIEにだけ適用したいCSSを定義する時に使うらしい。以下はIEでのみ文字が赤で表示されるサンプルです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </meta></head></html>
text-shadowで文字に影を落とすサンプルです。 FireFox3.5以降とsafariでのみ実装されている機能とのこと。IEでは動作しないのでご注意 パラメータは「x座標、y座標、ぼかし具合、色」または、「色、x座標、y座標、ぼかし具合」の順で指定します。 /* * 影を…
coliss - スタイルシートの記述をより読みやすくする5つのルールより。CSSでインデントかー。その発想はなかったなー。 #nav{ width:650px; } #nav ul li{ float:left; } #nav ul li a{ display:block; } んー、ブレースとの絡みもあって↑はチョイ微妙な気は…
「vertical-align:middle」で縦方向中央ぞろえにした要素にfloatを設定すると、整列が解除されてしまう。んー、要素を左右に配置するならfloatだよなー、何とかならんかな、ということで、divを使って何とかしてみた。戦略は以下。 右にしたい要素をdivで囲…
:focus疑似クラスで、コントロールにフォーカスがある場合のスタイルを指定可能です。 「:visited」などの仲間で、同じようにセレクタで使えます。 注:残念ながらIE6以下では未対応のため使えません。 どうしてもという場合は、ずっと工事中 - IEで:focus擬…
coliss - ネガティブマージンの理解を深め、活用するテクニック集より。ネガティブマージンを使うことで、 画面サイズに合わせて伸縮するカラムと、 固定幅のカラム から構成されるマルチカラムレイアウトを実現できるらしい。ということでサンプルを作って…
画像をdiv要素で囲ったりすると、画像下に妙なスペースができることがあります。→例。 こういうときは、div要素に対して以下の設定を追加することで回避できます。(IE7,FireFox3で確認) font-size: 0px; line-height: 0px;サンプルはこちら
「:first-letter」 で段落の最初の一文字に適用されるCSS 「:first-line」で段落の最初の一行に適用されるCSS をそれぞれ指定できます。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> </html>
なんか、IE6だと余白が広い気がするなーと思ったらバグでした。 「ダブルマージンフロートバグ」と呼ばれるものらしい。名前がつくくらいなので有名なバグなんだろうなー。 詳細はCSS Radar - IE ダブルマージンフロートバグをFixが詳しいです。 対策 「disp…
「border-collapse: collapse;」で同様の効果が得られます。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
IE7だと子要素セレクタが使えるんですねー。(→マイコミジャーナル - 正式版完全対応! Internet Explorer 7 CSS攻略法) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> div { margin: 10px; } /** div.parent 配下のすべての…</meta></head></html>
Topic Path(パンくずリスト)のサンプルです。最近はul,liを使うのが流行りみたいですよ。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
任意のサイズのdiv要素を画像枠で囲みたい。具体的には、ということでいくつか方法を検討してみました。 方法1 - 3分割した画像+div 3つに分割した枠画像とdiv要素を使う方法。 ○HTML/CSSがシンプル。 ×横幅が固定される。横幅のパターンがいくつかある場合…
<span class="x"><a href="#">テスト </a></span> みたいな感じのa要素があって、 リンクの色を指定の色にして、 マウスオーバー時にのみアンダーラインを引く ようにしようと思い、次のようなCSSを書いていたのだけれど、IE6だと期待通りの動作とならない。(FireFox2だと正しく動作する)。 span.x {…
ブロック要素内の画像とテキストを横方向中央揃えにするには、「vertical-align」を使います。(にしし ふぁくとりー さんの 「行内の画像を、文字の(上下方向での)中心に合わせて配置する」を参考にさせていただきました。) 最も高さのあるインライン要素…
CSS Gridを使うと、単純な横方向分割レイアウトが簡単に実現できます。 実行準備 次のCSSをインポートします。 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/grids/grids-min.css"> レイアウト 基本的な使い方は次の通りです。 親要素のdivに「yui-g*」を設定。 分割の方式はここで設定するクラスで決まります。 利用可能な値</link>…
href属性が付いていないと適用されません。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
filterとopacity属性を設定すると、IEやFirefoxで要素を透過表示できます。 IEやFirefoxの両方に対応する場合、filterとopacity属性を両方指定する必要があります。 属性のパラメータで透過度を指定します。 要素の幅を指定しないとIEで透過が行われません。…
ブロック要素の子要素をすべてfloatにすると、潰れます。floatにすると子要素の高さが0になる、とのこと。floatでなくても良い要素をfloat:noneにすることで回避できます。サンプル:
Web標準普及プロジェクト - ブロックレベル要素をセンタリングする方法 左右のマージンをautoにするのが正しいやり方。 IEではバグのため上の方法が効かない。親要素でtext-align:centerを使う。 IEとFireFoxの両方に対応するには、両方指定する。 サンプル: …