ランダウ＝リフシッツの力学の難易度が高すぎるので、攻略メモ書いてみました。Celt専用に作ったので当然間違ってます。信用しないでください。しかも全く詳しくありません。役に立ちません。

むしろ間違いを見つけて教えてください。

ちなみに§1は欠番です。

pdfと画像版を用意する予定ですが、とりあえず画像版だけ載せておきます。

この記事には訂正があります。訂正は、画像部分の下に書いていくので、追記部分の順番はぐちゃぐちゃです。画像に載ってなくても諦めずに下を探してみてください。

この講座で、このページに初めて来られた方へ。本講座の目次があります。

画像を入れてみよう！

今回は画像を挿入してみましょう。

今回は前回の続きですので、前回アップロードしたファイルを用意してください。

• 親子丼の画像

そして、この画像ファイルをダウンロードします。右クリックして保存を押せば出来ます。

できたら、このファイルを「ウェブサイト作成講座」フォルダに保存するんですが、後々ファイルが増えてくると困るので画像と文書を分けて保存するようにしましょうか。

「ウェブサイト作成講座」フォルダの中に「images」というフォルダを作ってください。

その中に今ダウンロードしたoyakodon.jpgをぽいぽいっと放り込んでください。[基本ファイル操作編を後々開講予定]

それではreciepe1.htmlに、この完成した親子丼の写真を入れてみたいとおもいます。

いきなり画像挿入のタグを書いてしまいましょう。

<img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120">

このタグを見て次の２つの事を疑問に思った人はもう既にHTML一級建築士です。

• あれ、開始タグだけなの？　終了タグは？
• このimgってのはブロックレベル要素なの？　それともインライン要素なの？

とりあえず、この辺りの疑問から解説していきましょう。

まず、imgタグですが、これは開始タグだけ書きます。気持ち悪いですね。まあ、</img>を省略しているって考えで間違ってないです。img要素は画像を表してるだけなので、それで囲む文字列は存在しませんからね。こんな感じでタグで囲む部分が存在しないから、開始タグだけ書く要素を空要素（からようそ）といいます。本来タグで囲むはずである部分が空（から）なので空要素です。

次に、img要素がブロックレベル要素かインライン要素かということに関しては、これはインライン要素です。ですから、実際にHTMLに書くときは

<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"></p>

こんな漢字で適当なブロックレベル要素に含めてやる必要があります。

今回は画像を段落として使いましたが、画像を並べて箇条書きにしたい場合なんかは

<ul>
 <li><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"><li>
</ul>

とすれば良いです。まあ、迷ったときはp要素でいいでしょう。

img要素の属性の解説

いよいよ、img要素の属性についてです。このうちalt属性ですが、これは絶対に書かなくてはいけない重要な属性なんですけれれども、説明が長くなるので最後に紹介します。

src属性

src属性は表示させる画像がどこにあるのかを指定します。src属性を書いておかないと、パソコンはどの画像を表示させていいか分からなくなっちゃうので必ず書いておかないといけません。

今回の例でいうとsrc="images/oyakodon.jpg"と、src属性の値がimages/oyakodon.jpgとなっていますね。

ここでの「/」は「～フォルダの」という意味です。今回「oyakocon.jpg」を「images」フォルダに入れたので「imagesフォルダのoyakodon.jpg」という画像を挿入してますよ、と言ってるわけです。忘れず書くようにしましょう。

また、リンクのときもそうだったんですが、他のサイトの画像を表示させたいときはsrc属性の値にURIを入れるといいです。Petanko.orgのバナーだったら

<img src="http://shed.petanko.org/banner/banner1.png" 
alt="Petanko.org" width="88" height="31">

こんな感じですね。さり気なくsrcの属性値以外のところも色々変わってますけど、後で説明しますので今は気にしない気にしない。

そんでもって、これはHTML自体とは関係ないのですが、他の人が作った画像や他のサイトの画像をこのように自分のサイトで表示させること（一般的には直（「じか」もしくは「ちょく」）リンクと呼ばれています）はマナー違反や場合によっては法律違反（具体的には著作権法違反）になり得ます。

ほとんどのサイトさんでバナー意外のが画像ははしたらダメよという方針をとっています。Petanko.orgでもバナー意外の画像は他のサイトからは表示出来ないように設定しています。

中にはバナーも直リンクしないように書いているサイトさんもありますが、この場合はバナーを保存して（右クリックでできます）自分のウェブサイトのフォルダに入れて利用してくださいということです。

