１ 紹介文の入力
1-1 入力の準備
連続してソースを入力するのでこのページをブラウザに表示させておきます。では、マイドキュメントから「homepage」フォルダーを開きます。
hasin ４枚の写真保管
index.html ホームページ（表紙）
10.html 初戀のページ
20.html 千曲川旅情のページ
style.css レイアウト用
「index.html」のファイルをダブルクリックで開きます。ブラウザ画面にスタイルシートでレイアウトされた画像が表示され、ブラウザ上段余白に「はげちゃんの世界」と並んで「島崎藤村の魅力」という「タブ」が表示されています。
Ｗｅｂページ原版作成で共通データの入力を完了した結果は右端の縦長画面で表示されました。「ソース」は同じでも、スタイルシートでレイアウトした
結果は右上の四角い画面になります。このような状態に表示されなければ、スタイルシートのどこかに間違いがあります。慎重に再確認しましょう。
スタイルシートでレイアウトした「島崎藤村の魅力」と表示されている画面の何もないところをポイントして、「ツールバー」の「表示」から「ソース」を選択すると、エディタが起動して「ソース」が表示されます。
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 紹介文のコピー
エディタに連続してソースを入力するので、「はげちゃんの世界」のタブをクリックして画面を切り替えます。
ホームページを開いたとき最初に目に入る文章として「島崎藤村の紹介文」を用意しました。次の文章の「島崎」から「とりあげます。」までを選択して、マウスを右クリックして「コピー」を選択します。この方法で「コピー」するときは「右クリックでコピー」と表現します。メニューバーの「編集」から「コピー」を選択する方法と同じ結果になります。
島崎藤村は、明治５年（1872年）に現在の長野県中津川市馬篭で生まれ、明治から大正・昭和の初期にかけて活躍した詩人で小説家です。明治30年に最初の詩集「若菜集」を発表し、その後「一葉集・夏草・落梅集」などの詩集を発表しました。結婚後は東京へ移住し、子供が相次いで病死する中で書き上げた長編小説「破戒」は、新しい個人の目覚めとその目覚めの悲しみを定着させた長編として、同情と共感を持って高く評価されました。「島崎藤村の魅力」では、代表的な詩のみをとりあげます。
1-2-3 紹介文の貼り付け
エディタで作業をするときは、エディタの上部余白の何も表示されていないところをクリックして作業を開始することを知らせます。以後この説明を省略して、すぐ作業の説明をしますので注意してください。
エディタが表示している「ソース｣の「<p>と</p>」の間の「◆」を選択し、マウスを右クリックして「貼り付け」を選択します。この方法で「貼り付け」るときは「右クリックで貼り付け」と表現します。メニューバーの「編集」から「貼り付け」を選択する方法と同じ結果になります。
フロッピーのアイコンで保存すると、「before」と「after」は次のようになります。
<h1 id="site01">島崎藤村とは</h1>
<p>◆</p>
<h1 id="site01">島崎藤村とは</h1>
<p>島崎藤村は、明治５年（1872年）に現在の長野県中津川市馬篭で生まれ、明治から大正・昭和の初期にかけて活躍した詩人で小説家です。明治30年に最初の詩集「若菜集」を発表し、その後「一葉集・夏草・落梅集」などの詩集を発表しました。結婚後は東京へ移住し、子供が相次いで病死する中で書き上げた長編小説「破戒」は、新しい個人の目覚めとその目覚めの悲しみを定着させた長編として、同情と共感を持って高く評価されました。「島崎藤村の魅力」では、代表的な詩のみをとりあげます。</p>
「島崎藤村の魅力」のタブをクリックして画面を切り替え、ブラウザ最上段左側、データが保存されているサイトやフォルダーの場所を表示する長方形の窓にある「時計の針状回転の矢印(最新の情報に更新)」をクリックします。説明が長くなるので、以後は「最新の情報に更新」と表現します。ブラウザ画面は最新の状態に更新されて「島崎藤村の紹介文」が表示されました。
説明を読むときは「はげちゃんの世界」のタブをクリックし、作業はエディタで行います。作業結果を確認するときは「島崎藤村の魅力」のタブをクリックしてから「最新の情報に更新」します。
上部余白にある「タブ」の背景が明るくなっているのがブラウザに表示されている画面です。以後は、タブをクリックして画面を切り替えるときに、「はげちゃんの世界へ切り替え」「島崎藤村の魅力へ切り替え」と表現します。
エディタ画面で、文章を貼り付け終えた部分の右側「詩のみをとりあげます。</p>の右側にカーソルを表示させ、「Entaer」キーをポンと押して直下にスペースを１行入れるとエディタの表示は次のようになります。
コンで保存します。これを忘れると入力内容は消えてしまいます。
エディタの画面は右のようになっています。入力に間違いがないか確認してからフロッピーのアイコンで上書き保存します。これを忘れると入力内容は消えてしまいます。
「Entaer」キーをポンと押して直下にスペースを１行入れます。右のエディタ画面のようになったのを確認して、フロッピーのアイコンで保存します。
リックで貼り付け、「Entaer」キーをポンと押して直下にスペースを１行入れます。右のエディタ画面のようになったのを確認して、フロッピーのアイコンで保存します。
ブラウザの「島崎藤村の魅力」に切り替えて「最新の情報に更新」すると、すべてが連続して表示されます。「島崎藤村の魅力」へ切り替えて入力結果を確認しましょう。
<h2 id="site06">著作権について</h2>
