日記を作ってみよう
今回から講座の本番ですね。改めてよろしくお願いします。それでは早速ですが今回の講義に移りましょう。
このページから、細かい操作はページの末尾につけることにしました。パソコンが不得意な方には不便かもしれませんが、こうしないとパソコンの操作を説明するページなのかウェブサイトの製作を説明するページなのか、趣旨が分からなくなってしまったのでこのような形とさせていただきます。
ウェブサイトを作るその前に
いきなり作る前にちょっと準備をしましょう。デスクトップに新しいフォルダを作ります。デスクトップとは、パソコンに起動したときに見える、壁紙があったりアイコンとかが並んでいたりする画面のことです。
それでは、デスクトップを表示してください。[ヘルプ：ウィンドウが邪魔でデスクトップが見えない場合の対処法]
次に、デスクトップにフォルダを作って「ウェブサイト作成講座」と名前をつけてください。[ヘルプ：フォルダの作り方名付け方] この講座ではこのフォルダがデスクトップにあることを想定して話を進めますが、パソコンに詳しい人は他の場所に移動させてもかまいません。
これから作るファイルは全部そのフォルダに保存していきます。
実践編
それでは実践編です。今回は作ったページを自分のパソコンで見るところまでやっちゃいましょう。
ウェブサイトを作るには文章がいるので、今回は練習用に僕が書いておきました。
今日の日記
今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。
そして、朝ご飯（＝昼ご飯）に親子丼を食べました。
短いですが最初なのでこんなのでいいでしょう。これをウェブページへと変えて行きます。
マークアップ
突然ですが、ここで完成形を紹介しておきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>今日の日記</title>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>
どうでしょうか。最初に訳が分からないものが付いていますが、皆さんが思っていたよりもシンプルなのではないかと思います。
それでは、とりあえずこの完成系までどうやって到達すれば良いのかを解説していきます。
まず、文章を次のように分類していきます。
タイトル：今日の日記
段落：今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。
段落：そして、朝ご飯（＝昼ご飯）に親子丼を食べました。
この文章にはタイトルが１つと、段落が２つ含まれていました。これら３つをこの文章の要素といいます。
ここで、重要なことを２つ言います。
まず、全てのウェブページにはタイトルを必ず一個つけないとけません。１個もなくても２個以上あってもダメです。世の中に何について書かれているか分からない文章ほど奇妙なものはありません。
そして、もう一つ。どこにも分類されていない、仲間はずれの部分を作ってはなりません。どこにも属さないということは、何にも意味を持たないということと同じですので文章中には無いはずです。（背景を付けたいとか言う場合はあるかもしれませんが、それは後述のように文章中以外の場所でつけます）
それでは、これを機械の言葉に翻訳しましょう。
タイトルの部分は<title>と</title>で囲みます。段落の部分は<p>と</p>とで囲みます。このときtitle、p、/、<、>はそれぞれ半角文字であることに注意してください[ヘルプ：半角文字と全角文字]。すると、以下のようになります。
<title>今日の日記</title>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>
そして仕上げです。文章の頭に<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
をつけます。これは、「この文章はHTMLのバージョン4.01」ですよという宣言です。先ほどのtitleやpなんかは良く使うので覚えて置いた方が良いですが、これはややこしすぎるので毎回コピペするに限ります。
おっと、さらっとHTMLとか言ってしまいましたね。今書いた機械語ですが、これをとHTMLと呼びます。そして、普通の文章をHTML化することをHTMLにマークアップするといいます。まあ、名前なんてウェブサイトを作るのにはどうでも良いんですが、作り方を調べたりするときには覚えておかないと何かと不便です。
そうしてできあがったHTMLが最初に見せた形となります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>今日の日記</title>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>
保存
これを、最初に作ったフォルダ「ウェブサイト作成講座」に「nikki1.html」という名前で保存してください。[ヘルプ：保存方法]
これをダブルクリックで開きます。すると、サンプルページの上二行のようになったのではないでしょうか。ただし、サンプルページは公開の都合上何ヶ所か改変してあります。もし、ちゃんと表示されてなかったらどこかがおかしいです。拡張子の表示や保存方法を読み直しましょう。
もしかしたら「あれ？」と思われたかもしれません。文章のタイトル「今日の日記」が見あたりませんね。でもウィンドウの上のほうを見て見てください。個人によるのですが、良く探すとウィンドウの一番上、「_」（最小化）や「×」（閉じる）の左のほうに書いてあるのではないでしょうか。そう、titleはそこに表示されるんですね。
本日のまとめ
- HTMLという言語をつかってウェブページをつくる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">という宣言を一番最初に書く- titleを必ず一つだけ書く。そして
<title>と</title>で囲む - 段落を
<p>と</p>とで囲む - pやtitleなどによって分類されていない部分があってはならない。
- 文章にpやtitle、宣言をつけることをマークアップするという。
問題
問1.本日の講座で行った内容を各自で実際に作業してみよう。
問2.以下の文章を、今日習ったことを使ってマークアップしてウェブページを作ってみよう。
40000Hit!
本日Petankoのアクセスが40000ヒットを迎えることができました。
いつもご愛読ありがとうございます。
次はキリ番44444ヒットが待っています。だれが、この縁起の悪い数字をとり見事死亡フラグを立てることができるのでしょうか。楽しみですね。
では、みなさん！ はりきって44444を奪い合いましょう！
問3.自分の好きな内容でウェブページを作ってみよう。
解答
問2の解答。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>40000Hit!</title>
<p>本日Petankoのアクセスが40000ヒットを迎えることができました。</p>
<p>いつもご愛読ありがとうございます。</p>
<p>次はキリ番44444ヒットが待っています。だれが、この縁起の悪い数字をとり見事死亡フラグを立てることができるのでしょうか。楽しみですね。</p>
<p>では、みなさん！ はりきって44444を奪い合いましょう！</p>
ただし、段落の解釈はそれぞれに任せます。
これでこの章の本文は終わりです。以下はこのページで行ったパソコン操作の詳しい説明ですので、不要な方は次の章へお進みください。
詳しい操作方法
ウィンドウが邪魔でデスクトップが見えない場合の対処法
ページが邪魔で見えないという場合、次の作業を最後まで読んでから試してみてください。まず、画面の右上に３つ並んでいるボタンの左端を押せば隠れます。
最小化ボタン
そして、画面下に「日記を作ってみよ...」と書いているところを押せば元に戻ります。他のウィンドウも同じ操作で隠したり戻したりできます。
このボタンを押すと最小化された状態から元に戻ります。
半角文字と全角文字
パソコンでは半角文字という縦横の長さの比が1:2である文字と、全角文字という文字の縦横の長さの比が1:1の文字を使います。
HTMLでは半角のアルファベットを使わないといけないのですが、パソコンでは半角と全角両方のアルファベットが用意されているので混乱のもとになります。
次の文字列をメモ帳にコピー＆ペーストしてみてください。
ｈｔｍｌ
＜＞
html
<>
そして、この文字の下に「html」、「<>」と打ち込んでみてください。下側二つと同じ長さで表示されていれば、半角で入力されていますので、そのままで大丈夫です。上側二つと同じ長さで表示されていれば、全角で入力されています。キーボードの左端、上から二つ目のキーである、「半角/全角キー」を押すと半角と全角が切り替わりますのでもう一度試して見てください。
フォルダの作り方名付け方
フォルダの作り方を説明します。デスクトップの何もないところにポインタ（矢印）を持って行きましょう。
アイコンのある場所はだめです。画像右のような何も無いところで右クリック
そこで右クリックをするとメニューが出てきますので「新規作成」→「フォルダ」と選んでしてフォルダを作ります。
「新しいフォルダ」もしくは「新しいフォルダ（数字）」という名前のフォルダが出来るはずです。この状態で名前が反転しているはずなので、このまま名前を付ける事も出来ます。
デスクトップ以外の場所に作りたい場合は、まずフォルダを作りたい場所を開きます。そこで同じように何もない場所で右クリックから、フォルダを作りましょう。
次に、フォルダの名前を変更しましょう。フォルダの上にポインタを重ねます。その状態で右クリックをするとメニューが出てきます。そのメニューの下の方に「名前の変更(M)」というのがあるのでそれを押します。すると名前をつけられるので「ウェブサイト作成講座」と名付けてください。フォルダ名はこのページからコピー＆ペーストしてもいいですね。
保存方法
作成した文章の保存方法を説明します。
メモ帳の左上にある「ファイル」を押してください。するとメニューが出てくるので「名前を付けて保存(A)...」を選択します。
Vistaの方で、左下に「フォルダの参照(B)」というのが有る方はそれを押してください。
するとウィンドウが少し大きくなり、左下が「フォルダの非表示」に変わります。元から「フォルダの非表示」になってる場合はそのままでかまいません。
そして、左に色々ごちゃごちゃしたのがありますが、そこから「デスクトップ」というのを探してクリックします。見つからない場合は、左のメニューの右端にあるバーを一番上にずらすと見つかると思います。
クリックすると、右側の広いところに「デスクトップ」の中身が表示されますので、「ウェブサイト作成講座」を探してクリックします。
その状態で「ファイル名(N):」のところに「nikki1.html」と打ち込んでください。その状態で「保存(S)」を押すと保存されます。
