シンプルなWebサイトをHTMLとCSSで作る
Simple Office and Simple IT

シンプルなWebサイトをHTMLとCSSで作る

個人でも企業でもインターネットで情報を公開しています。個人であればWordpressやブログサービスを活用したブログ形態のサイト、企業であればCMSなどのツールを活用することや、PerlやRuby、PHP、Javascriotなどのスクリプト言語を用いて企業イメージにあったWebサイトを構築しています。

動的なサイトを作るには、なんらかのスクリプト言語(スクリプト言語ではなくても良いが)が必要になりますが、基本としてHTMLを出力してブラウザに表示するという点では、HTML自体の知識が少なからず必要です。

Webサイトを構築していく過程で、Javascriptなどを用いて、動的で複雑なWebページを作成したくなるものです。確かに、動的に変化することで、目的のページへのアクセスを容易にするなど、見た目にも洗練されている雰囲気を与えるのは重要なことです。
ただ、実際には、そこまでの必要はないことが多く、無駄に重くなっていたり、アクセス先が不明になり、余計にアクセスがし難いというサイトを見掛けることがあると思います。

ここでは、HTMLとCSSを使用して作るシンプルなWebサイトについて考えていきます。

残念ながら、私はデザインセンスがありませんので、このサイトは洗練されたWebサイト・・・
ということにはなっていませんが、簡単に色々できると判っていただければ幸いです。

Webサイトとは?

インターネット上に公開された情報には色々なものが存在しています。その中でWebサイトというのはどこを指すものなのか、少し判り難いです。Webサイトをホームページは違うものなのでしょうか?

ウェブサイト (英:Website) は、World Wide Web (WWW) 上にあり、一般に特定のドメイン名の下にある複数のウェブページの集まりのこと。サイトと呼ばれることもある。企業などの団体が自身を紹介するため自ら構築したサイトを、その団体の公式サイトなどと呼ぶ。
ホームページと呼ばれることもあるが、この用法は誤用とされる場合もある。また、ウェブサイトのトップページのみをさしてホームページと呼ぶ場合もある。

ホームページという言葉は本来、ウェブブラウザを起動した際に表示されるウェブページの事を指す。 それ以外の用法は誤用とされる場合が多いが、既存のメディアを含め言葉の誤用が広まり現在では上記のように別の意味としても広く使われるようになった。

日本などの一部の国では「ホームページ=ウェブサイト、ウェブページ」という認識が広く浸透しており、技術的な意味以外では誤用とは言い切れない

参照:Winkipedia

Webサイトは、ドメイン以下に存在するWebページの集合ということですね。(間違ってたら教えてください)

サンプルのWebサイトは、ドメインのトップである"spdsk.udado.jp"以下に"blog""spdsk.udado.jp/anm1/""spdsk.udado.jp/web-site/"の構造を持っています。これは同じドメイン名を使っているWebページが階層構造内に存在していると考えてください。 ウェブサイトのイメージ図

この図にあるトップドメインから繋がる階層構造を持ったサイトがWebサイトということになります。
Webページ = HTML文書(もしくは出力されたHTML文書)ということも言えます。

HTMLとは?

HTMLは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)略で、HTMLの書式に則って記述するテキスト文書です。HTMLは、基本的にWebブラウザを介して表示することができ、ウェブブラウザは、HTMLのデータを読み込み(受け取り)、HTMLの中に記述された構造や設定を理解して表示します。
基本的にと言う点は、HTMLはWebブラウザ以外でも利用されているためになります。

HTML5での記述例
<!DOCTYPE HTML>
<html lang="ja">
	<head>
		<meta content="text/html; charset="UTF-8" http-equiv="content-type" />
		<title>サイトタイトル</title>
		<link rel="stylesheet" type="text/css" href="css/CSSファイル名"  />
		</head>
		<body>
			ここにコンテンツを記述します。
		</body>
	</html>
			

HTMLで記述さされたドキュメントは、他ののドキュメントへハイパーリンクを設定でき、画像、リスト、表などを表現することができます。HTMLで記述された文書はコンテンツと呼ばれ、HTMLで記述されたコンテンツは、主にインターネットをインフラとして参照することができます。HTML文書の送受信には一般的にHTTPプロトコルが用いられます。

CSSとは?

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)は、Webページのスタイル(体裁と言えばいいのかと思います)を指定するために使用されます。HTMLと同様にCSSの書式に則った書式で記述します。ワープロソフトなどで作成される文書の体裁を指定する技術全般をスタイルシートと呼ばれ。HTMLと組み合わせて、Webブラウザで表示するWebページにスタイルを適用する場合にCSSが利用されます。(CSS以外にもスタイルを指定する方法はあります)

HTMLがWebページの各要素の意味や情報構造を定義(記述)するのに対して、CSSでは、HTMLのタグを、どのように装飾するかを指定することができます。 例えば、表示される文字色やサイズ、配置などのレイアウトに関するスタイルを指定することができます。
また、プリンタで印刷時の出力スタイル、 音声で読み上げられるの再生スタイルなども指定することができます。

CSSを使う意味とは?

HTMLでも、装飾目的の要素や属性が存在しています。tableタグでレイアウトをまとめるなどの方法などを使用すればHTMLだけでWebページの体裁を制御することもできます。ただし、今後(HTML4.0からHTML5で無くなったものもある)はHTMLでは無くなるものの多くに含まれていますし、例えばTableタグで体裁を整えるというのは非推奨になっています。
Webページの体裁の制御にはHTMLとCSSを使い、HTMLは情報構造を定義するために使い、体裁の制御のためにCSSを使うというのが正当な?方法になります。

CSSを使用することで、次のようなメリットがあります。

  • 体裁に関する情報を別データにすることで、HTML自体の構造が判り易くなります
  • 同じ体裁を適用する場合に抜けや誤りを少なくすることができます
  • HTML自体を変更せずに体裁を変更することができます
  • 複数のHTML内に点在する同じ体裁を変更する際にCSSだけ変更すればよくなります

注意点として、Webページの体裁は読み込むWebブラウザによって異なる場合があります。複数のWebブラウザで確認することをお勧めします。

このページをcssを読み込まずに表示するとどのように表示するかは以下のリンククリックしてみてください

CSSを読み込まない場合の表示