メディアデザイン演習3γ
05 HTMLの基本を知ろう4

HTMLを書きながら要素を知る

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

本日は、宿題であった工事中のページを「サーバ」に「アップロード」します。
引き続き、HTMLの学習およびウェブマガジンの企画作成に入ります。

この間のふりかえり

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

[前回やったこと]
・ウェブ用に画像を書き出す JPG GIF PNG
・リンク文字の色変更
・工事中ページのブラッシュアップ


スタイルシート 発展編

[準備]サイト内リンクをつくってみる

新規書類を作成し、index.htmlの中身をすべてコピー&ペーストして、study.htmlという名前で自分の名前のついたフォルダに保存する。
study.htmlの好きな位置に、以下を書き加えましょう。

<a href="index.html">トップページへのリンク</a>
※相対指定



CSS(Cascading Style Sheet)の復習

本文とは別に表現ルールを設定するスタイルシートは、文書のメンテナンスを容易にし、また表現に一貫性を持たせる手段です。
一番簡単にスタイルシートを書くと、、、

<span style="color:red;">成安造形大学</span>
<div style="color:red;">成安造形大学</div>

タグ解説:どちらも範囲を表す要素です。
 <span> はインライン要素(前後で改行されない)
  ここから・ーーーーーー・ここまで /直線的な範囲

 <div> はブロック要素(前後で改行される)
  ここから「     」ここまで /面積を持った範囲

ほかにも、<h1> や <p> など、
ほとんどのタグで style 属性を指定できます。

 

スタイル定義の場所

スタイルシートをどこに記述するかは、大きく分けて3つあります。

1 インラインstyle属性
個々のタグに style属性としてスタイル情報を埋め込むことで、
そのタグの範囲にスタイルを設定します。

<p style="color: red;">これは赤い文字の段落。</p>

2 head要素内のstyle要素で指定

head要素の中に style要素を加えてスタイルを記述すると、
そのHTML文書の 全体を通して共通のスタイルを設定することができる。

 <head>
  <style type="text/css">
   <!--
   p {color: red;}
   h2 {color: blue; font-size: 120%;}
     -->
  </style>
  ...

3 外部ファイルによるスタイル設定 [今後はこの方法を使っていきます]

<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>

--------
basic.css(別ファイル 保存時には相対的な位置に注意)
h1 { color:red; }

より詳しく見て行きましょう

同時にいくつかの要素の値を決める事が出来ます。

その際は、以下のように中かっこの中に複数行にわたって書きます

h1 {
font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: red;
font-size: 16pt;
}

 

一つのHTMLファイルに、複数のCSSをリンクさせることも可能ですので、全体通じてつかうデザイン設定CSS、そのページ独自のデザイン設定用のCSSなどと分けて管理するといいでしょう。

 

クラス

クラスはスタイルの集合につける名前で、
複数のタグに同じクラス名を指定することが可能です。

<style type="text/css">
<!--

p.red {color:red;}
p.green {color:green}
.blue{color:blue;}
.bold{font-weight:bold;}

-->
</style>
</head>

<body>
<p class="red">これはredクラスです。</p>
<p class="green bold">これはgreenクラス+boldクラスです。</p>

<h1 class="blue">これはblueクラスです。</h1>
<p class="blue">これもblueクラスです。</p>

</body>
</html>

 

ID属性

クラスの代わりに ID を指定することもできます。
ID はそれぞれの要素につける名前でひとつのドキュメント中に、
複数の要素が同じ ID を持つことは許されません。

<html>
 <head>
  <title>sample</title>
  <style type="text/css">
  <!--
   #a001 { color: blue; }
  -->
  </style>
 </head>
 <body>
  <p id="a001">この中の色は青色です</p>
 </body>
</html>

どのような要素が設定できるのか、調べてみましょう。
参考ウェブ: とほほのスタイルシート入門
http://www.tohoho-web.com/css/index.htm

 

divタグはひとつのエリアとして情報をまとめて、幅や高さを決めたり、配置したり、背景に色をつけるなどの操作する場合に使用し、spanタグは文章中の一部を操作する場合に使用する、といった感じで使い分けると良いでしょう。

<p>ひとつの段落(パラグラフ)であることを表す
<p>タグはParagraphの略で、<p>~

</p>で囲まれた部分がひとつの段落であることを表します。
一般的なブラウザでは<p>~</p>の前後に1行分改行されますが、単に改行することが目的の場合には、<p>タグではなく<br />タグを使用してください。

ボックス(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>

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


ウェブマガジンの企画ヒアリング

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

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

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

※待っている間に
復習をかねて、宿題でつくってきたマガジンのタイトル画像を、ウェブ用に書き出してindex.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辞書サイト
目的から探せる。



ウェブマガジンの企画をたてる

どんな順番でつくっていけばいいのか

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


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

 

0 企画を考える

何故つくるのか 自分が作らなければならない理由はどこにあるか
誰が見る/どう感じる/どのような関係を築きたい
そうするためにどんな内容をどのように見せるか

こんな感じにしたいという類似例をいろいろ集めて分析してみる(オンラインのソーシャルブックマークを活用すると良い)

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

1 手書きのワイヤーフレームを書く

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

どんなものか  ⇨例1   ⇨例2

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

 

[point]配置とサイズをしっかり決める
- 画面サイズについて
現状、横幅950px〜1024pxを使う事が多い。[資料1]いろんな画面サイズ
[資料2]Retima ディスプレイについて
スマートフォンやタブレット端末が普及するにつれて、Webデザイナーは様々な画面サイズや縦横比を考慮したユーザーインターフェースを設計する必要に迫られている。 画面サイズ・縦横比に対応して柔軟に表示を調整する「レスポンシブWebデザイン」も考えて行く必要がある。

- グリッドデザインをしよう [資料]
見えない補助線を使って整列させて行く

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




2 IllustratorやPhotoshop、もしくはFireworksで内容をデザインして行く

ウェブ画像作成専門アプリケーション、Adobe Fireworksについて
[リンク]Web素材、モバイルアプリデザイン、プロトタイピング | Adobe Fireworks CS6

Fireworksの使い方、チュートリアル、デザインアイディアを紹介するサイト
Fireworksマニア http://fw.v-colors.com/

IllustratorでWebデザインをするためのポイント まとめ
・ポイント [資料]
・気をつけておきたい設定あれこれ [資料]

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



4 HTMLを使ってレイアウトコーディングしていく

いままで学んできたHTML+CSS そして、これから学ぶCSS応用を使ってレイアウトしていきます。

HTMLを使って、計画していた地図とおりに、集めた要素を配置していく。
この段階でデザインを大幅に変更しないことが重要です。

ブラウザでオフラインのチェック
作成したHTMLファイルをWEBブラウザのアイコンにドラッグ&ドロップする/
もし見られなかったら、もう一度テキストを見直して、打ち間違えた所がないか確認する。
特に、イメージのリンクはずれや、リンク先の指定に注意する。


5 アップロードする

CyberDuckを使い、必要なデータをアップロードして公開します。

ウェブには更新性という特徴があります。
つくったらそのまま手をつけない、のではなく、新しい情報があれば追加したり、古い情報を消したり、まちがった情報を訂正したりすることが大事です。
継続して閲覧してほしいサイトを考える場合、たまに大幅なデザイン変更なども必要でしょう。

企画書作成/ヒアリング

どんなウェブマガジンを作るのか フォーマットを参考に書いてみよう


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

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

 

[ TODO ] [ 宿題 ] タイトルロゴを作ってこよう

ウェブマガジンの題名を決め、タイトルロゴ案を作ってきてください。

来週の内容

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