2008年1月27日日曜日

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

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

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



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

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

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

2008年1月23日水曜日

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




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

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

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

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

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



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

2008年1月18日金曜日

遠山郷の町並みイラスト



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


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


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

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

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



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

2008年1月17日木曜日

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

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(中央揃えにしたい場合)
こんなのを作ってスニペットに登録させておくと、作業中にこういうレイアウトが出現したときに手間をかけずにすぐにスタイルを適用させることができますね。

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

2008年1月10日木曜日

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

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

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


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

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

(例)div要素のサイズを表示


(例)画像の情報を表示


(例)CSSを編集する


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

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

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

2008年1月2日水曜日

駒ヶ根市で評判の美容室



わたしがかれこれ10年近くお世話になってる美容室のホームページを作成しました。
HairFactory A2(駒ヶ根市)

A2さんを知るまでは、これといったお気に入りが見つからずあちこち美容室放浪してたんですが、ふらっと入ってみたら、カットひとつでもとても丁寧にセンス良くしてくれるので、とても日持ちが良い???というのも変ですが、日数がたってもそれなりにいい髪型に保ってくれるので、わたしのような不精者にはとてもありがたい美容室です(そのぶん美容院の売り上げには貢献してないのかも・・・ゴメンナサイ)。
とにかくオーナーと奥さんのカットの腕はサイコーです。安心して任せて大丈夫です。パーマもおばさんぽくはなりませんw
スタッフの方もとてもきさくであたたかい美容室です。
駒ヶ根近辺でどこかいい美容院知らない?と探している方がいましたら、一度たずねてみてください。

協力/写真・宮崎学 Flash制作・Dogg244さん

ホームページ作るのに写真がいかに重要か・・・素材8割、デザイナーの出る幕はあまりないのです。。。
アクションスクリプトはいかにクールにシンプルに、一瞬で決めるか・・をテーマにDogg244さんにお願いして考えてもらいました。
シンプルな仕上がりが、A2さんのコンセプトともマッチしてるような気がします。ありがとうございました(^^

webの森のFBページへも来て下さい