Blog

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

2007年11月Archives

2007年11月03日

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

ご注意

この記事は、実用度は余り高くないような気がします。 わりとネタ的?

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

前回の記事では、6つの画像と要素を使って、グラデ角丸+可変幅を存在する要素を駆使して実現する、という考え方を書いてみました。
今回はそこから更に踏み込んで、1枚の画像と4つの要素で同じデザインを実現してみたいと思います。

今回もサンプルを用意しました。 対応ブラウザはIE5.5以上・Firefox・Opera・Safariで、MacIEはdl付近がちょっと怪しいかもしれないので、週明けに会社で確認します(自宅にMac無いんす)。 あとIEで幅を極端に狭めると、文字の折り返しが若干おかしいです。
HTMLは前回とほぼ同じ物ですが、余計なdivが1つ減っています。

コンテキストメニューなどから背景画像表示すると分かるんですが、一枚の大きな画像を用意しています。 これを4つの要素で四隅に指定しています。
やはり、ただ指定しただけではちゃんと表示されないので、あれこれ工夫する必要があります。 コツはWrapしている要素に下部の画像を指定する事でしょうか。

メリットとデメリット

無駄な要素を減らせるのは利点なのですが、縦方向の幅に限界があるので、例えばBlogの外枠に採用するのは難しいかもしれません(画像のサイズとか気にしなければまた別ですけど)。
小さめなコラムとかに使ってみるといいかもしれないです。

サンプルDL

やっぱりDLしてさわれた方が解りやすいと思ったので、サンプルをzipにした物を用意しました。
なお、前回の記事にも追加しましたので、そちらもどうぞ。

次回予告

次回は、まだ勉強中の分野ではありますが、jQueryを使ってグラデーション角丸+リキッドレイアウトを作ってみます。

2007年11月14日

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

2007年11月25日

2manjiのユーザーCSSを書きました

2manjiユーザーCSSを書きました。 投稿の際の改行を反映して表示します。

2manji凄いなあ。 「これからはシンプルなサービスだ」とは言われてましたけど、接し方がシンプルなのに内容は濃くなりうるのが凄い。
インタビューって言われると、ついつい人生観とか書きたくなっちゃうんですよね。 …って、なんだか年々説教臭くなってきてる気もしますが><


Blog Search
Search
Recent Entry
Category
Monthly Archive