はげちゃんの世界

人々の役に立とうと夢をいだき、夢を追いかけてきた日々

初級講座6

最終ページの作成

ウエブページの最後のページもほとんどはコピー&ペーストで作成し、スタイルシートで指定した位置に写真を表示させます。あなたの思い出を入力するコーナーもあります。ウエブページをつくろうと思った時がチャンスです。いつやるの、いまでしょ!

1 最終ページの作成

 1-1 入力の準備

連続してソースを入力するのでこのページをブラウザに表示させておきます。では、マイドキュメントから「homepage」フォルダーを開きます。

index.html  ホームページ(表紙)です
10.html   初戀のページです
20.html   千曲川旅情の歌のページになります
style.css   レイアウトをつくりました
shasin    5枚の写真が保管されています

「20.html」のファイルをダブルクリックで開きます。ブラウザ画面にスタイルシートでレイアウトされた画像が表示され、ブラウザ上段余白に「はげちゃんの世界」と並んで「島崎藤村の魅力」という「タブ」が表示されています。

トップへ戻る

 1-2 見出しの入力

ショートカットキーを使って必要な操作をすばやく行いましょう。次の太文字を選択して「Ctrl」+「C」キーでコピーします。

落梅集より 千曲川旅情の歌

エディタの「<div class="main">」で「<h1 id="site01">◆</h1>」の「◆」を選択し、「Ctrl」+「V」でコピーした範囲を貼り付け、「Ctrl」+「S」で「上書き保存」します。これを忘れると入力内容は消えてしまうので注意しましょう。「before」と「after」は次のようになります。

<div class="main">
<h1 id="site01">◆</h1>
<p>◆</p>

<div class="main">
<h1 id="site01">落梅集より 千曲川旅情の歌</h1>
<p>◆</p>

「島崎藤村の魅力」に切り替えて「最新の情報に更新」で入力結果を確認します。

トップへ戻る

 1-3 詩文の入力

「はげちゃんの世界」へ切り替え、島崎藤村の「落梅集より 千曲川旅情の歌」の詩文でソース本文の入力方法を練習します。つぎの詩の「小諸なる古城のほとり」から「草枕しばし慰む」までを選択して、「Ctrl」+「C」でコピーします。

小諸なる古城のほとり
雲白く遊子(いうし)悲しむ
緑りなすはこべは萌えず
若草も藉(し)くによしなし
しろがねの衾(ふすま)の岡邊(おかべ)
日に溶けて淡雪流る

あたゝかき光はあれど
野に滿つる香(かをり)も知らず
淺くのみ春は霞みて
麥(むぎ)の色わづかに靑し
旅人の群はいくつか
畠中の道を急ぎぬ

暮れ行けば淺間も見えず
歌哀し佐久の草笛
千曲川いざよふ波の
岸近き宿にのぼりつ
濁り酒濁れる飲みて
草枕しばし慰む

エディタの見出し「落梅集より 千曲川旅情の歌」の次にある「<p>◆</p>」の ◆を選択して「Ctrl」+「V」で貼り付け、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまいます。エディタのソースは、「はげちゃんの世界」と同様に3グループ18行で表示されています。

「島崎藤村の魅力」へ切り替えて「最新の情報に更新」すると、ブラウザの画面ではすべてが連続して表示されます。

 小諸なる古城のほとり 雲白く遊子(いうし)悲しむ 緑なすはこべは萌えずり 若草も藉(し)くによしなし しろがねの衾(ふすま)の岡邊(おかべ) 日に溶けて淡雪流る あたゝかき光はあれど 野に滿つる香(かをり)も知らず 淺くのみ春は霞みて 麥(むぎ)の色わづかに靑し 畠中の道を急ぎぬ 暮れ行けば淺間も見えず 歌哀し佐久の草笛 千曲川いざよふ波の 岸近き宿にのぼりつ 濁り酒濁れる飲みて 草枕しばし慰む

トップへ戻る

 1-4 詩文の調整

  1-4-1 終了タグの入力

エディタを選択して、キーボードを英数半角入力モードにします。エディタのソースを注意深く見ると、詩文の開始部分は半角のスペースに続いて開始タグの「<p>」があり詩文の最終部分には終了タグ「</p>」があります。

終了タグの「</p>」を選択して「Ctrl」+「C」でコピーします。詩文は3グループあり、第1グループの最終文字「淡雪流る」の右にカーソルを表示して「Ctrl」+「V」で貼り付けます。

第2グループも最終文字の右にカーソルを表示して「Ctrl」+「V」で貼り付けます。作業が完了したら「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまいます。

