本日の授業 石野様

本日は午後から、石野さん。

先日お誕生日だったので、CLASS99.99から粗品差し上げたら、ご丁寧なお礼をいただきました。なんか高そうな、焼き菓子です。

ありがとうございました。

前回、”IT初めの第一歩”の課題をお願いしていました。

ほとんど、きれいに出来ていて問題なかったのですが、いわゆる”ｆｌｏａｔの高さ算出問題”を含んでいる課題です。

ここを、石野さんは、テーブルでフロートせずにレイアウトして解決されました。

実際、プロのサイトでも、こういう形で逃げているところもあるので、悪くはないのですが、ＷＥＢ標準の考え方からすると、テーブルを使ってレイアウトしていることになるので、よろしくないですね。

で、こういう場合は、フロートで組んで、内面のＤＩＶを囲む、外側のＤＩＶに対して、

overflow:hideen;

をかけることで、解決できます。

また、ＩＥ対策用に、

*htmlハックを一緒にかけておきます。

*html #all {

height:1%;

}

さて、今日からはサイトのデザインです。

テーマとして、娘さんが通っておられるバレエ教室のサイトを作り直すこととなりました。

いま、一応サイトが稼動しているので、そこから素材をダウンロードしてラフを作ってみました。

Ｐｈｏｔｏｓｈｏｐでおこしますが、まず８００×１０００ｐｘで書類を作ります。

真っ白な書類に、ハイでざいんして！といわれても、なかなか一足飛びに出来るもんではありません。

まずは、入れなければいけない素材（文字やマークなど）を、とりあえず、書類の上にレイヤー配置します。

ビジュアルも作らないといけないので、教室のサイトに上がっていた写真を使って、Photoshopで合成していきます。このときにポイントは、開いてるスペースにパズルのように組み合わせるのではなく、奥行きを意識して、3次元的にイメージを配置していくという考え方です。

写真をトリミングするときは、首切り、指きり、イメージを端点で切らないなどに注意して、必要なところを切り取ります。

背景を抜くときは、昨日の田代さんの授業でもやった、レイヤーマスクを使って抜くと、効率がいいでしょう。

あと、レイアウトのコツというか、簡単なセオリーがありますので、それにしたがってレイアウトするだけで、実はある程度のクオリティのデザインは誰でも出来ちゃいます。

（この辺は、授業で質問してくださいね）

今日の段階では、こんな感じ。。。これから、ご自分で作り直していただいてもいいし、この続きを作っていただいてもいいです。

今日はいろんなコツをおはなしして、石野さん、頭ちょっとパンク気味でしたが、徐々に体得していってくださいね。