07-04-27 Fri

00:43:57

Category: CSS Usability | Comment: 222 | Trackback: 0

先日、CSS HappyLife で募集していたコーディングコンテストが締め切られ、2007年5月12日(土)に発表を控えていますが、僕は残念ながら締め切りに間に合わなかったので、このサイト上で中途半端な内容を公開して溜飲を下げておきます。

HTMLは完成していて、あとは細部のCSSを調整して、IE対策をどうするかと言う内容が残っています。

このコンテストのテーマは、「コーダーの提案力」という事らしいので、そういった意味で僕もHTMLに力を注いでみました。

more »

06-05-11 Thu

16:18:47

Category: CSS JavaScript | Comment: 2 | Trackback: 0

JavaScript で画像をポップアップ表示するのは「うっとうしい」だの「ださい」などのイメージが付きまとうが、そんな JavaScript による画像表示を一躍クールにしてくれたのが、Lightbox JS ですよね。

登場以来、みんな急速に自分のブログに組み込んで、デファクトスタンダードになりつつあるみんな大好き Lightbox JS ですが、こういう新しいものが好きな人で、みんなが使い出すとどうも個性が無くなってしまって面白くないと思う方も多くいらっしゃるのではないかと思います。

Lightbox JS は、Prototype フレームワークと script.aculo.us のエフェクトを利用しているので、内部を軽く弄るのは楽かもしれませんが、僕も JavaScript の知識がほとんど無いので、エフェクトを少し変えるくらいは出来るかもしれませんが、面倒と言えば面倒です。

そこで、個人的に最も簡単に見た目を変えるには、同封されている lightbox.css を弄ることと、画像を差し替える事です。今日はそんなどうでもいい事についての記事を書きました。

more »

06-03-16 Thu

04:01:10

Category: CSS | Comment: 19 | Trackback: 0

wasp060316.jpg

The Buzz is Black と言う記事の通り、3月13日付けで WaSP のサイトがリデザインされた。

そして、CMS として WordPress が採用され、それによりコメントとトラックバックが導入された。まぁ、WordPress については、今更どうこう言うほどのものではないので(とは言え、WordPress を導入しても記事の URL が変わらなかっのは素晴らしいと思う。クールなURIは変わらないとはよく言ったものですね)、デザインについて考察したいと思います。

見た目の面では、Designing for: The Web Standards Project と言うリデザインを担当した Malarkey さんがデザインプロセスの記事を公開してくれているので分かりやすいが、CSS の面はどうだろうか。

CSS の種類と適用方法

用意されていた CSS は上記の4つで、print.css は名前通り印刷用の CSS なので、今回はパスする。

wasp_css_sep.png

まず、それぞれの適用の方法であるが、メインとなる style.css を半ばお約束の media type を screen 以外の値を指定することで、NN4 への CSS 適用をカットしてある。それから、hacks.css と collapse.css の2つを @import を利用してインポートしている。けど、hacks.css は IE 対策みたいなもので、collapse.css は CSS for collapsing sections on post pages というコメントが書いてあるので、ユーザーには関係ないのだろう。と言う事は、このデザインの CSS は style.css ほぼ一本に絞ってあると言う事になり、あっち系(何)としては珍しい。

そんな訳ですが、さてさて更に詳しく解析しようと思います(やってる事は、CSS Analysis@大藤幹さんのパクリですよ)。

more »