レスポンシブデザインに対応するCSSフレームワーク「NuLTS.4W」alpha版公開

Nults 4w

元々は自分が仕事で使うテンプレート用のCSSだったのですが、汎用性を持たせ、いろいろなシーンで使えるものにしたいこともあり、CSSフレームワークとして継続的にお見せできるような形を取りました。

大まかな構造は所謂リキッドデザインをベースにメディアクエリを使い、レスポンシブデザインに対応させるような形を取っています。

また、CSS自体の記述を簡略化するためにless.jsを使用しています。

詳しくはページを作ったのでこちらを見ていただければと思います。

まだ仕様が甘かったり、方向性が曖昧なところはありますが、意見や要望などを受けつつ、更に進化させていきたいと考えていますのでよろしくお願いいたします。

CSSフレームワーク less.js

Lessjs topx

cdbk.net CREATIVSのサイトにてJavaScriptを使ったCSSフレームワークの「less.js」を実装しました。

大量の設定が必要な場合はより複雑な構造かが必要なとき、非常に役に立ってくれるフレームワークで算術的な記述法やJavaScriptのように値を代入したりすることが可能です。(下の画像に実際の記述例がかかれています。)

Lessf

WordPressで使用しとうと試したところ何かが干渉しているのかそのままでは動作せず、、だったのでCMSなどで使う際は一度テストをしてから検討することをお勧めします。

Less.js

 

HTML的リッチUIの設計図に触発され、CSS3に探りを入れる

久し振りにWebDesigningを買いました。

表紙に書かれた「HTML的リッチUIの設計図」。
HTML/CSS/JAVASCRIPTベースのNON FLASHでありながら動きのあるサイトとその工夫されたところに焦点を合わせた特集が気になり購入。
見ていると気になっているサイトもいくつか載っていたりと、興味をひくコンテンツで実践に使えそうなところも多数。
自分は早速、Nenga. にCSS3のアニメーションを追加してみました。
そしてそのついでに、少々WordPressテーマの仕様をいじり、ウィジェット対応にしてリンクなどをいくつか追加してみました。
だいぶ使える感じになってきたので時機にテーマを公開。と行きたいところですが、それまでにもしNengaで使っているサイトデザインのテーマ(WordPress)使ってみたいと言う方がいらっしゃいましたら、コメントorTweetお願いします。

ThunderbirdとCSS

ThunderbirdとCSS。
関係がないように見えるこの2つ、実はThunderbirdのスレッドやメール本文の背景色はCSSによってほとんど制御されていて、自由に色を変えることができる。本当のところはタグをテキストではなく、背景色を変えることで見やすくしようと思っていたのだが、どうやらタグとスレッドを結びつけられず、テキストのみしかできないらしい・・・ ラベルならできるのか??(しかし項目を増やすことはデフォルトではできない)
ThunderbirdでCSSが使いこなせるようになったとき、新たに記事書きます(笑)

CSS Zen Garden Book

CSS Zen Garden」というサイトで厳選された優れたデザインのものについて
理論・コンセプトワーク・テクニックなどを解説している本。
CSS Zen Gardenのギャラリーでは、共通のHTMLソースをデザイナーの独創的なCSSレイアウトによってクリエイティブなページへと変化させた作品を見ることが出来る。
本書では、その作品の説明にとどまらず、CSSやデザインに関するプロセス・ユーザビリティまで解説され、リファレンス本としてもかなりクオリティーの高い一冊に仕上がっている。
IE、FireFoxの相次ぐリリースによって、今後もよりいっそうCSSレイアウトの浸透が進むと予想される中、このCSS Zen Gardenを見れば、今まで出来なかったデザインもCSSによって実現できるようになると理解してもらえると思う。
IEでも7のリリースにより、擬似クラス・透過PNGのサポートを実現、より高度なコーディングが使えるようなり、CSS Zen Gardenにあるような作品が一般的になる日もそう遠くはないはず・・・
CSS Zen Garden Book

XHTMLとCSSのコーディング

実際の業務でもXHTMLとCSSのコーディングをする機会は増え、
ソースはよりいっそう見やすくなっているのだが、
テーブルを使わないためか、ブラウザーの印刷プレビューにすると
驚くほど、崩れる…
やはり、印刷用のCSSの出番?
デザイン云々という話は抜きにして、ブラウザーで見るのはWebサイト。
印刷してみるのは書類。と考えるとStopdesignのような見せ方もありなのかな…