CSSの最近のブログ記事

そもそもWEB本来の機能として、こういったグリッドデザインしかできないっていう事から、いろいろとデザイナーやコーダーは考えながらデザインを起こすわけです。

最近でいう所のCSSコーディングやら、見出しがどうやらとかいろいろと現場やらメディアで騒がれているわけですが、部分部分の小技を教えられてもどうしようもない。

僕自身もWEBデザインに関わって、２年ほどでしかないが、もともとグラフィックの学校を出てたりするために、結構こういう事を考えるわけです。

かなり、中途半端ですが、グリッドのフォーマットを考えてみました。
最近の画面サイズの変更に伴い、ぎりぎりの領域で作成

・横幅980px
・メインビジュアルは、9分割法で作成
⇒それに伴ったページ内レイアウトと応用


自分の中でしかないのかもしれませんが、
こうやってシステム化していくにすればするほど、自由な表現と基本的な考え方（文字の読みやすさとか余白の考え方）を理解できますね。ホントに。

これが出来たら、コーディングのフォーマットやワイヤーフレームのフォーマット、fireworksのテンプレート、FLASHのテンプレートも作って一気に合理化デザインの出来上がりです。
あとはIAのやりかたやそもそも企画の内容って事になるわけなんでしょうね。
結局コンテンツだって事を証明したい。

http://show-hey.com/download/gridgrig53.png

Ummmmm...。

マニアックだ。
でも、確かにという感じ。

CSS Spritesとは、CSSで指定している背景画像たちを1つのファイルにしてしまい、画像のリクエスト数を減らし、体感速度を上げてしまうという技術。

LANが光であろうが、PCが超ハイスペックであろうが、これ一つするだけで全く体感速度が違う。

YOUTUBEの背景でそういう技術が使われているのは知っていたが、実際はあまり、何も考えずにいた。

でも、実際にBeforeAfterで見ると全く違いますね。

Before
各背景を個別で作成指示

After
各背景を一つの画像にまとめる

CSSも進んできたねぇ...。やっとIE7か！？

参照サイト：
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
http://www.escafrace.co.jp/blog/08/05/22/2033

CSS Sprites: What They Are, Why They're Cool, and How To Use Them - CSS-Tricks
http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/

僕がコーディングをするとき、cssよりもテーブルの方が勝っている点といえば、
高さや縦位置の調整や、横に組が並んだとき。

テーブルに関しては同じ行であれば、文字量によって勝手に縦位置を伸縮するが、
cssにおいてはフロートをかけて、更には、文字量なんかも調整しなければならなかった。

しかし、それを補うjsがありました。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]
http://blog.webcreativepark.net/2007/07/26-010338.html

早速デモを作ってみました。
どうせならと、できる限りリキッドレイアウトで…。
ウィンドウサイズを変えたり、文字サイズを変えたりしてみてください。

このスクリプトを入れた場合
http://www.show-hey.com/demo/height_line/

このスクリプトを入れない場合
http://www.show-hey.com/demo/height_line/no.html

その他、いろんな小技が載っているページを見つけました。

CSS TIPS
http://css.webcreativepark.net/

こういうのをまとめたポータル的なサイトができればいいのになと思ったりします。
意外とパラパラしてますよね。つくろっかな。

このサイトの中での

1. a:focus{
2. outline:none;
3. }

は結構気になりました。
Firefoxで画像置換のにおいては「こんなもんなのかなぁ」と思っていたので…。

CSSの発展を目指すサイトCSS HappyLifeのなかで、コーディングコンテストなるものが行われ結果も、出ているみたい。一通り見ていておもしろかったのが、賞を受け取った方のコメント。

「デザイナー、そのデータずれているよ。」
「ディレクター、検索窓をつけたほうがいいんじゃない？」
「方向性が分からない。ターゲットをもっとしっかりしてよ。」
「文字が10pxで小さすぎるから12pxにしましたよ。」
「IEでも文字の大きさが変えれるようにしましたよ。」

などなど、制作現場の声がリアルに聞こえてきた気がする。

現実では、コーダーの位置づけってあまりいいようには見られていないみたいだけど、こういう人たちは応援したいなって思った。自分もその位置だったりするときもあるけれど…。

賞をとった人のデータとかコメントとか見ていると、
「こんな人が周りにいたらなぁ…」と痛感するばかり。

僕は審査員ではないけれど、賞をとった人も、審査員の人の意見にも納得。
結局の所、tableタグを使おうが、多少ソースが複雑になろうが、

• サイト全体としてとらえているか？
• ユーザーの事を考えているか？
• 他の人がメンテナンスするとして、分かりやすいか？

 

みたいな事が一番大事なんだろうな。

他の人のコードって結局分かりづらいってのがあるからね。
特にCSSなんかはね。

参加者の全応募データ公開 - コーディングコンテストVol.1｜CSS HappyLife
http://css-happylife.com/log/coding-contest/000153.shtml

 

webの仕事に関わっていてうれしいし、こまるのが、新しいアプリケーションの対応、IE7は現実的に今現在増えているのは確か見たいだけど、デバックが大変だ。

という事で、スタンドアローン型のものがないかなと思ってたらやっぱりありました。

Internet Explorer 7 running side by side with IE6. (standalone) | TredoSoft
http://tredosoft.com/IE7_standalone

ついでに以前のエントリにも書いたIE5とかも入れる方法
IE3-5.5はここからダウンロードできます。

Browsers - Multiple Explorers
http://www.quirksmode.org/browsers/multipleie.html

バージョンがいっぱいあるので、キャプチャをとってみました。
｜右上5.0｜左下5.5｜左上6.0｜右下7｜
▲クラシック表示でのIE7はなんか気持ち悪い。

これで、CSSでやいやい騒ぎがちょっとなくなるかな…。

参照元
小粋空間: Internet Explorer 6 と Internet Explorer 7 を共存させる
http://www.koikikukan.com/archives/2006/11/08-005050.php