メディアデザイン演習3β
07 ウェブサイトを作ろう2

実製作に向けて

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

今週は、スタイルシートについてもう少し詳しく説明していこうと思います。

準備:
デスクトップに、アルファベットで自分の名字を名付けたフォルダを出して下さい。
中にはindex.htmlやimageフォルダが入っているはずです。

スタイルシート 発展編

[資料] 白は白ではない?

機械にも人にもやさしい色

ウェブサイトで白を扱う場合、color="#ffffff" で表示するが、
ツウはcolor="#fffffd"(薄いアイボリー)を使う。
完全な真っ白ではない白を利用することによって、目に優しく、
しかもモニターへの負担も軽くするサイトを作る事ができる。

<! ここの背景はIVORY   >
<! ここの背景はWHITE   >
<! ここの背景は#FFFFFD   > *これを使う
<! ここの背景は#F3F3F3  >

差がわかりますか?
白だといっても、いろいろと選択は可能です。



[少しの工夫でうごめきを感じさせる] ロールオーバー時のCSS

文字も同様に 色が薄くなります

CSS部分

a.rollover_btn:hover {
 opacity: 0.50;
 filter: alpha(opacity=50);
 -moz-opacity: 0.50;
 -ms-filter: "alpha(opacity=50)";
}

HTML部分
<a href="#" class="rollover_btn">
 <img src="images/sample_image.gif" />
 文字も同様に色が薄くなります
</a>



[資料] [要チェックの月刊誌]
サイト構築のためのトータルデザイン誌

web designing



その他 TIPS LINK

▷ CSSによる段組(マルチカラム)レイアウト講座

▷ 意外と知らない!?CSSセレクタ20個のおさらい
▷ 保存版!CSS3セレクタの説明書

▷ CSS(スタイルシート)の基本、小技、テクニック総まとめ
▷ 大きい画像を背景にする時のスタイルシートの3つの実装例
▷ 画像のロールオーバー効果をCSSで簡単実装する方法


[参考資料: さまざまなウェブマガジン]
http://www.cbc-net.com/
http://www.cinra.net/
http://www.realtokyo.co.jp/
http://aar.art-it.asia/top
http://www.shift.jp.org/ja/
http://www.webdice.jp/
http://www.art-it.asia/top/?lang=ja
http://www.designboom.com/eng/
http://www.honeyee.com/


ボックス(div)の配置方法を指定する

<div>
この部分が<br / >
ひとつの面的範囲として<br / >
扱われます。
</div>

復習: divタグで囲まれた内容は面積をふくむ範囲を示します。

floatについて
float フロート、というスタイルを使います。
フロートとは「浮かぶ」という意味です。 :コーヒーフロート

これと復習したCSSとの組み合わせによって、レイアウトに使える道具となります。

まずはこのページを見てください divsample.html

clear : floatを解除する方法

例 :
HTML部分
<div class="menu">ひとつめ</div>
<div class="contents">ふたつめ</div>
<div class="footer">みっつめ</div>

CSS部分
div.menu, div.contents { float : left; }
div.footer {clear : left; }



DIVなどのタグを入れ子状態で配置する

<div>
 <div><a href="#">文字や画像</a></div>
 <div>
   <div><img src="〜〜〜〜〜.jpg" /></div>
 </div>
</div>

  タグを挟み込んでいくことでいろんな指定を反映させることができる

 

参考資料:
marginマージン、paddingパディング、borderボーダーの考え方:
http://css-eblog.com/csstechnique/css-course.html


上下左右の周囲があるものについての指定方法
 margin: 10px;   /*上下左右すべて10pxのマージン*/
 margin: 10px 20px; /*上下10px 左右20pxのマージン*/
 margin: 10px 20px 30px 40px; /*上 10px 左20px 下30px 左40pxのマージン*/

  1
4   2
  3


左右の中央にボックスを配置する

div#wrapper{
 width : 920px; /*任意のサイズ*/
   margin: 0 auto; /*上下0px 左右自動*/
}

  divの幅が決まっている場合(今回は920px)、margin : auto [自動 の意] と書くと、ウインドウ全体の幅から、920pxを引いて二分の一のサイズを左右均等にわける。
こうすると、ウインドウを大きくしたり小さくしたりしたとき、常に左右の中央に表示されるようになる。


どういう順番でつくっていくの?

ウェブサイトを作るときに、、、

1 ワイヤーフレームを書く(配置とサイズ(px)をしっかり決める)
2 IllustratorやPhotoshopで内容やパーツををデザインしていく
3 画像をパーツ毎にウェブ用に書き出して保存する
4 レイアウトコーディングしていく


1・ワイヤーフレームについて

- ワイヤーフレームって?
内容をどのように配置すれば見ている人に伝わりやすいかを考えて作った画面構成図

例)ワイヤーフレームと完成したウェブページデザインが見られる http://www.wireframeshowcase.com/

・大きさ、場所、順番などをしっかり決める
・色味(テーマカラー)なども検討する
・いくつかページレイアウトのバリエーションがある場合は、全ページの形ぶんつくる

- グリッドデザインをしよう http://photoshopvip.net/archives/14323
見えない補助線を使って整列させて行く

- 画面サイズについて
現状、横幅960px~1024pxを使う事が多い。
資料:もっとも良く使われるディスプレイ解像度が1024×768から1366×768にアップ〔日本では1366×768〕

スマートフォンやタブレット端末が普及するにつれて、Webデザイナーは様々な画面サイズや縦横比を考慮したユーザーインターフェースを設計する必要に迫られている。
画面サイズ・縦横比に対応して柔軟に表示を調整する「レスポンシブWebデザイン」も考えて行く必要がある。


2・詳細のグラフィックデザインを行っていく
道具は、IllustratorやPhotoshop、もしくはFireworksというアプリケーションが使われる事が多い。

[ウェブ用画像のPOINT]
・色はRGB
・単位はピクセル
・画像形式 GIF・JPEG・PNG

 

来週の内容

引き続き要素と属性の紹介
来週はマガジン実製作編レイアウト編です。
HTMLの辞書/参考書を手に入れておきましょう。
わからない事は早めに質問して下さい。