- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!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」や「h2」、クラス名の「sidebar」などは、HTML上ではタグと呼ばれていますが、CSSでは'''セレクタ'''と呼んでいて、スタイルを指定する対象をあらわします。HTMLタグであるh1やh2、クラス名であるsidebarのどれにも同じようにCSSは機能します。タグは'''基本セレクタ'''、クラス名は'''CLASSセレクタ'''と呼びます。他に'''IDセレクタ'''や'''擬似クラス'''と呼ばれるものがあります。タグ辞典などを見てもらえばもっと詳しく書いてあります。
h1 { color : #000000; }
のように記述しても、
h1 {
color : #000000;
}
のように記述しても同じです。ブラウザは単語の間など以外のスペースや改行は無視するからです。下のように記述されることが多いですが、指定する属性が一つとかなら、上のでも問題ないと思います。下のように書くのは単純にソースを見やすくするための配慮です。
CSSの記述の定義を書くと次のようになります。
セレクタ { 属性 : 値 }
セレクタとは、HTMLタグやクラス名のことです。属性とは、文字色や枠線の太さなどスタイルの要素のこと、値はその数値や状態のことです。値の例としては色を指定する#000000やleftなどのように位置など表したり属性によって使い分けます。属性と値の間を「:」（コロン）で区切ります。
１つのセレクタに対して、複数の属性を指定することができます。
セレクタ {
属性1 : 値1;
属性2 : 値2;
属性3 : 値3;
}
のような具合に、属性と属性の間を「;」（セミコロン）で区切ります。
複数のセレクタに対して同じスタイルシートを適用させることができます。
セレクタ,セレクタ {
属性1 : 値1;
属性2 : 値2;
属性3 : 値3;
}
のように、「,」（コンマ）で区切ることによって、複数のセレクタを扱えます。
h1,h2,div.sidebar {
color : #000000;
}
CLASSセレクタの指定の仕方は、CLASSセレクタの先頭に「.」（ピリオド）をつけて書きます。
.クラス名 {
属性1 : 値1;
属性2 : 値2;
}
基本セレクタ.クラス名 {
属性1 : 値1;
属性2 : 値2;
}
下のようにすれば、その組み合わせのみにスタイルシートが適用されます。上なら、そのクラス全てに適用されます。
!!外部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です。
もう一つ、ページ内に記述されている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などは、「ソースを盗む」が学ぶための基本スタイルです。（…だと思う）
!!!登場人物を特殊な状況に放り込め
話題を変えて、ストーリーの作り方の話です。前回、授業内で触れられませんでしたが、キャラクターが物語をつくるという例を出しました。今回は、世界観・状況の設定についてです。
!!もし〜だったら？で考える
長編でも同じことがいえますが、特に'''短編アニメーションの場合、登場人物を特殊な状況に放り込むという手法はものすごく有効'''です。実際にはありえないルールを設定してみたり、現実にはいない生物をだしたり、非現実的な状況に登場人物を置くことで面白いお話を作りやすくなります。マンガやアニメには特に多いので、少し思い返せばいくらでも例が見つかるでしょう。
考え方として有効な一つの例は「'''もし、○○だったら…？'''」というIfの世界の提案です。
*もし、宇宙に自由に行くことができたら？
*もし、人類全員が子供だけだったら？
*もし、学校だけが白亜紀の世界へタイムスリップしたら？
*もし、世界全体の女の子からモテモテだったら？
*もし、お金が無限に沸いてくる財布を拾ったら？
*もし、ゴムのように伸びる体を持っていたら？
*もし、本の世界に入れたら？
*もし、人類全員がウルトラマンだったら？
*もし、体がポリゴンでできていたら？
*もし、自分がもう一人いたら？
*もし、他人と同じ夢を共有していたら？
などなど、いくらでも考えられますが、面白い話が作れそうな気がしませんか？ 何かテーマがあって、そのテーマを表現するのに最適な「もし〜？」を考えてもいいし、面白い「もし〜？」を先に考えてそこから、テーマになりそうなものを見つけ出していってもいいでしょう。もしかすると、「もし〜？」自体がテーマになっているかもしれませんね。
<脱線>
少し脱線しますが、この「？」というのが結構重要なんです。これは自分自身へ、視聴者へ問いかけること。問われれば答えねばという思考が働くでしょう？どうですか？何か心の中で「そうだなぁ」とか「そんなことねぇよ！」と何か答えを言っているはずです。自分自身へ問いかけること、これは創作の根本にまつわる事項です。
</脱線>
物語の作り方で、短編向きだなと個人的に考えているのは、状況を極端にエスカレートさせることです。中途半端に変なものより、ものすごく変な方が興味を惹かれます。常軌を逸している世界と凡人が同居することで面白い状況が生まれます。もしくは、平凡な世界に超人が入り込むことです。
マンガの場合、かなり常軌を逸しているものが登場しますが、登場人物すべてが超人ではその凄さがいまいち伝わりません。感情移入もしにくいですし、比較対象がいなければどれだけ凄いか表現できないのです。以前にもお話したと思いますが、人間は相対的に物事をみる生物です。そこで、凡人の登場です。脇役でも構いません。視聴者と同レベルかそれ以下の人がいなければならないのです。例外的に、全員が逝っちゃってる場合もありますが、そのときは基本的に視聴者置いてけぼり上等というわけです。見てるほうはポカーンという感じになりますが、その置いてけぼり感がイイということもあるかもしれません。
何かと何かを入れ替えるというのもいい考え方です。よくある例としては、「もし、男が女の体になったら？」とか、「もし、親と子供が入れ替わったら？」とか、「もし、正義と悪がひっくり返ったら？」など、立場や状況がひっくり返ることで、面白い状況が生まれます。
好きなマンガや小説などをこの「もし、〜〜だったら」に当てはめて考えてみてください。そうすると、物語の大きな枠組みが見えてくるでしょう。長期連載ものの場合、スタート時は必ずしもラストが設定されているわけではありません。面白い状況設定、面白い登場人物を作り、それらがその世界の中で暴れると面白くなりそうだ、という期待感が書き手を刺激するわけですし、視聴者もワクワクするわけです。
!!仮定から具体的にしていく
「もし、男が女に変わったら？」からどのような話が生まれるかは、無限の可能性があり、特定できません。恋愛についても語れるだろうし、男社会と女社会を評論するような内容でも作れるでしょう。そこで、「もし、男が女に変わったら？」と「恋愛」というテーマをくっつけてみます。そうすると、書きたい内容はかなり明確になってきます。どうして、女になってしまったのか、身体的に女になったのか精神的に女になったのか、主人公は何歳くらいか、職業は何か、どんな時代か、男に惚れるのか女に惚れるのかなどなど、いろいろ具体的になってきます。それらが設定です。
世界観、設定、テーマが決まれば、あとは書くだけです。そのために資料が必要なこともあるでしょう。以前お話したように、世界や人物のバランスが崩れたり、何かが欠けることによって、それを回復しようという動きが起こります。その動きに従って書き進めていけば物語は書かれていくと思います。山あり谷ありで視聴者をひっぱり、行き着くところへ導いてください。
!!特異な状況を発生させる
上の部分と重複する話でもあるのですが、登場人物の目の前に平凡な世界から離脱させてしまうような特異な状況を発生させるのは、短編向きで良い方法です。
*目の前に死人が転がっている
*目の前に爆弾が転がっている
*目の前にワープトンネルが発生する
*目の前に底なしの穴が開いている
*目の前に幽霊が現れる
*目の前に宇宙人が現れる
*目の前に拳銃が転がっている
*目の前に核爆弾のスイッチがある
*目の前に金塊が積まれている
*目の前に裸の女（男）が立っている
などなど、僕たちの日常世界ではお目にかかれない特殊な状況を用意してあげるわけです。そこで登場人物がどういう反応をするのか。登場人物が２〜３人くらいなら、コントなどが作れそうです。提示するものは人間の欲望を刺激するものが良いでしょう。金、権力、食、性などは、誰でもが持つ欲望でお話にしやすい材料になるでしょう。人の願望や絶対に起こってほしくないことが目の前に提示されるとなんらかのアクションが生まれるはずです。不条理系にしたいときは、状況設定や登場人物の設定をさらにありえない方にもっていく必要があるかもしれません。
!!いい絵をつくれ
上の手法で考えるときに、面白い絵だなぁ、美しい絵だなぁ、カッコイイ絵だなぁと思える絵が浮かべられるものを考えてください。いい絵が作れそうにないテーマは映像には向いていないかもしれません。もしくは、現在の自分には手におえないテーマなのかもしれません。イメージできないというのは、自分の想像力が追いついていないという可能性があります。はじめはイメージできなくても、資料を集めて、イメージを形作っていくというのも有効です。実際にどんどんスケッチを描いて模索していきましょう。いい絵が一つもない映像作品なんて面白くもなんともないでしょう？黒澤明監督は、映画はすべてのカットがいい絵になっていなくてはならないと言っていたそうですよ。
!!葛藤させろ
登場人物、特に主人公には葛藤させましょう。ドラマとは葛藤を描くことだといってもいいのかもしれません。悩み、苦しみ、もがいてそれを克服していく。葛藤し…克服したーと思ったら、次の葛藤があらわれる。その波が視聴者を引き込んでいくんです。葛藤にはレベルがあり、作品全体を貫く葛藤と、比較的簡単に克服できる葛藤があります。
葛藤を与えるために、主人公を悩ませ苦しめる状況やライバルや脇役たちがいます。悩ませる相手は悪者やライバルだけではありません。いい人も恋人も両親も、あの手この手で主人公を苦しめます。恋人に自分には買えそうに無い高級品をおねだりされたり、両親に立派な医者になってくれと期待されるのも葛藤の原因になります。
!!表現媒体に特化させる
どのような手法で作品をつくるのかを考慮することも重要です。手書きのアニメーションなのか3DCGのアニメーションなのか、実写映像なのか、ゲームなのか、小説なのか、マンガなのか…などなど、表現する手法やメディアにあった、もしくはその手法やメディアならではのアイデアを入れていきたところです。手描きイラストでしか表現の難しいこと、3DCGだからこそ実現可能なこと、それらを上手く加味していくことで面白さは何倍にもなるでしょう。表現に見合った技術を組み合わせるのも有効な手段です。イラスト、CG、人形、写真、ビデオなどなど、大学のカリキュラムで教えられたものもそうじゃないものもあるでしょうが、面白いと思う技術をうまく使っていきましょう。これ実写でやればいいんじゃないの、って言われるアニメーション作品は企画段階で何か足りないのです。
!!テーマを主人公に言わせるな
実際に書いていくときに、シナリオや台詞の中にテーマを書いてしまわないようにしましょう。テーマは、映像でみせるというか読み取ってもらうのであって、直接言ってしまったら興醒めもいいとこです。というか、もし言葉で言い表してしまったら、映像はいらんじゃないか、ということになります。気をつけてください。
「もし、男が女の体になったら？」という状況設定、「恋愛」というテーマで書いていて、その話で語りたい内容が、「男と女は永遠にわかりえないし、愛情も一方的な気持ちの押し付けなのかもしれないが、それでも異性を愛することを止められない」というメッセージ性を持つものだとして、そのことを主人公がしゃべってしまったり、ナレーションで言ってしまってはどうしようもないものになってしまいます。作品内の主人公の行動や、カットの並び、お話の進行によって汲み取れなければなりません。
