Blog

※ブログ移転しました。 → hamashun.me

jQueryとCSSでグラデーション角丸+リキッドレイアウトをコーディングしてみる

JavaScriptとかjQueryとか勉強中なので、勘違いしている部分があるかもしれません。 もし誤りがあったら、ご指摘頂けると嬉しいです。

4つの要素でグラデーション角丸+リキッドレイアウト

前回前々回では、CSSで半ば無理やりグラデーション角丸+リキッドレイアウトを組んでみました。 この種類の角丸デザインはCSSを書く上で必要な要素の数が多くなってしまうので厄介、というのがこれまでのあらすじ。
今回はCSSだけにこだわらず、スクリプトを使ってみたいと思います。

jQuery使用

jQueryを使います。 jQueryの特徴は色々あるんですが、ノードの取得にCSSセレクタみたいな書き方ができるのがとても気に入っています。 普段CSSを書いている人にはとても使いやすいです。
今回のサンプルでは使ってないですけど、jQuery越しにCSS3のセレクタが使えたりするのも魅力です。 しかもIE5.5以上に対応。

サンプル

今回もサンプルを用意しました。 対応ブラウザはIE5.5以上、Firefox2、Opera、Safariです。 MacIEはjQuery自体が対応していないみたいです。
例によってDL版も用意しましたので、こねくりまわしてみてください。

jQuery便利すぎる

サンプルのJSソースはとてもシンプルです。
jQueryは、wrap()メソッドを使うとその要素をWrap(包むの意味。ちなみにサランラップのラップもこれ)してくれます。 例を挙げると、

$("div.entrytWrap").wrap('<div class="wrap1"></div>');

は、「<div class="entrytWrap">を<div class="wrap1">でwrapせよ(囲え)」という命令になります。 その結果、


<div class="wrap1">
 <div class="entrytWrap">
 </div>
</div>

こんな結果になります。 これでdivが一つ増えました。 あとはこの繰り返しでdivを増やして、その増やした要素に対してCSSで背景画像を指定するだけです。

サンプルの解説

サンプルでは少し工夫した書き方にしていて、量を減らしてあります(多分、工夫の余地はもっとあるんでしょうけど)。
ノードの取得はCSSのセレクタのように、カンマ区切りで複数指定が可能です(DL版に入っているkadomaru.jsのdiv.hogehogeって辺りがそれです)。

ちなみに、JavaScriptをオフにしている環境などを考えて、その場合はborderで囲われるようにしてあります。

それってどうなの?

「JSで要素を増やすんなら、HTMLに直接書いても同じじゃん」と思う人がいるかもしれません。 しかし、HTMLに直接記述するのとDOMを操作して要素を追加するのでは意味が違うと思います。
DOMを操作して追加した要素は、(例えばJavaScriptでもって行ったなら)JavaScriptがオフの場合は現れません。 HTML文書単体として見ればその要素は追加されていないと言うか、HTMLは(余計なdivによって)汚されない。
サンプルのclass名がわりと適当な感じなのも同様の理由です(見栄えを考えるとそれっぽい名前にした方がいいかもしれませんけど)。

DOMの仕様書にその辺りの説明(DOM操作によって追加されたノードの扱い、みたいな)があるかなと思って探したんですけど、見つけられませんでした(見落としてるのかな)。

とは言え、本来CSSが担当するべき「デザイン(表現)」をスクリプトで補っているのは確かで、そこはちょっとどうかなと思う所ではあります。 ただまあ、デザインを再現する際に文書上必要な要素のみで行うのが難しい(事がままある)現状では、手段の一つとして覚えておいてもよいのではないでしょうか。

おまけ

JavaScript楽しい! これまでのHTML+CSSでは難しかった事が簡単にできたりします。 とは言ってもまだDOMごにょごにょぐらいしかできないから、「JSはDOMだけじゃ無いからね」って会社の人達にまた言われそう。
今回のサンプルもミスターjQueryのabuiさんに手伝ってもらって完成できたしなあ。

つまり何が言いたいかと言うと、hamashun.comはRoppongi.JSに超期待してるって事です!><
参考:UNIXに触り初めて一応7年・・・だけど・・・。 - devlog.holy-grail.jp

TracBack

http://www.hamashun.com/mt/mt-tb.cgi/253

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive