わずか四文字でIE6/7/8を区別するCSSハック | コリス「\」「9」「*」「_」の四文字だけで、IE6, IE7, IE8を区別するCSSハックをNettuts+から紹介します。 <textarea name="code" class="css" cols="60" rows="5"> body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ } </textarea>
[IE6]ブロック要素を中央寄せにするために、text-alignを使う件 | Like@Lunatic
ブロック要素を中央寄せにレイアウトする場合、左右marginをautoに設定するのが正しいCSSの書き方ですが、IE6の過去互換モードではこれが正しく動作しないのは有名です。 そこで、IEのために親ボックスにtext-align:centerを適用し、中央寄せにするというバッドノウハウと呼べなくもないテクニックが当たり前のように使われています。 text-alignプロパティは継承されますから、親ボックスにtext-align:centerを設定した場合、子孫ボックスではtext-align:leftと改めて設定して値を上書きすることがほとんどです。このtext-alignの上書きが面倒なのはもちろんですが、意図しない子孫要素にまで影響が及んでしまうので、できるならこのテクニックは使いたくないなー、というのが私の考えです。そこで、text-align:centerを使わずになんとかしようと
![[IE6]ブロック要素を中央寄せにするために、text-alignを使う件 | Like@Lunatic](https://cdn-ak-scissors.b.st-hatena.com/image/square/c5f660d266393a2d3d0f4a7eda72fead3b4a424b/height=288;version=1;width=512/https%3A%2F%2Flikealunatic.jp%2Fwp-content%2Fthemes%2Flikealunatic30%2Fassets%2Fog.png)
On negative hovers – CSS Wizardry
18 May, 2011 On negative hovers Written by Harry Roberts on CSS Wizardry. Table of Contents Spot the odd one out Underlines are obtrusive Intuition The answer? Issues Final word I’ve been mentioning moaning about something called negative hovers on Twitter for ages now, so it’s about time I wrote a quick post on them. At their most basic a negative hover is a link whose appearance is subtracted fr
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn
2011年9月2日 CSS初心者から上級者まで頭を悩ませるフォント指定のベストプラクティスを模索してみた。 2014年4月28日追記： フォント指定に関する新しい記事を書きました。 CSSのfont-family指定に関する考察 2014年版 先日、CSSによるフォント指定について色々な人と話をする機会があり、せっかくなので、これまでの自分のやり方を、もう一度ゼロから考えなおしてみようと思い立った。 font-familyの指定を考察する CSSによるfont-familyの指定についての世間一般の見解を調べていると、非常に参考になる記事を発見！ font-familyはメイリオが先かヒラギノが先かという命題を本気で調べた 上記のウェビンブログ様の記事中に添付されている資料：日本のコーダーのfont-family指定が、非常に興味深い。これを見ると、ある程度経験のあるコーダーさんたちの中で
nth-child() 疑似クラスを試してみる | d-spica
nth-child() 疑似クラスを試してみる 2008-05-26 0 0 XHTML/CSS CSS, nth-child CSS3で定義される nth-child() 疑似クラス。これが使えるようになると，HTMLファイル，CSSファイルのメンテナスが楽になるだろうな...と思うのです。 どんな具合か，ちょっと試してみました。 nth-child() 疑似クラスとは 英文ですが，詳細は以下から。W3Cの Working Draft（草案）ですので，今後変更されることがあるかもしれません。 Selectors - 6.6.5. Structural pseudo-classes - :nth-child() pseudo-class その要素が何番目の子要素かによって，該当するものにだけ，CSSをあてることができます。 たとえば，セレクタにul li:nth-child(2n)，または
CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 CSS3セレクタはW3
CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ
17 CSS/HTML Effects with Cross-Browsing Alternatives サポートしないブラウザへの対応方法はJavaScriptを利用するなどいろいろありますが、その中の一つとして紹介します。 [ad#ad-2] 下記は各ポイントを意訳したものです。 幅の最小値・最大値 (IE included) RGBa (IE included) 不透明度 (IE included) 画像の回転・拡大縮小 (IE included) 背景をブラウザいっぱいに表示 (IE included) 画像無しのビュレット テキストのシャドウ (IE included) 複数のボーダー (IE included) ボックスシャドウ (IE included) 角丸 スクリーンリーダー用のコンテンツ ネガティブ値で指定したtext-indent Clearfix (IE inclu
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
レジュメやプロフィールページに使えそうなシンプルで綺麗なテンプレ「Azuka」:phpspot開発日誌
Azuka レジュメやプロフィールページに使えそうなシンプルで綺麗なテンプレ「Azuka」が公開されています。 シンプルなのでこれをカスタマイズして調整することで手っ取り早くプロフィールページなんかを作れそうです。もちろんそのまま使うことも可能。 CSS3の機能なんかも使われており、それでいてスッキリしたデザインのため嫌な印象は与えませんね。 ソースも綺麗に書かれているため、セクションの追加なんかも簡単のようです。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 フリーのCSSテンプレート＆テンプレート配布サイトまとめ
え！Photoshop？って見間違うほどのUIを備えたCSSジェネレーター -LayerStyles
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
CSSレイアウトの肝！ 表示・配置のプロパティ、14選
詳しくはコチラ→ position ボックスのレイアウト方法を指定するpositionプロパティ topプロパティ topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ top ボックスを配置する場合に上からの距離を指定するtopプロパティ bottomプロパティ bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ leftプロパティ leftプ
IE7からのCSSの小難しいセレクタやプロパティいろいろ
チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を、IE7 に合わせるなら、ちょっとお役立ちかもです！ そろそろ IE6 のことは忘れて、IE7 からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。 これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。 IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index
IDEA * IDEA
so-network.biz
SASSIENCE ～ 世界が嫉妬するCSSへ
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark