フォーマットの制作

ウェブサイトを構成するウェブページに一定パターンのフォーマットを適用することで統一感を演出できる。フォーマットの制作にはスタイルシートを利用する。あるいはHTMLによるテーブルやフレームを利用することもできる。

スタイルシートによるフォーマット制作

スタイルシートを利用すると、文字のサイズや色、段落、ウェブページの背景の色、ページ全体のレイアウトなど、様々な設定を効率的に行える。スタイルシートの記述には主にCSSが使われる。CSSを用いたレイアウトでは、原則として、HTMLではどこが見出しとなるか、どこからどこまでがメニューとなるか、トイった文書の構造を示すマークアップのみを行う。

CSSではHTMLでマークアップした構成要素に対して体裁に関する属性に値を施呈して装飾を行う。属性を施っていする対象を「セレクタ」と呼び、「セレクタ{属性:値;}」という書式で記述する。

CSSの記述はボディの中に埋め込む方法もあるが、通常はヘッダの中で直接定義するか、別に用意した定義ファイルをHTMLのヘッダの中で指定する。ウェブサイト全体に同じ定義ファイルを適用することでウェブページ全てに統一感を持たせることができる。

HTMLファイルでは<div id=“page”>といった構成要素がマーックアップされており、CSSの定義ファイルではそれらの構成要素や本文に対し、文字サイズや行間、背景画像、マージンといった装飾の設定を行っている。

  • テーブルによるフォーマット制作

テーブルを利用すると、グリッドシステムを生かしたフォーマットを適用できる。

テーブルは表組みを作るための<table>タグによって記述する。簡単なテーブルの例が<td>で表の中の個々のせるの内容を記述し、<tr>で1行分ずつのセルを囲い、その設定を記述する。<table border=“4”width=“200”align=“center”>ではborderで外枠の太さ、widthで横幅、alignで表示位置に関する属性を設定している。<tr align=“center”>も同様である。テーブルのセル内に文章や画像をレイアウトする際に枠線が不要であれば例えばborder=“0”とする。

テーブル制作においてはテーブルの位置設定テーブルの横幅と高さの設定、各セルの横幅と高さの設定、縦長のページでのテーブルの分割などが重要となる。

  • フレームによるフォーマット制作

フレームよって画面を縦横に分割すれば、それぞれのフレームに別々のHTMLファイルが表示されるため、例えばナビゲーションとコンテンツの表示領域をマイ角に分けることができる。コンテンツを表示するためのフレームにどんなHTMLファイrが表示さてもナビゲーション領域のHTMLファイルは常に固定表示させておくことができる。

フレームを制作するには、<frameset>、<frame>、<noframes>といったタグを利用する。<frameset>でフレーム使用を宣言して、<frame>でそれぞれのフレームに表示するHTMLファイルを指定する。もしユーザーのウェブブラウザがフレームに対応していない場合は、<noframes>~</noframes>の内容を表示する。