青空本舗 aozorahonpo
Since, 2005/10
トップページ ＞ システム関係 ＞ ホームページ基本の基本
＜ホームページ基本の基本＞
このページではいざホームページを作成しようと思ってから作成が終わるまで、なるべく他のサイトでは書いていないことに焦点を絞って書いてみようと思います。

ホームページの概要
・ファイルとフォルダの概念は同じ
・ホームページを構成するファイルはHTMLファイル(.html)で作成する。
・HTMLファイルの中身はテキストなので、テキストエディタでもつくれる。
・HTMLファイルは、中身がHTMLという言語で様々な命令文が書かれている。命令文のことをタグという。
・HTMLでは以下のことが可能
　- 文章を記述する
　- 改行する(空白行を入れる)
　- フォントサイズやフォントカラーを変更する
　- 背景色を変える
　- 表をつくる
　- ページを分割する
　- 画像を表示する
　- リンクを貼る
　- 文章や画像にインデントを入れたりスペースを入れたりする
　- 入力フォームをつくる
　→などなど…
・CSS(スタイルシート)を使用するともっと細かいことが可能になる
　- リンクを貼った場所にマウスが当たると色を変える
　- 表の枠線を2重にする
　- 広範囲をまとめてフォントサイズ、色、フォント種類、文字間隔などを指定することができる
　- 画像に透明度を指定する
　→などなど…
・Javascriptというプログラミング言語を使用すると色々できる
　- 画像の上にマウスが乗ったら色を変える
　- 画像を動かす
　- 時計を表示する
　- 画面を真っ白から真っ暗にする
　- 文字を点滅させる
　→などなど…Javascriptを使うとできることが無限に広がります。
・CGIを使うともっと色々とできる
　- 入力フォームで入力された値をメールで送信する
　- 掲示板をつくる
　- アクセスカウンターをつくる
　- 統計結果をページに表示する
　→などなど…CGIとはPerlやPHPという開発言語を使ってつくられたプログラムの総称です。JavascriptとCGIの違いは、Javascriptがユーザの端末内で動作するのに対して、CGIは見に行っているサーバ内で動作します。
・Flashを使うと凝ったアニメーションなどがつくれる

ホームページの構成
ホームページ内はパソコンと同じようにフォルダも置けますしファイルも置けます。ただし、ページを構成するファイルの拡張子(種類)は.html, .css, .js, .jpg(.jpeg), .pngなどになります(txtでもzipでも何でも置くことはできます)。 私たちのパソコンでは、フォルダとテキストファイル(.txt)があれば文章を見たり書いたりすることができます。ホームページではフォルダは同じように使用することができるのですが、ファイルはテキストの代わりにHTML(.html)というものを使います。ただしHTMLファイルはテキストファイルと違って文章をそのまま記述してもホームページに表示されないので、タグという命令文を使用する必要があります。

HTMLとCSSで基本的な枠組みをつくり、JavascriptとCGIを使って情報収集ややり取りができる。近年流行しているFlashを使えば動的に表現ができる。HTMLというベースに様々なデコレーションがあってホームページは構成されています。純粋にHTMLだけだとシンプルなホームページしかつくれません。

HTMLとブラウザの働き
HTMLは単なる命令文を記述したファイルなのですが、どうして私たちは見れるのでしょうか？
私たちが普段使っているInternet ExplorerやFirefoxなどのブラウザが命令文を解釈してページとして表示してくれているわけです。HTMLの命令文の書き方によっては解釈の違いもあるわけで、同じHTMLファイルを読ませた場合でもブラウザによって表示のされ方が違うということはあります。ユーザがどのブラウザを使うかは自由なので、ブラウザによって解釈の違いが出ないような記述することが大事になります。なので、一般的には作成したページを確認する際に、複数のブラウザを使用して見比べる作業が必要になります。

ブラウザを使用してhttp://www.aozorahonpo.com/index.htmlを見に行くとします。するとブラウザはドメインの.comドメインサーバにaozorahonpoというサーバがいるか問合せます。aozorahonpoは.comドメインサーバに登録されているので、aozorahonpoのIPを返してくれます(例：202.198.168.25)。ブラウザはそのIPのwwwというホスト(マシン)のindex.htmlファイルに対してhttp通信方式にてアクセスします。index.htmlのファイルの中身はHTML命令文で記述されているので、ブラウザが命令文を解釈した結果がブラウザ上に表示されることになるのです。上記のような処理を毎回ブラウザは一瞬にして行っています。

タグの基本
index.htmlファイルの中身はどうなっているのでしょうか？
htmlファイルは以下のような構成で書かないといけないルールがあります。

＜html＞タグから始まり＜/html＞で終わる。
次に＜head＞から＜/head＞というタグを書き、そこにはそのページの基本的な情報を書く。
予め読み込ませたい別ファイルの場所、ページのタイトル、検索エンジンに引っ掛けさせたいキーワード、Javascriptのコード、文字コードなど。 次に＜body＞から＜/body＞というタグを書き、ここが実際ブラウザ上に表示される部分になります。

※タグの＜＞(カッコ)は実際に記述する時は半角に置き換えてください。
サンプルソース(文字化けしている場合は一旦デスクトップに保存してみてください)