直リンクしてもいいよとも、直リンクしたらだめとも書いてないサイトのバナーはどうすればいいかということは、ケースバイケースで分かりませんね。保存しておけば安全ということに間違いはありませんが......。

width属性とheight属性

width属性の値にはその画像の幅の大きさを、height属性の値にはその画像の縦の大きさを書きます。画像ファイルにマウスを合わせた状態で右クリックして、「プロパティ」とかそういう感じの言葉を選べば見られます。手持ちのWindows Vistaでは「右クリック→プロパティ→「詳細」と書かれたウィンドウの上の方のタブ→「イメージ」で区分されたところの「幅」と「高さ」で見ることができます。

「大きさ88×31」みたいに書いてる場合もありますが、その場合、普通は「（幅）×（高さ）」という順番です。逆に書いてる場合はトラップです。

これらは出来る限り書いた方がいいのですが、どうしても分からなかったというような場合は書かなくても特に大きな問題はおきません。

また、ここに書く値は「表示させるときの大きさ」であって、元の画像の大きさと同じである必要はありません。実際にrecipe1.htmlに次のように書いて結果を見比べてみましょう。

<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="90" height="120"></p>
<p><img src="images/oyakodon.jpg" alt="親子丼のできあがりの画像" 
width="180" height="240"></p>

後のほうが幅も高さも２倍の大きさで表示されたことが分かるでしょう。

alt属性

alt属性はimg要素を使うときには必ず書く必要があります。これには画像が表示されない場合、代わりに表示される文字列を書いておきます。

画像が表示されない場合というのは、主に次のような場合を想定できます。

• サーバ（ウェブサイトを見るときにアクセスする先のコンピュータ）が混雑していて画像をダウンロードできなかった。
• 携帯電話などで画像を非表示にしている。
• 視覚障碍者が音声読み上げソフトや、点字ソフトを使って読んでいる。

こういう人が利用する情報だと言うことを考えて、内容を書かないと行けないところがaltの難しいところです。

実際色々な流派がありますので、この辺は自分のサイトの利用者層を考えて適当な書き方をすればいいと思います。代表的な例だけ挙げましょう。

見出しに画像を使っている場合

<h1><img （略）></h1>とすることで画像を見だしとして利用することができます。受け将棋研究室なんかがその例ですね。そのような場合はどんなaltの属性値をつければいいでしょうか。

これに「タイトル画像」なんて書いてしまうと、利用者はずっとそのページのタイトルすら分からないわけです。ですから、alt="受け将棋研究室"とタイトルそのものを代わりに利用出来るようにしておくのがいいわけです。

「注意！」「注目！」などと書かれた画像を段落の最初に置いている場合

これはalt="注意："等と書くのがいいかと思います。

グラフの場合

これは読みづらいことを覚悟の上でalt="○○についてのグラフ。2000年:101件。2001年：96件。......"と書いて行くしか無いと思います。

さて、それでは今回の場合はどうでしょうか？　写真の場合は文字で情報を伝えるのが難しいので一筋縄ではいかないんです。

alt=""

本文に関係のない画像なんかはalt=""と書くことが一般的です。例えば、HTML的に好ましくない例ですが見出しの前後に飾りの画像をいれて居る場合なんかは、alt="見出し用飾り"なんて書かれても読みにくいだけですからね。今回の画像も「ええい、できあがり画像なんかただの飾りじゃい。無くても材料も作り方も必要事項は全部あるじゃないか」と思う方はaltの属性値が空になります。でもあんまりおすすめは出来ません。

alt="親子丼のできあがりの画像"

HTMLの仕様書にも使われた形ですので、一番標準な書き方ではないかと思います。携帯とかで、画像が非表示にしてる人も画像の情報を読んで見たければダウンロードできるといった点がメリットです。ただ音声ブラウザの人には不完全な情報しか伝わらないかもしれませんね。

alt="おいしそうな親子丼ができました。"

「この画像は一体何を表現したいんだろう？　そうだ、できあがった親子丼の美味しそうな様子を伝えたいんだ。」という発想に基づいて書かれたもの。音声読み上げのとき、違和感のない文章になるメリットがありますね。ただ、携帯で見た人は「なにこの画像？」って思ったり、冗長になるという問題があるかもしれません。

alt="親子丼のできあがりの画像：おいしそうな親子丼ができました。"

