Fireworksでのスライス使用方法

Fireworksの使い方　動画マニュアルを更新しました。
今回は、ファイヤーワークスでのスライスの使用方法です。


一昔前のスライスの使い方というと、デザインを全面、画像作成ソフトで作って、それをスライスで１画面全部書き出ししてから、HTMLにテーブルごと取り込み・・・
という方法が主流でしたね。
とくにDTPなどのデザイン畑からweb制作に入ったデザイナーさんにとっては、ＨＴＭＬソースを覚えなくても自由自在にデザインができるという素晴らしい機能でした。
同時に、５年も前にはまだネットの回線の速度が遅く、どうやって軽い画面を制作するかに、とても神経を使わなければいけない時代だったので、大きな画像は、スライスで切り刻んで部分的に高画質で出力したり、広い余白はスペーサーを入れて無駄な画像が入らないようにするなど、
画面を軽くするテクニックも重要でした。

しかし時は流れ、今やWEB標準に合わせた制作方法が主流に・・・・
大きな画像は１枚で背景用に書き出して、そのうえにテキストやパーツを配置していく・・。
こちらが主流になってから、スライス機能の使用方法も使い方が変わってきました。

全画面テーブルで書き出ししてしまうと、修正があったときに大変ですが
後のメンテナンスを考えると、こういった背景画像にHTMLでテキストをのせるといった方法をとったほうがだんぜん効率が良いですね。

というわけで、作例では、１画面で作ったweb用背景を、ヘッダー用、フッター用、メイン部分用の３つに切り分けて、さらにロゴは別で書き出しする方法です。
（１）から（３）までで完結してます。

Fireworksのスライスの使い方 >> （１）背景画像用に切り抜きする方法

フォトコンテスト「伝えたいもの—無形文化遺産」

（財）ユネスコ・アジア文化センターが主催しているフォトメッセージ・コンテ
ストについてご案内します。
詳細は下記のURLをご覧ください。

ＡＣＣＵアジア太平洋ＥＳＤフォトメッセージ・コンテスト『明日への手紙２００７』

締切が2月15日（金）と迫ってますが、関心がありましたら是非ご応募ください。
テーマは「伝えたいもの—無形文化遺産」です。
「家族の記念行事や地域の祭りや芸能、受け継がれてきた手工芸、誇りに思う習慣や人々の暮らしなど・・・・・」の写真がテーマだそうです。

オンライン応募が可能です。入賞作品はパネル化され、アジア各国で巡回展示するそうです。

友人の友人が担当していて、日本からの応募者が少ないため締切を延長したものの、期待どおりに応募がないようです。
ぜひ、何か手持ちの写真があるかた、応募してみてください。

Web2.0風素材を作る方法・Fireworks編

Web2.0風素材を作る方法で検索するといろんな参考ページが出てきて役に立つんですが、
ファイヤーワークスでの方法があまり見あたらなかったので、動画マニュアルでやってみました。

FireworksでWEB2.0風の素材を作る方法



こんな感じで、ふんわりした膨らみのついたボタン、ほんのりと透明感と立体感があるナビゲーション、ワンポイントに使う丸ボタンも、WEB2.0風を意識して、透明感・つや・ふくらみ・・を演出してみます。

実は、いつもは使い慣れてるillustratorで作ってるんですが、この動画のために、ファイヤーワークスで作ったらどんな手順かな・・と自分で考えながらやったので、
もしかしたらもっと簡単な方法があるかもしれないし、私もファイヤーワークスのベテランというわけではないので、、熟練の方から見たら突っ込み処があるかもしれません。
仕上がり具合はやっぱりillustrator（私が持ってるバージョンではCS）で書き出したjpgの方がきれいな感じがしますが・・・・作業はファイヤーワークスの方が簡単でした。

そういえば、一昔前のwebデザインの流行といえば、背景に一面にパターンや模様が敷いてあるのとか、テキストが自動で動いて案内してるのとか、blinkでピカピカしてるのもありましたね。
今時そういうホームページ見ると「おぉ～～、きっと10年前に開設しそのまま放置されてるのか知らないけど、どうやら高齢のHP（？）にちがいない」などと印象受けますが、
今作っている、こんなふうにふわっと膨らみのあるナビゲーションなど・・・５年後に見たら古くさく感じるんでしょうか・・・。タイムトラベルして見てみたい気がします。

フロートさせたら崩れた・゜゜(>_<)゜゜・。

スタイルシートでのデザインを勉強しはじめたとたん、「フロートさせたら背景が出ないor崩れた！」という壁にぶつかってパニックになってる方は多いんじゃないでしょうか。
わたしもかつて・・・。背景に画像をしいたのに
下まで表示されなくて、いろんなブラウザで表示しながら一日つぶしてしまったことが・・・

これは、このフロートの後のクリア（解除）ができてないために、フロートのボックスが乗っかっている元のボックスの中に何も入ってない状態になってしまうことから（表現に語弊があるかもしれないけど、なるべく初心者さんにわかりやすい言い方を探しながら書いてます）
元のボックスに指定した背景画像や色などが表示できなかったり、次のブロックが入り込んでしまい崩れたりします。

では、「フロートの後の解除」ってどうやればいいの？という話ですが、
クリアの方法はいろんなやり方があるらしく（ハックを使う、クリアフィックス、hrタグを入れてそこにスタイル指定・・・など・・検索するといろいろ出てきます）
わたしは一番簡単な、
フロートの外側のブロックの閉じタグの前に、クリアするブロックを入れる、というのをよく使っています。

