入門!Dreamweaver使い方講座

文法

このページでは、WEB製作の基礎となる文法、及び文の形態について説明します。あまり難しいことは説明してないはず・・・?

文法(形態)

さて、このページでは文法について説明していきます。このページ以外でも説明した通り、W3Cの勧告にしたがって記述するということは、正しい(X)HTMLを記述するということ。 そのメリットとして、検索エンジンへの対応、ユーザビリティ、アクセシビリティの向上などなど。もちろんいいことだけではなくデメリットも存在します。が、デメリットを含めたとしても、文法に沿って書くことは遥かにメリットのほうがあると私は思っています。 しかし、効率は?と聞かれると、現状ではある程度の文法違反には目をつむり、ソフトに任せたほうが効率はいいです。慣れてくるとそうでもないと思うのですがね。 一番良いのは、正しい文法に沿って記述し、尚且つ短い時間でクオリティの高いものを仕上げるということ。

もし、あなたがWEBサイトの作成を仕事に持つ方ならば、仕事では文法よりも利益を追求するべきです。そのほうがあなたと会社のためになります。 クオリティの高いサイトを作成したければ、仕事外で作ってみることです。どんなに時間がかかっても誰にも文句は言われません。仕事にそれを生かしたければ、時間をかけてクオリティの高いサイトをたくさんつくればいいのです。そうすれば、言葉にはしづらいコツを掴み、自身のレベルアップにも繋がり、そのころには短時間で製作できる技術力がついているはずです。 という訳で長くなりましたが、文法について説明します。

何が足りない?

さて、htmlファイルを作成する最低のタグは下記の通りになります。

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

ですね。好ましくはありませんが、このタグだけでホームページを作ることができます。<title></title>にそのWEBサイトの名前を記述し、<body></body>にそのWEBサイトに表示したい内容を書くだけです。しかし、文法に沿うという意味ではやはり不完全です。では足りないものを補っていきましょうか。

DTD - 文書型定義(DOCTYPE宣言)

DTD(Document Type Definition)、つまり文書型定義です。htmlを作っていく上でのルールだと思ってください。Dreamweaverで新規ファイルを作成すると、文頭に自動的に付加されている文です。限られたDTDだけですけどね。すべてのDTDをDreamweaverで付加、変換するようにするためには、Extension Managerという別ソフトを使用し、米国のサポートセンターにてユーザー登録しなければなりません。ソフトがサポートしてなくても、WEB上にたくさん転がってるんだからコピペでいいじゃん・・・とか思ったりも。というわけで話を戻します。それぞれのDTDには各ルールあり、これにより使用できるタグが制限されます。以下に主なDTDを記載します。

HTML4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

▲はHTML4.01の厳密型です。たまたま私がそうなのかもしれませんが、このDTDを使用しているWEBサイトはあまり見かけませんね。

HTML4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

▲はHTML4.01の過渡的な型。現在もっとも普及しているDTDです。この定義では、将来廃止予定(廃止済み)の非推奨タグも使用可能となっています。裏を返せば最も自由なDTDであると言えます。私もほぼ全てこれを使用して製作しています。

HTML4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

▲はHTML4.01の中でフレームをサポートしている唯一のDTDです。フレームを使用するにはこのDTDを宣言する必要があります。尚、フレームは非推奨となっており、将来廃止予定です。(最新DTDではすでにサポートされていません。)今からフレームを使用するのはまったくのナンセンスです。

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

▲XHTML1.0の厳密型。徐々に普及してきています。

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

▲XHTML1.0の過渡的な型。

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

▲XHTML1.0の中でフレームをサポートしている唯一のDTD。

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

▲XHTML1.0 strictにルビのモジュールが追加されたDTD。さほど変化はありません。

XHTML Basic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

▲主に携帯電話などの小型機器のために、必要最低限のモジュールだけを組み合わせて作られたDTD。 主流なDTDを挙げてみましたが、現在通常ではHTML4.01 Transitionalを選択しといて問題はありません。私が何と思おうと現在はこれが主流ですし。

head内の記述について

次はhead内の記述についてです。<head>〜</head>基本的にこの中に記述された文はブラウザに表示されません。裏方みたいなものです。例外はtitleです。これはページの名前として表示されますよね。それ以外は大抵meta情報を記述します。ではさっそく以下に例を記載します。

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
▲そのページがどの文字コードを使用するか。他には「utf-8」や「EUC」というのもあったりします。
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
この二つは似たような意味合いなのでまとめて説明します。ページ内でcssを使用する際は上を、javascriptを使用する際には下を記述してください。もちろん両方使用する際は両方記述してください。この二つはセットというわけではないので、必ず二つ一緒に書かなければならないわけではありません。用途によって使い分けます。
<meta name="description" content="" />
▲そのページの内容の簡単な紹介。検索に使用されます。また、ブラウザによりますが、お気に入り(ブックマーク)にも使用されることがあります。
<meta name="keyword" content="" />
▲そのページのキーワードです。検索に使用されます。別のページでも書きましたが、上のdescriptionとkeywordは何でも入れればいいというものではありませんからね。ご注意ください。関係ないキーワードを入れても検索にはヒットしますが、リピーターはおそらく減るでしょう。
<link href="" rel="stylesheet" type="text/css" />
▲これはmetaではありませんが、これもhead内に記述します。外部ファイルを読み込むときに使用します。この場合はcssファイルを読み込む記述です。
<script type="text/javascript" src="○○○.js"></script>
▲こちらはjavascriptを外部ファイルにし、そのファイルを読み込む際に記述する一文です。 と、こんな感じでよく使うものを集めてみました。これだけではないので、各自で本やインターネットで色々探してみてください。