エディタの画面下部に、「◆ 62行目: /pに対応する開始タグが見つかりません。」など3行の注意事項と「文法チェック結果」が表示されますが無視してください。

トップへ戻る

  1-4-2 開始タグの入力

詩の先頭にある開始タグの「<p>」の「<p」と「>」の間をクリックしてカーソルを表示させます。スペースキーをポンと押すとダイアログが表示されます。「class」の文字を選択して「Enter」キーをポンと押すと「<p class="">」になります。

「<p class="">」の「"」と「"」の中央にカーソルを表示して、「nasi」と入力すると「<p class="nasi">」となります。「<p class="nasi">」を選択して「Ctrl」+「C」でコピーします。

第2と第3グループの開始文字の左にカーソルを表示して「Ctrl」+「V」で貼り付けます。作業が終了したら「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまいます。

開始タグが正しい位置に入力されると、エディタ画面下部の注意事項が消えました。これでエラーはなくなったことが分かります。

トップへ戻る

  1-4-3 改行タグの入力

では、詩の姿を整えるために改行タグ「<br>」を入力します。

<br>

上記の「<br>」を選択し「Ctrl」+「C」でコピーします。第1グループの1行目から5行目まで、1行ずつ最終文字の右にカーソルを表示して「Ctrl」+「V」で貼り付けます。第2グループと第4グループも同様にして貼り付けます。

詩文の最終部分「草枕しばし慰む</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを1行入れ、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。「島崎藤村の魅力」へ切り替え、「最新の情報に更新」して表示内容を確認します。

トップへ戻る

2 文字について

 2-1 中見出しの入力

詩に現れる旧漢字はパソコンで使えないため、旧漢字をどのように処理したかをお知らせします。エディタの「<div class="main">」で、「<h2 id="site02">◆</h2>」の「◆」を選択し、中見出しの文字をキーボードから全角文字で「旧漢字について」と入力します。「before」と「after」は次のようになります。

<h2 id="site02">◆</h2>
<p>◆</p>

<h2 id="site02">旧漢字について</h2>
<p>◆</p>

トップへ戻る

 2-2 お知らせ文の入力

パソコンでは旧漢字が使えないことをお断りする文章を用意しました。次の太文字の文章を選択して「Ctrl」+「C」でコピーします。

緑なすはこべは萌えず、とうたわれている「はこべ」に該当する漢字がありません。残念ながらパソコンでは表示させることができないので「はこべ」とひらがなで表記しました。

エディタの「<h2 id="site02">」で、「<p>◆</pr>」の「◆」を選択し、「Ctrl」+「V」で貼り付けます。お知らせ文の最終部分「表記しました。</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを1行入れ、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。

では、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。

トップへ戻る

3 現代訳文

 3-1 中見出しの入力

エディタの「<div class="main">」で「<h2 id="site03">◆</h2>」の「◆」を選択し、中見出しの文字をキーボードから全角文字で「詩の現代訳」と入力します。「before」と「after」は次のようになります。

<h2 id="site03">◆</h2>
<p>◆</p>

<h2 id="site03">詩の現代訳</h2>
<p>◆</p>

「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。

トップへ戻る

 3-2 入力領域を増やす

エディタ画面へ入力した中見出し「詩の現代訳」の1行下、「<p>◆</p>」の「◆」を選択して「Ctrl」+「C」でコピーします。

「<p>◆</p>」の「</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと1回押してから右クリックで貼り付けます。再び、「Entaer」キーをポンと1回押して右クリックで貼り付け終えたら、「Entaer」キーをポンと押して直下にスペースを1行入れます。「Ctrl」+「S」で上書き保存すると、「before」と「after」は次のようになります。

<h2 id="site03">詩の現代訳</h2>
<p>◆</p>
<h2 id="site04">◆</h2>

<h2 id="site03">詩の現代訳</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>

<h2 id="site04">◆</h2>

これは段落を複数増加させる方法で、Web頁のソース作成では何度も行われます。

トップへ戻る

 3-3 現代訳文(はげちゃん訳)

長野県小諸市にある小諸城の城址までくると、流れ去る白い雲のように雪が消えていると思ったわたしはあまりのことに立ち止った。緑に色づいたハコベはまだ芽を出したばかりで、若草のうえに腰を下ろすこともできない。雪に覆われている丘のあたりから淡雪が溶け出してちいさなせせらぎをつくっている。

日差しは少し暖かくなっていたが、野原に満ち溢れるような若草の香りは感じられず浅くただよっている春霞の中に秋まき小麦の葉がわずかに青く見える。複数の行商人たちがグループをつくるようにして、畑と畑のあいだにつくられた道を次の宿場へむかって急いでいた。

