確かにどんどん進んじゃってよくわかってなかったかも。
補講のページについては、一ページに全て収めるには長すぎるだろうという内容や、より深い説明を要するだろうと判断したページ、別の説明方法の方がわかり易いのではないかと迷ったページについて補講という形で別ページで説明しています。今回の場合は説明する順番が難しかった為に、二ページに分けることにしました。ですので前頁の 見出しと基本構造 と併せてお読みください。
前項ではホームページの内容と、マークアップと呼ばれる物(下で説明します)を同時に行ってしまっているので、ある種の混乱を招いているかもしれません(だからこそこの補講ページが存在します)。その辺りの疑問が少しでも解消されるようにこのページを創りました。
確かにどんどん進んじゃってよくわかってなかったかも。
行き詰るくらいならば、わからない箇所は読み飛ばすくらいの気持ちも必要ですが、わからない箇所があったらわかるまで何度もよく読むか、他のサイトを見て回ったりして自分で調べるのが大切です。
さて、先ほどはいきなりタグなどを書き始めましたが、今度は順番を変えてみます。先ずはホームページに載せたい物があるはずですので、それを文書にするつもりで内容を書いてみてください。漠然としたイメージで構いませんし、内容だけで見栄えは考えなくていいです。最初の内は、創りながら考えるのではなく、考えてから創った方が上手く行きます。ここではこちらが用意した文書をサンプルとして進めて行きます。
ララの世界 ご訪問ありがとうございます。ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。今のところは日記や写真、掲示板しかありませんが、もっと頑張って素敵なサイトにして行きたいと思っていますので、どうぞ宜しくお願いします。 自己紹介 私のプロフィールです。 ラララ日記 日々の記録です。 ララの写真館 なんとなく撮った写真を公開しています。 掲示板 一言お寄せください。 リンク お友達リンク ネットで知り合った私の友人が運営しているサイトです。 お役立ちリンク ホームページ ホームページを創るのにお世話になったサイトです。 その他 その他のお役立ちサイトです。
言葉にしてみると少ないんですね。
そうですね。自分の創りたいページのイメージがあればだいたいどなたでもそれを言葉にすることができると思います。絵を描くわけではなく、具体的に何を書くのか言葉で列挙するだけですから簡単だと思います。
起こしたテキストの中から見出しに成り得る文字列を選別し、<h1〜6>〜</h1〜6>でマークアップして行きます。最も重要で伝えたい見出しには<h1>〜</h1>を付け、それ以降の見出しには伝えたいレベルによって<h2〜6>〜</h2〜6>をつけて行きます。また、h は heading(ヘッディング)の頭文字(略)で、見出しの意です。
<h1>ララの世界</h1> ご訪問ありがとうございます。ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。今のところは日記や写真、掲示板しかありませんが、もっと頑張って素敵なサイトにして行きたいと思っていますので、どうぞ宜しくお願いします。 <h2>自己紹介</h2> 私のプロフィールです。 <h2>ラララ日記</h2> 日々の記録です。 <h2>ララの写真館</h2> なんとなく撮った写真を公開しています。 <h2>掲示板</h2> 一言お寄せください。 <h2>リンク</h2> <h3>お友達リンク</h3> ネットで知り合った私の友人が運営しているサイトです。 <h3>お役立ちリンク</h3> <h4>ホームページ</h4> ホームページを創るのにお世話になったサイトです。 <h4>その他</h4> その他のお役立ちサイトです。
<h1>〜</h1>(最も伝えたい見出し)は本来ならば、唯一である必要があると思います。しかし、HTMLの文法では、一つのページに複数個存在しても構わないということになっています。しかしながら、一つの文書内での最重要な箇所は唯一つであると私は考えています。ですから<h1>〜</h1>を登場させるのは1ファイルにつき一回にするのが良いのではないかと思っています。
見出しってどんな部分ですか？
一番伝えたい部分です。新聞で『新記録達成』などと大きな文字で書かれている部分などが見出しです。他にも広告ならば『三日間限定大安売り』とか、小説ならば本の題名やそれぞれの節の題名などが見出しです。内容が直ぐにわかるようにつけた題のことを見出しと言います。
とても乱暴な言い方をしますと、見出し以外の部分は全て段落という解釈も可能です。ですからその文字列を<p>〜</p>でマークアップします。p は paragraph(パラグラフ)の頭文字(略)で、段落や節の意です。
<h1>ララの世界</h1> <p> ご訪問ありがとうございます。ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。今のところは日記や写真、掲示板しかありませんが、もっと頑張って素敵なサイトにして行きたいと思っていますので、どうぞ宜しくお願いします。 </p> <h2>自己紹介</h2> <p>私のプロフィールです。</p> <h2>ラララ日記</h2> <p>日々の記録です。</p> <h2>ララの写真館</h2> <p>なんとなく撮った写真を公開しています。</p> <h2>掲示板</h2> <p>一言お寄せください。</p> <h2>リンク</h2> <h3>お友達リンク</h3> <p>ネットで知り合った私の友人が運営しているサイトです。</p> <h3>お役立ちリンク</h3> <h4>ホームページ</h4> <p>ホームページを創るのにお世話になったサイトです。</p> <h4>その他</h4> <p>その他のお役立ちサイトです。</p>
index.html - メモ帳
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ララの世界</title> </head> <body> <h1>ララの世界</h1> <p> ご訪問ありがとうございます。ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。今のところは日記や写真、掲示板しかありませんが、もっと頑張って素敵なサイトにして行きたいと思っていますので、どうぞ宜しくお願いします。 </p> <h2>自己紹介</h2> <p>私のプロフィールです。</p> <h2>ラララ日記</h2> <p>日々の記録です。</p> <h2>ララの写真館</h2> <p>なんとなく撮った写真を公開しています。</p> <h2>掲示板</h2> <p>一言お寄せください。</p> <h2>リンク</h2> <h3>お友達リンク</h3> <p>ネットで知り合った私の友人が運営しているサイトです。</p> <h3>お役立ちリンク</h3> <h4>ホームページ</h4> <p>ホームページを創るのにお世話になったサイトです。</p> <h4>その他</h4> <p>その他のお役立ちサイトです。</p> </body> </html>
結局こっちでも大きさの違う文字が並んでいるだけですねぇ。
同じ事をやっているのですから当たり前です。でも、それぞれの文字列やタグにどんな意味があるのか理解できるようになっていませんか？
これで全ての文字列がタグで挟まれました。これがマークアップが完了した状態です。一つでもタグで挟まれていない文字列が存在しているのならば、そのファイルはHTMLとしては完成されていません。このように必ず全ての文字列がマークアップされた状態にしなければなりません。
マークアップとは、文書中の文字列に印をつけることによってその文字列がどのような意味を持っているのかを示す為の物です。HTMLの場合のマークアップは、その意味をコンピュータに認識させるための物であり、「物理マークアップ」と「論理マークアップ」が存在します。
ここでは詳しく説明しませんが、文字の色や大きさを変更したり、太字にしたりという物理的な(視覚的なと言い換た方がわかり易いかもしれません)マークアップの事を言います。本来の文章の意味とはなんら関係のない物なので、多用するのは好ましくない。代わりに Cascading Style Sheets(CSS)[カスケーディング・スタイル・シート]という見栄えを定義する概念が登場し、現在ではそれを利用するのが良しとされています。
物理マークアップとは逆に、論理マークアップは意味的にマークアップする事を言います。文書中にある文字列の意味を、よりハッキリと明示させるために用います。見出しであるから<h1></h1>を挿入し、段落であるから<p></p>を挿入するというような事です。
これからの説明は、『文書に論理マークアップをして行く』ということに尽きるでしょう。どのようなタグがどんな意味を持った印なのかを覚えるのです。全てのタグは文字列が元々持っているであろう意味を、コンピュータにわかるようにする為にハッキリさせているのだなと思ってください。今回までには『見出し』や『段落』という意味のタグを説明しました。これからは『強調』や『リスト』などのマークアップを勉強して行きます。次は『リンク』ですけれども。
よくわかんないんだけど、タグで挟む事をマークアップって呼ぶの？
まあそんなところですね。
そんでもって物理マークアップはいけないんだね。
必ずしもいけないとはとても言い切れないのですが、望ましくないのだと思ってください。
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]