body内の記述について

次はbody内の記述についてです。<body>〜</body>基本的にはこの中に何を書いても変なことさえしなければほとんどは表示されます。 しかし、本来WEBサイトというものは誰もが快適に閲覧できる有意義な情報に溢れたものでなければなりません。 検索エンジンで適当な言葉を入力して検索してみてください。そして順位が低いホームページを見てみてください。全部が全部そうではありませんが、素人っぽさがあるのがお分かりでしょうか?そういうサイトは基本的にソースもなっていません。パッと見すごいサイトでもソースが適当・・・みたいなサイトもありますが。 せっかく学ぼうとしてるのですから良いものを作りましょう。

ちなみに必ず文法を守りなさいと言ってるわけでもありません。個人のモラルの問題なので任せます。 さて、そこら辺にある雑誌でも開いてみてください。すると普通目が先に行くのは見出しでしょう。見出しが写真が絵か文字かはわかりませんが。つまり文の始まりには必ず見出しがあるということです。媒体が紙であろうとディスプレイであろうと関係ありません。どちらにしろ文を書くということなのですから。 HTMLでは見出しタグと言われるものがあります。「h1〜h6」です。例えば文の構成を考えたとき、大見出し、中見出し、小見出しとあるとします。このとき、大見出しをh1、中見出しをh2、小見出しをh3というふうにマークアップ(意味付け)していきます。

▲のように、普通に考えるとこんな感じになりますよね。基本的にはh1はページ内に一つ、h2〜はページ内に幾つあっても構いません。 何故?って思う方いらっしゃるでしょうか?先の例のように雑誌で思い浮かべてください。大見出しが幾つもありますか?中見出しは一つだけですか?小見出しは一つだけですか? 厳密には完全にそうとは言い切れませんが、紙からディスプレイへと媒体が変わっただけです。確かに作成する仮定は違いますが、人が読むということは双方とも変わりはありません。WEBサイトも本を一冊作るような気持ちで製作すればいいのだと私は思います。というか、そう教わりました。 さて、本を作るようにと書きましたが、見出しだけでは本は作れませんね。本の構造を見てみましょう。邪魔な要素を取り払うと、どの本も下記のような構造になっています。

・本の題名(タイトル)
・目次
・見出し
・文
・見出し
・文
これだけではありませんが、本には様々な情報が集まっています。その中で見出しの次に大切なのは文です。これがなければ本は成り立ちません。HTMLでは文を書くときは<p>○○○○</p>と記述します。pはパラグラフ、つまり段落という意味です。小説などを読んでも、文の塊ごとにまとまっていますよね。HTMLでは文の塊ごとに<p></p>と囲むだけです。簡単ですね。ただ、文の塊だからといって、長々と書くと読む人が疲れてしまいます。長すぎるかな?と思ったら、適当な位置で区切りましょう。

<h1>唐突ですが、実際に例として文を書いてみましょうか。</h1>

<p>現在新年明けたばかりの1月4日。遅れましたが皆様、明けましておめでとうございます。今日から仕事が始まりました。</p>

<p>しかし、昨日今シーズン初のスキーに行って来たわけですよ。もう久しぶりに思いっきり滑ってきましたよ!楽しくて楽しくて暴走してましたが。危うく華麗に初吹っ飛びになるところでしたよ・・・。それくらいヒートアップしてましたねぇ〜。そのせいか、体がイタイイタイ。腰と太もも、左腕が悲鳴をあげてます(T_T)キーボードを打つのには支障はでてませんが・・・。</p>

<p>やっと先日のボーリングの右腕の筋肉痛が取れてきたと思ったら今度は全身ですよ。もう散々。あぁ歳だ・・・。</p>

<p>以上、21歳の正月でした。</p>

感じを掴んで頂けたでしょうか?こんな感じでマークアップしていってくださいね。 ここまでで、WEBサイトの根幹を作る上での説明は終わりです。ここまでくればもう皆さんは問題なく作ることが出来るはずです。 これで終わり?と思ってる人もいるかと思います。基本的にはこれで本当に終わりです。ただ、このままだとWEBサイトとしてアップするのは恥ずかしいですね。何せ何も装飾してませんからね。ですが、HTMLではここまでです。ここからはCSSを使用して見栄えを整えていきます。が、残念ですがここは文法についてのページなのでそこまでは追求しません。

ではまとめましょう。HTMLファイルを組むコツ。それは本を作る意識。それだけです。ここで紹介したタグの他にも様々なタグが存在します。それらは各自で調べてみてください。HTML自体はそんなに難しくないので安心してください。(難しいのはCSSですから。)では頑張ってください!

dreamweaver初級
練習講座
dreamweaver中級
  • 文法
便利機能 & トピックス
番外編
その他
ショッピングのことなら
BOOKMARK