はげちゃんの世界

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

初級講座4

ホームページの作成

ウエブページの原版をコピーして、ウエブページの表紙にあたるホームページを作成します。ほとんどはコピー&ペーストで作成し、スタイルシートで指定した位置に写真を表示させます。写真を使う場合のマナーである著作権についても知っていただきます。

1 紹介文の入力

 1-1 入力の準備

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

hasin    4枚の写真保管
index.html ホームページ(表紙)
10.html   初戀のページ
20.html   千曲川旅情のページ
style.css  レイアウト用

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

Webページ原版作成で共通データの入力を完了した結果は右端の縦長画面で表示されました。「ソース」は同じでも、スタイルシートでレイアウトした結果は右上の四角い画面になります。このような状態に表示されなければ、スタイルシートのどこかに間違いがあります。慎重に再確認しましょう。

スタイルシートでレイアウトした「島崎藤村の魅力」と表示されている画面の何もないところをポイントして、「ツールバー」の「表示」から「ソース」を選択すると、エディタが起動して「ソース」が表示されます。

トップへ戻る

 1-2 箇条書きの紹介文

  1-2-1 大見出しの入力

エディタに表示されたソースの「main」で大見出しの「<h1 id="site01">」と「</h1>」の間の「◆」を選択し、キーボードから全角文字で「島崎藤村とは」と入力します。「before」と「after」は次のようになります。

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

<div class="main">
<h1 id="site01">島崎藤村とは</h1>
<p>◆</p>

メニューバーのファイルの下、左から三番目にある四角形をした「フロッピーディスクのアイコンをポイントすると「保存」と表示されるのでクリックします。これも「上書き保存」の方法で、「フロッピーのアイコンで保存」と略します。これを忘れると入力内容は消えてしまうので注意しましょう。

ブラウザ最上段のタブが明るくなっているのは「島崎藤村の魅力」です。タブの背景が「明るく」なっているのは、見出しが選択されてその内容が表示されているからです。この状態で作業結果を確認しましょう。

ブラウザの最上段左側、データが保存されているサイトやフォルダーの場所を表示する長方形の窓の右端、「時計の針状回転の矢印(ポイントすると「最新の情報に更新」と表示。)」をクリックします。ブラウザに表示されている「島崎藤村の魅力」画面は最新の状態に更新され、「島崎藤村とは」という文字が表示されました。

トップへ戻る

  1-2-2 紹介文のコピー

エディタに連続してソースを入力するので、「はげちゃんの世界」のタブをクリックして画面を切り替えます。

ホームページを開いたとき最初に目に入る文章として「島崎藤村の紹介文」を用意しました。次の文章の「島崎」から「とりあげます。」までを選択して、マウスを右クリックして「コピー」を選択します。この方法で「コピー」するときは「右クリックでコピー」と表現します。メニューバーの「編集」から「コピー」を選択する方法と同じ結果になります。

島崎藤村は、明治5年(1872年)に現在の長野県中津川市馬篭で生まれ、明治から大正・昭和の初期にかけて活躍した詩人で小説家です。明治30年に最初の詩集「若菜集」を発表し、その後「一葉集・夏草・落梅集」などの詩集を発表しました。結婚後は東京へ移住し、子供が相次いで病死する中で書き上げた長編小説「破戒」は、新しい個人の目覚めとその目覚めの悲しみを定着させた長編として、同情と共感を持って高く評価されました。「島崎藤村の魅力」では、代表的な詩のみをとりあげます。

トップへ戻る

  1-2-3 紹介文の貼り付け

エディタで作業をするときは、エディタの上部余白の何も表示されていないところをクリックして作業を開始することを知らせます。以後この説明を省略して、すぐ作業の説明をしますので注意してください。

エディタが表示している「ソース」の「<p>と</p>」の間の「◆」を選択し、マウスを右クリックして「貼り付け」を選択します。この方法で「貼り付け」るときは「右クリックで貼り付け」と表現します。メニューバーの「編集」から「貼り付け」を選択する方法と同じ結果になります。

フロッピーのアイコンで保存すると、「before」と「after」は次のようになります。

<h1 id="site01">島崎藤村とは</h1>
<p>◆</p>