じゃあ、どっちも書いちゃおうじゃないかという発想です。さっきの場合より更に冗長になるという問題がありますね。

このくらいの知識あれば、割と自由に画像を入れられる事ができるのではないかと思います。また、

とすれば、画像から他のページにリンクを張ることも出来ます。このようなことをする場合、alt属性に適切な情報を入れて画像を見ることが出来ない人が迷わないように配慮する必要があるでしょう。また、この例のようにリンクのa要素にtitle属性を書いておくとリンク先について詳しい情報を記すことができるので利用すると便利になるかもしれません。

この講座で、このページに初めて来られた方へ。本講座の目次があります。

リンクの張り方

今回はリンクを張って見ましょう。この回では前回までに作業を進めていたファイルが必要です。まだ作ってない人の為に前回まで進行したファイルを用意しておきましたので、ダウンロードしておきましょう。

まず、リンクとは何かということについて説明しましょう。リンクとは、ウェブ上の情報の繋がりのことです。さらに、この繋がりの特徴として方向性がある、つまり一方通行の繋がりであるということがあげられます。

文字列 → 文書、画像、動画、その他

こんな感じですね。文書中のある画像から矢印が延びていって目的地の情報へと繋がっていくイメージです。そして、その矢印の根本をリンクの始点、矢印の伸びた先をリンクの終点といいます。

それでは実際にリンクを張って見ましょう

同一サイトでのリンクの張り方

まず、第２回で作った日記から第３回で作った日記にリンクを張って見ましょう。

メモ帳でnikki1.htmlを開いてください。[ここに開き方の説明へのリンクつけるかも]

リンクを作る場合にはまず、始点と終点を考えます。今回はnikki1.htmlにある文字列「親子丼」を始点として、recipe1.htmlにリンクを張って見ましょう。それでは、実際に作業するところを抜粋してみますね。

親子丼 → recipe1.html

まず、始点に要素「a」を与えてやりましょう。

<a>親子丼</a> → recipe1.html

こうですね。次に、このa要素にリンクの終点を教えてやります。

<a href="recipe1.html">親子丼</a> → recipe1.html

今までに見たことのない記号が出てきました。この例のhrefをa要素の属性といいます。

hrefはハイパーリファレンス属性の略ですね。超意訳すれば「すっごく便利に参考文献が見られるよ属性」てなとこです。

href="recipe1.html"の""で囲まれた部分であるrecipe1.htmlをhref属性の値だとか、属性値だとかいいます。

属性と属性値は今後良く出てくるので覚えておきましょう。まとめると、

<要素 属性="属性値"></要素>

となります。属性をつけるのは開始タグだけでOKです。というか、終了タグにつけてはいけません。

リンクの場合は

<a href="終点のファイル名">リンクの始点</a>

と書いておきましょう。

何はともあれリンク一つが完成しました。できたHTMLはこんな感じです。

<p> 今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に<a href="recipe1.html">親子丼</a>を食べました。</p& gt;

他のサイトにリンクを張ろう

自分のサイトのページにリンクが張れたら次は、他のサイトにも張りたいですよね。とりあえず、Petanko.orgのトップページにリンクを張る方法を考えてみましょう。

ここで悩むのはリンクの終点の記入方法です。ウェブ上にある大量のファイルから、他のサイトのページをただ一つに特定する記述であるURIを使います。ウェブページを見ているときウィンドウのどこか（多分上の方）に「http://」から始まる文字列がありませんか？　それがURIです。URLだとかアドレスとも呼ばれてますね。

このURLをhref属性の値として、リンクを張ればいいです。Petanko.orgに張りたければ、リンクの始点が文字列「Petanko.org」、終点が「http://petanko.org/」ですから、

<a href="http://petanko.org/">Petanko.org</a>

こうなります。

注意

ここで注意が一つあるのですがa要素の中にa要素は入れられません。

<p><a href="url 未定"><a href="http://petanko.org/"> Petanko.org</a>のウェブサイト作成講座にようこそ！</a>< /p>

このようなリンクの張り方は不正です。これからリンクを張りたければ

<p><a href="http://petanko.org /">Petanko.org</a>の<a href="url未定"& amp;gt;ウェブサイト作成講座にようこそ！</a></p>

このような感じにしましょう。

強調

a要素を習ったついでに、これよりも簡単な強調の仕方について覚えちゃいましょう。ここまで来た皆さんには簡単です。

