若セラ Web サイトでは CSS (cascading style sheet) というものを使っています。 これを使うと楽に「そこそこの見栄え」が得られます。 現在準備してある CSS は最も基本的なレイアウトのための "default.css" と， 段組みを使ったレイアウトのための "index.css" の２種類です。 特に "default.css" は単純で構成がはっきりしていますので， 簡単なレポートなどにはこのスタイルを使うことをおすすめできます。
スタイルシート "default.css" を使えば見出しと本文とからなる基本的なレイアウトが使えます。 もちろん表や画像を組み込むこともできます。 以下ではこのスタイルシートを使って基本的なレイアウトの Web ページを作成するための実際の手順について説明します。
Web ページを表示するためには ".html" という拡張子のついたファイルを使います。 ファイル名は任意ですが， 全角文字を使うと不都合なことが多いので英数字や半角記号のみを含むものにしてください。 HTML は Web ページの表示のしかたを論理的に記述するための言語です。
実際の作業はひな形となるファイルを書き換えたり， コピー＆ペーストをすることで行うことが普通です。
書き換えの作業には「テキストエディタ」と呼ばれるソフトウェアを使います。 ただし，少なくとも初めのうちは， オペレーティングシステムに標準で附属しているテキストエディタを使うのでも十分だと思います。 フリーソフトウェアとして無料で入手できるエディタでも HTML タグやコメント部分を 自動的に色分けして表示してくれる親切なものなどがあります。 ただ，あまり高機能なエディタだと「まずその使い方をおぼえなければならない」ので かえって不便だということにもなりかねません。
HTML ファイルのはじめの部分は初心者にとっては難解なヘッダ部からはじまりますが， 細かい意味を理解する必要はありません。 必要そうなところを書き換えてください。 ブラウザのウィンドウの上部に表示されたり，検索エンジンで表示されるタイトルは， このヘッダ部の中で < title > と < /title > で挟まれた部分に記述されています。 新しい Web ページを作る場合には，この部分だけは確実に書き直す必要があります。
基本レイアウトでは各ページの上部に大見出し（ページのタイトル）とリンクを表示します。
HTML で使える見出しには <h1> と </h1> で挟む大きい見出しから <h6> と </h6> で挟む小さい見出しまでの６段階があります。 基本レイアウトでは， 大見出し <h1> 〜 </h1> をページのタイトルを表示するためにだけ使い， ページの頭の部分，一番上の中央に一カ所だけ大きい文字サイズで表示します。 ひながたとなるファイルの中で <h1> と </h1> で挟まれた内容を書き直します。 他のページとの関係をわかりやすくするために， 上位階層の内容を <span style="font-size:70%"> と </span> で挟んで少し小さい文字で表示してから <br> タグで改行するするようにしても良いでしょう。
ページの頭の部分の下右側には，そのページへリンクしている主なページ， 内容の点から上位の階層にあたるページへのリンクをつけます。 そのページを見る人が上位階層のページのリンクをたどって来たのなら ブラウザの「戻る」ボタンを押させれば良いだけですが， 検索エンジンによって直接そのページに飛んできたユーザにとっては， 上位階層へのリンクがあることは非常に重要です。
大見出し部と本体の間にはウィンドウを横断する横罫線を入れます。 横罫線を引くには <hr> を使います。
本体の初めの行は， <h2> </h2> で挟まれる見出しから始める場合と <p> </p> で挟まれる本文の段落から始める場合とがあります。 その次の行には <h3> </h3> で挟まれる小見出しを使う場合と， やはり <p> </p> で挟まれる段落が続く場合とがあるでしょう。
見出しや本文の具体的な記述のしかたについては， 別のページ で説明します。
2006年03月11日