<h1 id="site01">島崎藤村とは</h1>
<p>島崎藤村は、明治5年(1872年)に現在の長野県中津川市馬篭で生まれ、明治から大正・昭和の初期にかけて活躍した詩人で小説家です。明治30年に最初の詩集「若菜集」を発表し、その後「一葉集・夏草・落梅集」などの詩集を発表しました。結婚後は東京へ移住し、子供が相次いで病死する中で書き上げた長編小説「破戒」は、新しい個人の目覚めとその目覚めの悲しみを定着させた長編として、同情と共感を持って高く評価されました。「島崎藤村の魅力」では、代表的な詩のみをとりあげます。</p>

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

説明を読むときは「はげちゃんの世界」のタブをクリックし、作業はエディタで行います。作業結果を確認するときは「島崎藤村の魅力」のタブをクリックしてから「最新の情報に更新」します。

上部余白にある「タブ」の背景が明るくなっているのがブラウザに表示されている画面です。以後は、タブをクリックして画面を切り替えるときに、「はげちゃんの世界へ切り替え」「島崎藤村の魅力へ切り替え」と表現します。

エディタ画面で、文章を貼り付け終えた部分の右側「詩のみをとりあげます。</p>の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを1行入れるとエディタの表示は次のようになります。

エディタの画面表示

トップへ戻る

2 詩の入力

 2-1 詩の表題

中見出は「落梅集より 椰子の實」とします。では、次の「落梅集より 椰子の實」を選択して右クリックでコピーします。

落梅集より 椰子の實

エディタに表示されているソースの「<h2 id="site02">」と「</h2>」の間の「◆」を選択して、右クリックで貼り付け、フロッピーのアイコンで保存します。これを忘れると入力内容は消えてしまいます。すると、「before」と「after」は次のようになります。

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

<h2 id="site02">落梅集より 椰子の實</h2>
<p>◆</p>
<h2 id="site03">◆</h3>

トップへ戻る

 2-2 詩文の入力

はげちゃんの世界へ切り替え、島崎藤村の落梅集より「椰子の實」の詩文で、ソース本文の入力方法を練習します。まず、下の詩の「名も知らぬ」から「歸(かえ)らむ」までを選択し、右クリックでコピーします。

名も知らぬ遠き島より
流れ寄る椰子の實一つ

故郷(ふるさと)の岸を離れて
汝(なれ)はそも波に幾月

舊(もと)の樹は生ひや茂れる
枝はなほ影をやなせる

われもまた渚を枕
孤身(ひとりみ)の浮寝(うきね)の旅ぞ

實をとりて胸にあつれば
新たなり流離(りゅうり)の憂(うれい)

海の日の沈むを見れば
激(たぎ)り落つ異郷の涙

思いやる八重の汐々(しおじお)
いづれの日にか國(くに)に歸(かえ)らむ

エディタの「<p>◆</p>」の◆を選択して右クリックで貼り付け、フロピィーのアイエディタの画面表示コンで保存します。これを忘れると入力内容は消えてしまいます。

エディタの詩のソースは「はげちゃんの世界」と同様に14行で表示されています。

エディタ画面の文字は「青・赤・緑・黒」に色分けされて見やすくなっています。これがエディタのすばらしいところですが、これはまだ序の口です。

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

名も知らぬ遠き島より 流れ寄る椰子の實一つ 故郷(ふるさと)の岸を離れて 汝(なれ)はそも波に幾月 舊(もと)の樹は生ひや茂れる 枝はなほ影をやなせる われもまた渚を枕 孤身(ひとりみ)の浮寝(うきね)の旅ぞ 實をとりて胸にあつれば 新たなり流離(りゅうり)の憂(うれい) 海の日の沈むを見れば 激(たぎ)り落つ異郷の涙 思いやる八重の汐々(しおじお) いづれの日にか國(くに)に歸(かえ)らむ

エディタとブラウザの画面は異なっています。「コピー」と「貼り付け」以外に、文章表示を調整する「タグ」の入力が必要になりました。

トップへ戻る

 2-3 ソースの調整

  2-3-1 終了タグの入力

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

終了タグの「</p>」を選択して右クリックでコピーします。詩文は7グループあり、第1グループの最終文字「一つ」の右にカーソルを表示して、右クリックで貼り付けます。

第2グループから第6グループまで、順に最終文字の右にカーソルを表示して右クリックで貼り付けます。6ヶ所すべての作業が完了したら、フロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。

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