強調をしたいところの要素はemです。そして、強い強調をしたいところの要素はstrongです。特に属性は必要なく、これらの要素のタグをつけてしまえばおわりです。

さらに、このemやらstrongは重ねがけができて、

<p> 普通のところ<em>強調したいところ<em>もっと強調したいところ</em></em></p>

だとか、

<p> 普通のところ<em>強調したいところ<strong>めちゃくちゃ強調したいところ<em>死にそうなくらい強調したいところ</em>< /strong></em></p>

ただし、以前説明したのと同じように[!シラバスの変更必要有!]emの袋もstrongの袋も破れちゃだめで、

<p> 普通<em>強調<strong>もっともっと強調</em> もっと強調</strong>普通</p>

こういう風に書いたらだめです。こんな感じで強調させていきたかったら、

<p> 普通<em>強調<strong>もっともっと強調</strong></em><strong>もっと強調</strong>普通</p>

このように書くといいですよ。

インライン要素について

今回a、em、strong要素について学びましたが、この性質は今まで習った他の要素の性質とは異なります。ですから、これらの要素をインライン要素といって前回習ったブロックレベル要素とは区別します。

段落や箇条書きと、このaやem、strong要素の違いについて比較してみましょう。

ブロックレベル要素は文章を基本的な構造として分類するものです。

ですから、ブロックレベル要素の始まりでは行が、新しい行に移っていると思います。

このように、文章をページの端から端まである長方形、つまりブロックで囲まれるように分類するという特徴があります。

これに対して、a、em、strong要素はブロックレベル要素が作った基本的な構造に肉付けする役割を持っています。

段落などの基本的な構造は誰がマークアップしても同じような仕上がりになりますが、リンクや強調といった肉付けは作者によってばらばらの結果になります。インライン要素は作者の主観によってつけられるというのもインライン要素の特徴の一つですね。

さて、このインライン要素ですが、インライン要素は全てブロックレベル要素の中に無いといけません。文章の骨組みの前に肉付けがあるとおかしいですからね。つまり、

<p><a href="終点のURI">始点の文字列</a></p>

はＯＫですが、

<a href="終点のURI"><p>始点の文字列</p></a>

こういうのはNGです。

作る順番としても、まずブロックレベル要素で骨組みを完成させてからインライン要素で肉付けさせるように心がけましょう。

この講座で、このページに初めて来られた方へ。本講座の目次があります。

注意：講座を書く順番が前後したため、講座４は未公開ですが内容は既習のものとして書いています。ご了承ください。

正式なHTML

「そろそろHTMLにも慣れて来たかな？」と思うのでここらで正しく読みやすいHTMLの書き方を学んでおきましょう。

「今までのは正しく無かったのか！」と怒られそうですね。確かに間違っては居ないのですが、ちょっとカタコトな感じのするHTMLです。

それに間違えがちなポイントもいくつかあるので、そのことにも触れて起きたいのです。

ブロックレベル要素はbody要素にいれよう！

body要素とは実際の文章の表示される部分そのものが含まれる要素です。

前々回で学んだブロックレベル要素、これらは全てbody要素の中に入っていなければなりません。そして、逆にbody要素のすぐ中にはブロックレベル要素しか入る事ができません。前回の講座でインライン要素はブロックレベル要素の中にだけ書くことを習いましたね。

title要素はhead要素にいれよう！

head要素は文章として直接表示するわけではない、文章に付随する情報が含まれます。

残ったtitle要素をhead要素の中に入れておきましょう。そして、head要素はbody要素よりも前に記述しておきましょう。

title要素はブラウザのタブや、タイトルバー、お気に入りの名前として表示されます。

html要素にhead要素とbody要素をいれよう！

そうして出来たhead要素とbody要素をhtml要素の中に入れます。すると、html要素の外に有るのはドキュメントタイプの宣言のみになるはずです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

 <head>
  <title>タイトル</title>
 </head>
 
 <body>
 <h1>見出し</h1>
  <p>本文</p>
 </body>
 
</html>

こんな感じですね。逆に、ここもhtml要素の中にはhead要素とbody要素しか入れることができません。

ところで、この例のhtml開始タグに変な属性がついてますね。なんか「lang="ja"」と書いてあります。これは、このhtmlが日本語の文章の属性をもっていますよ、ということです。

HTMLの論理構造

なぜこんなややこしいことをするのか。HTMLは文章に構造を持たせることで文章を意味づけしているからです。