しだいに日が傾いて浅間山がかすんでくると、どこからかさびしげな草笛の曲が聞こえてきた。千曲川の進もうとして進まない波のように、わたしは岸辺に近い旅籠に宿をとった。失望感を慰めてくれる酒を飲みながら、はこべが萌えて若草の香りが野に満ちてくるのを待とう。

トップへ戻る

 3-4 現代訳の入力

はげちゃんの現代訳文は3グループあります。この文章を使って個々の文章の入力方法を練習します。

  3-4-1 第1グループ

「3) はげちゃんの現代訳文」の、「長野県小諸市にある」から「ちいさなせせらぎをつくっている。」までを選択して「Ctrl」+「C」でコピーします。

エディタのソース1行目、「<p>◆</p>」の「◆」を選択して「Ctrl」+「V」で貼り付けます。

トップへ戻る

  3-4-2 第2グループ

次に、「日差しは少し」から「急いでいた。」までを選択して「Ctrl」+「C」でコピーします。

エディタのソース2行目、「<p>◆</p>」の「◆」を選択して「Ctrl」+「V」で貼り付けます。

トップへ戻る

  3-4-3 第3グループ

続いて「しだいに日が傾いて」から「野に満ちてくるのを待とう。」までを選択して「Ctrl」+「C」でコピーします。

エディタのソース3行目、「<p>◆</p>」の「◆」を選択して「Ctrl」+「V」で貼り付け、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。この作業結果は次のようになります。

「島崎藤村の魅力」へ切り替え、「最新の情報に更新」して表示内容を確認します。

トップへ戻る

4 詩の思い出

 4-1 中見出しの入力

エディタの「<div class="main">」で「<h2 id="site04">◆</h2>」の「◆」を選択し、中見出しの文字をキーボードから全角文字で「詩の思い出」と入力します。「before」と「after」は次のようになります。

<h2 id="site02">◆</h2>
<p>◆</p>

<h2 id="site02">詩の思い出</h2>
<p>◆</p>

「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。

トップへ戻る

 4-2 入力領域を増やす

エディタ画面へ入力した中見出し「詩の思い出」の1行下、<p>◆</p>を選択して右クリックでコピーします。

<p>◆</p>の</p>の右側にカーソルを表示させ、「Entaer」キーをポンと1回押してから右クリックで貼り付け終えたら、「Entaer」キーをポンと押して直下にスペースを1行入れます。「Ctrl」+「S」で上書き保存すると、「before」と「after」は次のようになります。

<h2 id="site03">詩の思い出</h2>
<p>◆</p>
<h2 id="site04">◆</h2>

<h2 id="site03">詩の思い出</h2>
<p>◆</p>
<p>◆</p>

<h2 id="site04">◆</h2>

これは段落を複数増加させる方法で、Web頁のソース作成では何度も行われます。

トップへ戻る

 4-3 詩の思い出文

滑り止めとして私立高等学校の入学試験を受けた時のことです。国語の答案用紙を開くと、目に飛び込んできたのは「千曲川旅情の歌」でした。「小諸なる古城のほとり 雲白く遊子悲しむ」なんとリズミカルな素晴らしい詩だろうと、感激して何度も読み返しました。問題を見ると「作者名を書きなさい。」とあります。

ええっ、初めて出合った詩でした。無回答はまずいと思い「北原白秋」と書いて出しました。高等学校の国語の教科書、最初のページに現れたのは「千曲川旅情の歌」でした。作者は島崎藤村、補欠入学の意味が分かりました。おかげで忘れることのできない詩になりました。

トップへ戻る

 4-4 思い出文の入力

詩の思い出文は2グループあります。この文章を使って個々の文章の入力方法を練習します。

  4-4-1 第1グループ

「3) 詩の思い出文」の「滑り止めとして」から「とあります。」までを選択して「Ctrl」+「C」でコピーします。

エディタのソース1行目、「<p>◆</p>」の「◆」を選択して「Ctrl」+「V」で貼り付けます。

トップへ戻る

  4-4-2 第2グループ

つぎに、「ええっ、初めて」から「詩になりました。」までを選択し「Ctrl」+「C」でコピーします。エディタのソース2行目、「<p>◆</p>」の「◆」を選択して「Ctrl」+「V」で貼り付けます。

詩文の最終部分「詩になりました。</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを1行入れ「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。この作業結果は次のようになります。

トップへ戻る

5 あなたの思い出

 5-1 中見出しの入力