トップへ戻る

  2-3-2 開始タグの入力

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

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

第2グループから第7グループまで順に、開始文字の左にカーソルを表示して右クリックで貼り付けます。6ヶ所すべての作業が終了したら、フロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。

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

トップへ戻る

  2-3-3 改行タグの入力

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

<br>

上記の「<br>」を選択し、右クリックでコピーします。第1グループから順に「<p class="nasi">」の行の最終文字の右にカーソルを表示し、右クリックで貼り付けます。第7グループまでの作業を完了させます。

エディタの画面は右のようになっています。入力に間違いがないか確認してからフロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。

「島崎藤村の魅力」へ切り替えて入力結果を確認しましょう。「2) 詩文の入力」の詩と同様に表示されたら間違いはありません。

エディタ画面で、文章を貼り付け終えた部分の右側「歸(かえ)らむ</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを1行入れます。

トップへ戻る

3.詩の解説

 3-1 中見出しの入力

エディタの「<h2 id="site03">◆</h2>」の間の◆を選択し、中見出しの文字をキーボードから全角文字で「好奇心から想像へ」と入力します。「before」と「after」は次のようになります。

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

<h2 id="site03">好奇心から想像へ</h2>
<p>◆</p>
<h2 id="site04">◆</h2>

入力内容に間違いがないか確認し、フロッピーのアイコンで保存します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

 3-2 入力領域を増やす

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

<p>◆</p>の</p>の右側にカーソルを表示させ、「Entaer」キーをポンと1回押してから右クリックで貼り付けます。再び「Entaer」キーをポンと1回押してから右クリックで貼り付けます。これをもう一度繰り返して右クリックで貼り付け終えたら、「Entaer」キーをポンと押して直下にスペースを1行入れます。右のエディタ画面のようになったのを確認して、フロッピーのアイコンで保存します。

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

トップへ戻る

 3-3 詩を生み出した背景

砂浜に流れ着いた椰子の實を拾い上げて、詩を考えている和服姿の藤村を想像できますか。椰子の實が流れ着いたのは愛知県渥美半島の伊良湖(いらこ)岬で、芳香のある白い花を咲かせる「はまゆう」や淡い桃色に咲く「はまひるがお」、青紫色の花を多数つける「はまごう」の群落もあります。このように美しい花が咲き誇る伊良湖岬へ、藤村は行ったことがないのです。藤村は流れ着いた椰子の實を見ていないのです。

民俗学者の柳田国男が、愛知県の伊良湖岬で病後の療養中に流れ着いた椰子の実を拾いました。この体験談を聞いた藤村が「その話は私がいただきますよ」と了解を得て、想像しながら詩をつくったことが柳田国男の著作に記録されています。柳田国男の話した椰子の実に好奇心を抱き、藤村は想像をめぐらしたのです。

米国の臨床心理学者トッド・カシュダン著「頭のいい人が“脳のため”に毎日していること(三笠書房)」を翻訳した脳科学者の茂木健一郎博士が、訳者のことばとして「どんな世界においても抜きんでる人の共通点を上げるとしたら、何よりも好奇心があること」と述べています。

藤村は流れ着く椰子の實を想像して詩をつくりました。あなたは流れ着いた椰子の實を拾い上げる和服姿の藤村を想像しました。好奇心を大切にしましょう。

トップへ戻る

 3-4 説明文の入力

詩を生み出した背景文は4グループあります。この文章を使って個々の文章の入力方法を練習します。

3-4-1 第1グループ

「3) 詩を生み出した背景」の説明文、「砂浜に」から「見ていないのです。」までを選択し、右クリックでコピーします。

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

3-4-2 第2グループ

次に、「民俗学者の」から「めぐらしたのです。」までの全文を選択し、右クリックでコピーします。

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

3-4-3 第3グループ

続いて、「米国の臨床心理学者」から「述べています。」までの全文を選択し、右クリックでコピーします。

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

3-4-4 第4グループ

最後のグループ、「藤村は流れ着く」から「大切にしましょう。」までの全文を選択し、右クリックでコピーします。

エディタのソース4行目の「<p>◆</p>」の◆を選択して、右クリックで貼り付けます。


 上のエディタ画面のようになったのを確認して、フロッピーのアイコンで保存します。

