「CSSスプライト」とは、複数の画像を1枚の画像ファイルにまとめ、表示の際にCSSでクリップ位置をずらすテクニックです。これにより、通信回数を減らし描画速度を上げることができます。既に定番化したテクニックですが、これまでFireworksをはじめとするデザイン用のソフトウェアには、直接CSSスプライト用の画像＆CSSを生成する機能はありませんでした（生成をサポートする拡張機能やWebサービスは存在しました）。 Fireworks CS6には、CSSスプライト用の画像＆CSSを生成する機能が追加されました。本記事では、この機能の使い方から、書き出した素材を使ってDreamweaverでマークアップするまでを解説します。 CSSスプライトの作り方を簡単に説明すると次の流れになります。 CSSスプライトでまとめたい画像を作成、もしくは、既にある画像からピックアップする。 Fireworks上で集

Fireworks CS6には、jQuery Mobileのテーマを作成する機能が追加されました。CS5／CS5.1向けに同様の機能を提供する拡張機能「Fireworks CSS3 Mobile Pack」がAdobe Labsにて提供されていますが、CS6では日本語化されているなどの違いがあります。 アイコンの変更 早速、jQuery Mobileのテーマを作成してみましょう。メニューから［コマンド］→［jQuery Mobileテーマ］→［新規テーマを作成］を選択すると、jQuery Mobileテーマ作成用の画面が表示されます。jQuery Mobileのデフォルトテーマには5つのスウォッチ（カラーバリエーションなもの）が用意されており、Fireworksでも初期状態では5つのスウォッチがページとして定義されています。さらに、スウォッチで共通に利用するアイコンなどを設定するページ、テ

Fireworksの拡張機能である「Fireworks CSS3 Mobile Pack」が、Adobe Labsにて公開されています。この拡張機能を使えば、Web標準に沿ったWeb／モバイル／タブレット向けデザインの制作をより効率的に行うことができます。Fireworks CSS3 Mobile Packをインストールすると、下記2つの機能が追加されます。 ［CSS3 Property］パネル： デザイン要素からシームレスにCSS3プロパティを抽出することができます。 ［jQuery Mobile Theme Skinning］ツール： 独自のjQuery Mobile用スプライト画像とテーマ用CSSを作成することができます。 本記事では、これらの機能の使い方を解説します。 サンプル：css3_mobile_pack_sample.zip 必要なもの Fireworks CS5／CS

スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。 スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。 PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル（透過機能）を持つので、半透明

西田 善彦氏 storage.goodmix 本記事で紹介している「Flash Helper Scripts」は、Flash/ActionScript開発のためのオープンソースコミュニティ「Spark project」にて共有・提供されています。Spark projectでは、その他にもさまざまな用途のライブラリやソースコードが公開されています。ぜひ、チェックしてみてください。 Flashサイトを構築する際に、サイトデザインやデザインパーツをPhotoshopで作成し、それをFlashに読み込んでオーサリングしている人も多いでしょう。バージョンアップとともに、FlashとPhotoshopの連携は強化されてはいるものの、現状の機能だと物足りなさを感じている人はいませんか？　本記事では、FlashとPhotoshopの連携をもっとスムーズに、もっと便利にするスクリプト集を紹介します。

Adobe Creative Suite 5 お披露目パーティー 高城　剛氏 長くCreative Suite をご利用いただいているお客様を、抽選でご招待して開催されたAdobe Creative Suite 5 お披露目パーティー。 その模様の一部を、ご紹介。　当日のゲストは、高城剛さんでした。

iPhone（iPhone 3G/3GS）／iPod touchは、PC向けサイトがそのまま表示できるところが大きな魅力の一つです。しかし、小さな画面や、指で操作するとインターフェイスなどのようにデバイス特有な面も多く、PC向けサイトのままでは必ずしも見やすいとはいえません。そこで本記事では、Dreamweaverを使ってiPhone向けサイトを作る時のテクニックや注意点をご紹介します。 必要条件 この記事を最大限に活用するには、次のソフトウェアが必要です。 Dreamweaver CS5 体験版 今すぐ購入 制作したサイトの表示結果を確認する方法 ライブビューでプレビューする Dreamweaver CS5（および CS4）には「ライブビュー」機能が搭載されており、ページのレンダリングにはWebKitエンジンを利用しています。iPhoneのSafari（Mobile Safari）も

