- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!ストーリーの考え方
!!面白いネタを探す
「これは面白いな！」もしくは「面白くなりそう」と思うネタを探します。
!!!ポートフォリオについて（その２）
ポートフォリオに使う画像や映像をそろそろ集めておいてください。素材がなければ、作品はできません。仮にでもいいので、とりあえず一度作ってみるのをオススメします。手を動かすことで、脳は働きだします。上でも書いたとおりです。ぼんやり考えてるときは、実は考えていないものなんです。実際に書いたり作ったりしてはじめて実感し思考できます。特にWEBサイトの場合は、とりあえず必要な画像データ、テキストデータを用意して基本構造を作っておき、スタイルシートでデザイン要素を作るようにしておけばいくらでもデザインし直せます。
これがうまくいかないとかなり苦労します。悩んでる学生でよくあるのが、すごく漠然とした抽象的な言葉を頭の中だけで思い描いてるような状態です。うまくいかない人に「なんかこう、こんな感じ？」っていう人がすごく多いです。具体性が無さ過ぎるんですね。
はじめにポートフォリオの話をしましたが、もう一度確認しておきます。
最終的に提出してもらうものは、
*ポートフォリオ（クリアーファイルや本にしたもの）
*WEBサイト
*名刺
頭の中でモヤモヤ考えてるだけではなかなかイメージはまとまらないものです。積極的にネタを探すようにしましょう。テレビで見たことでも日常で気になっていることでも何でもいいですが、何か気になる、もしくは、面白いと思う事柄をメモしてください。メモはどれだけしてもいいです。見つけたことや思い浮かんだことをメモしまくります。アイディアはなかなか向こうからやってきてくれません。好きになるように自分を仕向けましょう。違う言葉でいうと「好奇心」ですね。自分から捕まえにいく姿勢が重要です。
です。WEBサイトは動画やゲームなどが実際に見れたりプレイできるようになっている方がよいです。そして、3点はデザインラインが統一されている方がよいかもしれません。自分が人事担当者になったつもりで、それらを見るようにしてください。
アイディアを文字にしてビジュアル化するだけでも、脳の思考能力は飛躍的に高まります。更に、作品のことを人に話すと、わかってもらおうという脳内スイッチが入るのでものすごく脳が働きだします。友達と物語のネタを話してるうちにストーリーが一本まるごと出来上がったっていうことはよくあることだと思います。ただ、興奮状態で考えたものは一晩寝かして見直す方がいいです。あと、散歩やサイクリングしたり、図書館や喫茶店などで考えたり、お風呂で考えたりするのも有効です。
!!!CSS基礎
!!CSSの記述方法
前回の授業でやったHTMLタグを使うことで、どのような要素がそのページの中に記述されてるかを示すことができます。現在、多くの人が使っているWEBブラウザでそのHTMLファイルを開くと、その要素にしたがって、大文字にしたり、リスト化したり、表を組んでくれたりするわけです。つまりWEBブラウザがレンダリングして表示してるわけです。
本、雑誌、テレビ、ニュース、映画、歌詞、願望・忌避、友達の話、町でみかけた風景…なんでもいいですが、様々なものから情報収集しては、それをメモし、考える。そうしているうちに何か形が見えてくるはずです。
<h1>タグで囲んだ文字はそのページの大見出しという役割を持っているという意味ですので、通常はページの最初に記述してあります。そして目立つように大きな文字で太字にして表示するのが一般的です。ですが、CSSを使うことでその表示の仕方を変更させることができます。このページの右上にある「CG演習２-第5回-2007」の文字は<h1>タグで書かれてるのですが、小さく、太字で、右端に寄るようにCSSでカスタマイズしてあります。<h1>で指定した文字はすべて、このスタイルで表示されるようになっています。
先週の話に出てきたと思いますが、作品とは何かの切り口です。一見面白くなさそうなネタでも切り方によっては、面白い断面が見えてきます。いろんな角度から眺めるようにしましょう。
h1 {
text-align : right;
background-color : #FFFFFF;
font-family : Verdana,Arial,Helvetica,sans-serif;
font-size : 80%;
}
!!ネタを作る
いろいろ考えたり、探したりして出来てきた大量のネタを見直します。その中から光るネタを探し出しましょう。そのときに、他のアイディアとくっつけてみたり、入れ替えてみたり、逆転させてみたり、対の言葉やシチュエーションを考えてみたり、極端にしてみたり、視点を変えてみたり…と様々な可能性を探ってください。「おっ！？」と思うネタが出来上がったら、それはかなり面白くなる可能性があると思います。
左側に表示されているメニューは、ソースファイル上では、一番下に記述されているのですが、CSSで一番左上に表示されるようになっています。メニュー部分のCSSを見てみます。
ネタいじり用キーワード
*切り口
*共感
*意外性
*刺激
*社会性
*美しさ
*オリジナリティ
*謎
*欠落と補完
*タイミング・場所・目的
*需要と供給
*ギブ＆テイク
*比較
*異質なものをくっつける
*エスカレートさせる（極端にする）
*裏切る
*勘違い
*すり替える
*凝縮と解放
*対になるものを考える
*連続性
*統一感
*リズム
*バランス
*主観と客観
*視点を変えてみる
*擬人化
*第三者の存在
*表と裏
*密度
div.sidebar {
position : absolute;
top : 10px;
left : 10px;
width : 150px;
font-size : 75%;
padding : 0pt;
border : #87CEEB 1px solid;
color : #000000;
background-color: #EEEEEE;
}
!!物語化する
面白いネタができたら、物語化しましょう。というか、この時点ですでに物語ができてしまってる場合も多いんじゃないでしょうか。その場合もいろいろ検証するつもりで考え直す方がいいと思います。
HTMLファイル上の'''<div class="sidebar"></div>'''で囲まれた部分がメニュー部分なのですが、'''class="sidebar"'''がdivタグに追加されているところに注目してください。このclassというので名前付けしています。ここでは「sidebar」という名前をつけていますが、半角文字で書いてあればどんな名前でも構いません。「hentai」でも「seian」でもいいわけです。このWEBサイトでは他に、「body」「adminmenu」「main」などのクラスを作ってあり、それぞれ違うデザイン要素を割り当てるために使われています。
!どこで切り取るか
大前提として物語は、始まりがあって終わりがあります。ずっと連続して続いている時間のある一部分を切り取ったものが物語です。どこで切り取るのが一番いいか考えるのも重要です。いらない部分がないか、もっと必要な部分がないか考えましょう。
上のh1タグのようにクラス名をつけないで直接タグにCSSの指定した場合は、h1タグ全てにCSSが適用されます。<h1 class="name01">や<h1 class="name02">のようにクラスをつけておけば、name01のh1タグと、name02のh1タグにそれぞれ違うスタイルを割り当てられるわけです。
!物語の恒常性
ものすごく単純に言うと物語は、誰かが何かを求めて行動したことを記したものです。
divタグというのは、もともとレイアウトするときに、右寄せとか左寄せとかを指定するものなのですが、<div>だけでは何も機能しません。何も機能を持たないというのを利用して、クラス指定するためだけに利用しているわけです。<div class="sidebar"></div>で囲んだ部分は「sidebar」というCSSを適用しますという意味になります。
何かを求めるということは、何かが足りないということです。もしくは、バランスが崩れている状態を元に戻そうとすることです。その崩れたバランスを元に戻すために、主人公たちは思考し行動します。主人公が善人でも悪人でも個人でも組織でもその原理は変わりません。
メニュー部分のCSSを見てみると、「 '''div.sidebar {''' 」ではじまっています。divタグのsidebarクラスはこういう風にカスタマイズしますよ、{ }で囲まれた部分がその内容ですよ、という意味です。そのCSSの命令の内容については、タグ辞典や、前回の授業で紹介した解説をしているホームページを見てもらう方が早いと思いますが、このdiv.sidebarで指定してる内容を説明すると以下のようになります。
この基本的な仕組みがないと、視聴者は見ていて不安になるんですね。この主人公はなぜ行動してるんだろう、それを手に入れたからどうだっていうの？？と、何か落ち着かない感じになります。
!左側メニュー「div.sidebar」の説明
*'''position : absolute;'''
**位置指定の仕方はabsolute（絶対位置）指定です。左上(x,y)=(0,0)の位置から指定していきます。
*'''top : 10px;'''
**上から10ピクセル
*'''left : 10px;'''
**左から10ピクセル
*'''width : 150px;'''
**横幅150ピクセル
*'''font-size : 75%;'''
**文字の大きさはオリジナルの75パーセントの大きさ
*'''padding : 0pt;'''
**セルの余白は0ポイント
*'''border : #87CEEB 1px solid;'''
**枠の指定です。色を87CEEB（薄い青色）に、枠幅1ピクセル、ベタ塗り
*'''color : #000000;'''
**文字色は000000（黒色）
*'''background-color: #EEEEEE;'''
**背景色はEEEEEE（薄いグレー）
*うさぎ君は、台風でものすごい風と雨の中を、全身傷だらけになりながら八百屋に向かった。
*うさぎ君は、倒れた妹うさぎに新鮮なニンジンジュースを飲ませてあげるために、台風でものすごい風と雨の中を、全身傷だらけになりながら八百屋に向かった。
!見出し「h2」の説明
文字に帯のような装飾をつける方法の例としてh2タグを参照してみます。
このふたつを映像化してみたときのことを考えてみてください。ものすごい嵐の中を必死にピョンピョン跳ねるうさぎの姿がイメージできますが、あきらかに下の方が盛り上がりますよね。妹のくだりをはじめに出すか、後に出すかでも印象は変わります。
h2 {
background-color : #87CEEB;
font-family : Verdana,Arial,Helvetica,sans-serif;
font-size : 100%;
padding-top : 2pt;
padding-bottom : 2pt;
padding-left : 4pt;
margin-bottom : 5px;
border-left : #4682B4 20px solid;
border-bottom : #4682B4 2px solid;
}
学生作品で面白くない作品はこの要素がないものが多いです。「だから何？」といいたくなってしまうのです。ただ車が走ってるだけ、ただ格闘してるだけ。「ただ○○してるだけ」の作品で面白くするのはなかなか難しいです。何かの操作説明とか、機能説明みたいなものや、自分の技術レベルを見せるためなどの映像としては、アリかもしれませんけど、大体のものは見ているうちに眠くなります。
*'''background-color : #87CEEB;'''
**背景色は87CEEB（薄い空色）
*'''font-family : Verdana,Arial,Helvetica,sans-serif;'''
**フォントはVerdana,Arial,Helvetica,sans-serifのどれかを使います。
*'''font-size : 100%;'''
**フォントの大きさは100%です。
*'''padding-top : 2pt;'''
**余白上部は、2ピクセル空けます。
*'''padding-bottom : 2pt;'''
**余白下部は、2ピクセル空けます。
*'''padding-left : 4pt;'''
**余白左側は、4ピクセル空けます。
*'''margin-bottom : 5px;'''
**他要素との下側への隙間は5ピクセル空けます。
*'''border-left : #4682B4 20px solid;'''
**枠線の左側は、色4682B4（濃い青色）、幅20ピクセル、ベタ塗りです。
*'''border-bottom : #4682B4 2px solid;'''
**枠線の下側は、色4682B4（濃い青色）、幅2ピクセル、ベタ塗りです。
ちなみに、映像作品がすべて明確な物語を持っていなければ面白くないかというと、そんなことは無いと思います。映像作品は時間性を持っているため広い意味では、すべて物語性があるともいえますが、一般的な意味での物語がある必要はないです。ネタが最高に面白ければ、物語らしい物語がある必要はないでしょう。記録性の問題もありますし、風景として意味がある映像やその映像から想像が豊かに膨らむ映像は無闇に物語性を入れない方が良い場合が多いでしょうね。
!CSS記述の定義
今まで使ってきた「h1」や「h2」、クラス名の「sidebar」などは、HTML上ではタグと呼ばれていますが、CSSでは'''セレクタ'''と呼んでいて、スタイルを指定する対象をあらわします。HTMLタグであるh1やh2、クラス名であるsidebarのどれにも同じようにCSSは機能します。タグは'''基本セレクタ'''、クラス名は'''CLASSセレクタ'''と呼びます。他に'''IDセレクタ'''や'''擬似クラス'''と呼ばれるものがあります。タグ辞典などを見てもらえばもっと詳しく書いてあります。
h1 { color : #000000; }
のように記述しても、
h1 {
color : #000000;
}
のように記述しても同じです。ブラウザは単語の間など以外のスペースや改行は無視するからです。下のように記述されることが多いですが、指定する属性が一つとかなら、上のでも問題ないと思います。下のように書くのは単純にソースを見やすくするための配慮です。
!構成を考える
そして構成を考えましょう。よく言われるのが「起承転結」ですね。
起承転結の4部構成はものすごく有名で、もう誰でも知ってます。誰でも知ってるけど、実際作ると難しい。起承転結は順番をある程度いじることが可能です。ラストを最初に見せて、なぜそうなったのかを見せていく構成もよくあります。
CSSの記述の定義を書くと次のようになります。
セレクタ { 属性 : 値 }
セレクタとは、HTMLタグやクラス名のことです。属性とは、文字色や枠線の太さなどスタイルの要素のこと、値はその数値や状態のことです。値の例としては色を指定する#000000やleftなどのように位置など表したり属性によって使い分けます。属性と値の間を「:」（コロン）で区切ります。
!映像作品としての物語
CGクラスで作るものは、ほとんどの人が映像作品ですので書いておきます。
１つのセレクタに対して、複数の属性を指定することができます。
セレクタ {
属性1 : 値1;
属性2 : 値2;
属性3 : 値3;
}
のような具合に、属性と属性の間を「;」（セミコロン）で区切ります。
映像作品のための物語だということをよく考えてください。おそらく皆さんが学内にいる間に作るものは短編作品です。アニメーション作品であればなおさらですが、あまり時間の長い作品は作れないでしょう。ですから、あまり複雑な話は向いていません。物語的にはシンプルな構成で考えて、絵の力と演出で見せていくのが無難です。書いている物語が長くなっていないか、考えてみてください。
複数のセレクタに対して同じスタイルシートを適用させることができます。
セレクタ,セレクタ {
属性1 : 値1;
属性2 : 値2;
属性3 : 値3;
}
のように、「,」（コンマ）で区切ることによって、複数のセレクタを扱えます。
h1,h2,div.sidebar {
color : #000000;
}
!!!ポートフォリオについて（その２）
ポートフォリオに使う画像や映像をそろそろ集めておいてください。素材がなければ、作品はできません。仮にでもいいので、とりあえず一度作ってみるのをオススメします。手を動かすことで、脳は働きだします。上でも書いたとおりです。ぼんやり考えてるときは、実は考えていないものなんです。実際に書いたり作ったりしてはじめて実感し思考できます。特にWEBサイトの場合は、とりあえず必要な画像データ、テキストデータを用意して基本構造を作っておき、スタイルシートでデザイン要素を作るようにしておけばいくらでもデザインし直せます。
CLASSセレクタの指定の仕方は、CLASSセレクタの先頭に「.」（ピリオド）をつけて書きます。
.クラス名 {
属性1 : 値1;
属性2 : 値2;
}
基本セレクタ.クラス名 {
属性1 : 値1;
属性2 : 値2;
}
下のようにすれば、その組み合わせのみにスタイルシートが適用されます。上なら、そのクラス全てに適用されます。
はじめにポートフォリオの話をしましたが、もう一度確認しておきます。
最終的に提出してもらうものは、
*ポートフォリオ（クリアーファイルや本にしたもの）
*WEBサイト
*名刺
!!外部CSSと埋め込みCSS
このホームページでは別ファイルとして置いてあるCSSを読み込んできて使用するものと、ページ内に埋め込んで使用するCSSの2種類が使われています。ソースを見てみます。
<head>タグの中に、
'''<link rel="stylesheet" type="text/css" href="./theme/watersky/watersky.css">'''
という部分があります。これが外部CSSを読み込むための記述です。linkタグで、watersky.cssというスタイルシートのファイルを読み込んで来い、という命令になります。そのスタイルシートは[こちら|./theme/watersky/watersky.css]です。メモ帳などで記述してテキスト保存したあと、拡張子をcssに変更すればOKです。
です。WEBサイトは動画やゲームなどが実際に見れたりプレイできるようになっている方がよいです。そして、3点はデザインラインが統一されている方がよいかもしれません。自分が人事担当者になったつもりで、それらを見るようにしてください。
もう一つ、ページ内に記述されているCSSもあります。少し下の方を見てもらうと
<style type="text/css">
<!--
.error {
color : #FF0000;
font-weight : bold;
}
span.nopage {
background-color : #FFFF88;
}
/* partedit */
div.partedit {
text-align : right;
font-size : 80%;
}
/* calendar */
td.today {
background-color : #FF8888;
}
td.have {
font-weight : bold;
}
.calendar td {
text-align : right;
}
-->
</style>
と、<style type="text/css">タグで囲まれた部分がCSSになります。中身は外部のものと同じ記述方法です。別ファイルとして作っておくか、ページ内に書いておくかの違いだけです。外部ファイルとして保存しておけば、たくさんのページのスタイルを一気に変更できますし、あるページだけの例外的なスタイルを使いたいときは、ページ内に書いておいた方がいいかもしれません。どちらの方が便利かを考えて使い分けてください。
!!他人のソースから盗め
前回と今回でHTMLとCSSについて紹介しましたが、実際に書けばすぐにマスターできます。ゲームのプログラミングなどのように、演算させたりするわけではなく、短絡的に指定した色やサイズを表示させるだけなので、まねをして書けばいいだけです。
そこで勉強方法としてオススメなのは、他人のホームページから盗むという方法です。これ、いいなと思ったら、右クリックしてソースファイルを見ましょう。そして、該当部分をその中から探してください。Dreamweaverやホームページビルダーなどで記述されたホームページはものすごく複雑なソースになっていることもありますが、冷静に見ていけば、難しいことはありません。そして、自分でいろいろ数値などをいじってみてください。タグ辞典をみれば、HTMLやCSSの命令について説明が書いてありますから、それを参照しながら、カスタマイズすることで、身についていきます。プログラムやHTMLなどは、「ソースを盗む」が学ぶための基本スタイルです。（…だと思う）