トップへ戻る

4 あなたの推理は

 4-1 中見出しの入力

エディタの<h2 id="site04">と</h2>の間に、中見出しの文字をキーボードから全角文字で「あなたの推理は」と入力します。「before」と「after」は次のようになります。

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

<h2 id="site04">あなたの推理は</h2>
<p>◆</p>
<h2 id="site05">◆</h2>

入力内容に間違いがないか確認し、フロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

 4-2 入力領域を増やす

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

<p>◆</p>の</p>の右側にカーソルを表示させ、「Entaer」キーをポンと1回押してから右クリックで貼り付けます。再び、「Entaer」キーをポンと1回押してから右クリックで貼り付け、「Entaer」キーをポンと押して直下にスペースを1行入れます。右のエディタ画面のようになったのを確認して、フロッピーのアイコンで保存します。

トップへ戻る

 4-3 推理はどちら

名前も知らない島で大きな椰子の木に実がなりました。ある日のこと、ひとつの実が落ちて波にさらわれました。椰子の実は何か月も海を漂い、どこか分からない砂浜にたどり着きました。水平線に日の沈む姿を見ると、同じときに生まれた兄弟のような椰子の実を思い出して涙が流れます。

わたしはたった一人であてもなく旅をしています。砂浜にたどり着いた椰子の実を抱きかかえると、椰子の実のようにあてもなくさすらう辛さがひしひしと感じます。水平線に日の沈む姿を見ると、生まれ育った故郷が懐かしくなり涙がこみあげてきます。

「いづれの日にか國(くに)に歸(かえ)らむ」の意味を、あなたはどう推理するでしょう。「いつの日か祖国の日本へ帰ろう。」でしょうか、それとも「いつの日か、生まれ育った故郷へ帰ろう。」でしょうか。

トップへ戻る

 4-4 推理文の入力

詩を生み出した背景文は3グループあります。この文章を使って個々の文章の入力方法を練習します。

4-4-1 第1グループ

「2) あなたの推理は」の説明文、「名前も知らない島」から「涙が流れます。」までを選択して右クリックでコピーし、エディタのソース1行目の「<p>◆</p>」の◆を選択して、右クリックで貼り付けます。

4-4-2 第2グループ

次に、「わたしはたった一人」から「涙がこみあげてきます。」までの全文を選択して右クリックでコピーし、エディタのソース2行目の「<p>◆</p>」の◆を選択して、右クリックで貼り付けます。

4-4-3 第3グループ

続いて、「いづれの日にか」から「でしょうか。」までの全文を選択して右クリックでコピーし、エディタのソース3行目の「<p>◆</p>」の◆を選択して、右クリックで貼り付けます。
 フロッピィのアイコンで保存します。「島崎藤村の魅力」に切り替えて「最新の情報に更新」して内容を確認します。

トップへ戻る

5 転載について

 5-1 中見出しの入力

エディタの<h2 id="site05">と</h2>の間に、中見出しの文字をキーボードから全角文字で「転載について」と入力します。「before」と「after」は次のようになります。

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

<h2 id="site05">転載について</h2>
<p>◆</p>
<h2 id="site06">◆</h2>

入力内容に間違いがないか確認し、フロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

 5-2 転載文

青空文庫の図書カード№1508「若菜集 (底本:藤村詩集、出版社:新潮文庫、新潮社)」より「初戀」、青空文庫の図書カード№18352「藤村詩抄 (底本:藤村詩抄、出版社:岩波文庫、岩波書店)」より「千曲川旅情の歌、椰子の實」を転載させていただきました。

トップへ戻る

 5-3 転載文の入力

「2) 掲載する詩」の文章でソース本文の入力方法を練習します。「青空文庫の」から「転載させていただきました。」までの全文を選択し、右クリックでコピーします。

エディタのソースで「<p>◆</p>」の「◆」を選択して、右クリックで貼り付けます。エディタ画面で、文章を貼り付け終えた部分の右側「転載させていただきました。</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを1行入れます。

ブラウザの「島崎藤村の魅力」に切り替えて「最新の情報に更新」すると、すべてが連続して表示されます。「島崎藤村の魅力」へ切り替えて入力結果を確認しましょう。

トップへ戻る

6 著作権について

 6-1 中見出しの入力