はじめに Fireworksには画像やパスデータ、テキスト等のオブジェクトをシンボル化するという機能が搭載されています。 シンボル化はライブラリに登録され、ライブラリからいつでもキャンバスに配置することができます。 シンボルはキャンバスに配置するとインスタンスというオブジェクトになります。 オブジェクトのシンボル化は、制作作業に様々なメリットをもたらしてくれるのですが、中でも大きなメリットとして以下のようなものがあります。 インスタンスはオブジェクトのオリジナル情報を保持したままリサイズが可能 複数配置したインスタンスは一括修正が可能 今回はこの二つのメリットを利用したワークフローを紹介します。 必要ソフトウェア Fireworks CS4 体験版購入 1．オリジナルを大きめに用意することで、デザイン時の効率化や後々の変更対応の効率化を目指す 写真などのビットマップデータは、拡大・

Configuration フォルダ 多くの Dreamweaver MX 機能は、JavaScript および HTML で開発された拡張機能ファイルです。Configuration フォルダには、これらの拡張機能ファイルが含まれます。Dreamweaver 製品をカスタマイズまたは拡張する場合は、拡張機能ファイルを変更するか、またはコードソースファイルを Configuration フォルダに追加します。これらのフォルダについて知ることにより、拡張機能のインターフェイスと各拡張機能タイプの作業例について理解することができます。 警告 : Configuration フォルダ内のファイルは、Dreamweaver 製品の重要な部分を構成しています。Dreamweaver のカスタマイズおよび拡張方法について詳しくない場合は、これらのファイルを変更、削除、または追加しないでください。Dre

Dreamweaverをカスタマイズするには、環境設定を変更したり、エクステンション（機能拡張）をインストールするといった方法がよく知られていますが、Dreamweaver自体の構成ファイルを編集することでカスタマイズする方法もあります。Dreamweaver自体を構成するファイルはXML、CSS、JavaScriptが多用されており、これらを編集することで機能の追加やUIの変更といったカスタマイズが可能です。Dreamweaverを利用する人にとってはこれらのコードは読みやすく編集しやすいでしょう。ここでは特にWebページ制作の効率を向上させることができるであろうカスタマイズを3例ご紹介します。 なお、記事内に登場するConfigurationフォルダは記事末尾の「各プラットフォームのConfigurationフォルダの場所について」にてご紹介しています。カスタマイズ前には念のため、"必

湯口りさ氏 RsStudio http://web.r-studio.jp/ 本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。 Fireworks CS5 体験版 今すぐ購入 CSSスプライト（CSS Sprites）とは CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。 CSSスプライトの仕組み CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。 ※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTML

Fireworks CS5では、パフォーマンスの向上や、他のアドビ製品群との連携・統合の強化に加え、より精度の高いグラフィック制作が行えるように様々な機能強化が施されています。本記事では、Fireworksコミュニティで活躍する株式会社スイッチの鷹野雅弘さんに依頼し、Fireworks CS5のオススメ機能を紹介していただきました。 ボタンやバナーなど部品にはじまり、1ページのデザインカンプ、ワイヤーフレーム、複数ページのプロトタイピングの制作まで、FireworksはWeb制作のワークフローにおいて確固たるポジションを獲得しています。 5月末にリリースされるFireworks CS5は目立った新機能は少ないものの、「現場が嬉しい」機能が満載です。 高品位なグラフィック制作のための改良 長らくFireworksユーザーである私にとって、もっとも嬉しいのが、より高品位なグラフィック制作を可

