Css on php-tips.com

マークアップ補助用 jquery プラグイン2種

Tue, 02 Feb 2010 22:51:37 +0900

最初と最後の子要素にスタイルクラスを与える jquery.markup_first_last.js

指定した要素の最初の子要素に、class=“first"を、最後の子要素に class=“last"を付与するプラグインです。

リスト、表組みなどのマークアップをサポートするjQueryプラグイン jquery.alternation.js

Tue, 15 Dec 2009 23:01:12 +0900

今回はリストや表組みで交互に色を変えるなど、スタイルを適用するときに便利な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

Wed, 26 Aug 2009 22:40:52 +0900

CSSでレイアウトするときは、ブラウザ間の誤差をなくすためスタイルを初期化してから、個々のCSSを適用するようにするのがベターです。

というわけで、私が使用しているリセット+よく使うクラスを定義したCSSを晒します。

JavaScriptでCSSのbackground-positionの値を取得

Fri, 19 Sep 2008 12:24:45 +0900

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開始位置を下にずらす。