HTMLタグは一般的に＜＞が始まり、＜/＞が終わりと言った感じで範囲を指定します。(※そうでは無いものも存在します)
＜head＞内にはJavascriptやCSSのコードを直接記述することもできますが、別のページでも同じコードを使う場合にはコードを別ファイルにまとめておき、＜head＞内にその別ファイルの場所だけ記述するという方法も取れます。どちらでも動作に変わりはありませんが、別ファイルにまとめておくほうがメンテ性が良いという利点があります。

作成する際の流れ
上記では一般的な知識について書いてきましたが、実際どのような流れでつくっていけば良いのでしょうか？ここで書いていることは必ずしも良いとは言えませんしもっと良い方法があるとは思います。参考程度にしてみてください。

１．コンテンツを決める(何を載せるサイトなのか)
２．ターゲット層を決める
３．ターゲット層に合わせた基本デザイン、基本のカラーを決める(かっこいいサイトにするのか、かわいいサイトにするのか、青を中心に使うのか、ピンクを中心に使うのかなど)
４．基本配置を決める。(縦長にするのか、左右真ん中寄せにするのかなど)
５．必要なページを決める。各ファイル名フォルダ名を決める。トップページは必ずindex.htmlとし、細かくフォルダ分けする場合は、各フォルダにindex.htmlを配置する(※注1)
６．実際に各ページの絵を描いてみる。
７．フォントの種類、フォントサイズを決める
８．画像やバナーなどの基本部品を調達、作成する
９．コーディングルールを決める(※注2)
１０．HTML、CSS、Javascriptのコードを記述する
１１．最終チェック
１２．サーバへアップロード

６までは手戻りはありだと思いますが、７移行に進んでしまってからはなるべく変更はしない方が良いです。というのも修正範囲が大きくなりすぎて修正漏れが発生する可能性があるからです。そういう意味では６までが一番時間をかけるべきところと言えるかもしれません。

(※注1)index.htmlが無いフォルダをブラウザで表示した場合、そのフォルダにあるファイルの一覧を取得したり入れ替えたりが可能になってしまいます。セキュリティの観点上必ず各フォルダにはindex.htmlを配置するようにしましょう。index.htmlがあることが大事なので、中身は何も書いていない空ファイルでもOKです。
(※注2)リンクを張る場合は絶対パス(http://から全部書く)にするのか相対パス(./index.htmlや./img/aaaa.jpgなどファイル名だけ指定する)にするのか。コメント(ブラウザでは表示されない管理者向けの注釈文)の書き方。インデントは入れるか入れないか。入れるならどのように入れるか。このような細かいルールを決めておいた方が複数人でコーディングする際はバラつきが出ませんし、後々ソースが見やすくメンテがしやすいというメリットもあります。絶対パスか相対パスかというルールは、青空本舗ですと、外部サイトもしくは内部のhttpsページに対するリンクは絶対パス、内部サイトは全て相対パスで統一しています。おそらくこの方法が良いと思います。(全て絶対パスでも良いのですが、絶対パスは一回外に出るので時間がかかります)

よく使うタグ
＜table＞〜＜/table＞＜tr＞〜＜/tr＞＜td＞〜＜/td＞　表をつくるタグです。trが縦の列、tdが横の列を増やします。table〜/tableの間にいくつもtrとtdを記述します。
＜font color="xxx"＞〜＜/font＞　xxxの部分にカラーコードやred、blueなどと入れると文字の色を変化させます。
＜b＞〜＜/b＞　文字を太字にします。
＜br＞　改行します。
＜img＞　画像を配置します。画像の大きさはピクセル単位で縦横指定ができます。
＜div＞〜＜div＞　括られた範囲を1つの段落として扱います。括られた範囲は左右に寄せたり真ん中にしたりできます。

※よく困ること
文章や画像でインデントを入れるにはどうするのかという部分は必ず最初につまづくところだと思います。管理人が良く使う方法は下記の4つがあります。

１．tdタグを使う
tableタグtdタグを利用してインデントを入れる方法です。表は％(パーセンテージ)やピクセル単位で細かく指定することもできるので、この方法でインデントやレイアウトを細かく指定できます。

２．spacer.gifを使う
spacer.gifという1ピクセルの小さな透明の画像をimgタグで配置し、インデントをあけたい分だけ画像を横に大きくする方法です。以外と色んなサイトで使われている手法で、ブラウザによって差が出にくいという利点があります。sampleを見てみたい場合は青空本舗のトップページのソースを開き「spacer」という文字列で検索してみてください。

３．ulタグやliタグを使う
もともとインデントをするためのタグなので、きれいにインデントをつけることができます。ただし、インデント幅は細かく指定できないというのがデメリットです。

４．半角スペースや全角スペースを使う
TABや半角スペースはそのままでは解釈されないので、＆nbsp;と入力すると半角スペースとして解釈されます。全角スペースは全角スペースとして解釈されます。

当サイトはリンクフリーです。ご意見・ご質問等はお気軽にコチラへお寄せください。
copyright(c) aozorahonpo allrights reserved.