メディアデザイン演習3γ
06 ウェブサイトを作ろう1

実製作に向けて

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

ウェブマガジンの企画を書き出してきましたか?
今週は、授業の半分をCSS(Cascading Style Sheet)の学習に、残り半分をヒアリングにあてて行こうと思うので、参考サイトやスケッチなどを見せて下さい。

スタイルシート 発展編

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

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

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

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

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

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

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV test</title>

<style type="text/css">
<!--
#wrapper {
height: auto;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#wrapper #header {
background-color: #FF0;
height: 100px;
padding: 10px;
}
.menu {
color: #FFF;
background-color: #000;
float: left;
width: 200px;
padding: 20px;
}
.contents {
background-color: #F93;
float: right;
width: 640px;
height: 400px;
padding: 10px;
margin-left: 20px;
}
#wrapper div#footer {
color: #CCC;
background-color: #060;
clear: both;
height: 200px;
text-align: right;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header">header</div>
<div class="menu">menu</div>
<div class="contents">contents</div>
<div id="footer">footer</div>
</div>
</body>
</html>

■<div>を使ったレイアウト  float と clear
・floatは、指定された部分が、余白が開いているぶんだけ左右(leftもしくはright)にひっついていく
・余白がなくなったら次の行の左上端を基準にひっついていく
 
 
■一度、floatをやめてあたらしく左上端からレイアウトを始めたい場合
・clearを使う
{clear:left;}  左寄せをやめる
{clear:right;} 右寄せをやめる
{clear:both;} 左右どちらも寄せをやめる
 
 

参考資料:
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を引いて二分の一のサイズを左右均等にわける。
こうすると、ウインドウを大きくしたり小さくしたりしたとき、常に左右の中央に表示されるようになる。



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

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

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

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

 

連続して同じことを繰り返す方法[クラスを使おう]

HTML、div(contentsクラス)内部に書き込む

<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つ書くことで5つのdivに同時に指示を与えよう

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

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

 
■相対と絶対(数値編)
px ピクセル      ディスプレイの1画素を使う単位:絶対
em エム      1文字の大きさを1emとする単位:相対
%  パーセント    基準となる長さと比較して変化する単位:相対
rem  レム(ルートエム)htmlタグに指定されたフォントサイズを1remとする:相対 

 
 


■レイアウトの技法
まずは全体を包みこむ大きな範囲を作り、そのサイズを決める(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; } /*リンク(未訪問)に対して指定 */ 





復習





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

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

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を使ってレイアウトする
授業のはじめにやった基礎があれば、とにかくウェブサイトは作成できます。

自分の作りたいサイトは、どう作れば良いのか。
サンプルを作ってみて、出来るかどうかを試す。その後、実作にどれくらい時間がかかるかを考えて、そこから逆算したコンテンツ量を決めて作り始める。

ウェブサイトデザインは追加したり更新していけるので、まずはすっきりと出来る範囲のコンテンツ量を目指すと良いと思います。

ウェブサイト プロジェクトワークフロー[画像]
(via Webデザイン エンジニアリング - 第65回 [図解]Webサイト構築プロジェクト・ワークフロー:ITpro)
ひとつのウェブサイトをチームで作り上げるときにどのような順序でどのようなプロフェッショナルがかかわっていくのかが分かりやすく図示されているので紹介します。拡大して目を通してください。


誰のため?何のため?Webサイトを作り始める前に。
ウェブデザイナーがまとめた、ウェブサイトを作るときに考えたり調査が必要なことが書かれたブログ記事です。
順を追ってみて行くと勉強になると思います。

 

[todo] スケッチ用のノートをつくろう
これからつくるウェブサイトについての資料やスケッチをまとめるためのノートもしくはクリアファイル一冊を準備しましょう。
参考にしたいウェブサイトがあればプリントアウトして貼ったり、なにかアイデアを思いついたら書き込んだりします。
また、何か図形を書き込むときにはなるべく定規を使って書きましょう。

ウェブで参照できるHTML辞書など

ホームページの作り方教室 基礎編
http://www.urban.ne.jp/home/kibochan/html_1.htm
とってもわかりやすく親切なHTML解説サイト
何をしたらいいか迷ったら:基礎から調べましょう

逆引きHTMLリファレンス
http://www.hajimeteno.ne.jp/html32/index.html
HTML辞書サイト
詳しい説明と関連タグのリンクが良い。

とほほのスタイルシート入門
http://www.tohoho-web.com/css/
CSS辞書サイト
一覧性が高い。

スタイルシートリファレンス(目的別)
http://www.htmq.com/style/index.shtml
CSS辞書サイト
目的から探せる。



企画書作成/ヒアリング

どんなウェブマガジンを作るのか 


まずは基本的なことを決めましょう

ターゲット
コンテンツ/掲載するもの
構造/リンクなどの方法や見せ方
視覚的要素/全体的なグラフィックの方向性をスケッチ

来週の内容

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