link
special
radioDTM.jp site

blogトップへ

メルマガ登録へ

linksへ

公式バナーへ

Podcastへの登録と試聴

メールはこちら


link

play for japan

酒ト飯 イイダ

最近の記事
最近のコメント
最近のトラックバック
カテゴリー
アーカイブ
リンク集
カレンダー
Sun Mon Tue Wed Thu Fri Sat
    123
45678910
11121314151617
18192021222324
252627282930 
<< November 2018 >>
プロフィール
検索
管理者ページ
RSS1.0
Atom0.3
<< コヤマリョウのSKY(サブカルクソ野郎)/小説「さらば雑司ヶ谷」〜サブカルクソ野郎の逆襲〜 | main | 配信予告:【ゲスト】よしむらひらく >>
エセWebデザイナーへの道:第3回(CSSによる複数のdivタグをつかった複数段ページに挑む)


エセWebデザイナーへの道

はーい、構成のカネコです。
第3回も更新遅れましたね。うーん、今回ばかりは仕方ないんです。。。
何故ってそれはホームページをプチリニューアルしたから!!
皆さんもう観ていただけましたか??
まだの方のためにiPhoneでブラウジングした画像を貼ってみよう。



どや!だいぶ成長したエセWebデザイナーカネコの仕事は!?笑
まぁ全然まだまだなんですが、日々できることが増えている実感はありますね。
この「ホーム」というradioDTMのポータル的なページを使って、
これから少しずつ要素を加えていこと思っております。どうぞよろしく!

さーて、まずどんなコーナーかと言いますと・・・
このコーナーではradioDTM企画構成のカネコが
立派な"エセWebデザイナー"として成長していくまでの過程を
毎週お届けします。

毎週テーマ(課題)を自らに課し、
それを克服していく過程と報告をしていきます。

*あくまでド素人が試行錯誤している様を書いていくため、
 間違いなどが多々あると予想されます。
 そういう場合は、コメント等で、ご指摘いただければ幸いです。

ってことです。まずはこのコーナー・・・

今週のお道具!!!

毎週Webをデザイン、編集、更新する上で
役立つであろう便利グッツを紹介するミニコーナーです。
今週の"お道具"はこちら・・・

画像作成ソフト!!!!

前回もソフトでしたが、今回も非常に重要なソフトを紹介します。
前回のWebオーサリングソフトの「Dreamweaver(以下DW)」は、
ぶっちゃけると必ずしも必要なソフトとは言えないと思います。
その理由は前回の記事にも書いたのですが、
要するに「ホームページとはコードの塊である」ということです。
DWはそのコードを打つ作業をサポートしてくれるソフトです。
これは知識と技術と根気があれば、自力で構築することは可能です。

ただ、画像を作るとなると話は別!!

画像って、ホームページを作る上で、非常に重要になる要素だと思います。
ページ彩りを加えることは勿論、より分り易く説得力を持たせる効果はやはり威力抜群。
このブログでもその理論は存分に使われています。

そんなカネコが最近頼りまくっている画像作成ソフトはこちら・・・




Adobe Fireworks CS6

よいさ!またしてもAdobe様の登場じゃ!
これはAdobe社が販売しているグラフィックソフトウェアひとつ。
Adobeさんと言えば、illustratorPhotoshopが有名ですが、
Webを作る場合だったら、カネコは絶対コイツをオススメします!

元々はAdobe社とライバル関係であったマイクロメディア社によるソフトでしたが、
最終的にはAdobe社が約34億ドルでマイクロメディア社自体を買収するという形で
Adobeソフトとして仲間入りを果たしました。

このソフトの特徴は、とにかくWebにおける画像作成に特化しているという点。
というかもはやWeb以外には全く向かないソフトです。
そもそもカラーの表現方法がRGBという、ディスプレイためのものしか用意されてません。
つまり、印刷用の色を作れないってことですね。実に潔い。

そんなFireworks(以下FW)は、分り易くいうと、
illustratorとPhotoshopが持っているWeb画像制作における便利機能を
いいとこ取りしたって感じのソフトになってます。
だから超細かいことは出来ないんですが、
これまでやっていたイラレ、フォトショの往復をしなくても
だいたいのことは出来る!って感じですね。
また、世界ではじめて「スライス機能」という技術を
搭載したことで一躍有名になったらしいです。
今はフォトショをはじめ、多くの画像編集作成ソフトが導入している機能ですが、
これのパイオニアだけあって、超強力。利便性抜群の内容になってます。

中でも一番わかりやすいのが、前回のDWとの連携ですね。
まずFWを使って作りたいサイトのデザインを画像として描いてしまいます。
それを「スライス機能」によってパーツごとにバラバラにしてやって
DWに指定させておいた画像用フォルダにぶち込むだけで、
すいすいサイトの構築が出来てしまいます。わーお。

あとカネコが最も驚いた機能が、「.fw.png」という拡張子。
これは最近よく使われている「.png」という画像データ用拡張子に
"まだ追加編集出来ますぜ"ということ。

どういうことかというと、今回リニューアルしたDTMのサイトですが、
上のほうに「PR枠」と書いてあるボックスが2つ並んでいますね。



