CSSの最近のブログ記事

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

変なハックに比べればこっちかな

結構使えそうなので、備忘録としてのせてみます。

日本では結局IEが…。
みたいな感覚でcssを編集している人が多いかもしれませんが、
個人的に実際ちゃんとcssを覚えるには、やはりIE中心のデバックでは、
イタイ。ような気がしています。

一般的にはある程度厳格なfirefoxなどのブラウザで確認してから
IEで確認という流れが一般的ですが、
こっちを使ったほうが結構楽なのかもしれない。

俗に言うスターハック　* html
とかは分かる人にはわかるけど、
本当の意味ではちゃんとcssを書けていない気もしますしね。

cssやhtmlなんかは
結局ちゃんと
「見えればいい」
のかもしれないので、方法論なんてどうでもいいのかもしれませんが…・

CSS Browser Selector
http://rafael.adm.br/css_browser_selector/