HP作成ツールやHP作成ソフトを徹底調査!

HOME » ホームページ作成に必要な知識とは » ページ構成の知識

ページ構成の知識

ホームページを作成する際の基本的な要素といえば、HTMLとCSS(スタイルシート)です。
これをなくしてはWEB上で文章などを記述したりすることができません。
それでは早速、HTMLとCSSについて詳しく解説していきます。

HTMLとCSS

HTMLとはHyper Text Markup Languageの略称。
簡単にいうと、ハイパーテキストを機能させるために文書に目印を付ける方法を定めた文法上の約束事、といわれています。

文書を記述の際、テキストエディタという記述メディアが必要です。
普段私たちが見ているブラウザ上のWEBサイトは、このテキストエディタで書かれた文章です。
例えば形式を見ると以下のようになっています。

<html>
<head>
<title>タイトル<title>
</head>
<body>
<h1>ゴールデンウィークの営業について</h1>
<p>平素は格別のお引き立てを戴き厚く御礼申し上げます。ゴールデンウィーク中の営業についてご案内させていただきます。</p>
<p>本年度は平常どおり、休まず営業させていただきます。</p>
</body>
</html>

<html>や<body>、<p>はタグと呼びます。このタグを使って入れ子状態の本文を記述。
なお、タグで挟み込んだ個々の文章をテキストといいます。
タグには数多くの種類があり、このタグを使いこなして記述のルールを覚えることがWEBページ作成のキモといえるでしょう。

また、忘れてはならないのは文頭にあるDOCTYPE宣言です。
これはHTML文書がそのDTD(文書型定義)に従って書かれているかをパソコン画面上に伝えるためのもので、必ず書く必要があります。

【HTMLのDOCTYPE宣言】
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http//www.w3”>

【HTML5のDOCTYPE宣言】
<!DOCTYPE html>

CSSとはCascading Style Sheetの略で、WEBページのスタイルを指定する記述方式のこと。
HTMLと一緒に用います。指定方法は次の3つ。

  • HTMLタグ内に<style>属性を用いて記述する方法
  • ファイルの<head>要素内に<style>要素を使う方法
  • それに別ファイルに記述しておき<link>要素を使う方法

使用例は以下の通り。

<head>
<meta http-equiv=“Content-Type”content=“text/html; charset=UTF-8”>
<title>ルパン3世の正体は</title>
<style type=“text/css”>
<!--
h1 {color:red;}
――>
</style>
</head>
<body>
<h1>誰でしょう</h1>
</body>

これは<head>内要素に<style>要素をいれた指定パターンです。
つまり、「誰でしょう」が赤で示されるということ。
このh1 {color:red;}セレクタ {プロパティ:値;}で、「h1の色を赤にする」という意味です。

JavaScript

JavaScriptとは、デザインを動的に変化させる付加機能のことです。
サンマイクロシステムズ社とネットスケープコミュニケーションズ社が開発した記述方式。
これはHTMLへ容易に組み込みができるようになっています。

現在は各社に微妙な違いがあり、ヨーロッパの標準化団体ECMAがECMAScriptと呼ばれる標準を発行し、このECMAScriptのことをJavaScriptと呼んでいます。

CGI

ホームページというのはHTMLで記述されているのが一般的。しかし制作者が更新するまで毎日毎回、同じものを表示します。
ところが、CGIを使うと制作者はもちろんのこと、訪問者が更新したり、訪問者の要求に応じて毎回違ったページを表示したりすることもできるのです。

CGIとは、Common Gateway Interfaceの略で、双方向性に富んだページ作成ツールのことをいいます。
CGIでできることは多様で、いくつか挙げると以下の通り。

  • アクセスカウンター
  • 来客者名簿
  • WEB検索
  • パスワードによるアクセス制限
  • WEBチャット
  • BBS掲示板
  • 注文書

CGIはPerlという専用のスクリプト言語で記述されます。
JavaScriptでも記述できますが、Perlには次の特徴があり、よく利用されています。

  • プログラムがテキストベースなので作成や修正が簡単
  • 文字列を扱う機能に優れる
  • フリーソフトのため導入しやすい

RSS

RDF Site Summaryの略称で、サイト情報の内容を書くフォーマットのこと
同様のものでATOMというフォーマットもあります。
このRSSを使えば、サイト情報を把握することが容易になります。
更新情報を公開するのによく利用されています。RSSの記述内容は次の通り。

  • タイトル
  • 見出し
  • アドレス
  • 要約
  • 更新時刻

なお、RSSには周辺ソフトがあります。
指定サイトのRSS情報をまとめてページを生成するアンテナソフトやデスクトップに指定したサイト更新情報を表示するMティッカーソフトなども開発されています。

SSI

SSIはServer Side Includeの略です。
HYML文書中に組み込まれたコマンドを書くことによってサーバー側でコマンドを実行し、結果をその場所に挿入してから訪問者に送信する技術のこと。この技術でできることは次の通り。

  • アクセスカウンターを作ること
  • すべてのページにヘッダーとフッターを作ることができる
  • ウェブページを合成
  • ページの最終更新時刻を表示

どうですか?結構複雑ですが、理屈は分かったと思います。しかし、これらを勉強しながらホームページを作成するのは至難の業。
難しいと感じたら、簡単にプロ並みのホームページが作成できるソフトやツールなどがありますので、利用することをオススメします。
このサイトでは、私がホームページを作成する上で調べたHP作成ツールの比較表も掲載しておりますので、ぜひそちらも参考にしてください。

ホームページ作成ツール・ソフト比較ランキングはコチラ