HTMLの要素を、文章の一部分を入れる袋みたいなものだと考えましょう。

まず、大きなhtmlという袋があります。これを開けると、headとbodyというタグのついた袋があります。

headは文章の情報が入っている袋ですので、こっちの袋を先に開けてみましょう。titleの袋が入っていますね。titleの袋を開けてみるとこの文章が何について書かれているのか分かりました。

次に、bodyの袋を開けてみましょう。bodyには文章の本文が入っています。色々袋はありますが、とりあえず「ul」という袋が有りました。これは......覚えていますか？　「順序の関係のないリスト」が入っていますね。

liという袋を開けるとリストひとつひとつの内容が入っていました。

このよう、小さい袋が大きい袋にすっぽり収まっていく構造がHTMLの最大の特徴です

ですから次のような構造は、正しいHTMLとは認められません。

<p>なんか文章<a>なんか文章</p>なんか文章</a>

なんか袋が破れちゃってますね。こんな袋はカラスの格好の標的になってしまうので気をつけてください。

その他、説明しきれなかったこと

他にもちょこちょことしてはいけない決まりが有ります。これはきちんとルールを覚えようとすると大変なので、ここでは大ざっぱに「これを守っておけば大丈夫」という感じのルールを選んでおきます。

タグの要素名（titleとかpとかh1とか...）は半角小文字で書こう！

昔は大文字と小文字を区別しないことになってたので、大文字で説明してる先生も多いです。でも、最近新しくできたバージョンでは小文字で書くように決められていますので、みなさんは今から小文字で書く癖をつけておきましょう。

箇条書きは「ulやol」の中に「li」が入るけれど、その他のブロックレベル要素にはブロックレベル要素をいれない！

<p>なんか文章<p>何か文章</p>何か文章</p>

段落の中に段落が......よく分かりませんね。謎文章です。その他見出しの中に見出しだとかも謎文章です。こんな謎文章は書けません。

HTML中にコメントをつけることも出来ます。

<!-- コメントの内容 -->という記述でHTML中にコメントを書き込むことができます。

Another HTML-lint gatewayで文法チェック！

これだけの複雑なルールがあるのに全てを正確に書くなんてとてもない......。そんな心配もあるでしょうが大丈夫です。世の中にはAnother HTML-lint gatewayという素晴らしいサービスがあって、これはなんと自分が書いたHTMLをチェックして点数をつけてくれるのです。ただ、まだ今の知識では１００点を取ることは出来ません......。「よくできました」と評価がでたらまあOKでしょう！

章末問題

未制作。間違いを正して貰う問題でも作ろうかな......。

この講座で、このページに初めて来られた方へ。本講座の目次があります。

今回は料理のレシピを作ってみましょう！

料理のレシピを用意するのが面倒臭かったのでタケピーさんからネタをお借りしました。

今回マークアップするのはこんな文章です！

今日のごはん

品目

• 親子丼

材料

• 鳥ムネ肉60gくらい
• 玉ねぎ半分くらい
• 鶏卵一個
• ミックスベジタブル（冷凍食品）適量
• 水60cc
• 砂糖8g弱
• 醤油15cc
• めんつゆ少々

作り方

1. 肉と玉ねぎ切って、水とかとあわせて煮る
2. 溶き卵を入れて弱火
3. 火を止めて煮る
4. ご飯にかける
5. ウマー

費用･手間

案外楽に、安くできました。

その他

久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。

今回はこの前の文章とはひと味違いますね。

この前は「タイトル」と「段落」の２種類にしか分類しませんでした。今度は他に何が有るでしょうか？　「見出し」と「箇条書き」そして、「順番が関係する箇条書き」です。

つまり、見出しなどのタグの書き方を学べば、同じような文章が書けるようになるはずです。

というわけで、見出しのタグから学んでいきましょう！

見出しのタグ

見出しのタグには<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>の６種類があります。

あるページの中で一番大切な見出しにh1をつけます。通常h1の見出しはページに１つだけあって、タイトルと似たような内容になると思います。

そして、２番目に大きな見出し、３番目に大きな見出し......と順番にh2,h3......を使います。

今回の例では、「今日のごはん」がh1、「材料」「作り方」「手間･費用」「その他」がh2だと見ることができそうです。h3より小さい見出しはありませんね。

箇条書き

箇条書きなHTML用語では「リスト」といいます。......よくよく考えたら、日常用語でもリストですか。

