秋田こまっち。

無料で加工自由なテンプレート

１．テンプレート紹介

テンプレートのHTML文書（デフォルト）（別窓です。リンク先のソースを利用してください）
テンプレートのHTML文書（CSSで定義）（別窓です。リンク先のソースを利用してください）
テンプレートのCSS（クリックして開いたファイルを利用してください）

二つのHTMLのソースを見てもらえると分かると思いますが、違いはわずかに一行。それがCSSの力です。
CSSで定義したシンプルな段組レイアウトを紹介します。

私は素人（笑）ですので、もちろん無料ですし、加工してご自由に利用なさってください。
このテンプレートについてご意見やご感想、ご質問などございましたら、掲示板かメールにご一報お願いします。メールではお返事が遅くなってしまう場合もありますので、差し支えございませんでしたら掲示板の方にお願いします。

２．テンプレートのHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" >
このHTMLをHTML 4.01移行型で書くことを宣言しています。移行型なので、W3Cの非推奨要素、非推奨属性も使用できてしまうので注意が必要です。そのため現在はXHTMLで書く方が望ましいのですが、私のサイトはこの宣言で書いてしまっているのでこれで書きます。ただ非推奨要素、非推奨属性を使わなければ問題は無いと思います。

<html lang="ja">　～　</html>
HTML文書であることを宣言しています。<!DOCTYPE>を除く全ての部分がこの2つのタグの間に入るようにします。「lang="ja"」と入れることで、このHTMLを日本語で書くことが宣言できます。指定しないと言語コードが「UNKNOWN」となってしまうので忘れないようにしましょう。

<head>　～　</head>
そのHTMLのヘッダ情報をこの内部に書きます。そのページのタイトルなどです。

<title>　～　</title>
<head>　～　</head>の間に<title>タグを入れます。非常に重要です。そのページのタイトルとしてブラウザに表示されますし、検索のキーワードがタイトルと一致すれば検索エンジンでビックリするほど上位表示されます。

<body>　～　</body>
そのHTMLに書きたい情報はこの内部に書きます。

<h1>　～　</h1>
<h2>　～　</h2>
<h3>　～　</h3>
見出しに使うタグです。数字が小さくなるほど重要な見出しとなり、<h1>が最も重要な見出しです。本の目次を読めば、見出しごとに整理されていることがよく分かると思います。具体的に書きますと、私のサイトでは<h1>にサイト名、<h2>にコンテンツの見出し、<h3>にコンテンツの中身の見出しと使っています。

<p>　～　</p>
段落に使うタグです。<p>　～　</p>の内部が一つの段落となり、終わりの部分で改行されます。

<br>
改行に使うタグです。<br>の部分で改行されます。ただし、余白をつくるために<br>タグを沢山並べたり、段落を表現するために<br>タグを使うのは好ましくありません。あくまでも改行のタグです。

<ul>　～　</ul>
箇条書きといいますか、リストといいますか、文章や単語などを並べる場合に使うタグです。羅列の場合にはこのタグを使いますが、順番に意味がある場合は<ol>　～　</ol>を使いましょう。私の場合、メニューや更新履歴は単に並べているだけなので<ul>を使っていますが、「湯を沸かす」「お湯を注ぐ」「3分待つ」のようにその箇条書きの順番に意味があるなら<ol>を使いましょう。

<li>　～　</li>
<ul>　～　</ul>の内部や<ol>　～　</ol>の内部に書きます。そうすると<li>　～　</li>部分が箇条書きのように並べられます。

<a>　～　</a>
リンク関係に使うタグです。「href="URL"」でリンクすることができ、絶対リンクと相対リンクと二つの方法でリンク先の指定ができます。
絶対リンクは「http」から始まる部分を全て「URL」の部分に記入すれば表現できます。他サイトにリンクする際によく使う表現です。
相対リンクはそのページからみて、どの位置にあるページにリンクするかを記入します。「index.html」というページにリンクしたいとします。同じフォルダ内にあったとすれば、「index.html」を「URL」の部分に入れます。一つ上のフォルダにあったとすれば「../index.html」を「URL」の部分に入れます。二つ上なら「../../index.html」です。また、「picture」という下位フォルダにあるならば、「picture/index.html」となります。自分のサイト内リンクにはこれをよく使います。

<div>　～　</div>
id属性「id="id名"」やclass属性「class="class名"」で定義することで意味を持ちます。そのid属性とclass属性はCSSで定義することになります。CSSで定義することでこの範囲の部分を自由にカスタマイズすることができます。このテンプレートの場合、主にメニュー部分とコンテンツ部分に分ける役割を果たしています。

