次回の課題!!!●サイトの軽量化に挑む!「重いぞradioDTM!」ってな感じなサイトなんで、次回は軽量化がテーマ。ThursdayエセWebデザイナーへの道はーい、構成のカネコです。第3回も更新遅れましたね。うーん、今回ばかりは仕方ないんです。それはホームページをプチリニューアルしたから!!皆さんもう観ていただけましたか??まだの方のためにiPhoneでブラウジングした画像を貼ってみよう。どや!だいぶ成長したエセWebデザイナーカネコの仕事は!?笑まぁ全然まだまだなんですが、日々できることが増えている実感はありますね。この「ホーム」というradioDTMのポータル的なページを使って、これから少しずつ要素を加えていこと思っております。!さーて、まずどんなコーナーかと言いますと・・・このコーナーではradioDTM企画構成のカネコが立派な"エセWebデザイナー"として成長していくまでの過程を毎週お届けします。毎週テーマ(課題)を自らに課し、それを克服していく過程と報告をしていきます。間違いなどが多々あると予想されます。いう場合は、コメント等で、ご指摘いただければ幸いです。今週のお道具!!!毎週Webをデザイン、編集、更新する上で役立つであろう便利グッツを紹介するミニコーナーです。画像作成ソフト!!!!前回もソフトでしたが、今回も非常に重要なソフトを紹介します。前回のWebオーサリングソフトの「Dreamweaver(以下DW)」は、ぶっちゃけると必ずしも必要なソフトとは言えないと思います。要するに「ホームページとはコードの塊である」ということです。DWはそのコードを打つ作業をサポートしてくれるソフトです。これは知識と技術と根気があれば、自力で構築することは可能です。画像を作るとなると話は別!!画像って、ホームページを作る上で、非常に重要になる要素だと思います。ページ彩りを加えることは勿論、より分り易く説得力を持たせる効果はやはり威力抜群。このブログでもその理論は存分に使われています。CS6よいさ!またしてもAdobe様の登場じゃ!これはAdobe社が販売しているグラフィックソフトウェアひとつ。最終的にはAdobe社が約34億ドルでマイクロメディア社自体を買収するという形でAdobeソフトとして仲間入りを果たしました。このソフトの特徴は、とにかくWebにおける画像作成に特化しているという点。いうかもはやWeb以外には全く向かないソフトです。そもそもカラーの表現方法がRGBという、ディスプレイためのものしか用意されてません。印刷用の色を作れないってことですね。そんなFireworks(以下FW)は、分り易くいうと、illustratorとPhotoshopが持っているWeb画像制作における便利機能をいいとこ取りしたって感じのソフトになってます。超細かいことは出来ないんですが、これまでやっていたイラレ、フォトショの往復をしなくてもだいたいのことは出来る!って感じですね。世界ではじめて「スライス機能」という技術を搭載したことで一躍有名になったらしいです。中でも一番わかりやすいのが、前回のDWとの連携ですね。FWを使って作りたいサイトのデザインを画像として描いてしまいます。それを「スライス機能」によってパーツごとにバラバラにしてやってDWに指定させておいた画像用フォルダにぶち込むだけで、すいすいサイトの構築が出来てしまいます。あとカネコが最も驚いた機能が、「.fw.png」という拡張子。これは最近よく使われている「.png」という画像データ用拡張子に"まだ追加編集出来ますぜ"ということ。上のほうに「PR枠」と書いてあるボックスが2つ並んでいますね。これは単純に今後PRしたい事柄をこのボックスに埋める予定なわけですが、まずはFWで必要な大きさでもって角丸のボックスを描いただけなんです。自動的にDWがサイトとして反映させてくれるんですわ。これまでは画像ソフトで編集したデータをいちいちWeb用に書き出していました。そんでもって「あっ!ここ誤字ってる!!汗」って間違いを発見したとしますね。なるとまた元のデータを読み出して、編集して、またWeb用に書き出して、それをサイトのサーバーにアップして、ソースコードに反映させて・・・こんな作業をしてわけですが、FWとDWの場合だと、FWのデータ保存拡張子である「fw.png」のまま保存しておくだけで画像としても認識されるし、そのまま編集できるデータとしても保存されている。こと!このシステム考えた人はマジで天才だと思います。この説明をするためにあえて「PR枠」って仮置きにしていたわけですね。本末転倒(笑)でも本当に凄いんです。オススメっす!・・・ってことで毎回長くなってしまってますが、今週のお道具はこれで終わり。本題です!ということで今週の課題!!!●CSSによる複数のdivタグをつかった複数段ページに挑む!勘の良い方なら既にお気づきでしょうが、何故この課題を選んだかというと今回のプチ・リニューアルした「ホーム」のページを作るためでした。社長の言う通り「仕事とブログを両立させようという魂胆」でございますね。書き出す前に、興味ない方にも前提として知っておいていただきたいのが先週軽く説明した【CSS】ですが、これにはサイトの枠組みを定める「段組」と呼ばれる作業を、より構築しやすくする機能があります。今回リニューアルした「ホーム」を例に説明します。超単純にホームページのオーソドックスな段組を表すとこんな感じ(図1)つまりA→B→Cと上から下へと重なっているわけですね。サイトの顔、タイトル的なこと)●B(=コンテンツ。サイトの中身)●C(=フッター。署名みたいなもの)こんな感じですね。ほとんどのサイトがこの3つの要素を持っているはずです。普通、サイトを作る場合は、この3つの要素をベースにしつつ、さらに細かくしていくわけです。このブログを例に説明しますと・・・こんな感じですね。(図1)の【B】のコンテンツ部分を左右に2分割しているわけです。ここでポイントなんですが、このCSSで設定する段組のボックスは、「中身を2分割に出来る」ということ。今回の「ホーム」を考えたのですが、この「3分割」がクセモノでした。"エセ"なので、詳しくはわからないのですが、この段組は「ひとつのボックスの中に2つの小さなボックスを入れる」が原則らしいんです。分り易く書くと「3つは無理!」ってこと。強引にやろうとすると、3つ目がボックスの外にはじかれてしまいます。もって思考覚悟した結果、導き出した答えが、2分割したボックスの中(片方)を、さらに分割してしまえばどうだろうか?ということ。・・・まず一度、【B】の部分を【D】【E】に2分割します。図2で作った【D】のボックスを、【F】と【G】に分割するわけです。(↓図3)どうでしょう?こうすれば、表向きは【A】【F】【G】【E】【C】の構成になるはず(↓図4)・・・いや〜長くなりましたが、こんな感じ作ったのが今回のプチ・リニューアルになります。厳密にいうと、今回の記事の理論「3つは無理だけど2分割をたくさんする」を利用して、さらに細かく分割させて作りました。【A】のヘッダーの部分だけでも7つのボックスで構成しています。構造を理解して、自分のサイトでためしてみる。いうことが立派な“エセ”Webデザイナーへの道と覚悟して、今後も歩んでいこうと思います。お願いします!!さてさて、ようやく終わりました。Thursdayはーい、構成のカネコです。第2回にして早速更新遅れてしまいましたが、エセWebデザイナーへの道さーて、頑張っていきましょう。どんなコーナーかと言いますと・・・このコーナーではradioDTM企画構成のカネコが立派な"エセWebデザイナー"として成長していくまでの過程を毎週お届けします。毎週テーマ(課題)を自らに課し、それを克服していく過程と報告をしていきます。間違いなどが多々あると予想されます。いう場合は、コメント等で、ご指摘いただければ幸いです。先週「今週のガジェット」という名前をつけてコーナー内コーナーを紹介したのですが、あんまり今後、ガジェットらしいガジェットを紹介するかどうも微妙なので、名前を変更します。今週のお道具!!!うん、こっちの方がより“エセ”らしさが出ていいですね。これでしばらく試してみようと思います。ことで今週の「お道具」はこちら!!!ホームページ作成ソフト!!!!先週はPCだったので、次はソフトになります。カネコが使用しているのはこちら。CS6Webに身近な人にとっては有名なソフトだと思います。Adobe社が販売している(正確に言うと)Webオーサリングツールです。"オーサリングツール”何だ!?って人のために、にわか知識で簡単に説明するとプログラミング作業を簡易的にして、そこまでの知識、技術がない人でもホームページが作れるよってことですかね。(後半に効いてくるので説明しておきますと)そもそもの話ですが、ホームページっていうのは【HTML】という専門テキストコード(=タグ)を打ち込むことによって構成されています。これはプログラミングとはまた違うのですが、ほぼ同じだと思ってくれればいいです。【CSS】というテキストコードを作り、この2つを合わせて構成することが主流となっています。(さらに【JavaScript】【php】【FLASH】などを組み合わせていたりします)そして、カネコの場合は、高校生時代に友人のS橋くんから【HTML】の方のみの知識だけ嚙らせてもらったのでした。それが今現在、【HTML】以外の知識ゼロという環境を恨むはめになりました。そこで、今回紹介したDreamweaverのようなオーサリングツールが必要となってくるわけです。DWは【HTML】や【CSS】のタグを打ち込む際に様々なサポートをしてくれます。「こんな風にしたいな」とか「こんな効果を加えたいな」などの要望に対して適切なコマンドや、表示される位置関係などから視覚的に調整できたりなど至れり尽くせりな機能で溢れてます。専用のソフトとか無くても全然作れます。そこにはそうとうなコードの知識と理論が必要になります。いうの好きな人には全く苦ではないはずですが、カネコの場合は、あくまで"エセ"なので、思いっきりDreamweaverに頼りまくっています。・・・こんな感じで今週のお道具は終わり。Explorer」の略ですね。これはおそらく誰しも一度は触ったことがあるアプリのひとつだと思います。Webブラウザアプリの世界シャア9割以上を誇っていたものです。そんなIEさんが、Webデザイナーの方には、結構クセモノになっているようです。いうと、Webブラウザアプリそれぞれで、表示する方法論(システム)って微妙に違ったりしているらしいんです。(完全ににわか知識っす苦笑)そんでもって、特にこのIE大先輩が独特の方法論を採用しているわけですね。今のホームページの主流は【HTML】と【CSS】の組み合わせで構成されているわけですが、なんとIE先輩は、この【CSS】というシステムをかなり軽視し続けているらしいんです。とあるブログに載っていた【CSS】の最新版である【CSS3】に対する主要Webブラウザの対応表を貼ってみます。