そんでもって、リストには「順序無しリスト」と「順序付きリスト」とがあります。これらを一遍に解説していきましょう。

まず始めに、この２つのリストはそれぞれどんな時に使うかを見ていきましょう。

順序無しリストはその名の通り、順序の関係のない箇条書きに使います。この例では「材料」がそれに当たりますね。材料をそろえるのに順番は必要ありませんからね。

順序有りリストは、順番が大切な内容のリストを作るときに使います。この例では「作り方」がそうです。ご飯にかけて食べた後で弱火に掛けたら、えらことになりますよね。

それぞれのリストの使う場面が分かったところで、実際の使い方を見ていきましょう。

リストは、順序の有無に関わらず<li>と</li>で囲みます。その例は

   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>

と

   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>

です。

そして、この作業をした後に順序がない方の全体を<ul>と</ul>で、順序が有る方の全体を<ol>と</ol>で囲みます。例を見せましょう。

  <ul>
   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>
  </ul>

  <ol>
   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>
  </ol>

どうでしょうか。

ところで、<ul>と</ul>の間や、<ol>と</ol>の間には<li>と</li>で囲まれた部分しかあってはなりません。

<ul>
 <p>段落だよ～</p>
 <li>箇条書きだよ～その１！</li>
 <li>箇条書きだよ～その２！</li>
</ul>

こういうのは御法度です！

そして、品目にある「親子丼」ってやつですが、ここではリストが一個しかない「順序無しリスト」であると解釈しました。ここは段落だという解釈も有りだとは思うんですが、品目が二つ以上あるときもあったらどうでしょう？　箇条書きにしますよね。そして、２，３個品目が合ったとしても順序はそれほど大事ではありません。あ、もちろんレストランのコースなんかは別ですよ。

そして、残った部分「案外楽に、安くできました。」と「久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。」は前回出てきたただの段落ですから、<p>と&li;/p>で囲んで起きましょう。くり返し言いますが、文書の全ての部分を必ず何かの種類に分類してください。見出しでも箇条書きでも無いからって宙ぶらりんにしていてはいけません。まよったら段落って事にしておきましょう。

こうして、料理のレシピの全体像ができました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>今日のごはん</title>
 <h1>今日のごはん</h1>
  <h2>品目</h2>
  <ul>
   <li>親子丼</li>
  </ul>

 <h2>材料</h2>
  <ul>
   <li>鳥ムネ肉60gくらい</li>
   <li>玉ねぎ半分くらい</li>
   <li>鶏卵一個</li>
   <li>ミックスベジタブル（冷凍食品）適量</li>
   <li>水60cc</li>
   <li>砂糖8g弱</li>
   <li>醤油15cc</li>
   <li>めんつゆ少々</li>
  </ul>

 <h2>作り方</h2>
  <ol>
   <li>肉と玉ねぎ切って、水とかとあわせて煮る</li>
   <li>溶き卵を入れて弱火</li>
   <li>火を止めて煮る</li>
   <li>ご飯にかける</li>
   <li>ウマー</li>
  </ol>

 <h2>費用･手間</h2>
  <p>案外楽に、安くできました。</p>

 <h2>その他</h2>
  <p>久しぶりにご飯らしいものを作った。美味しいです。ただ、残った鶏肉と玉ねぎどうしようかな......また親子丼かな～。</p>

どうでしょう？　ところで、これを見てスペースや改行に気づいた人もいるかと思います。このように複雑にマークアップするときはまとまりごとに改行を入れたり、半角スペース（全角はだめ）を入れると見やすい場合もありますよ。この改行なんかは実際表示される時には全て無視されます。

では今回作ったこのファイルも「ウェブサイト作成講座」フォルダに「recipe1.html」という名前で保存しておきましょう。

作業が一通り終わったところで、少し解説をしておきましょう。

今まで「分類」とか「種類」だとか言ってきた、タイトル「title」や段落「p」、見出し「h1～h6」、リスト「li」、番号無しのリストを囲う「ul」、番号次のリストを囲う「ol」などは全て正式には「要素（element)」と言います。

文章とは「段落」や「見出し」や「箇条書き」といった要素が集まって成り立っているんだな～とイメージしてください。

そして、どんな要素が含まれているかをパソコンに教えてあげる道具が「タグ（tag）」です。お店の洋服についてるタグは店員さんに値段を教えてあげますが、それと同じでHTMLのタグはパソコンに要素を教えてあげているのです。