エディタの「<div class="main">」で「<h2 id="site04">◆</h2>」の「◆」を選択し、中見出しの文字をキーボードから全角文字で「わたしの思い出」と入力します。「before」と「after」は次のようになります。

<h2 id="site02">◆</h2>
<p>◆</p>

<h2 id="site02">わたしの思い出</h2>
<p>◆</p>

「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。

トップへ戻る

 5-2 入力領域を増やす

あなたの考えで決めることですが、取りあえず文章グループ(段落)を3つにします。エディタ画面へ入力した中見出し「わたしの初恋」の1行下、<p>◆</p>を選択して右クリックでコピーします。

<p>◆</p>の</p>の右側にカーソルを表示させ、「Entaer」キーをポンと1回押してから右クリックで貼り付けます。再び「Entaer」キーをポンと1回押して右クリックで貼り付け終えたら、「Entaer」キーをポンと押して直下にスペースを1行入れます。「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。

<h2 id="site04">わたしの思い出</h2>
<p>◆</p>
<h2 id="site04">◆</h2>

<h2 id="site04">わたしの思い出</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>

<h2 id="site06">◆</h2>

これは段落を複数増加させる方法で、Web頁のソース作成では何度も行われます。

トップへ戻る

 5-3 あなたの思い出文

文章グループ(段落)を3つ考えて入力します。段落が足りない場合は、「2) 入力領域を増やす」と同様の方法でいくつでも補充できます。

あなたは「千曲川旅情の歌」という詩と出合ったことあるとすれば、それはいつ、どのようなときでしたか。はじめて読んだ時の感想を書いてみましょう。

若いころ医師に「あなたは単なる大酒のみです」と言われたことがあるはげちゃんは、詩の最終部分の「濁り酒濁れる飲みて」を「失望感を慰めてくれる酒を飲みながら」と訳しました。あなたはどのように訳しますか。

トップへ戻る

 5-4 思い出文の入力

取りあえずつくった段落を埋めましょう。考えていても前へ進みません。

空欄になっている「<h2 id="site06">」から「<h2 id="site07">」の「<p></p>」までを選択し、「Delete」キーを1度ポン押して削除します。さらにスペースを1行削除するために、もう一度「Delete」キーをポンと押します。このとき「</div>」を削除しないよう注意してください。

トップへ戻る

6 写真の表示

 6-1 写真について

「Web頁作成講座5」の「5.写真の表示」と同様の方法で、「千曲川旅情の歌」の詩の右側に広く空いている部分へ写真を挿入します。小諸の古城は見たことがなく、4月下旬に撮影した雪解けの進む写真をさがしました。Web頁作成講座2で名前を「20_01.jpg」に変更して保存した「浅里川温泉街の春」の写真を使います。

また、思い出文の中でWeb頁作成講座2で名前を「20_02.jpg」に変更して保存した「すずらん丘陵公園入口」の写真「20_02.jpg」を使います。学校の正門のような感じがする写真はこれまでと異なる位置に表示します。

トップへ戻る

 6-2 写真の縮小

  6-2-1 1枚目の写真

タスクバー左端の「スタート」から「すべてのプログラム」で「アクセサリ」内にある「ペイント」ソフトを起動させます。ペイントソフトの上段メニューバー左端の「▼(下向き三角マーク)」をクリックして「開く」を選択し、「homepage」の「shasin」フォルダーから「20_01」写真をクリックして「開く」を選択すると、写真が読み込まれます。

メニューの左から二番目のグループにある「サイズの変更」をクリックすると「サイズ変更と傾斜」のダイアログが表示されます。サイズ変更の単位で「ピクセル」をクリックし、中央部分にある「縦横比を維持する」にチェックが入っているのを確認してから「水平方向」の窓の数字「500」を「360」に修正します。

自動的に垂直方向は「375」から「270」に変更されました。「OK」をクリックし、上段メニューバー左端の「▼(下向き三角マーク)」をクリックして「上書き保存」を選択します。この操作で「20_01」の写真の大きさは、「500×375」から「360×270」へ縮小されました。

トップへ戻る

  6-2-2 2枚目の写真

再び「ペイント」ソフトを起動させます。ペイントソフトのメニューバー左端の「▼(下向き三角マーク)」をクリックして「開く」を選択し、「homepage」の「shasin」フォルダーから「20_02」写真をクリックして「開く」を選択すると、写真が読み込まれます。

メニューの左から二番目のグループにある「サイズの変更」をクリックすると「サイズ変更と傾斜」のダイアログが表示されます。サイズ変更の単位で「ピクセル」をクリックし、中央部分にある「縦横比を維持する」にチェックが入っているのを確認してから「水平方向」の窓の数字「375」を「96」に修正します。