エディタの「<h2 id="site06">」と「</h2>」の間の「◆」に、中見出しの文字をキーボードから全角文字で「著作権について」と入力します。「before」と「after」は次のようになります。

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

<h2 id="site06">著作権について</h2>
<p>◆</p>
<h2 id="site07">◆</h2>

入力内容に間違いがないか確認し、フロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

 6-2 入力領域を増やす

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

「<p>◆</p>の</p>」の右側にカーソルを表示させ、「Entaer」キーをポンと1回押してから右クリックで貼り付けます。再び「Entaer」キーをポンと1回押してから右クリックで貼り付け、さらに「Entaer」キーをポンと押してから右クリックで貼り付け、もう一度ポンと「Entaer」キーを押して直下にスペースを1行入れます。フロッピーのアイコンで保存します。「before」と「after」は次のようになります。

<h2 id="site06">著作権について</h2>
<p>◆</p>
<h2 id="site07">◆</h2>

エディタの画面表示<h2 id="site06">著作権について</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>

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

トップへ戻る

 6-3 マナー文

著作権の保護期間は、原則として「著作者の生存期間及び著作者の死後50年」と決められています。島崎藤村は昭和18年8月22日に71歳で逝去され、藤村の作品に関する著作権と藤村の肖像権、藤村の写真撮影者に属する著作権も消滅しています。

島崎藤村に関する資料類の原本の多くは「財団法人藤村記念郷」が管理し、岐阜県中津川市馬篭の「藤村記念館」に展示されています。藤村記念館に展示されている資料や写真類は「財団法人藤村記念郷」が管理する財産です。

インターネット上に藤村記念館で撮影した写真や、藤村記念館のウエブページから複写したと思われる写真を見かけます。「藤村記念館」には「資料の撮影禁止」表示、ホームページなどには「著作権表示」があり、写真などの利用は「財団法人藤村記念郷」の文書による承認が必要となります。この手続きを怠ると、複製権や公衆送信権の侵害で損害賠償を求められても意義は申し立てできません。

写真の複製利用防止方法と閲覧者のマナーが確立されていないため、このウエブページには島崎藤村に関連する写真を掲載していません。また、「はげちゃんの世界」の「Web 頁作成講座」に掲載している「講座の内容と掲載している写真類」の著作権ははげちゃんにあります。あなたのパソコンで「ウエブページ作成」の練習をする目的での利用を承認していますが、他の目的に使用することはご遠慮願います。

トップへ戻る

 6-4 マナー文の入力

詩を生み出した背景文は4グループあります。この文章を使って個々の文章の入力方法を練習します。

6-4-1 第1グループ

「2) マナー文」の説明文、「著作権の保護期間」から「消滅しています。」までを選択して右クリックでコピーし、エディタのソース1行目の「<p>◆</p>」の「◆」を選択して右クリックで貼り付けます。

6-4-2 第2グループ

次に、「島崎藤村に」から「財産です。」までを選択して右クリックでコピーし、エディタのソース2行目の「<p>◆</p>」の「◆」を選択して、右クリックで貼り付けます。

6-4-3 第3グループ

続いて、「インターネット上に」から「インターネット上に」までを選択して右クリックでコピーし、エディタのソース3行目の「<p>◆</p>」の「◆」を選択して右クリックで貼り付けます。

6-4-4 第4グループ

最後のグループ、「インターネット上に」から「インターネット上に」までを選択して右クリックでコピーし、エディタのソース4行目の「<p>◆</p>」の「◆」を選択して右クリックで貼り付けます。

エディタの画面表示

フロッピィのアイコンで保存してから「島崎藤村の魅力」に切り替え、「最新の情報」に更新して結果を確認します。

トップへ戻る

7 藤村記念館の概要

 7-1 中見出しの入力

エディタの中見出は、<h2 id="site07">と</h2>の間に「藤村記念館の概要」と入力します。すると、「before」と「after」は次のようになります。

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

<h2 id="site07">藤村記念館の概要</h2>
 <p>◆</p>

入力内容に間違いがないか確認し、フロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

 7-2 記念館の概要

所在地   岐阜県中津川市馬篭4256-1
電話    0573-69-2047
開館時間  9:00~17:00(但し、12月~3月は午後4時まで)
入館料   大人   個人500円  団体400円(30名以上)
      小中学生 個人250円  団体200円(30名以上)
