多くのフロントエンドデベロッパーの悩みがクロスブラウザ対応。
Adobe BrowserLabは

• Windows Chrome 3.0
• Windows Firefox 2.0
• Windows Firefox 3.0
• Windows Firefox 3.5
• Windows Internet Explorer 6.0
• Windows Internet Explorer 7.0
• Windows Internet Explorer 8.0
• Mac OS Firefox 2.0
• Mac OS Firefox 3.0
• Mac OS Firefox 3.5
• Mac OS Safari 3.0
• Mac OS Safari 4.0

での表示をスクリーンショットで確認できるツール、類似するサービスは数多くあるが、Adobe BrowserLabではブラウザ表示を重ねてみたり、2つの表示を左右で比べて見ることもでき、さらにAdobe製品にあるようなルーラーを表示する事も、ガイドを引くこともできる。
外部から確認ができるサーバーにファイルをアップしておかなければならないが、WinとMacを切り替えたり、私の様にその両方を所有していない場合などに便利だ。

https://browserlab.adobe.com/

2. Styleneat

“ノンプログラマーズ・スタイルシートライティングTips“でも触れたCSSオーガナイザーのStyleneat。
その名が示す通り、CSSを清書してくれる。圧縮したCSSでも、元通りにしてくれるところが非常に便利。
シンプルだが、強力なツールだ。
Sort Properties alphabeticallyにはチェックを入れ、 Multi-line Formattingに設定することをおすすめする。

http://www.styleneat.com/

3. Online YUI Compressor

先ほど圧縮についてふれたが、私がCSSの圧縮に利用しているのが、Online YUI Compressor。
他にも圧縮ツールはあるが、私はJSの開発も行うことがあるため、CSS/JSの両方が圧縮できるYUIがお気に入りだ。
こちらも、シンプルに書いたコードをテキストボックスにコピペして、Compressボタンをクリックするだけ。
CSSの圧縮の際はFile TypeのオプションをCSSにすることを忘れずに。

http://www.refresh-sf.com/yui/

4. Typetester

Information Architects Japanにてウェブデザインの95％はタイポグラフィという記事が書かれた。本当に95%もの割合がタイポグラフィーなのかはわからないが、重要視するべく要素の1つであることは間違いない。
前置きが長くなったが、Typetesterはその名が示す通り、フォントをページに表示させ、確認できる優れたツール。英語のサービスではあるが、自分のマシンに入っているフォントであれば読み込ませる事が可能なので、MSゴシックや、メイリオなど、日本語で標準的に利用できるフォントを試すことが可能だ。
http://www.typetester.org/

5. PXtoEM.com

W3Cも推奨しているように、ウェブサイトのフォントサイズは絶対指定のpxなどではなく、相対指定のemが推奨されている(このサイトではpx指定のままだが)。
そんなpx指定のフォントサイズをem指定に変換(反対も可能)してくれるのが、PXtoEM.com。
実際にはpx、pt、em、パーセントとCSSで使えるほとんどの単位を変換してくれるツールだ。
http://pxtoem.com/

6. Typograph

“Don’t compose without a scale.”
とRobert Bringhurst氏が言う通り、タイポグラフィーには音楽とおなじようにリズムとハーモニーがあり、それらを構成するためには、スケール、音楽の例で表現すると、音階が必須である。
その手助けをしてくれるのが、Typograph。
初めは使いづらい印象があるが、基本に基づいたバーティカルリズムを作り出すための音階を、簡単にCSSにしてくれる非常に強力なツールなので、ぜひ少なくとも30分くらいは遊んでみてほしい。
英語に少しでも抵抗を感じないのであれば、このツール自体に書かれた記事を読むことをおすすめする。

http://lamb.cc/typograph/

7. CSS Sprite Generator

より早くページをロードさせるためには、リクエストを減らせばいい。
CSSスプライトとよばれる、背景画像の位置を指定することで、1枚の画像にいくつもの画像を置きながら、
表示させることができるテクニック。
サーバーのことなんてさっぱりわからないから、と言わずに、新しい表現の1つとしても覚えておきたいテクニックだ。
そのCSSスプライトで面倒なのが、画像の結合と位置指定。
CSS Sprite Generatorは、その面倒をあっという間に解決してくれる。
スプライトしたい画像をzipに納めてアップロード。
たったこれだけで、CSSスプライトが簡単に実現できてしまう。
バージョンが変わり対応していない部分もあるが、私が日本語翻訳を手伝わせていただいたので、日本語でも利用可能だ。

http://spritegen.website-performance.org/

8. Replace CSS Color

自分のサイトも含めて、サイトのリニューアルやリデザインを行うことが非常に多い私にとっての頭痛の種はCSSのカラー指定。
カラーほどドラスティックに印象を変更できる要素はないだろうが、そんなカラーの指定箇所は非常に多く、抜けがち。
そんな際に便利なのが、Replace CSS Color。
CSSファイルをアップロードすると、カラー指定の箇所を抜きだし、その場で編集し、新しい指定のCSSを生成してくれる。
ちょうど私が作成しようとしているWordpress用のテーマでもカラーの指定をたくさん変更する必要があるので、便利に活躍している。

http://css-color-replace.orca-multimedia.de/

9. ダミーテキストジェネレータ

海外ではダミーテキストといえば、lorem ipsum。長い歴史をもつダミーテキストで、生成ツールも星の数程あるが、日本語にはダミーテキストを生成するツールがない。
ダミーテキストジェネレータは世にも珍しい日本語のダミーテキストを生成してくれるツール。
ダミーテキストの種類を選んで、文字数を入力すればOK。
精度の高いプロトタイプを製作する際や、テキストがいつまでもやってこない制作現場で重宝するツール。

http://dounokouno.com/webtools/dummytext/

10. HTML Entity Character Lookup

HTMLのエンティティーキャラクターを検索するツール。
エンティティーキャラクターとは、Üや®などの文字。
かなりの数のキャラクターがあり、それらを上手に活用すれば、Using HTML Symbol Entitiesで紹介されているようなことも可能だ。
こちらも数ある類似ツールの中で１番使い勝手がいい。

http://leftlogic.com/lounge/articles/entity-lookup/

No related posts.

 .clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix                { zoom: 1; } /* IE6 */
*:first-child+html .clearfix　  { zoom: 1; } /* IE7 */ 

Clearfixハックは、

    <div class="clear"></div>
    <br clear=both />

というように、余計なマークアップをしなくとも、floatをクリアできる。
数年前から有名なハックだが、もはやMac IEを使っているユーザはいないだろうということで、
Mac IE用の記述を除いたものを紹介。

The New Clearfix Method • Perishable Press

Example

HTML

<div class="parent clrearfix">
	<div class="children">float: left</div>
	<div class="children">flaot: left</div>
</div>

No related posts.