Css

jquery.markup_first_last.js [Gist] jquery.firefox_table_fix.js [Gist] 最初と最後の子要素にスタイルクラスを与える jquery.markup_first_last.js 指定した要素の最初の子要素に、class=“first"を、最後の子要素に class=“last"を付与するプラグインです。 ...

今回はリストや表組みで交互に色を変えるなど、スタイルを適用するときに便利なjQueryプラグインをご紹介します。 jquery.alternation.js [ダウンロード] HTMLで以下のようなリストがあったとき、リストを見やすくするため交互に背景色をつける場合は、背景色をつける要素になんらかのスタイルクラスを与え、そのスタイルクラスに対して背景色を指定する方法があります。 <ul> <li>リンゴ</li> <li>バナナ</li> <li>ミカン</li> <li>イチゴ</li> </ul> 背景色をつける要素にalterクラスを指定 <ul> <li>リンゴ</li> <li class="alter">バナナ</li> <li>ミカン</li> <li class="alter">イチゴ</li> </ul> CSSは下記のように指定します。 ul li { /* 通常のリストの指定 */ } ul li.alter { /* 背景色を薄い灰色にする */ background-color: #e6e6e6; } しかし、この方法を手動で行うと項目の数が増えた場合、HTMLのマークアップが煩雑になります。また、項目の追加や削除があった場合の作業も、考えただけでイヤになります。 そこで、本jQueryプラグインの出番です。 [ad] ...

CSSでレイアウトするときは、ブラウザ間の誤差をなくすためスタイルを初期化してから、個々のCSSを適用するようにするのがベターです。 というわけで、私が使用しているリセット+よく使うクラスを定義したCSSを晒します。 ...

IEとFirefoxで取得方法が異なる。 elem = document.getElementsById(“hoge”) でエレメントを取得後、IEだと、 elem.currentStyle[“backgroundPositionX”] elem.currentStyle[“backgroundPositionY”] で、firefoxだと、 document.defaultView.getComputedStyle(elem, ‘’).getPropertyValue(“background-position”) で、 “50% 50%“という感じで取得できるので、split等にて分割して取得。 下記のサンプルは、#hogeのbackground-positionのY軸が設定されていないか、0の場合、20px開始位置を下にずらす。 ...