自動的に垂直方向は「500」から「129」に変更されました。「OK」をクリックし、上段メニューバー左端の「▼(下向き三角マーク)」をクリックして「上書き保存」を選択します。この操作で「20_02」の写真の大きさは、「375×500」から「96×129」へ縮小されました。

トップへ戻る

 6-3 写真の読み込み

  6-3-1 1枚目の写真

写真を読み込むときは「img」タグを使います。「img」タグに、「写真の保管してある場所、写真の名前、写真の横幅、写真の縦幅、(写真を表示しない設定者のために写真の簡単な説明、)写真の表示する位置」などのデータを入力します。

1枚目の写真のデータを「img」タグに入力すると次のようになります。データを入力したイメージタグを「Ctrl」+「C」でコピーします。

<img src="shasin/20_01.jpg" width="360" height="270" class="right">

エディタの「ソース」を表示させ、「緑なすはこべは萌えず<br>」の右側をクリックしてカーソルを表示させ、「Ctrl」+「V」で貼り付けます。エディタのソースは次のようになります。

緑なすはこべは萌えず<br><img src="shasin/10_01.jpg" width="360" height="270" class="right">

トップへ戻る

  6-3-2 2枚目の写真

2枚目の写真は、文章の中に挿入して段落の左側に表示させます。写真のデータを「img」タグに入力し、表示位置を「left」にすると次のようになります。データを入力したイメージタグを「Ctrl」+「C」でコピーします。

<img src="shasin/20_02.jpg" width="96" height="129" class="left">

「img」タグを挿入する位置は、「4.私の思い出」の「なんとリズミカルな素晴らしい詩だろうと、感激して何度も読み返しました。」という文章の「詩だろうと、感激して」の読点「、」右側をクリクして「Ctrl」+「V」で貼り付けます。

「小諸なる古城のほとり 雲白く遊子悲しむ」なんとリズミカルな素晴らしい詩だろうと、<img src="shasin/10_01.jpg" width="360" height="270" class="left">感激して何度も読み返しました。」

「Ctrl」+「S」で上書き保存してから、「島崎藤村の魅力」へ切り替えて入力結果を確認しましょう。

トップへ戻る

7 目次の入力

最後に入力するのはページ内の「目次」です。エディタに表示された「目次」のソースは次のようになっています。

<p>目次</p>
<ul>
<li><a href="#site01">◆</a></li>
<li><a href="#site02">◆</a></li>
<li><a href="#site03">◆</a></li>
<li><a href="#site04">◆</a></li>
<li><a href="#site05">◆</a></li>
<li><a href="#site06">◆</a></li>
<li><a href="#site07">◆</a></li>
</ul>

目次の「◆」には、中見出しとして作成したデータを入力します。これまでに中見出しとして作成したのは「若菜集より千曲川旅情の歌 旧漢字について 詩の現代訳 詩の思い出 わたしの思い出」の5種類です。

不要となる「<li><a href="#site06">」から「<li><a href="#site07"></a></li>」までを選択して、「Delete」キーをポンと1度押して削除します。さらにスペースを1行削除するために、もう一度「Delete」キーをポンと押します。

中見出しを順に入力すると次のようになります。

<p>目次</p>
<ul>
<li><a href="#site01">若菜集より千曲川旅情の歌</a></li>
<li><a href="#site02">旧漢字について</a></li>
<li><a href="#site03">詩の現代訳</a></li>
<li><a href="#site04">詩の思い出</a><

「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。「若菜集より千曲川旅情の歌」には、最初の文字にインデントがありません。ソースで「<p class="nasi">」と指定すると、スタイルシートの「text-indent: 0em;」が適用されるのです。

ウエブページはこれで完成です。ブラウザを終了してマイドキュメントから「homepage」フォルダーを開きます。「index.html」をダブルクリックでホームページを開き、表示された内容を確認した後は、ナビゲーションのリンクや、メニューのリンクが正常に働くことを確認しましょう。

講師が作成した「 島崎藤村の魅力 」と比較しましょう。間違えていなければ、あなたが作成したウエブページと同一です。異なっている部分があれば、それを発見して修正することで実力が付きます。

さあ、あなたにウエブページ作成の基礎が身に付きました。独自にあなたのウエブページを作成して、インターネットに情報を発信しましょう。東進ハイスクールと東進衛星予備校国語科の林修専任講師はおっしゃいます。「いつやるの、いまでしょ!」

トップへ戻る

          「 初級講座5 」 ←  初級講座6