webサイト作成の初歩

サイト作成には色々な方法がありますが,HTMLというものを使うのがいまのところの基本です。

HTMLというのは,文章の意味を明示する規格のことです。

基本的には,元からある文章にタグを追加して,意味を明示するだけのものですから,とりあえず元となる文章を作成しましょう。ただ,Word等のワープロソフトで作った文書には,いらないデータが追加されてしまい,HTMLにしにくいものです。そこで,ワードパッドやメモ帳のようなソフトを使って文章を作ることをお勧めします。

よく使うタグの説明

タグとは,要素の開始と終了を示すものの事です。不等号で要素名を囲んだものが開始タグ,要素名の前にスラッシュをつけたものを囲んだものが終了タグです。開始タグから終了タグまでの範囲を,要素といいます。要するに,<title>何かのホームページ</title>というもの全体を要素(この場合はタイトル要素)といい,前後の不等号に囲まれているものをタグといいます。

タイトル

絶対に書かなければいけない要素があります。それがTITLE要素です。これは,とりあえず一番初めに書いておいた方がいいでしょう。場合によっては一番初めでなくてもいいのですが,初心者入門としては最初といっときます。

タイトル要素には,その文書の名称を書きます。例えばこの文書は,「よく使うタグの説明」から始まって,いくつかの章で更正されていますが,文書名は「webサイト作成の手引き」ですので,それを書くわけです。

H1要素が一つしかないような文書の場合は,H1要素と同じ内容が書かれるでしょう。逆に,複数のファイルで一つの文書を構成するとき,H1要素には全体文書名を書きますが,TITLE要素はH2要素と同じになることもあるでしょう。

見出し

大抵の文書には見出しが書かれるはずです。これは,H1要素からH6要素で示されます。

一番大きな見出しがH1要素,それ以降H2要素,H3要素と項目が小さくなる毎に数字が大きくなります。

法律文で喩えると,章がH1要素,条がH2要素,項がH3要素,号がH4要素となります。

ちなみに当然のことながら,章の後にいきなり項が来ないように,H1要素のすぐ後ろにH3要素が現れることはありません。必ずH1要素→H2要素→H3要素というように,順番に見出しレベルを下げていきましょう。

段落の説明

段落は,英語でParagraphですので,段落を示すときはP要素を使います。

P要素ですから,pという文字を不等号で囲んだものが開始タグ,頭にスラッシュをつけて不等号で囲んだものが終了タグとなります。

リストの説明

リストには,順序が有るリストと,順序がない箇条書きがあります。(他に,定義リストとテーブルというものがありますが,使用頻度が低いので割愛します)

どちらのリストも,要素の中に項目となるリストアイテム(List Item)を書くことになります。これはLI要素で明示します。

箇条書き

例えば,次のような箇条書きを書くとします。

その場合,タグの書き方は次のようになります。


<ul>
<li>箇条書き</li>
<li>順番がないリスト</li>
<li>Unorder List</li>
<li>要素名はUL要素</li>
</ul>

順序リスト

こちらも,書き方は箇条書きと違わず,要素名が違うだけです。例えば次のようなリストがあるとします。

  1. 順番が有るリスト
  2. Order List
  3. 要素名はOL要素

このリストを書く場合,番号は文章としては書かずに,次のようなタグの書き方をします。


<ol>
<li>順番が有るリスト</li>
<li>Order List</li>
<li>要素名はOL要素</li>
</ol>

何故文章に番号を書かないかというと,順序リストとは,番号そのものではなく順番を明示することに意味があるリストだからです。要は,表示する側によっては,1.2.3.と表示されず,アイウとか,いろはとか,順序がわかる形で表示されれば問題ないからです。(もっとも,今現在デフォルトで数字以外の表示となるブラウザはないと思いますが,将来的には違う表示のブラウザが出てくる可能性があります)

そのため,付番する番号に意味があるリストの場合は,次例のように,箇条書きで文章として番号を明示したほうがいいでしょう。番号自体に意味があるというのは,前後の文章によるものなので,文章全体の構成から判断してください。


