Webデザイナの為のオンラインで使える無料のCSSエディタ10選

私は普段、Dreamweaverで作業を行いますが、お客様先など自分の環境とは違うところで作業をしなければならない時、テキストエディタだけだとCSSのレイアウトの確認まで出来ず、どうしても効率が悪くなってしまいます。
Resourcesでは、Top 10 Free Online CSS Editors For Web Designersと題したオンラインで使える無料のCSSエディタを紹介しています。
シンプルなものから高機能なものまで揃っていますので、用途に合わせて使い分けてもいいかもしれません。

1.CSS Type Set

日本語解説:プレビューしながらテキストのCSSスタイルを簡単に設定できる「CSS Type Set」

Continue reading

WEBデザイナの為のHTML5とCSS3のツール完全版

Appleが、iPad/iPhoneでも見られるHTML5ショーケースを公開しました。スティーブ・ジョブズはかねてより「技術は移り変わるもので、最盛期を過ぎれば墓場行きだ。」と発言しています。
FLAHを切り捨て、HTML5に賭けるその意気込みは、多くのWEB制作者にも伝わった事でしょう。
トレンドに乗ってiPad/iPhone用に最適化すべきか、まだまだシェアの高い既存ブラウザ用に最適化するのか悩むところです。

Ultimate List of HTML5 and CSS3 Tools
Admix Webにて、Ultimate List of HTML5 and CSS3 Toolsと題して、Teylor Felizさんが吟味したHTML5とCSS3のツールが紹介されています。

1.HTML5 & CSS3 Readiness

各ブラウザのHTML5とCSS3対応状況とその進捗がわかります

Continue reading

CSSを使って、シークレットなメッセージを表示させる方法

CSS3を使って、本文に秘密のメッセージを隠す方法をご紹介します。
ただし、この方法は、InternetExploreではCSS3の1部の機能しかサポートしていませんので機能しません。

理屈は簡単で、<span></span>の背景色をselectionタグを使って文字色と同化させているだけです。

p::selection { background:#000;color:#000; }
p::-moz-selection { background:#000;color:#000; }
p span::selection { background:#fff;color:#000; }
p span::-moz-selection { background:#fff;color:#000; }

htmlの<p></p>の中に文章を入れて、その中の隠したい文字の部分を<span></span>で囲んで下さい。

<p>こんにちは、しぶりびです。
最近、<span>かちびと.netの中の人</span>とお会いする機会が多くなりました。</p>

サンプルはこちら
文章をすべてドラッグすると隠されたメッセージを見る事が出来ます。

Continue reading