実製作に向けて

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

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

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

スタイルシート　発展編

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

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

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

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

[少しの工夫でうごめきを感じさせる] ロールオーバー時の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>

その他 TIPS LINK

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

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

▷ CSS(スタイルシート)の基本、小技、テクニック総まとめ
▷ 大きい画像を背景にする時のスタイルシートの３つの実装例
▷ 画像のロールオーバー効果を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>
　<div><a href="#">文字や画像</a></div>
　<div>
　　 <div><img src="〜〜〜〜〜.jpg" /></div>
　</div>
</div>

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

HTML部分

<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>


CSS部分
.boxのCSS定義クラスを1つ書くことで５つのdivに同時に指示を与えよう

.box{
width:30%;
float:left;
margin-right:5px;
margin-bottom:5px;
background-color:yellow;}

ボックス／幅 30%
ボックス／フロート／左
マージン　右／ 5px　下／5px
背景／背景色／黄色

■<div>を使ったレイアウト 　float と clear
・floatは、指定された部分が、余白が開いているぶんだけ左右（leftもしくはright）にひっついていく
・余白がなくなったら次の行の左上端を基準にひっついていく
　
　
■一度、floatをやめてあたらしく左上端からレイアウトを始めたい場合
・clearを使う
{clear:left;} 　左寄せをやめる
{clear:right;}　右寄せをやめる
{clear:both;}　左右どちらも寄せをやめる
　
　
■レイアウトの技法
まずは全体を包みこむ大きな範囲を作り、そのサイズを決める（PC画面用だと800〜1000pxくらいが最近よくみるウェブサイトのサイズ。ほかにも現場ではタブレット用やスマートフォン用などを考える必要がある。※レスポンシブレイアウトといいます。）
そのdivの中に、細かい仕切りをつくっていきレイアウトの骨組みをつくる。
その骨組みの中に、文章や画像などの要素を入れこんでいって完成させる。。

　
★ポイント
インライン要素とブロック要素
ブロック要素はdivのようにすでに面積という概念を持った範囲の指定。
もしインライン要素（pやspanなど）をブロックのように扱いたい場合は、{display:block;}というデザイン指示を追加すると良い。
　
 
[DIVになれてきたら]
より意味をはっきりさせるグループ化要素（タグ）を使っていきましょう。
クラスを使わなくても要素名でCSSの指定ができるので便利です。

・<main>
ページの中心になるメインコンテンツを囲む。1つのhtmlに1度だけしか使えない
・<article>
ページの記事や中心となるコンテンツを囲む
・<section>
記事の一部やページ内のある一部を囲む
・<nav>
ページの主要なナビゲーションを囲む
・<aside>
ページの本題ではないサイドバーなどを囲む
・<header>
ページのヘッダを囲む
・<footer>
ページのフッタを囲む

h1 { color: red; } /* h1要素に対して指定 */
h1, h2 { color: red; } /* h1 と h2要素に対して指定 */
ul li { color: red; } /* ul の中にある li要素に対して指定 */
.sample { color: red; } /* class="sample" を持つ要素に対して指定 */
#sample { color: red; }/ * id="sample" を持つ要素に対して指定 */
h1.sample { color: red; } /* class="sample" を持つ div要素に対して指定 */
a:link { color: red; } /*リンク(未訪問)に対して指定 */　

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

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

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





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

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

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

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

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

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


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

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

来週の内容

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