また、実は今まで教えてきたタグはtitle要素意外全て「ブロックレベル要素」という要素でした。ブロックレベル要素とは、見出しだとか段落みたいに文書全体をブロックにして分類する要素です。今はブロックレベル要素しか知らないから「？」という感じだと思います。でも次回「ブロックレベル要素」意外の要素も出てくるので、そのときにピンとくるはずです。乞うご期待！

今回のまとめ

1. 文章がどんな要素で出来ているか考えよう！
2. その要素を示すタグをつけよう！
3. タイトル、見出し、段落、順序のない箇条書き、順序のある箇条書きの要素を習ったよ！
4. そのうちタイトル以外の要素は「ブロックレベル要素」っていう名前。

章末問題

今日は沢山要素が出てきて結構忘れやすいとおもいます。問を解いて着実にマスターしていきましょう！

1. 問１．次の括弧の（ア）～（コ）に入る言葉や数字を書き入れなさい。

   文書は、タイトルや段落、見だし、箇条書きといった、様々な（ア）から構成されている。これら（ア）のうち、タイトル意外の物を（イ）という。文書中のどの部分がどの（ア）であるかをパソコンに示す為に（ウ）を用いる。

   見出し（ア）には（エ）から（オ）までの（カ）種類あって、その文書中で最も重要な見出しが（エ）、最も小さな見出しが（オ）である。

   また、段落要素はアルファベット（キ）を（ウ）の中に書き示し、同様にリストは（ク）と書き示す。そして、順序のある箇条書きはリスト全体を（ケ）要素のタグで、順序の無い箇条書きなリスト全体を（コ）要素のタグでくくる。

2. 問２．タケピーさんのブログの2008年9月19日のレシピをマークアップしてみよう。できたら、「ウェブサイト作成講座」フォルダに「recipe2.html」という名前で保存しておこう。（解答未制作）
3. 問３．前回の講座であなたが作ったレシピをマークアップしてみよう！できたら、「ウェブサイト作成講座」フォルダに「recipe3.html」という名前で保存しておこう。

本講座の目次があります。

僕があまりにもコンテンツを作らなすぎたため、最近ottfoekstに蔑まれてきました。というわけで、しぶしぶマークアップ講座を開始しようと思います。ただ不定期 ですので、記事が溜まるまで期待しない方がいいです。のちのちのコンテンツの下書きみたいなもんです。あと、初心者向けなことを考えてWindowsユーザーを想定しております。

はい、それでは早速第２回の講座に入って行きましょう。

その１．いきなり作るその前に

ちょっと準備をしましょう。デスクトップ（パソコンに起動したときに見える、壁紙があったりアイコンとかが並んでいる画面）に新しいフォルダを作ります。それでは、デスクトップを表示してください。

今見てるこのページが邪魔で見えないって方いますか？　もし、それで困っていたら、次の作業を最後まで読んでから試してみてください。まず、右上に３つ並んでいるボタンの左端を押せば隠れます。そして、画面下に「[未完成版]ウェブ...」と書いているところを押せば元に戻ります。他のウィンドウも同じ操作で隠したり戻したりできます。

それでは、デスクトップの何もないところにマウスを持って行ってマウスの右のボタンを押しましょう。するとメニューが出てきますので「新規作成」→「フォルダ」としフォルダを作ります。「新しいフォルダ」もしくは「新しいフォルダ（数字）」という名前のフォルダが出来ましたね？　そのサイトに「ウェブサイト作成講座」と名前をつけてください。パソコンに詳しい人はそのフォルダを好きなところに移動してくれて結構です。

これから作るファイルは全てそのフォルダに保存していきます。

その１．とりあえず１ページ作っちゃおう！

いきなり実践です。今回は作ったページを自分のパソコンで見るところまでやっちゃいましょう。公開は第５回ぐらいかな？　多分。

まあ、なんにしてもウェブサイトを作るには文章がいるわけです。今回は練習用に僕が書いておきました。

今日の日記

今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。

そして、朝ご飯（＝昼ご飯）に親子丼を食べました。

まあ、短いですがこんなのでいいです。これを、メモ帳にコピーしてみてください。

次に、この文章を次のように分類していきます。

<ここからタイトル>今日の日記<ここまでタイトル>

<ここから段落>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。<ここまで段落>

<ここから段落>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。<ここまで段落>

ええと、分類というのは分かりにくいでしょうが、例を見れば分かっていただけたでしょうか？　この記事では「タイトル」と「段落」だけですが、他にも「表」「箇条書き」とか色々あります。

