Mar  17,  2008

これはすごい！！！！

CSSではできないと思っていた、
ブロックので縦方向の位置を中央揃えにする方法が紹介されていました！！

これはすばらしい！！
画像とかの横にあるテキストを上下中央にする。

ヨモツネット[日記] » CSS で簡単に上下中央揃えを実現する

これは是非使いたい！！！！！
今年の衝撃記事でした！

egu ： 9:15 PM

Feb  25,  2008

フォントファミリーについて

フォントファミリーを英数字ではVerdana・Arialなどを利用したいと思っていましたが、
IEで10pxにならなかったりして、困っていたのですが。。。

見つけました！！

一行目が通常
二行目がIE７
三行目がIE６です。

body{font-family:Verdana,Arial,Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;}
*:first-child+html body{font-family:Meiryo,"メイリオ",Verdana,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;}
* html body{font-family:Meiryo,"メイリオ",Verdana,Arial,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif;}

egu ：10:56 PM

Aug  09,  2007

CSSのフレームワーク

MLで飛んでいたので、ご紹介。
レギュレーションつくるときの参考になるかも。

Blueprint
チュートリアル

Kawata ： 3:29 PM

Jul  27,  2007

CSSEZ

はてブにあがっていたサイトです。


▼CSSEZ
http://jp.cssez.com/

手打ちでバチバチ派の人にとってこのテのツールは敬遠されがちですよね。
しかもデザインがレイアウトありきで作ることになるのでデザイナーにも敬遠されるかも？

なんだかいいとこなしのようなツールですが、
ちょろっと触ってみたらとても動きが軽快だったので
使い方しだいでは作業効率は結構上げられるような気がしています。

少なくとも
・CSSレイアウトを知りつくした人が作っているツールである。
・クロスブラウザ対応も済んでいる（だろう）。
・ミスタイプによる間違いが起こりえない。
・やっぱりプロパティパネルを使う設定はラク

３、４番目は結構大きいと思いますね。
あと使ってるうちにストックがたまってソースを汎用的に使うこともできるかも。。。

yamada ：11:20 AM

May  15,  2007

IE7のclearfix

CSSで僕が今まで使っていたclearfixは以下の様なものでした。


--------------------------------------------------------
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear{display:inline-table;}
/* \*/
* html .clear{height:1%;}
.clear{display:block;}
/* */
--------------------------------------------------------


ところがこれだとIE7に対応できません。
むむっと思って調べてみたら以下の形で解消できるようです。


--------------------------------------------------------
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear{display:inline-table;zoom:1;}
/* \*/
* html .clear{height:1%;}
.clear{display:block;}
/* */
--------------------------------------------------------


赤字の所が追記されてます。既存のソースへの追記だけでできたので一安心。


この情報は「STOPN'LISTEN」のエントリーを参考にさせてもらいました。
▼【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]
http://stopnlisten.no.land.to/2006/11/ie7clearfixclear.html

yamada ： 9:51 AM

May  11,  2007

リキッドデザインで重宝するIEでmin-widthを使えるようにする方法

仕事で悩んでいるときに、教えてもらったところ、
非常に助かったので、みなさんにも。
リキッドデザインをCSSでコーディングしたとき、
困るのが、縮め過ぎると、レイアウトが崩れて意図しない形に
なってしまいます。
3段組が2段組になったりとか。。。

そんなとき、CSSのmax-withやmin-widthと回避できるわけですが、
残念なことにIE6では効かない！

というとき、このJSを使ってみると、一発解決！
素敵なライブラリです。


CSS minimum and maximum sizes

使い方は簡単！


という具合にJSを読み込んで、class:minmaxを指定するだけです。
便利です。


詳しい解説はこちら minmax.js - IEでCSSのmax-widthなどを使えるようにするライブラリ

Kawata ： 1:59 AM

Mar  02,  2007

ikesai.comでのopacityの使い方

制作をしていればみんな一度は見ていると思う「ikesai.com」。
このサイトでサムネールをマウスオーバーすると画像がロールオーバーするんですが、何気なくソースを見ていたら

a:hover img{opacity:0.6;}

と言う風に記述されてました。
マウスオーバーした時に画像を透過してるんですねー。
これだと画像を２枚作ったり、ロールオーバーのJS書いたりしなくていいのでかなり効率的です。

opacityって実用性ないんじゃないかと思っていたのですが、こんな使い方があるんですね。
今度何かで試してみたいと思います。

※追記です。
opacityの設定はブラウザ依存でした（Opera/Safaiのみ）。
その他のブラウザに対する設定はここに書いてありました。
http://weblibrary.s224.xrea.com/weblog/css/
cat15/iefirefoxoperanetscapesafarics.html
なんにしてもこれは使えます。

yamada ： 9:45 AM

Jan  26,  2007

汚いCSSをきれいにしてくれるサイト

CSSを100%DreamWeaverで書こうとすると無理があるので、よくパチパチ手打ちでやっていますが、意外と面倒だし、あとから見ると結構ぐちゃぐちゃになっていたりします。
そんな人多いと思います。インデント付け直したりとか、面倒でしょうがないという人のために、なんだかCSSをきれいにしてくれるサイトがありました。


CSS Superdouche


実際に使ってみました。
日本語フォントとかを指定していると文字化けしますが。。。
ちなみにこのLink-logのCSSで実際に試してみると、"New css is 25.1% smaller. "
と言われました！25%って結構でかい！
でもコメントタグとかなくなってた（泣）

Kawata ：12:53 AM

Dec  15,  2006

CSSを簡単に生成

CSSコーディングが一般的になって、苦労している人も多いのでは。。。
CSS Grid builderというサイトでは、おおまかなレイアウトを簡単に、
作成してくれます。
いちいち自分用のテンプレートを作っておかなくても、
作るサイトによって、このサイトでさくっとレイアウトをつくってしまえば、
ラクチンです。

Kawata ：12:38 AM