Monthly Archives: 12月 2010

CSS3で背景グラデーションをピクセル指定する方法

CSS3を使えば画像を使わずにグラデーションを表示させることはできますが、
その書き方として紹介されている方法は、ボックスサイズに対して%(割合)でグラデーションの幅を指定する方法ばかりです。

参考:http://www.css-lecture.com/log/css3/css3-gradient.html

そこで、「上から100pxまでグラデーションにして残りはベタにしたい」といったピクセルでグラデーションの幅を決めたい場合の書き方を調べてみました。

background-image:-webkit-gradient(
linear,
0 0,   /*開始点の位置を座標(X,Y)で指定 */
0 100, /*終了点の位置を座標(X,Y)で指定 */
from(#ffffff),
to(#ff0000)
);

webkitの場合、座標指定に(0 , 100px)のように単位をつけると無効になってしまうので、必ず単位無しで指定するのがポイントです。

background-image: -moz-linear-gradient(
top,
#f30,
#ffc 100px /*終了点の位置をpxで指定*/
);

上記のような書き方をすればピクセル幅固定の2色グラデーションを表現できます。
webkitの場合、color-stop()を使った構文だとうまくグラデーションを作る事ができず、
またwebkitもmozも両方、3色以上のピクセル固定をどうしたら良いのかはまだ不明です。
どなたかご存知の方いらしたら教えていただけると嬉しいです。m(_ _)m

Mac→Winのデータ受渡しの決定版「MacWinZipper」

MacユーザからWindowsユーザにでーたを受け渡しする際、困ることの代表例が
1.日本語のファイルが文字化けする
2..DS_StoreなどWindowsでは不要なファイルが含まれる
の2点だと思います。
この2点を一気に解決してくれる圧縮ソフトが「MacWinZipper」
ドラッグアンドドロップするだけで不要ファイルを削除し、文字化けしないデータをつくってくれます。
かなり、おすすめ。パスワード付きZipにも対応。
http://www.tida.bz/macwinzipper

overflow:hidden;とclearfix

後続要素が無いためにclear:both;でフロート解除できない場合、フロートしている子要素を包む親要素に対してoverflow:hidden;を設定したり、clearfixを使ったりすると思いますが、双方メリット・デメリットがあるのでまとめておきます。
【overflow:hidden;】
<メリット>
・classを追加する必要がないのでHTMLソースコードをシンプルに保てる
・1行で済むので簡単
・DWのデザインビューが崩れない
<デメリット>
・IE6で効かないことが多いのでIE6用ハック(zoom:1;)を併用する必要がある。
・FireFoxで印刷バグが発生することがある。
【clearfix】
<メリット>
・IE6含め全てのブラウザで有効なので安心
<デメリット>
・DWのデザインビューが崩れる
・いちいちclassを追加するのでHTMLソースがclass=”clearfix”だらけになる
上記のように、特にDWを使っている人にとってはどちらも完璧じゃないのが分かると思います。
で、結局自分としては
・メインコンテンツエリアのような大きな領域の場合はclearfix
・細かいパーツのようなものの場合はoverflow:hidden;
というように使い分けすることで落ち着きました。
本当はDW使いなのでoverflow:hidden;でやりたいのですが、Firefoxの印刷バグにやられて酷い目にあったことがあるので、それ以来メインコンテンツエリアのような複数ページにまたがる可能性があるような大きな領域にはoverflow:hidden;は使わなくなりました。
ちなみにその印刷バグというのは「overflowがかかっている領域以降がスコーンと次ページに落ちてしまい、かつ1ページ分の領域を超えた分に関しては一切印刷されなくなる」というものです。
これは、FirefoxでA41ページに収まらないような長い領域にoverflow:hidden;を使った場合にのみ起きる現象で、今の所overflow:hidden;を使わないようにする以外に修正する方法がみつかりません。
というわけで、ベースのレイアウト部分にはclearfixを使うのですが、そうなると今度はDreamweaverのデザインビュー表示が崩れるという問題が発生します。普段基本的にDWを使うのでこれは正直痛いです。これを直すにはclearfix部分に結局overflow:hidden;を追加してやるしか無い訳で、そうなるともうclearfixを使う意味がないという悪循環・・・(苦笑)
で、Dreamweaverには「デザインタイムスタルイシート」という作業中にのみ有効になるCSSを設定する機能があるときいたので早速使ってみたのですが、実はこれが環境設定で「デザインノート」を有効にしないと使えないんですね。。。「デザインノート」を有効にしていると各フォルダに「_notes」っていう余計なフォルダが出来てしまい、データ納品時にいちいちこれを削除してやらなきゃいけないので、案件によってはかなり面倒、ということでこれもあまり活用出来ず。。。
結局DW環境でやろうとする限り八方丸く収まるうまいやり方ってのは無い、という結論に至りました…orz
制作環境Codaにでも移そうかしら?

ブログ、はじめました。

今更ですが、ブログ開設しました。
主な目的は自分のための備忘録ですが、同じようなことで困ってる人のお役に立てれば本望です。
タイトルに使った「Style Design Engineer」はフォローさせていただいてる某お方が提案していた純粋なマークアップ+CSSレイアウトを生業としている人達のための新しい名称です。
「HTMLコーダー」ではただ作業するだけの人みたいに感じるし、かといって
「マークアップエンジニア」と言うとJavaScript必須とか言われるし、
プログラム的なことは範疇外だけどマークアップとCSSの専門家ではある!と言いたい人がこれからどんどん使って行けばいいんじゃないか、と思います(笑)
自分なんかはJavaScriptはjQueryベースのインターフェースくらいまででそれ以上の開発的なことはできないので、まさにピッタリ!なんじゃないかなーと思いまして。(いや、勉強はしますけどね…)
あれ?ということはもう既に「Style Design Engineer」なんだから、「への道」ってのは変か?
・・・まぁいいか。
というわけで、ぼちぼち書き貯めて行こうと思います。
ブログスキンはとりあえず借り物で。
一応本業なのでそのうち自作に変えるかもですがまぁそのうち。
よろしくお願いします。