WEBデザイン日記「裏方の裏技&裏話」

ブログ移行のご案内

2010-05-24T10:34:00.003+09:00

当ブログ、WEBデザイン日記「裏方の裏技&裏話」は、記事内容の重複を避けるため、同じくナチュラロジーが運営するブログ「デザインのサイン」へ移行しました。

つきましては、今後当ブログでの記事の更新は予定しておりませんので、その旨ご了承願います。

移行先ブログ「デザインのサイン」
http://design-no-sign.blogspot.com/

タダで使える秀逸なフリーソフト5選

2008-08-21T11:01:00.000+09:00

今回は、一般的に高値で市場に出回っているソフトウェアの代替として使えるフリーウェア（オープンソース）を紹介します。

1. Microsoft Officeの代替スイート「OpenOffice.org」
以前から公言している通り、軽いAnti-Microsoftな私としては是非とも紹介したいスイート。その名の通り、いわゆるOffice系ソフトが詰まったパックです。
中でも特筆すべきは、Excelの代替となる“Calc”、そしてPowerPointの代替となる“Impress”。Calcは2003などのクラシックなExcelと視覚的にも似ていて、もともとのExcelユーザーであれば直感的な操作が可能になっています。もちろん、ほとんどのExcel関数とも互換性を持っています。一方、Impressに関しては、本家PowerPointをすでに超えているとの賛辞も多い、まさにキラーソフトと呼ぶに相応しい逸品です。これは中小企業にとっては救いの手となり得そうです。
　→　ダウンロードは http://ja.openoffice.org/

2. Adobe Illustratorの代替ソフト「Inkscape」
ベクトル画像の編集が可能なドローソフト。正直なところ、私のようにIllustratorを長年愛用しているデザイナーにとっては機能的な物足りなさを否めないのですが、とは言え、かなりのクオリティの高さです。
　→　ダウンロードは http://www.inkscape.org/

3. Adobe Photoshopの代替ソフト「GIMP」
これは有名どころですね。Photoshopライクなフォトレタッチソフトなのですが、単なる模倣の域をはるかに超えています。デフォルトのショートカットがPhotoshopとは違うのですが、設定ファイルを書き換えることで変更が可能。ただし、起動までの時間がやや長いです。特に、私のように大量のフォントをインストールしていると、その読み込みに時間がかかっているようです。
　→　ダウンロードは http://www.gimp.org/

4. Adobe Dreamweaverの代替ソフト「Nvu」
WYSIWYGなHTMLエディタです。Dreamweaver自体を「置換ソフト」としてしか使わない私が紹介するのもアレなので、詳細な説明は割愛しますｗ
　→　ダウンロードは http://www.nvu.com/

5. Adobe Acrobatの代替ソフト「PrimoPDF」
これはかなり使えます。Acrobatのような編集機能はありませんが、様々な形式のドキュメントをPDFに書き出すコンバーターとして非常に秀逸なソフトです。操作も簡単、誰でも手軽にPDFファイルを作成できます。
　→　ダウンロードは http://www.primopdf.com/

余計なスライスや画像読み込みを省くCSSの裏技

2008-03-12T01:40:00.001+09:00

今回は、表題の通り、WEB制作の際にスライス作業を減らして、しかもブラウザでファイルを開いた際に画像の読み込み処理を最小限にするという、ちょっと素敵なCSS（スタイルシート）の小技をお教えします。

まずは、実際の処理を見て頂くために、下のボタンにマウスを合わせてみて下さい。

CSS SPRITE

いかがですか？…まぁ何の変哲もないロールオーバーボタンですね。CSSで背景にアクションをつけています。

ただ、このロールオーバーが他と違う点は、画像1枚でオンマウス/オンマウスアウトの処理を行う点。
どういうことかと言うと、

↑このような1枚の画像を用意して、a:hoverの背景をbackground-positionでずらしているのです。

これ1点だけでは画像のローディング・スピードに大した変化は期待できませんが、もしこのスタイル指定をサイト全体の画像（ボタンやアイコンなど）に応用したらどうでしょうか。

実はこの手法、“CSS Sprite（CSSスプライト）”という呼び名がついているようで、有名どころで例を挙げれば、皆さんもよくご存知のYouTubeのサイトでも使われています。
しかも、サイト上のほとんどのボタン・アイコン・背景画像を1枚のGIFイメージで表示しています。
ちなみにその画像がこちら　→　master-vfl34196.gif

この手法を使いこなせば、前述の通り、デザイナーさんのスライスの手間を減らすこともできて、しかもローディングの負荷を最低限に抑えることができますね。

というわけで、今回のサンプル（XHTML/CSSのファイルと画像）を用意しておりますので、どうぞご自由に。

>> sprite.zip（2.51kb）

IEバグ対策「png画像の透過処理」

2008-02-18T01:17:00.000+09:00

WEB業界人のみならず「痛いブラウザ」との悪評が定着しているInternetExplorer（通称「IE」）ですが、特にIE6以前のバージョンに関しては、恐ろしいほどおバカな仕様（バグ）を含んでいることにより、私たちWEB制作者をしばしば悩ませます。

多くの致命的バグを修正したことでやや成長した感のあるIE7も、2006年11月に日本語版が正式リリースされたものの普及率は伸び悩んでいるようです。Windows Vista（IE7標準搭載）もあまり普及してないのでしょうがありません。

そんな数々のIE独自仕様、CSSのバグに関しては深い知識と発想力さえあれば「CSSハック」など使わずとも攻略できるものなのですが、私の中で一つだけ手を焼いていたバグがありました。
それが「IE6以前のバージョンでpng画像が透過されない」というもの。

デザイン上、ドロップシャドウや半透明などの特殊エフェクトやアンチエイリアス処理などによって、gifでは綺麗な透過処理を行うことができない場合があります。そのような場合、png書き出しを使えばほぼ忠実な透過処理を行うことが可能になります。
しかし、前述の通り、IE6を含む旧バージョンのIEではpngのアルファチャンネルに対応しておらず、知らずに使うと非常に残念なことになってしまいます。

この対応策としてはいくつかの方法が挙げられていますが、そのほとんどが面倒なものであったり、またCSSハックを使用しなければいけなかったりと、いろんな意味で難があります。

そんな中でも私が「これは使える」と思ったものがありますのでご紹介。
これは“pngfix”というJavaScriptを使用した対策なのですが、非常にシンプルで簡単です。

まず、http://homepage.ntlworld.com/bobosola/pnghowto.htmにアクセスして“pngfix.js”ファイルをダウンロード。
次に、そのjsファイルをサーバにアップロード。

あとは、該当HTMLファイルのhead内に

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

を記述しアップロード。

以上、これなら手軽に対策できますね。
ただし、もちろんJavaScriptをオフにしているブラウザでは残念なことに。

それはそうと、優れた拡張形式にもかかわらずこのpngがイマイチ一般に浸透してないのは、もしかしたらIEという強敵がいたこともその理由の一つなのかもしれませんね。