余分なdivを増やしたくない人は他の方法をとったほうが良いと思いますが、初心者さんにはかなり簡単なのでおすすめです。

このやり方は、動画マニュアル　Dreamweaverでのスタイルシートの使い方　フロートの後をクリアする方法に書いてますので、
興味のある人は見てみてください。



この動画では、スニペットを使って便利に使い回す・・・という方法を紹介しています。
わたしはスニペットを知らない頃はなんでもかんでも単語登録してて、
くりあ＠　で変換すると＜div style="clear: both;"＞＜/div＞
がでることになってます (ﾉ_<｡)

遠山郷の町並みイラスト

お正月に向けて、遠山郷・和田宿（わだじゅく）の町並みのイラストを描きました。
これは、友達でもある、肉のスズキヤさんの若女将が、
自分の町を取材してくれたものをイラストにしたんですが、
スズキヤさんのHPでダウンロードできるようになってるので
もし遠山郷ふぁんの方がいらっしゃいましたら、よかったら貰ってあげてください。


ジンギスカンと山肉の通販　肉のスズキヤ

遠山郷に関してはいろんなところで紹介してるんだけど、
わたしがとっても好きな場所のひとつ。
正当派ニッポンの田舎町というか・・・映画「三丁目の夕日」よりも、リアルに昭和の雰囲気を味わえる町並みが残っています。
ちょっと山奥に入ると、原田泰治の世界・・・かな。

トンネルが開通して便利になって、どんどん人が流出してしまい、高齢化に伴いお店を継ぐ人がいなくなっちゃったら
あのタクシー会社とか自転車やさんとか、雑貨やさんとか、
あの町並みはどうなるのか・・・何もできないくせに心配してる一人です。

あたしが和田宿の町並みを取材したときの様子はこちらに載ってます（photo byうちの相方さん）
信州遠山郷　和田宿



わざとモノクロ写真にしたんだけど、なんとなく・・・いいら。

ドリームウィーバーを便利なエディタとして使う方法

Dreamweaverでのスタイルシートの使い方というブログを更新していますが、その中のネタより・・・
ソースコードでCSSデザイン（4）スニペットを使ってコードを入力について、もうちょっと詳しく解説してみます。




この動画では、よくつかうスタイルを、スニペットに登録しておいて、コードに貼り付けしてみる方法を紹介しています。
登録したスタイルは、写真の右寄せスタイル。
こうしていろんな場面で使い回すようなよく出現するスタイルを登録しておくと便利です。

スニペットは元からいろんなものが登録されてるので、利用することもできます。
（私は自分で登録したもの意外使ったことないんですが・・）
よく使うJavaScriptや、メタタグ、なども登録しておくと便利です。

＜写真を右寄せ簡単CSS＞
.photoR{
display:block;
float:right;
margin-left:10px;
}
これをスタイルに追加してから、写真に
class="photoR"
を適用させれば、簡単に右回り込み写真になります。
タグでいうと
＜img src="img/kagami_top.jpg" width="120" height="152" class="photoR" /＞

もしくは、＜p＞か＜div＞に class="photoR"を適用してもいいですね。
＜div class="photoR"＞＜img src="img/kagami_top.jpg" width="120" height="152" /＞＜/div＞

imgは、インライン要素なので、フロート指定は本来できないんですが、
display:block;を入れることで、ブロック要素にできるので、フロートさせることもできるし、マージンなどを指定することもできます。

同じ要領で、
.photoL（左に回り込みさせたい場合）
.phtoC（中央揃えにしたい場合）
こんなのを作ってスニペットに登録させておくと、作業中にこういうレイアウトが出現したときに手間をかけずにすぐにスタイルを適用させることができますね。

※ブログの中でタグが有効になっちゃうんで、＜＞は全角で記述してあります

CSS初心者の皆さん、webデベロッパー使ってますか

昨日、webデザインを勉強中の方に（私もまだ勉強中ですが）、Firefoxのwebデベロッパーを紹介したら、ものすごく喜ばれたので、
まだ知らない人も多いかもしれないと思い、初心者向けにわかりやすい言葉で紹介しますね。
CSSデザインを勉強しようと思った時点で、Firefoxのファンになった人は多いかもしれませんが、これを知ったらもっとファンになります。

＜ダウンロードページはここ＞
Web Developer 1.1.2 日本語版


＜ダウンロード方法＞
ダウンロードして保存したファイルを、Firefoxのアイコンに重ねると、アドオンに追加するかと聞いてくるので、許可すればokです。

＜何ができるか＞
webデベロッパーのツールバーが出てきてそこからいろんなことができるようになります。

（例）div要素のサイズを表示


（例）画像の情報を表示


（例）CSSを編集する


他の人の作ったサイトのCSSを変更して、一時的にいろいろ実験したり検証したりもできちゃいます。

なんて便利なんでしょう〜。こんな素晴らしいモノを無償配布してくれるなんてありがたいですね。

＜見本画像は・・・＞
税理士先生のホームページはモモンガが作りました。通常の税理士業務以外にも、経営コンサルタント、起業・開業支援、ファイナンシャルプランニング業務など、幅広い分野で手がけられています。
特に医療部門の税理業務には詳しく、東京関東を中心とした個人開業医向けの業務も多く担当されてますので、良い税理士さんはどこかにいないか・・？と探している方がいらっしゃいましたら、気軽に相談してみてください。
とてもきさくで、話しやすくてなんでも相談にのってくれます。
長野県駒ヶ根市　大林直樹税理士事務所