WEBサイト作成の基礎
HTMLの基礎
HTMLは「タグ」で書く
HTMLの記述方法をマスターしましょう。難しいことは何もないです。
「タグ」というものがあるということと、表示したいものや使いたいものをタグで「囲む」ということがわかれば、半分はマスターしたようなものです。
- <■■■>で始まり、</■■■>で閉じるという仕組みです。
- ２種類のタグを適用したいときは、入れ子構造になります。
- <■■■> <●●●> テキストや画像 </●●●> </■■■>
- <html> <body> テキストや画像 </body> </html>
- <p> <a href="http://www.google.com/">当サイト内容の<b>無断転載・複製</b>はご遠慮ください。</a> </p>
- ソースファイル内のスペースや改行は基本的に無視されます。
最低限必要な記述
- htmlタグ
- <html> 〜 </html>
- ページの最初と最後に記述するタグです。
- headタグ
- <head> 〜 </head>
- headタグに囲まれた部分は、ブラウザの画面上には表示されません。主にtitleタグやmetaタグ等をこの部分に記述します。
- bodyタグ
- <body> 〜 </body>
- bodyタグに囲まれた部分が、ブラウザの画面上に表示されます。ページの内容はこの部分に記述していきます。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ページのタイトル</title> </head> <body> bodyタグに囲まれた部分がブラウザの画面上に表示されます </body> </html>
上記のHTMLを実際にWEBブラウザで表示すると以下のようになります。
下のファイルをブラウザで開いてください。
test.html(881)
これだけは知ってないとまずいタグ
- <p>
- 段落（文章中の意味のまとまり）を指定することができます。
- 改行する。上でも書いた通り、ソースファイル上でのスペースと改行は無視されますので、改行したいポイントにこのタグを書いておく必要があります。
- <a>
- aタグでリンクを設定できます。このタグに囲まれた内容が、リンクボタンになります。
- <a href="http://www.google.com/">Google</a>
- <a href="index.html"><img src="sample.gif" alt="サンプル"></a>
- <img>
- imgタグで、画像を表示させることができます。
- <img src="sample.gif">
- <object>、<embed>
- FLASHファイルやMPEGファイルなどホームページに埋め込むタグとして現在一般的に使われているのはobjectタグとembedタグです。このタグで指定されたファイルはブラウザにインストールされたプラグインで再生されます。
- 主に使われているファイルは、FLASH（.swf）、MPEG（.mpg）、QuickTime（.mov）、WAVE（.wav）、AU（.au）、MIDI（.mid）、AIFF（.aif）、RealAudio（.ra）など
- <embed src="example.swf" width="200" height="100">
表の作成
<table> <tr> <td> <th>
表を作成するタグです。tableタグ、trタグ、td、thタグを組み合わせて使用します。
- tableタグ <table> 〜 </table>
- 表全体を指定するタグです。
- trタグ <tr> 〜 </tr>
- 行を指定するタグです。tableタグに囲まれた部分で使用します。
- tdタグ <td> 〜 </td>
- セルを指定するタグです。trタグに囲まれた部分で使用します。
- thタグ <th> 〜 </th>
- 見出しを指定するタグです。trタグに囲まれた部分で使用します。
3列のセルを2行作ってみます
<table>
<tr>
<th>名前</th>
<th>学年</th>
<th>クラス</th>
</tr>
<tr>
<td>金八</td>
<td>３年</td>
<td>Ｂ組</td>
</tr>
</table>
| 名前 | 学年 | クラス |
|---|---|---|
| 金八 | ３年 | Ｂ組 |
リストの作成
<ul> <li>
ulタグでマーク付きリストを作れます。type属性を指定しない場合は、黒丸の付いたリストになります。
一般的なブラウザでは、リストの上下は1行分のスペースを空けて改行が行われ、左側はインデントされて表示されます。<li>タグは終了タグの</li>を省くことができます。
<ul> <li>サーバーA社</li> <li>サーバーB社</li> <li>サーバーC社</li> </ul>
- サーバーA社
- サーバーB社
- サーバーC社
<ol> <li>
上のulタグをolに変えると番号付きのリストになります。
<ol> <li>サーバーA社</li> <li>サーバーB社</li> <li>サーバーC社</li> </ol>
- サーバーA社
- サーバーB社
- サーバーC社
絶対パスと相対パス
画像ファイルの指定や他のページにリンク先のURL（アドレス）を指定するときに、絶対パスで指定するか、相対パスで指定するかを考える必要があります。
絶対パス
WEBの場合の「絶対パス」とはhttp://〜〜〜から始まるアドレス指定のことです。どのサイトからでも指定することができますので、すべてのリンクを絶対パスで指定しても構いません（おすすめしませんが…）。自分のホームページ以外のサイトへリンクをするときは、「絶対パス」でなければなりません。
相対パス
自分のホームページ内もしくは、自分の使っているサーバースペース内のファイルであれば、わざわざhttp://〜から書かなくても記述されているファイルからの相対的な位置関係を示すだけで、リンクすることができます。
- 同じフォルダの中にあるファイルであれば、「ファイル名」を書くだけでＯＫです。
- １階層上のフォルダであれば、「../ファイル名」でＯＫ。
- １階層下のフォルダであれば、「フォルダ名/ファイル名」でＯＫ。
自分のホームページ内のファイルは普通は相対パスで指定するんですが、なぜかというとソースファイルがすっきりするという利点の他に、管理が楽だからです。フォルダ毎移動させれば、そのフォルダ内のアドレスはそのまま機能します。サーバーを他に移したときもあまり書き換えなくても機能するでしょう。
トップページはindex.htmlで
ホームページのデータが置かれているディレクトリ（フォルダ）にユーザーがアクセスしたときに、WEBブラウザは「index.html」を最初に探して表示するようなルールになっています。
僕が取得しているドメイン名は「watersky.jp」ですが、例えば、ある人がhttp://watersky.jp/ をブラウザのアドレス欄に入力して実行したとします。すると、http://watersky.jp/が指定されているサーバー内のディレクトリを探して、その中にあるindex.htmlを自動的に表示するのです。ここで、index.htmlが存在していなかったらどうなるかというと、ディレクトリの中身が丸見えになってしまうのです。ディレクトリ内の画像ファイルやhtmlファイルが全て覗き見れる状態です。これは、セキュリティ的にもマズイですし、なにしろカッコワルイです。ですので、全てのディレクトリの中に空の（中に何も書いてない）index.htmlを置いておくことをオススメします。少なくとも、トップページはindex.htmlでなければなりません。
index.htmlがないディレクトリにアクセスするとどうなるか見てみましょう。
http://watersky.jp/a/test_site/
このように、ファイルが丸見えになってしまいます。
こちらには空のindex.htmlが置いてあります。
http://watersky.jp/a/
中身に何も書いてないindex.htmlを置いておくと、ディレクトリを直接覗くことはできなくなります。
できるだけ見栄えに関するデザインはCSS（スタイルシート）で
タグには様々なオプション機能があって、昔はHTMLタグだけでレイアウトやデザインをしていました。しかし、あまりにもタグが複雑になってしまったので、HTMLタグで見栄えをあれこれいじるのはやめようという方向になっています。そこで、様々な見栄えをいじるための仕組みとしてCSS (Cascading Style Sheets) が開発されました。HTMLタグは極力、文書内での構成要素を表すにとどめ、視覚的なデザインはCSSでやるという役割分担を意識するようにしてください。
- データの役割の指定…HTMLタグ
- データの装飾（色・形・レイアウト）…CSS
HTML作例
WEBサイト作成支援いろいろ
WEB作成に便利なサイト
WEBサイトの作り方やHTML・CSSなどの書き方を教えてくれるWEBサイトや、HTML、CSSの構文が間違っていないかチェックしてくれるサイトなどがあるので、完成したらチェックしてみるといいと思います。
- TAG<index>
- 知りたいタグをすばやく探せるサイト。CSS、JavaScriptも検索できる。
- HTMLクイックリファレンス
- HTML作成時に役立つを情報を検索できるサイト。タグ、CSS、WEBカラー、優良デザインサイトなどが調べられる。
- とほほのWWW入門
- WEB作成に関する様々なことを調べられるサイト。CGIやJAVAなども扱っている。
- CSS Validator
- URLを入力すると、正しいCSSの構文かどうかチェックできる。
- Another HTML-lint
- HTMLの文法が正しいかどうかチェックしてくれるサイト。
- W3C
- WEB技術の標準化を行う団体「World Wide Web Consortium」の公式サイト。
WEB作成に便利なソフトウェア
Vectorなどのフリーウェア・シェアウェア配布サイトにいけばHTMLエディタなどの便利なソフトがいろいろあるので、使いやすいものを選んで使うといいと思います。もちろん、メモ帳などで書いてもいいのですが、タグをいちいち書くのは大変なので、実際に作成するときは、HTMLタグを半自動的に書き込んでくれるこれらのエディタは大変便利だと思います。HTMLの基本を学んだら積極的に使ってみてください。
- Vector Windows用HTML作成ソフト ページ
- HTML Project2
- Windows95/98/Me/XP上で動作する、HTML4.01/XHTML/CSS2のスタイルシートに完全対応したスタイル設定援助機能を特徴とするタグ挿入型エディタ
- FFFTP
- 標準的なGUIを採用した、わかりやすいFTPクライアントソフト
- Vector Macintosh用HTML作成ソフト ページ
- Jedit4.0
- Mac定番テキストエディタ
サーバー
インターネット上でホームページを作るには、どこかにサーバースペースを持たなければならないですが、サーバーを持つ方法は3種類考えられます。
- 有料のサーバーを使う（広告が入らないし、サービスも充実）
- 無料のサーバーを使う（広告が入る）
- 自分でサーバーをたてる（常時PCを起動し続ける必要があり、ネットワークやセキュリティについての知識も必要）
個人的に、一番オススメは有料サーバーです。広告が入るとやはり安っぽい感じがでますし、レイアウトにかなり制限がかかります。広告などが入ってもいいよ、というのであれば、無料サーバーでもいいかもしれません。自前のサーバーについてですが、この選択をする人であれば、僕があれこれ言う必要はないでしょう。
いくつか、サーバーを紹介しておきます。この他にもアクセスプロバイダ（so-netとかOCNとか）もインターネットアクセスのサービスの一つとして、サーバースペースを提供してるはずなので、自分が利用してるプロバイダのサービスを使ってもいいと思います。CGIが使えるかどうか、などサービス内容をよく見て選んでください。
- Sakura Internet
- 僕が借りてるレンタルサーバーの会社です。有料レンタル。
- ロリポップ！
- ここも有料レンタルです。
- infoseek isweb
- 有料と無料を選べます。
- Google Page Creator
- Googleの無料ホームページ作成サービス。
- ブラウザ上で作業します。いくつかの雛形から選んで、そこにテキストや画像をはめ込んでいく手順になります。かなりお手軽にホームページの体裁を作ることができますが、単純にテキストと画像ファイルだけで構成されてるようなものしか作れません。Flashやムービーファイルを組み込むのはまだ無理そうです。凝ったものを作るというよりは、手間をかけずに急ぎでホームページを作らないといけない、というときにはサクっと作れて、独自のドメインも持てるので便利なサービスだと思います。ちょっと動作が不安定でよく落ちます…。
- 試しに作ってみました
- 自宅サーバーを構築しよう
- 自宅サーバの作り方について解説してるサイトです。
キャラクター作成について考えてみる
ストーリーの考え方として、まず先にキャラクターを考えてみるというものがあります。マンガやアニメ、ライトノベルなどはこの部類に属しているものが多いです。特に週刊連載のマンガなどはほぼ全てこの作り方で制作されています。
魅力的なキャラクターの生きざまが魅力的な物語である
僕たちは、現実世界の人生を歩んでいますが、自分の物語の行く末を知っているわけではありません。僕たちの人生が物語だとするならば、僕たちが生きてきた後に物語が残るわけです。この考え方を、創作物の物語に適用するならば、作品内のキャラクターたちが生きた軌跡が物語だといえます。つまり、あらかじめ作られた物語をキャラクターが生きるのではなく、キャラクターが自由に行動すれば、自動的に物語も生まれるわけです。魅力的なキャラクターの人生は魅力的で面白い物語になる可能性も高いだろうということですね。
キャラクターをつくる
キャラクターのネタの考え方も第３回で述べたような方法で作っていただければいいと思いますが、いくつか勘どころがあります。
- 職業をきめる
- 生い立ちをきめる
- 外見的に特徴がある
- 外見的な特徴は内面と関係がある
- 外見的な特徴は物語内の謎と関係がある
- 弱点がある（弱点は大きいほどよい）
- 弱点は長所にもなっている
- 過去の出来事が現在の状況に影響している
- なさけない（困った）やつである
他にもあるかもしれませんが、この辺のことが決まってくると、そのキャラクターのイメージがかなりハッキリすると思います。そして、他に登場人物がいる場合、上のいくつかの点と何らかの関係を持たせるとよいと思います。反対の特徴でもいいし、補助する形でもよいです。職業は、自分たちにとってあまり身近なものじゃない方がやりやすいかもしれません。身近なものは、どうしてもディテールが必要になってくるからです。かといって、全く知らない職業は書けないのでだめです。学生やサラリーマンや主婦などは、カテゴリーが広すぎますので、副業のようなものを考えるか、その仕事を詳しく設定する必要があるでしょう。
性格についてなんですが、カッコイイだけのキャラクターは扱いが難しいです。かっこ悪い方が使いやすいです。完璧な弱点の無い人もやめた方がよいです。弱点を描くことで人間らしさや親近感をもつことができます。カッコいいキャラクターの中に実はこんなかっこわるい部分があるんだ、というのを書くとか、自分がものすごくかっこわるいので、なんとかカッコよく見せようとしてるとか。カッコよくて強いだけのヒーロー（ヒロイン）は、売れません。脇役のやられ役とかにはいいかもしれませんけれども。
性格についてですが、よくこのキャラクターはやさしい性格です、とかいう人がいるんですが、それでは幅が広すぎて性格を決めたことにならないです。どんな人でも、やさしい心を持っているものなのです。もう少し、具体的に行動に表せるような特徴が必要です。たとえば、ナウシカのように蟲や他人のために自分の命を投げ出せるほどやさしいとか、子供でも顔色ひとつ変えずに殺してしまうほど残虐だ、とかです。言い換えるならば、性格っていうのは「どの行動を選ぶ確率が高いか」ともいえるかもしれません。この人はこんな行動をするんですよ、という具体的なイメージが重要です。毎日、近所のゴミを拾いあつめながら登校するようなキレイ好きだ、とか。行動が伴わないと絵になりませんよね。イメージが浮かぶ具体的な行動を考えるとキャラクターが見えてくると思います。
キャラクターが動き始める
そうしてできたキャラクターを動かすのですが、放っておいても最初は動きません。前回もバランスが崩れることが物語のきっかけだと言いましたが、そのキャラクターが活動し始める何か、壁なり罠なりライバルなり恋人なり…主人公を悩ませたり困らせたりする何かをぶつけるか、もしくはそのキャラクターから何かを奪いましょう。命でも宝物でも何でもいいです。バランスのとれた状態を崩すきっかけを与えてください。キャラクターは苦しめた方が話は作りやすいですが、苦しみの度合は作品性にモロに影響するので、作ろうとしている作品性がおかしくなるほど苦しめてしまうと視聴者は逃げてしまうかもしれません。苦楽のバランスが大事ですね。男の子が庭の盆栽を割ってしまったことをお父さんに内緒にしているのも苦しみですし、あと１か月の命ですと医者に宣告されてしまうことも苦しみです。受験も告白するか悩むのも苦しみですよね。
キャラクターの変化
人間は日常の様々な出来事を経験し、常に変化しています。どんなに変化したくなくても変化します。生きているとは変化しているといってもいいのかもしれません。何かを見たり、何かを聞いたり、何かを考えたり、または忘れたりすることで、脳内の脳神経は結合を強めたり、弱めたりします。体だって成長したりするのです。髪の毛や爪は伸び続けています。思考性や性格や能力も常に変化しています。
これは、キャラクターにも当てはまるのではないでしょうか。様々な経験をしたり、脇役たちから影響を受けて変化していく。何かを失い、または何か困ったことがおき、行動せざるをえなくなったキャラクターたちは、最終的にそれらを解決するだけではなく、何かを得ているはずです。もしくは、何かを失っているはずです。多くの作品の主人公は、物語が進むにつれて成長します。主人公に感情移入している視聴者は、自分の分身のようにみている主人公が成長していく姿をうれしく思うのです。
「物語の最初と最後で何が変化したのか」は、作品性にとってとても重要な要素のひとつだと思います。書き始める前に考えてできるようなものではないかもしれませんが、物語を書き進める上で、この点から見直してみると制作の指針になることもあるでしょう。