はげちゃんの世界

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

初級講座5

中間ページの作成

あなたのパソコン内につくるウエブページは、表紙のホームページ、中間ページ、最終ページの3ページです。中間ページもコピー&ペーストで作成し、スタイルシートで指定した位置に写真を表示させます。あなたの思い出を入力するコーナーもあります。

1 中間ページの作成

 1-1 入力の準備

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

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

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

トップへ戻る

 1-2 見出しの入力

ショートカットキーを使って必要な操作をすばやく行います。コピーしたい範囲を選択して「Ctrl」を押しながら「C」を押すと、パソコンのクリップボードに選択した部分が読み込まれます。ショートカットキーは「Ctrl」+「C」と表現し、「+」は押しながらという意味です。次の「若菜集より 初戀」の文字を選択し左手の指でキーボードの「Ctrl」キーを押しながら「C」キーを押してコピーします。

若菜集より 初戀

エディタの「<div class="main">」で「<h1 id="site01">◆</h1>」の「◆」を選択し、左手の指でキーボードの「Ctrl」キーを押しながら「V」キーを押すと、コピーした範囲が貼り付けられます。これもショトカットキーで「Ctrl」+「V」と表現します。

では、左手の指でキーボードの「Ctrl」キーを押しながら「S」キーを押します。ショトカットキーは「Ctrl」+「S」と表現する「上書き保存」です。これを忘れると入力内容は消えてしまうので注意しましょう。「before」と「after」は次のようになります。

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

<div class="main">
<h1 id="site01">若菜集より 初戀</h1>
<p>◆</p>

「島崎藤村の魅力」のタブをクリックして画面を切り替え、ブラウザ最上段左側、データが保存されているサイトやフォルダーの場所を表示する長方形の窓にある「時計の針状回転の矢印(最新の情報に更新)」をクリックします。説明が長くなるので、以後は「最新の情報に更新」と表現します。ブラウザ画面は最新の状態に更新されて見出しが表示されました。

このように、説明を読むときは「はげちゃんの世界」のタブをクリックし、作業はエディタで行います。作業結果を確認するときは「島崎藤村の魅力」のタブをクリックしてから「最新の情報に更新」します。上部余白にある「タブ」の背景が明るくなっているのがブラウザに表示されている画面です。以後は、タブをクリックして画面を切り替えるときに、“はげちゃんの世界へ切り替え”“島崎藤村の魅力へ切り替え”と表現します。

トップへ戻る

 1-3 詩文の入力

はげちゃんの世界へ切り替え、島崎藤村の「若菜集より初戀」の詩文で、ソース本文の入力方法を練習します。まず、下の詩の「まだあげ始めし前髪の」から「問ひたまふこそこいしけれ」までを選択し、「Ctrl」+「C」でコピーします。

まだあげ初(そ)めし前髪(まへがみ)の
林檎(りんご)のもとに見えしとき
前にさしたる花櫛(はなぐし)の
花ある君と思ひけり

やさしく白き手をのべて
林檎をわれにあたへしは
薄紅(うすくれなゐ)の秋の実みに
人こひ初(そ)めしはじめなり

わがこゝろなきためいきの
その髪の毛にかゝるとき
たのしき恋の盃(さかづき)を
君が情(なさけ)に酌(く)みしかな

林檎畑の樹(こ)の下に
おのづからなる細道(ほそみち)は
誰(た)が踏みそめしかたみぞと
問ひたまふこそこひしけれ

エディタの詩「若菜集より初戀」の次にある「<p>◆</p>」の ◆を選択して「Ctrl」+「V」で貼り付け、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまいます。エディタのソースは、「はげちゃんの世界」と同様に4グループ16行で表示されています。

詩文の最終部分、終了タグ「</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを1行入れるとエディタの表示は次のようになります。

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

 まだあげ初(そ)めし前髪(まへがみ)の林檎(りんご)のもとに見えしとき前にさしたる花櫛(はなぐし)の花ある君と思ひけりやさしく白き手をのべて林檎をわれにあたへしは薄紅(うすくれなゐ)の秋の実みに人こひ初(そ)めしはじめなりわがこゝろなきためいきのその髪の毛にかゝるときたのしき恋の盃(さかづき)を君が情(なさけ)に酌(く)みしかな林檎畑の樹(こ)の下におのづからなる細道(ほそみち)は誰(た)が踏みそめしかたみぞと問ひたまふこそこひしけれ

トップへ戻る

 1-4 詩文の調整

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

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

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

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

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

トップへ戻る

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

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

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

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

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

トップへ戻る

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

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

<br>

上記の「<br>」を選択し「Ctrl」+「C」でコピーします。第1グループの1行目の最終文字の右にカーソルを表示し、「Ctrl」+「V」で貼り付けます。2行目と3行目も最終文字の右にカーソルを表示して「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>

では、左手の指でキーボードの「Ctrl」キーを押しながら「S」キーを押します。以後は、「「Ctrl」+「S」で上書き保存します。」といいます。これを忘れると入力内容は消えてしまうので注意しましょう。

トップへ戻る

 2-2 入力領域を増やす

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

「<p>◆</p>」の「</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと1回押してから「Ctrl」+「V」で貼り付けます。再び、「Entaer」キーをポンと1回押してから「Ctrl」+「V」で貼り付けます。これをもう一度繰り返して、「Ctrl」+「V」で貼り付け終えたら「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>
<p>◆</p>

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

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

トップへ戻る

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

いつも君と会う約束をしているリンゴ畑へ行くと、日本髪を結い上げたばかりの君の姿が見えました。君は見違えるような大人になって、花櫛の花に包まれているように思えました。

着物の袖からまぶしいくらいの白い手を差しのべて、君がリンゴをもぎ取ってくれたとき、まだ成熟していない薄桃色のリンゴがあなたと重なり、リンゴがいとおしく思えたのが恋の始まりでした。