<p>順序リストについて説明するときの表現について考えてみる。案としては次のものがある。</p>
<ul>
<li>1 順番が有るリスト</li>
<li>2 Order List</li>
<li>3 OL要素</li>
</ul>
<p>1が一番判りやすいが,常に使っていては冗長となろう。かといって,2だと英語に生理的嫌悪感を抱く人が逃げてしまうだろう。</p>
<p>3がよさそうだが,初心者相手には難しいし,UL要素と間違えられることが多そうだ。</p>
<p>1と3の混合が良いのかも知れない。</p>

強調

強調の明示方法

例えば,文章の一部分を強調したいとします。そういうときは,EM要素を使います。EM要素とは,Emphasisの略で,要素名であるemを冠した開始タグと終了タグで囲まれた範囲を強調します。

em要素の記述例を例示しておきます。


<p>EM要素とは,Emphasisの略で,要素名である<em>em</em>を冠した開始タグと終了タグで囲まれた範囲を強調します。</p>

さて,もっと強い強調をしたいときもあるでしょう。そういうときは,STRONG要素を使います。

Strong Emphasisの略で,EM要素より強く強調するときに使います。これも,書き方を例示しておきます。


<p>さて,もっと強い強調をしたいときもあるでしょう。そういうときは,STRONG要素を使います。</p>
<p>Strong Emphasisの略で,<strong>EM要素より強く強調</strong>するときに使います。</p>

仕様的な注意事項

EM要素もSTRONG要素も,段落やリストアイテムを跨いで強調部分を指定してはいけません。

例1 段落を跨ぐ強調

<p><strong>あえて言おう。</p>
<p>カスであると。</strong></p>

例2 段落を跨がない強調

<p><strong>あえて言おう。</strong></p>
<p><strong>カスであると。</strong></p>

上記例の場合,例1は誤りで,例2が正しい書き方となります。

画像

画像をサイトに表示したいときは,IMG要素を使用します。

IMG要素は特殊な要素で,終了タグがありません。これは,囲むものがないからです。他にも,囲むものがないために,終了タグがない要素がありますが,どれも文章とは関係ない,表示のための要素だからで,特別なものです。

IMG要素には,scr属性を指定しなければなりません。これは何かというと,IMG要素を書いた場所に表示する画像のURIを指定するためのものです。

IMG要素(scr属性)は次のように書きます。

<img scr="http://www.〜">

背景・色

サイトを作るときに,背景に色つけたり,文字に色つけたり,大きくしたり,色々表示を変えたいときもあると思います。こういうときは,CSS(Cascading Style Sheets)を使います。

これは結構難しいので,CSS入門とかを買うといいと思います。

ただ,CSSを使うときには,文書の始めに記述しなければいけないものが増えます。

一つは,CSSを使うための宣言です。定型文ですので,間違わないで書いてください。


<meta http-equiv="Content-Style-Type" content="text/css">

もう一つは,使用するCSSファイルのURIを指定するものです。これも,基本的な書き方はURI以外は同じです。色々と応用も効きますので,モノの本でも読んでみてください。

書き方を例示しておきます。


<link rel="stylesheet" type="text/css" href="http://www.remus.dti.ne.jp/~ddt-miz/html/jis-html.css">

ちなみに,指定してあるCSSファイルは,私が自分のサイトで使っているものですが,元は言葉言葉言葉というサイトのものです。二次利用を推奨しているサイトもありますので,CSSを覚えるのが面倒な方は,人が作ったものを使わせてもらうのがよいでしょう。

リンク

リンクをつけたいでしょ。まぁ,リンクはwebサイトの醍醐味ですから。

リンクを作るときは,A要素を使います。

A要素にも,IMG要素のようにリンク先を示す属性が必要です。これをhref属性といいます。

たとえば,DDT's Roomにリンクを貼ろうとすれば,このように出来る訳ですが,このためには次のように書きます。


<p><a href="http://www.remus.dti.ne.jp/~ddt-miz/">DDT's Room</a>のご案内</p>

リンクを貼る際には,リンク先がわかる文言を使いましょう。DDT's Roomを見るにはここをクリック,のような使い方はhere症候群と謂われて嫌われるものです。

なお,A要素もEM要素などと同じように,段落やリストアイテムを跨ってはいけませんので,ご注意ください。