休館日   12月~2月の毎週水曜日
交通機関  JR中津川駅から北恵那バス 馬篭行き(30分) 馬篭下車 徒歩10分

トップへ戻る

 7-3 概要文の入力

「1) 記念館の概要」の文章でソース本文の入力方法を練習します。「所在地」から「徒歩10」までの全文を選択し、右クリックでコピーします。

エディタのソースで「<p>◆</p>」の「◆」を選択し、右クリックで貼り付けます。エディタのソースは「はげちゃんの世界」と同様です。フロッピィのアイコンで保存してから、ブラウザの「島崎藤村の魅力」に切り替えて「最新の情報に更新」すると、すべてが連続して表示されます。

所在地   岐阜県中津川市馬篭4256-1  電話    0573-69-2047  開館時間  9:00~17:00(但し、12月~3月は午後4時まで)  入館料   大人   個人500円  団体400円(30名以上)        小中学生 個人250円  団体200円(30名以上)  休館日   12月~2月の毎週水曜日  交通機関  JR中津川駅から北恵那バス 馬篭行き(30分) 馬篭下車 徒歩10分

トップへ戻る

 7-4 概要文の調整

詩の姿を整えるために改行タグ「<br>」を入れます。

<br>

上記の「<br>」を選択し、右クリックでコピーします。エディタ画面に貼り付けた1行目から順に6行目まで、最終文字の右にカーソルを表示して右クリックで貼り付けます。

休館日の「毎週水曜日」までの作業が完了すると、エディタの画面は次のようになっています。比較して間違いがないか確認します。確認が面倒でも、これまでのようにコピーして貼り付けることはできません。フロッピーのアイコンで保存します。

所在地   岐阜県中津川市馬篭4256-1<br>
 電話    0573-69-2047<br>
 開館時間  9:00~17:00(但し、12月~3月は午後4時まで)<br>
 入館料   大人   個人500円  団体400円(30名以上)<br>
       小中学生 個人250円  団体200円(30名以上)<br>
 休館日   12月~2月の毎週水曜日<br>
 交通機関  JR中津川駅から北恵那バス 馬篭行き(30分) 馬篭下車 徒歩10分

つぎに、「2.詩の入力 3) ソースの調整 ② 開始タグの入力」で行った作業です。所在地の先頭にある開始タグの「<p>」の「<p」と「>」の間をクリックしてカーソルを表示させます。スペースキーをポンと押すとダイアログが表示され、「clss」の文字を選択して Enterキーをポンと押すと「<p class="">」になります。

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

エディタの画面表示

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

トップへ戻る

8 写真の表示

 8-1 写真について

「Web頁作成講座2」の「5.写真の準備 4) 写真を挿入する」と同様の方法で、椰子の實の詩の右側に広く空いている部分へ写真を挿入します。椰子の實が流れ着いた砂浜に、芳香のある白い「はまゆう」や淡い桃色に咲く「はまひるがお」の姿を想像できても、行ったことがないので写真がありません。Web頁作成講座2で名前を「00_02.jpg」に変更して保存した「伊豆下田港の初日」の写真を使います。

トップへ戻る

 8-2 写真の縮小

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

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

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

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

トップへ戻る

 8-3 写真の読み込み

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

「img」タグに「2) 写真の縮小」時のデータを入力すると次のようになります。データを入力したイメージタグを右クリックでコピーします。

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

エディタの「ソース」を表示させ、「流れ寄る椰子の實一つ</p>」の右側をクリックしてカーソルを表示させ、右クリックで貼り付けます。エディタのソースは(1行で)次のようになります。

流れ寄る椰子の實一つ</p><img src="shasin/00_02.jpg" width="360" height="270" class="right">

エディタの画面表示

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

トップへ戻る

9 目次の入力

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

目次の「◆」には、中見出しとして作成したデータを入力します。これまでに中見出しとして作成したのは「島崎藤村とは、若菜集より 椰子の實、好奇心から想像へ、あなたの推理は、転載について、著作権について、藤村記念館の概要」の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>

エディタの画面表示

入力内容に間違いがないか確認し、フロッピーのアイコンで保存します。これを忘れると入力内容は消えてしまいます。

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

トップへ戻る

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