これは単純に今後PRしたい事柄をこのボックスに埋める予定なわけですが、
まずはFWで必要な大きさでもって角丸のボックスを描いただけなんです。
それをDWでイメージ配置として「fw.png」の拡張子のボックス画像データを
指定してあげているんですが、
実は、この「PR枠」と書いてあるボックスをFWで編集するだけで、
そのままDWの方でも編集された画像をサイトに反映してくれるんです!!
・・・凄くないですか??
つまり、FWで大雑把なボックスをたくさん作って、DWで仮置きするだけで、
あとは少しずつFWでもって画像を作り上げていくだけで、
自動的にDWがサイトとして反映させてくれるんですわ。

これまでは画像ソフトで編集したデータをいちいちWeb用に書き出していました。
そんでもって「あっ!ここ誤字ってる!!汗」って間違いを発見したとしますね。
そうなるとまた元のデータを読み出して、編集して、またWeb用に書き出して、
それをサイトのサーバーにアップして、ソースコードに反映させて・・・
こんな作業をしてわけですが、FWとDWの場合だと、
FWのデータ保存拡張子である「fw.png」のまま保存しておくだけで
画像としても認識されるし、そのまま編集できるデータとしても保存されている。
ってこと!

このシステム考えた人はマジで天才だと思います。
この説明をするためにあえて「PR枠」って仮置きにしていたわけですね。
本末転倒(笑)でも本当に凄いんです。オススメっす!



・・・ってことで毎回長くなってしまってますが、今週のお道具はこれで終わり。
いよいよ本題です!

ということで今週の課題!!!
CSSによる複数のdivタグをつかった複数段ページに挑む!


勘の良い方なら既にお気づきでしょうが、何故この課題を選んだかというと
今回のプチ・リニューアルした「ホーム」のページを作るためでした。
社長の言う通り「仕事とブログを両立させようという魂胆」でございますね。

さて、書き出す前に、興味ない方にも前提として知っておいていただきたいのが
先週軽く説明した【CSS】ですが、
これにはサイトの枠組みを定める「段組」と呼ばれる作業を、
より構築しやすくする機能があります。

今回リニューアルした「ホーム」を例に説明します。

超単純にホームページのオーソドックスな段組を表すとこんな感じ(図1)



つまりA→B→Cと上から下へと重なっているわけですね。
それぞれの役割は・・・

●A(=ヘッダー。サイトの顔、タイトル的なこと)
●B(=コンテンツ。サイトの中身)
●C(=フッター。サイトの定形の情報。署名みたいなもの)

こんな感じですね。ほとんどのサイトがこの3つの要素を持っているはずです。

ただ、普通、サイトを作る場合は、この3つの要素をベースにしつつ、
さらに細かくしていくわけです。ちょっとこのブログを例に説明しますと・・・



こんな感じですね。
つまり(図1)の【B】のコンテンツ部分を左右に2分割しているわけです。

ここでポイントなんですが、
このCSSで設定する段組のボックスは、「中身を2分割に出来る」ということ。
エセWebデザイナー(見習い)のカネコはこの理論を元に、
「だったら3分割することも出来るんじゃね?」って単純な発想のもと、
今回の「ホーム」を考えたのですが、この「3分割」がクセモノでした。

あくまで"エセ"なので、詳しくはわからないのですが、
この段組は「ひとつのボックスの中に2つの小さなボックスを入れる」が原則らしいんです。
まぁ分り易く書くと「3つは無理!」ってこと。
強引にやろうとすると、3つ目がボックスの外にはじかれてしまいます。

でもって思考覚悟した結果、導き出した答えが、
2分割したボックスの中(片方)を、さらに分割してしまえばどうだろうか?ということ。

つまり・・・
まず一度、【B】の部分を【D】【E】に2分割します。(↓図2)




さらに・・・
図2で作った【D】のボックスを、【F】と【G】に分割するわけです。(↓図3)




どうでしょう?
こうすれば、表向きは【A】【F】【G】【E】【C】の構成になるはず(↓図4)




・・・いや〜長くなりましたが、こんな感じ作ったのが
今回のプチ・リニューアルになります。
厳密にいうと、今回の記事の理論「3つは無理だけど2分割をたくさんする」を
利用して、さらに細かく分割させて作りました。
【A】のヘッダーの部分だけでも7つのボックスで構成しています。

もっと効率のいいやり方はたぶんあるとは思うのですが、
少しずつ構造を理解して、自分のサイトでためしてみる。ということが
立派な“エセ”Webデザイナーへの道と覚悟して、今後も歩んでいこうと思います。
どうぞよろしくお願いします!!



さてさて、ようやく終わりました。次回の課題!!!
ひとつのボックスだけをスクロール出来るようにする!(=更新履歴を作りたい)

よし、これでいこう!頑張るぞい!!
さぁ、カネコはこの課題をうまくクリアできるのか??
来週の更新を乞うご期待!!!

【構成カネコ】
JUGEMテーマ:インターネット
Posted by : radioDTM | エセWebデザイナーへの道 | 01:27 | comments(0) | trackbacks(0)
コメント









この記事のトラックバックURL
http://blog.radio-dtm.jp/trackback/982861