株式会社ワンパクの近藤＆杉山の師弟コンビが 、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載。今回取り上げるのは「正規表現を使った検索・置換」です。正規表現を使えば、値の異なる属性を検索したり、特定のマークアップ構造の要素を検索したりと検索の幅がグッと広がります。そして、「杉山のこれ知ってます？」のコーナーでは、使用頻度の高い検索・置換のパターンや便利な検索・置換のパターンを保存して、すぐに呼び出せるようにするクエリーについて紹介します。 やればわかる！　わかれば使いたくなる！　まずははじめの一歩！ 杉山：師匠、ちょっと聞きたいのですが…。今やっている案件のHTMLにはいろんな人が関わっていて、ちゃんとした管理がされてなくて、HTMLのコードがタブでインデントされていたりされていなかったり、記述方法がバラバラで気持ち悪いんですよ。あれほどイン

株式会社ワンパクの近藤＆杉山の師弟コンビが 、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載。今回取り上げるのは「ショートカットキー」です。「ソースコードの操作」「ファイルの操作」「タグなどの編集」の3つに分類して紹介します。ショートカットキーを使いこなして、作業のスピードアップを目指しましょう。そして、「杉山のこれ知ってます？」のコーナーでは、<table>に関する便利機能として、<table>のソートと表データの読み込みについて紹介します。 基本は構えから！ 近藤：なっとらん！　そんな構えはまったくもって、なっとらん！ 杉山：えっ…！？　構え！？！？ですか！？！？(@_@) 近藤：うむ。常に左手がWindowsならCtrlキー、MacならCommandキーに添えられているのが美しいファイティングポーズだ。 杉山：…ファイティングポーズ？…

株式会社ワンパクの近藤＆杉山の師弟コンビが Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする連載の第2回目。今回取り上げるのは、「ライブラリ」「スニペット」「テンプレート」です。いずれも作業を効率よく進めるために役立つ機能です。これらの機能を知っている／知らない、使いこなしている／こなしていないでは、作業時間が大きく違ってきます。ぜひマスターして、サクッと仕事を終わらせて飲みにいく時間を作りましょう！　そして、好評？の「杉山のこれ知ってます！」コーナーでは、サイトの定義を共有する方法と、ターゲットブラウザを設定する方法を紹介します。 コードを瞬時に挿入「ライブラリ・スニペット」 近藤：今回はライブラリ・スニペット、そしてテンプレートの機能についてみていこう。 杉山：はい、今回もよろしくお願いします！ 近藤：まずはライブラリだが…。 杉山：はい、ライブ

この連載では、株式会社ワンパクの近藤＆杉山の師弟コンビが、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けします（一部、株式会社ワンパクでの実話に基づいています）。少しでもみなさんの作業効率アップのお手伝いができればうれしいです。また、「杉山のこれ知ってます？」コーナーでは、杉山のお気に入りの機能を紹介します。 第1回目は、まずはワークスペースが自分にとって快適な環境になるように整えましょう。そして制作作業を進めていく上で役立つ、「関連ファイルツールバー」と「コードナビゲータ」を覚えましょう。 なにはともあれ作業環境の整備から 近藤：はじめまして。本連載を担当させていただきます株式会社ワンパクのテクニカルディレクターの近藤です。 杉山：はじめまして。師匠近藤のお手伝いをしながら Dreamweaver マスターをめざす株式会社ワンパクのデザイナーの杉山

Flashコンテンツを提案して、SEOの観点から一刀両断されたことはありませんか？　未だに「Flash＝SEOに不利」という固定観念を持っている人がいますが、その捉え方は誤っています。適切な使い方をすれば、SEOに有利に働くこともあるのです。本記事では、SEO業界の先駆者である住太陽さんに、SEOの視点で見るFlashの使い方・使いどころを解説していただきます。 はじめに 始めに述べておきたいことがあります。それは、SEOにとってFlashは、テクノロジー単体としては不利に働くことも有利に働くこともない、ということです。使い方によってはSEOに不利になることもありますが、正しく使えばSEOを補強することも可能です。この記事では、SEOにおけるFlashの使い方・使いどころについて、以下の4つの視点から解説します。 検索意図によってはフルFlashサイトも検索可能 テキストとFlashを併用