CSS おれおれ Advent Calendar 2012 – 09日目 CSSのセレクターっていうと要素、クラス、IDでの選択が一般的で、あとは:hoverとかの疑似クラスがあるような感じですが、加えて「属性セレクター」ってのがありマウス。 属性セレクター？ 要素の検索の条件に、その要素が持つ属性を指定するものです。優先順位はクラスセレクターと同じです。 IEは7から利用できます。 「属性」はわかりますか。HTMLの、タグの中に書くやつです。 このうちinputが要素名で、type="text", name="id", value="", maxlength="8", size="8"なんてのが属性です。また左側typeが属性名、右側textが属性値です。 属性セレクターの書き方 何パターンかあります。 属性が付いているもの [att] 属性を持っている事だけが条件です。値は何でも構いま
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
最近デザインの合間にマークアップもやっているのですが、css力とかjs(jQuery)力が低すぎてヤバイ。 でもjQueryって相当ゆとりだと思う。可愛い。 ので、最近マークアップしてる時に「わっかんね！」ってなって調べたことのメモ。 多分マークアップエンジニアの方々には常識過ぎることなのだろうけど、そこはご愛嬌ということで。 目次 ・css：z-index付けるときは、親要素にも付ける ・jQuery：body要素に挙動を反映させたい場合はhtml要素にも設定する ・jQuery：フォーム要素のvalue取得のあれこれ ・jQueryTools：overlayのトリガーになった要素の取得はgetTrigger()で取れる ・jQuery：コールバック関数に引数を渡すには ・css：いろいろなセレクタのあれこれ ★css：z-index付けるときは、親要素にも付ける そもそ
たまには、ゆるめなCSSの話題でも。 対象ブラウザがIE7からになる事で、活用できるセレクタの幅はわりと広がります。 普段、IE6の対応が必須となってると、使ってないセレクタっていざ使おうとしても活用方法が分からなかったりしますよね。うん。 と言うことで、隣接セレクタ (E + F) を使った実用的？かも知れないネタでも。 なんちゃって、しましま ある程度要素の数が決まってる場合、隣接セレクタを使えばIE7から対応でしましまが実現できます。 <ul class="sampleList"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul> ul.sampleList { list-style: none; margin: 0; padding: 0; border-top: 1px
IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため） との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く