ここで、重要なことを２つ言います。

まず、全てのウェブページにはタイトルを必ず一個つけないとけません。１個もなくても２個以上あってもダメです。世の中に何について書かれているか分からない文章ほど奇妙なものはありません。

そして、もう一つ。どこにも分類されていない、仲間はずれの部分を作ってはなりません。どこにも属さないということは、何にも意味を持たないということと同じですので文章中には無いはずです。デザイン上必要なものが含まれてるのかもしれませんが、それはまたいつか対処法を述べます。

これで文章を分類することができたのですが、これを機械の言葉に翻訳しましょう。難しいことではないので、安心してください。

<title>今日の日記</title>

<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>

<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>

この例を見ながら機械語を解読していきましょう。「<title>今日の日記</title>」に注目してください。タイトルにしたい文字の前後が<title>と</title>で書かれています。さっき分類したやつと見比べると<ここからタイトル>は<title>に、<ここまでタイトル>は</title>に変わってるだけのようです。

同じく段落のところも見ていきましょう。段落にあたる部分を<p>と</p>で囲んでいますね。pはparagraph（英語で段落）の省略です。

つまり、<分類>の部分からその分類の部分が始まっていて、</分類>のところでその分類の部分が終わっていることが分かります。ですから、<分類>を開始タグ、</分類>を終了タグといいます。そして開始タグと終了タグを合わせてタグといいます。

さて、これでウェブページを作る作業は殆ど終了したのですが、大きな問題が発生しました。<title>だとかごちゃごちゃと書きましたが、世の中には<分類>ほげほげ</分類>という形でパソコンにメッセージを与えるファイルがたくさん有るのです......。この書き方は色んなものを指定するのにかなり便利なのでね。

もしかしたら、このファイルがウェブページだと思ってくれないパソコンも有るかもしれません。なんとかして、このパソコンにこのファイルがウェブページであるということを宣言しないといけません。

そこで、文章の頭に

んでもって、さっきさらっとHTMLと書きました。そう、今書いた機械語はHTMLと呼ばれるものです。よく使う言葉ですので覚えておきましょう。そして、できあがりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>今日の日記</title>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>

このように、宣言やタグをつけることを文章をマークアップすると言います。

最後に、これを保存します。最初に作った「ウェブサイト作成講座」フォルダに「nikki1.html」という名前で保存してください。そして、できたファイルをダブルクリックして開きます。

今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。

そして、朝ご飯（＝昼ご飯）に親子丼を食べました。

と表示されていたら、成功です。次のステップに進みましょう。タグがそのまま表示されてたら、どこか設定がおかしいです。パソコンの設定（主に拡張子関連）を見直してみましょう。

その２．まとめ

• HTMLという言語をつかってウェブページをつくる
• HTMLには<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">というドキュメントタイプの宣言を一番最初に書いておく。
• 開始タグ<分類>と終了タグ</分類>を併せてタグという。
• タグを使って文章を分類する。
• titleタグは文章中に必ず一つ必要！
• タグによって分類されていない部分があってはならない。
• 文章にタグや宣言をつけることをマークアップするという。
  

その３．問題（やらなくても問題ないです）

問１．以下の文章を、今日習ったタグなどでマークアップしてウェブページを作ってみよう。

40000Hit!

本日Petankoのアクセスが40000ヒットを迎えることができました。

いつもご愛読ありがとうございます。

次はキリ番44444ヒットが待っています。だれが、この縁起の悪い数字をとり見事死亡フラグを立てることができるのでしょうか。楽しみですね。

では、みなさん！　はりきって44444を奪い合いましょう！

問２．自分の日記を書いてみよう。また、その日何を食べたかについて触れておこう。

問３．問１でつくった日記に自分でタグをつけてみよう。できたら、「ウェブサイト作成講座」フォルダに「nikki2.html」という名前で保存しておこう。（答えはまとめを参考に）

問４（予習）．日記で書いた食べ物について、作り方を簡単にメモっておこう（想像でもＯＫです）。パソコンに画像を取り込む技術のある人は、その食べ物の写真をとっておくとなおいいです。

～色々～
BlognWiki
～スキン～
BlognPlusスキン配布処
ゲットネット スキン
ゲットネット　スパム対策
林檎の花::BlognPlusスキン
http://www.cmswave.com/modules/mydownloads/viewcat.php?cid=6