３．テンプレートのCSS

a:link { color: #0000ff; }
a:visited { color: #000080; }
a:active { color: #ff0000; }
a:hover { color: #ff0000; }
このページのリンク色の指定をしています。一行目はまだ訪問していないリンク先の色、二行目は訪問したことのあるリンク先の色、三行目はクリックした状態のリンク先の色、四行目はマウスが乗った状態のリンク先の色です。
ユーザビリティーを意識し、デフォルトの状態（クリック前は「青」、クリック後は「濃紺」）を保ちながらも、目立つ「赤」でマウスの位置などがよく分かるようにしています。
一見デフォルトながら、マウスが乗った状態で何か変化が起こるのが格好いいと思います。

セレクタ { プロパティ: 値 }
以降はほとんどがこの形式で書かれていることが分かると思います。セレクタ名はHTMLで使用したタグで、そのタグが {　} で囲まれた部分でカスタマイズされることになります。まず例外になっている部分から説明します。

div#menu { プロパティ: 値 }
div#content { プロパティ: 値 }
「#menu」と「#content」の部分はHTMLで定義した「id名」に#をつけた形になっています。一行目は<div>　～　</div>内部のメニュー部分、二行目はコンテンツ部分を表します。それぞれの設定を変更していることになります。

次にプロパティについて説明します。

color
background-color
一行目で文字色、二行目で背景色が変更できます。

font-family
font-size
font-weight
一行目で文字フォント、二行目で文字サイズ、三行目で文字の太さを変更できます。フォントを変更する場合は異なる環境も考慮し、沢山指定しておいた方がいいでしょう。また文字サイズは絶対指定と相対指定の両方で指定できますが、相対指定の方が望ましいです。文字サイズは見る人が読みやすいよう、ブラウザの設定で変更できるようにしておくためです。絶対指定では文字サイズを変えられません。ですが、絶対指定にしておかないとデザインが崩れてしまうので、仕方なくサイト名だけは「35px」としています。それ以外は「medium」「small」のどちらかになっているはずです。

scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-arrow-color
scrollbar-track-color
scrollbar-3dlight-color
scrollbar-darkshadow-color
これら全てがスクロールバーの設定変更関連です。注意しなければならないのはネットスケープに未対応だということです。いくらいじっても、ネットスケープではデフォルトのままです。

margin
padding
余白を設定できます。例えば二つ並んだ段落について考えてみると、一行目では段落間の余白を指定し、二行目でそれぞれの段落内の余白を指定します。

border-width
border-color
border-style
枠線を変更できます。一行目で枠線の太さを変更し、二行目で枠線の色を変更し、三行目で枠線の形式を変更します。

line-height
行間の広さを指定できます。デフォルトの状態よりも広く取った方がいいと思います。

height
高さを指定できます。何とも表現しにくいのですが、これを入れないとおかしくなりましたので指定しました。

float
表示位置を指定できます。タイトルを右に持ってきたのはメニューに目をやったときにどうしても目立ってしまったからです。スクロールするときにさりげなく主張しているつもりです（笑）

list-style-type
箇条書きのマークや番号の形式を変えます。デフォルトだと「・」が表示されますが、必要ないので消しました。

次にこのレイアウトの一番のポイントになっている部分の説明をします。

position: absolute;
top: 70px;
left: 0px;
width: 20%;
一行目で絶対位置であることを指定し、二行目で上から「70px」の位置からメニューを表示させるようにし、三行目で左端とのすき間が「0px」（つまり左端）からメニューを表示させるようにしています。四行目でメニューの部分の横幅を画面の「20%」であることに指定しています。

left: 20%;
width: 80%;
コンテンツ部分とメニュー部分との違いはこの二行ですが、一行目で左端とのすき間が画面の「20%」からコンテンツ部分を表示させるようにしています。メニュー部分が横幅「20%」ですからメニューの右端ピッタリからコンテンツ部分になります。二行目でコンテンツの横幅を「80%」にすれば、画面の「20%」がメニューで「80%」がコンテンツとなり、「100%」ピッタリに収まります。

この表示の長所はどんなウインドウの幅の人にも気持ちよく使ってもらえることです。ですが短所もありまして、他の人にはどのように映っているのかが分からないということです。他の人のウインドウサイズで試したことが無いものですから……。

関連リンク
CYBER@GARDEN（様々な分野を関連づけているので、一通り目を通すと参考になります）
HTMLクイックリファレンス（クイックの名の通り、ある項目を見つけ参照するのに便利です）

　04.09.22

ホーム　＞　レポ→ト　＞　無料で加工自由なテンプレート