恋しい気持ちが募って思わず漏れたため息が、すぐ目の前にあった君の髪の毛をゆらしたとき、君への恋心を溢れんばかりにたたえた盃を口へ運び、わたしは初恋の美酒に酔っていたのです。

リンゴ畑の木の下に、君と会うために踏みしめてできたほそい道を、だれが踏み固めたのでしょうと問いかける、あなたのいたずらっぽい言葉がいとおしいのです。

トップへ戻る

 2-4 現代訳の入力

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

  2-4-1 第1グループ

「3) はげちゃんの現代訳文」の、「いつも君と会う」から「思えました。」までを選択して「Ctrl」+「C」でコピーします。

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

トップへ戻る

  2-4-2 第2グループ

次に、「着物の袖」から「始まりでした」までを選択して「Ctrl」+「C」でコピーします。

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

トップへ戻る

  2-4-3 第3グループ

続いて「恋しい気持ち」から「酔っていたのです。」までを選択して「Ctrl」+「C」でコピーします。

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

トップへ戻る

  2-4-4 第4グループ

最後に、「リンゴ畑の」から「いとおしいのです。」までを選択して「Ctrl」+「C」でコピーします。

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

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

トップへ戻る

3 これも初恋

 3-1 中見出しの入力

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

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

<h2 id="site02">これも初恋</h2>
<p>◆</p>

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

トップへ戻る

 3-2 入力領域を増やす

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

<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 これも初恋の文

忘れられないのは、ドクトルジバゴという映画を見た日である。断られたらと悩みながら電話をかけ、初めて女性を映画にさそったのは21歳のとき。月賦で背広を買ったのはその前の日である。映画館の前に立ったのは一時間前。上下ともグレーでサイドベンツの背広を着て、豊かな黒髪は流行のホマードをぬり、給料の全額をふところにしてフィルターのついていない煙草の新生を吸っていた。

彼女は、どの道から来るだろうか。なんと挨拶しよう。どうお礼をいおうか・・・。どんな服装で現れるだろう。座席は真ん中に座りたい。並んで掛けられるだろうか。映画のあとはどこへ誘おう。何を食べようか・・。そのあとはどうしょう・・・と、空想はつきることなく広がっていく。そして、来た。美しかった。どもった。声がでなかった。キップを買った。並んで腰をかけた。暗くなった。

目の前に白銀におおわれたシベリアの広大な原野が現れた。妻がありながら他の女性に心を奪われるところまでくるとストーリーが嫌になってきた。襲いくる睡魔に逆らえず、場内が明るくなって目が覚めた。あれは半世紀も前のこと、物語はひとつも記憶にない。

トップへ戻る

 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 入力領域を増やす

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

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

<h2 id="site04">わたしの初恋</h2>
<p>◆</p>
<h2 id="site04">◆</h2>

<h2 id="site04">わたしの初恋</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>

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

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

トップへ戻る

 4-3 あなたの初恋文

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

実際に体験したことでも、実名の入力は避け、楽しかった思い出だけにしましょう。先ほど紹介した「これも初恋」のように、片思いだっていいじゃないですか。はげちゃんの片思いは73年間で20回以上あります。

初恋は、甘酸っぱくて淡いものと言われます。はかなく消えて実らぬものともいわれます。この歳になっても、心がときめいたときはどうしてよいか迷います。

トップへ戻る

 4-4 初恋文の入力

さあ、あなたの体験をつづってみましょう。思い出を文章にする練習です。

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

トップへ戻る

5 写真の表示

 5-1 写真について

「Web頁作成講座4」の「8.写真の表示」と同様の方法で、「初戀」の詩の右側に広く空いている部分へ写真を挿入します。詩の詠まれた当時の、日本髪を結ったばかりの若い女性の写真を掲載しても、初戀の雰囲気を伝えることができません。Web頁作成講座2で名前を「10_01.jpg」に変更して保存した「札幌環状線のリンゴ」の写真を使います。

トップへ戻る

 5-2 写真の縮小

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

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

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

マイドキュメントの「homepage」を開き、「shasin」フォルダーに保管させている写真の「10_01.jpg」をクリックします。下の余白に「大きさ:360×270」と表示されます。

トップへ戻る

 5-3 写真の読み込み

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

「img」タグに写真に関するデータを入力します。読み込むのは、「shasin」フォルダーの中「/」にある「10_01.jpg」という名前で、横幅が「360」で、縦幅が「270」の写真です。このデータを入力した「img」タグを選択して「Ctrl」+「C」でコピーします。

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

エディタの「ソース」を表示させ、「前にさしたる花櫛(はなぐし)の<br>」の右側をクリックしてカーソルを表示させ、選択して「Ctrl」+「V」で貼り付け、「Ctrl」+「S」で上書き保存します。これを忘れると入力内容は消えてしまうので注意しましょう。

前にさしたる花櫛(はなぐし)の<br><img src="shasin/10_01.jpg" width="360" height="270" class="right">

フロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。「島崎藤村の魅力」へ切り替えて入力結果を確認しましょう。

トップへ戻る

6 目次の入力

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

<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>

目次の「◆」には、中見出しとして作成したデータを入力します。これまでに中見出しとして作成したのは「若菜集より初戀 現代訳文 これも初恋 わたしの初恋」の4種類です。

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

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

フロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。「島崎藤村の魅力」へ切り替えて入力結果を確認しましょう。

お疲れ様でした。ホームページはこれで完成です。「若菜集より 椰子の實」と「藤村記念館の概要」は、最初の文字にインデントがありません。ソースで「<p class="nasi">」と指定すると、スタイルシートの「text-indent: 0em;」が適用されるのです。

トップへ戻る

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