はげちゃんの世界

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

中級講座7

Webページ「北海道米の謎」

北海道は北緯42度以上の亜寒帯に属し、江戸時代までは日本一の長さだった石狩川が蛇行しながら湿地帯を作り、石狩平野には農耕不適な泥炭層が広がっていました。弥生時代のない北海道で、食味ランキング「特A」を獲得した米が誕生したのはなぜでしょう。

1.メインの領域整備

 1-1 情報入力の準備

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

shasin    10枚の写真保管
 10.html    卑弥呼の謎のページ
 20.html    蒙古軍撃退の謎のページ
 30.html    北海道米の謎のページ
 index.html  ホームページ(表紙)
 styles.css   レイアウト用

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

スタイルシートでレイアウトしたようにバックグランドの色は「赤」、帯は「紫」、表題部分に「shasin」ホルダーに保管した「00_00.jpg」の写真が表示されています。このような状態に表示されなければ、スタイルシートのどこかに間違いがあります。慎重に再確認しましょう。

ソースを確認するときには「home」フォルダーの「03.html」を右クリックし、「プログラムから開く」の「CresentEve」をクリックするとエディタが起動して「ソース」が表示されます。

Windows10で作成している場合は、「日本史の謎」が表示されている画面の何もないところをポイントしてソースを表示させると、画面の下部に「ソース」が表示されますが、これは使い方が難しいので前記の方法で確認してください。

トップへ戻る

 1-2 情報入力領域の確認

「中級講座3」で紹介したソースの情報を入力する位置は、「<div id="main">」の第一グループから第五グループまでが本文です。

<div id="main">
<article id="content">
<section>
<h1">◆</h1>
<h2 id="site01">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site02">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site03">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site04">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site05">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
</article>

トップへ戻る

 1-3 表題の入力

第一グループの「<h1 id="site01">◆</h1>」に表題を入力します。表題は「北海道米誕生の謎」とします。表題を左クリックしながらコピーして「◆」の位置にペーストしましょう。

<div id="main">
<article id="content">
<section>
<h1 id="site01">北海道米誕生の謎</h1>

トップへ戻る

 1-4 グループの見出し

情報のグループは5つあります。それぞれに見出しを付けます。第一グループは「北海道の誕生」、第二グループは「石狩平野の湿地帯」第三グループは「泥炭層の誕生」第四グループは「石狩川の捷水路工事」、第五グループは「北海道産米の実力」です。

第一グループ  <h2 id="site02">北海道の誕生</h2>

第二グループ  <h2 id="site03">石狩平野の湿地帯</h2>

第三グループ  <h2 id="site04">泥炭層の誕生</h2>

第四グループ  <h2 id="site05">石狩川の捷水路工事</h2>

第五グループ  <h2 id="site06">北海道産米の実力</h2>

コピー&ペーストが終わったら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。

トップへ戻る

2.第一グループの整備

 2-1 一行目の入力

第一グループの一行目「北海道の誕生」の本文を入力します。入力する箇所は五行あり、上から一行ずつ入力していきます。まず、「一行目の文章」を読んで、太文字部分を左クリックしながらコピーします。

★一行目の文章
今を去ること約2億年~25万年前、太平洋プレートがユーラシアプレートの下に沈み込む動きで、太平洋から運ばれてきた物質と大陸からの物質が混じりあって海山ができ始めました。その後、ユーラシアプレートと北米プレートの衝突によって北海道の土台がつくられ、東側の北米プレートが西側のユーラシアプレートにめくれ上がるように乗り上げて日高山脈ができました。

一行目の「<p>◆</p>」の「◆」を選択してペーストすると、「before」と「after」は次のようになります。

<div id="main">
<article id="content">
<section>
<h1 id="site01">北海道米誕生の謎</h1>
<h2 id="site02">北海道の誕生</h2>
<p>◆</p>

<div id="main">
<article id="content">
<section>
<h1 id="site01">北海道米誕生の謎</h1>
<h2 id="site02">北海道の誕生</h2>
<p>今を去ること約2億年~25万年前、太平洋プレートがユーラシアプレートの下に沈み込む動きで、太平洋から運ばれてきた物質と大陸からの物質が混じりあって海山ができ始めました。その後、ユーラシアプレートと北米プレートの衝突によって北海道の土台がつくられ、東側の北米プレートが西側のユーラシアプレートにめくれ上がるように乗り上げて日高山脈ができました。</p>

トップへ戻る

 2-2 二行目の入力

★二行目の文章
超巨大といわれる規模の噴火が起こったことを明らかに示す痕跡は、11万年前の屈斜路カルデラ、10万年前の洞爺カルデラ、3万年前の支笏カルデラとなって残されています。これらのカルデラから噴出した火砕流は周辺の数十キロの範囲を埋め、さらに広い範囲に大量の火山灰や軽石を堆積させました。

太文字部分をコピーして二行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>超巨大といわれる規模の噴火が起こったことを明らかに示す痕跡は、11万年前の屈斜路カルデラ、10万年前の洞爺カルデラ、3万年前の支笏カルデラとなって残されています。これらのカルデラから噴出した火砕流は周辺の数十キロの範囲を埋め、さらに広い範囲に大量の火山灰や軽石を堆積させました。</p>

トップへ戻る

 2-3 三行目の入力

★三行目の文章
北海道は火山活動が非常に活発な地域です。活動度の最も高いランクAとされる火山は十勝岳・樽前山・有珠山・北海道駒ケ岳と4ヶ所もあります。十勝岳は1926年に噴火し、富良野盆地に流入した火山泥流により150人の死者がでました。樽前山は1667年と1739年に噴出物総量3~4立方キロメートルもの噴火を起こし、1909年の噴火では特徴ある形の大きな溶岩ドームが出現しました。有珠山は近年20年ほどの間隔で大きな噴火を起こし、最近は2000年に噴火し洞爺湖温泉街が火山灰に埋没しました。北海道駒ケ岳は、1640年に噴出物総量4立方キロメートルの巨大規模噴火を起こし山頂が吹き飛ばされました。

太文字部分をコピーして三行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>北海道は火山活動が非常に活発な地域です。活動度の最も高いランクAとされる火山は十勝岳・樽前山・有珠山・北海道駒ケ岳と4ヶ所もあります。十勝岳は1926年に噴火し、富良野盆地に流入した火山泥流により150人の死者がでました。樽前山は1667年と1739年に噴出物総量3~4立方キロメートルもの噴火を起こし、1909年の噴火では特徴ある形の大きな溶岩ドームが出現しました。有珠山は近年20年ほどの間隔で大きな噴火を起こし、最近は2000年に噴火し洞爺湖温泉街が火山灰に埋没しました。北海道駒ケ岳は、1640年に噴出物総量4立方キロメートルの巨大規模噴火を起こし山頂が吹き飛ばされました。</p>

トップへ戻る

 2-4 四行目の入力

★四行目の文章
石狩川流域に影響を及ぼす地震は、太平洋プレートの沈み込みにより北海道南方沖で発生する海溝型巨大地震、日本海東縁部で起こるM8前後のプレート境界地震、内陸の浅いところで起こるM5~6規模の直下地震などがあります。石狩低地は沖積層が厚く表層に厚い泥炭層があるという非常に悪い地盤条件が幸いして、地震活動度や火山帯による地震動に減衰がおきるため強震動発生の確率は大きくありません。

太文字部分をコピーして四行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>石狩川流域に影響を及ぼす地震は、太平洋プレートの沈み込みにより北海道南方沖で発生する海溝型巨大地震、日本海東縁部で起こるM8前後のプレート境界地震、内陸の浅いところで起こるM5~6規模の直下地震などがあります。石狩低地は沖積層が厚く表層に厚い泥炭層があるという非常に悪い地盤条件が幸いして、地震活動度や火山帯による地震動に減衰がおきるため強震動発生の確率は大きくありません。</p>

トップへ戻る

 2-5 五行目の入力

★五行目の文章
石狩川は大雪山系を水源として、層雲峡の峡谷から旭川のある上川盆地に流れ出ています。流域面積は14,330平方キロメートルで全国第2位、長さは268キロメートルで第3位という日本最大級の大河川です。上川盆地を出た石狩川は神居古潭に深い峡谷を生み出し、石狩低地から南へ流れ下り太平洋に注いでいました。3万年前の支笏火山の大噴火で発生した火砕流がこの低地を埋め、行先をふさがれた石狩川は流れる方向を逆にして日本海へ向かいました。

太文字部分をコピーして五行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>石狩川は大雪山系を水源として、層雲峡の峡谷から旭川のある上川盆地に流れ出ています。流域面積は14,330平方キロメートルで全国第2位、長さは268キロメートルで第3位という日本最大級の大河川です。上川盆地を出た石狩川は神居古潭に深い峡谷を生み出し、石狩低地から南へ流れ下り太平洋に注いでいました。3万年前の支笏火山の大噴火で発生した火砕流がこの低地を埋め、行先をふさがれた石狩川は流れる方向を逆にして日本海へ向かいました。</p>

すべてのコピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

トップへ戻る

3.第二グループの整備

 3-1 一行目の入力

第二グループの一行目「石狩平野の湿地帯」の本文を入力します。入力する箇所は五行あり、上から一行ずつ入力していきます。まず、「一行目の文章」を読んで、太文字部分を左クリックしながらコピーします。

★一行目の文章
石狩低地は広く緩やかな湿原で、石狩川の流れは絶えず変化して生きている蛇のように蛇行していました。くねくねと蛇行する川は流れにくく、豪雨や融雪のたびに氾濫して開拓地を襲いました。川の蛇行が大きくなるとあふれ出た水は蛇行部分に近道をつくり、取り残された旧流路は三日月状の河跡湖となって残りました。

一行目の「<p>◆</p>」の「◆」を選択してペーストすると、「before」と「after」は次のようになります。

<h2 id="site03">石狩平野の湿地帯</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

<h2 id="site03">石狩平野の湿地帯</h2>
<p>石狩低地は広く緩やかな湿原で、石狩川の流れは絶えず変化して生きている蛇のように蛇行していました。くねくねと蛇行する川は流れにくく、豪雨や融雪のたびに氾濫して開拓地を襲いました。川の蛇行が大きくなるとあふれ出た水は蛇行部分に近道をつくり、取り残された旧流路は三日月状の河跡湖となって残りました。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 3-2 二行目の入力

★二行目の文章
北海道でもっとも古いホモ・サピエンスの足跡は今から約3万数千年前のものです。2万年~1万2千年前に大陸の影響を受けた細石刃(さいせきじん)が広がり、加工場の跡が北海道北東部の遠軽町白滝遺跡群で発見されています。

太文字部分をコピーして二行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>北海道でもっとも古いホモ・サピエンスの足跡は今から約3万数千年前のものです。2万年~1万2千年前に大陸の影響を受けた細石刃(さいせきじん)が広がり、加工場の跡が北海道北東部の遠軽町白滝遺跡群で発見されています。</p>

トップへ戻る

 3-3 三行目の入力

★三行目の文章
氷河期が終り温暖化していくと大型動物が絶滅し、針葉樹の森は次第に広葉樹が繁茂し始めます。このころの日本列島に新しい「縄文文化」が生まれ「土器」が伝わりました。縄文文化の人びとは狩猟・漁労・採集を発達させて自然を大切にし、地面を掘った竪穴住居をつくって同じ場所に「定住」するようになりました。集落を囲む濠や防御施設などの戦いの痕跡がなく、老人や子供を大切にする安定した社会だったと考えられています。

太文字部分をコピーして三行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>氷河期が終り温暖化していくと大型動物が絶滅し、針葉樹の森は次第に広葉樹が繁茂し始めます。このころの日本列島に新しい「縄文文化」が生まれ「土器」が伝わりました。縄文文化の人びとは狩猟・漁労・採集を発達させて自然を大切にし、地面を掘った竪穴住居をつくって同じ場所に「定住」するようになりました。集落を囲む濠や防御施設などの戦いの痕跡がなく、老人や子供を大切にする安定した社会だったと考えられています。</p>

トップへ戻る

 3-4 四行目の入力

★四行目の文章
氷河期が終わると世界中で「農耕と定住」を特徴とする新石器時代が始まり、文明が発祥しました。農耕によって生産力を高めた文明は、王や階層などの身分をつくり国や戦いを生み出しました。しかし、日本列島に広がっていた縄文文化は農耕をせずに自然と上手に共存し、狩猟・漁労・採集を発達させた成熟した文化で約1万数千年にわたって続きました。ひとつの文化がこれほど長く続いた例は世界でも他にありません。

太文字部分をコピーして四行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>氷河期が終わると世界中で「農耕と定住」を特徴とする新石器時代が始まり、文明が発祥しました。農耕によって生産力を高めた文明は、王や階層などの身分をつくり国や戦いを生み出しました。しかし、日本列島に広がっていた縄文文化は農耕をせずに自然と上手に共存し、狩猟・漁労・採集を発達させた成熟した文化で約1万数千年にわたって続きました。ひとつの文化がこれほど長く続いた例は世界でも他にありません。</p>

トップへ戻る

 3-5 五行目の入力

★五行目の文章
自然と共存するなかで、自然は恵みを与えてくれたり悪さをしたりするという考えが生まれてきました。森の大木や山々、海や自然の現象などに様々な精霊のようなものがいるとする考えが生まれ、それが八百万の神々を生み出した源泉になったようです。

太文字部分をコピーして五行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>自然と共存するなかで、自然は恵みを与えてくれたり悪さをしたりするという考えが生まれてきました。森の大木や山々、海や自然の現象などに様々な精霊のようなものがいるとする考えが生まれ、それが八百万の神々を生み出した源泉になったようです。</p>

すべてのコピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

トップへ戻る

4.第三グループの整備

 4-1 一行目の入力

第三グループの一行目「泥炭層の誕生」の本文を入力します。入力する箇所は五行あり、上から一行ずつ入力していきます。まず、「一行目の文章」を読んで、太文字部分を左クリックしながらコピーします。

★一行目の文章
北海道は北緯42度以上の亜寒帯に属しています。6千年前の縄文時代に海面は今より5メートル高く、札幌・江別・岩見沢の石狩地方から美唄・砂川・滝川の空知地方の奥まで内湾でした。その後の寒冷化により海水面は低下し、海が後退した内湾は石狩川の土砂や流されてきた植物が堆積していきました。

一行目の「<p>◆</p>」の「◆」を選択してペーストすると、「before」と「after」は次のようになります。

<h2 id="site03">泥炭層の誕生</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

<h2 id="site03">泥炭層の誕生</h2>
<p>北海道は北緯42度以上の亜寒帯に属しています。6千年前の縄文時代に海面は今より5メートル高く、札幌・江別・岩見沢の石狩地方から美唄・砂川・滝川の空知地方の奥まで内湾でした。その後の寒冷化により海水面は低下し、海が後退した内湾は石狩川の土砂や流されてきた植物が堆積していきました</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 4-2 二行目の入力

★二行目の文章
寒冷地の北海道では、湿地帯の植物などが枯れても酸素不足の状態で微生物などの活動が抑制されます。堆積した植物の分解が進まず、植物が炭化した状態のまま蓄積されていきました。沼沢地や湖沼のへりなど水分の多いところでもバクテリアの活動が不活発なため、枯死した草や木は完全に分解されずにスポンジ状になって堆積していくのです。

太文字部分をコピーして二行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>寒冷地の北海道では、湿地帯の植物などが枯れても酸素不足の状態で微生物などの活動が抑制されます。堆積した植物の分解が進まず、植物が炭化した状態のまま蓄積されていきました。沼沢地や湖沼のへりなど水分の多いところでもバクテリアの活動が不活発なため、枯死した草や木は完全に分解されずにスポンジ状になって堆積していくのです。</p>

トップへ戻る

 4-3 三行目の入力

★三行目の文章
表面が乾燥した泥炭層はスポンジ状となり、ベットの上を歩いているようにフカフカと弾力があります。雨が降ると水をたっぷり含んだぬかるみとなり、時には腰のあたりまで体が沈むこともあります。馬や牛が泥炭のぬかるみにはまって抜け出せずに命を落としたこともありました。

太文字部分をコピーして三行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>表面が乾燥した泥炭層はスポンジ状となり、ベットの上を歩いているようにフカフカと弾力があります。雨が降ると水をたっぷり含んだぬかるみとなり、時には腰のあたりまで体が沈むこともあります。馬や牛が泥炭のぬかるみにはまって抜け出せずに命を落としたこともありました。</p>

トップへ戻る

 4-4 四行目の入力

★四行目の文章
乾いた泥炭層の上での焚火は危険で、泥炭層に火が付くと消しても消しても地の底から炎が上がってきます。ひとたび泥炭層に火が入ってしまうと、とんでもないところから炎が噴き出してきます。完全に消火することは難しく、ときには床下から火災が発生することもありました。

太文字部分をコピーして四行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>乾いた泥炭層の上での焚火は危険で、泥炭層に火が付くと消しても消しても地の底から炎が上がってきます。ひとたび泥炭層に火が入ってしまうと、とんでもないところから炎が噴き出してきます。完全に消火することは難しく、ときには床下から火災が発生することもありました。</p>

トップへ戻る

 4-5 五行目の入力

★五行目の文章
6千年間にわたり植物の堆積物は、未分解~半炭化の状態で積み重なって泥炭層を形成しました。石狩低地には深さ20メートルを超える広大な泥炭地帯が広がっています。手押しポンプでくみ上げられた水は赤茶けた色で渋みもあり、風呂へ入ると真っ白なタオルは赤茶けた色に染まります。ウイスキーの醸造に使うピートは日本語で泥炭ですが、余市ではスコットランドから輸入したものを使用しています。

太文字部分をコピーして五行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>6千年間にわたり植物の堆積物は、未分解~半炭化の状態で積み重なって泥炭層を形成しました。石狩低地には深さ20メートルを超える広大な泥炭地帯が広がっています。手押しポンプでくみ上げられた水は赤茶けた色で渋みもあり、風呂へ入ると真っ白なタオルは赤茶けた色に染まります。ウイスキーの醸造に使うピートは日本語で泥炭ですが、余市ではスコットランドから輸入したものを使用しています。</p>

すべてのコピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

トップへ戻る

5.第四グループの整備

 5-1 一行目の入力

第四グループの一行目「石狩川の捷水路工事」の本文を入力します。入力する箇所は五行あり、上から一行ずつ入力していきます。まず、「一行目の文章」を読んで、太文字部分を左クリックしながらコピーします。

★一行目の文章
明治初期に大部分が不毛の湿地帯だった石狩平野は、わずか130年で実り豊かな沃野に変貌しました。新篠津村、月形町、江別市、当別町にまたがる篠津地域の泥炭地は、明治以来先人達が幾多の困難を克服して実りの大地に変貌させた奇跡の地域です。

一行目の「<p>◆</p>」の「◆」を選択してペーストすると、「before」と「after」は次のようになります。

<h2 id="site03">石狩川の捷水路工事</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

<h2 id="site03">史上まれな大軍勢</h2>
<p></p>
<p>明治初期に大部分が不毛の湿地帯だった石狩平野は、わずか130年で実り豊かな沃野に変貌しました。新篠津村、月形町、江別市、当別町にまたがる篠津地域の泥炭地は、明治以来先人達が幾多の困難を克服して実りの大地に変貌させた奇跡の地域です。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 5-2 二行目の入力

★二行目の文章
石狩平野の石狩、空知、上川地方への入植者は「米」にこだわりました。石狩平野は泥炭層の湿地帯で農耕不適な湿原が広がっていましたが、本州で農業経験のある二男坊や三男坊は夢を抱き、夢にすがって胸までぬかるむ湿地帯に挑みました。排水不良の低湿地と泥炭地を改善するには腐植土による客土が不可欠で、農民は遠くはなれた山間地域から腐食土を運びました。人々は馬ソリに土を載せて日に何10回も遠い道のりを往復するという想像を絶する努力を続けました。

太文字部分をコピーして二行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>石狩平野の石狩、空知、上川地方への入植者は「米」にこだわりました。石狩平野は泥炭層の湿地帯で農耕不適な湿原が広がっていましたが、本州で農業経験のある二男坊や三男坊は夢を抱き、夢にすがって胸までぬかるむ湿地帯に挑みました。排水不良の低湿地と泥炭地を改善するには腐植土による客土が不可欠で、農民は遠くはなれた山間地域から腐食土を運びました。人々は馬ソリに土を載せて日に何10回も遠い道のりを往復するという想像を絶する努力を続けました。</p>

トップへ戻る

 5-3 三行目の入力

★三行目の文章
泥炭地を深さ1m掘っても上の荷重がなくなると、下の泥炭が浮き上がって掘った分が戻ってしまいます。水が抜けない土では根が酸素を十分に吸えず生育が阻害されます。寒冷な低湿地の多い北海道の田畑のほとんどは、現在約10メートル間隔で地中に土管を埋設し、余分な水分を排出する暗渠排水が整備されています。

太文字部分をコピーして三行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>泥炭地を深さ1m掘っても上の荷重がなくなると、下の泥炭が浮き上がって掘った分が戻ってしまいます。水が抜けない土では根が酸素を十分に吸えず生育が阻害されます。寒冷な低湿地の多い北海道の田畑のほとんどは、現在約10メートル間隔で地中に土管を埋設し、余分な水分を排出する暗渠排水が整備されています。</p>

トップへ戻る

 5-4 四行目の入力

★四行目の文章
石狩川流域への入植がはじまったころの石狩川は激しく蛇行し、空知川合流点から下流の氾濫原地帯では特に激しく蛇行していました。1898年(明治31年)と1904年(明治37年)の大洪水を契機に、石狩川の蛇行を直線化する捷水路(しょうすいろ)工事が始められました。

太文字部分をコピーして四行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>石狩川流域への入植がはじまったころの石狩川は激しく蛇行し、空知川合流点から下流の氾濫原地帯では特に激しく蛇行していました。1898年(明治31年)と1904年(明治37年)の大洪水を契機に、石狩川の蛇行を直線化する捷水路(しょうすいろ)工事が始められました。</p>

トップへ戻る

 5-5 五行目の入力

★五行目の文章
石狩川の川床は柔らかい泥炭層でした。川の流れが速くなると川底の泥炭は削られ、川底が削られると石狩川の水位は下がります。水位が低下すれば泥炭層の地下水は石狩川に吸い出されて低下し、低湿地は乾燥して農地の開発を助けることになりました。1969年までの60年間に29ヶ所の捷水路が開削され、石狩川の長さは58キロメートル短縮されました。大洪水時に起こる自然にできた捷水路を含めると川の長さは100キロメートルも短縮されたのです。

太文字部分をコピーして五行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>石狩川の川床は柔らかい泥炭層でした。川の流れが速くなると川底の泥炭は削られ、川底が削られると石狩川の水位は下がります。水位が低下すれば泥炭層の地下水は石狩川に吸い出されて低下し、低湿地は乾燥して農地の開発を助けることになりました。1969年までの60年間に29ヶ所の捷水路が開削され、石狩川の長さは58キロメートル短縮されました。大洪水時に起こる自然にできた捷水路を含めると川の長さは100キロメートルも短縮されたのです。</p>

すべてのコピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

トップへ戻る

6.第五グループの整備

 6-1 一行目の入力

第五グループの一行目「北海道産米の実力」の本文を入力します。入力する箇所は五行あり、上から一行ずつ入力していきます。まず、「一行目の文章」を読んで、太文字部分を左クリックしながらコピーします。

★一行目の文章
泥炭層を克服した先人の努力により、広大な大地と豊かな水を生かした大規模な水田が北海道の各地で営まれ、お米も全国トップクラスの大生産地となり、作付面積も収穫量も毎年新潟県と1、2を競うほどになりました。

一行目の「<p>◆</p>」の「◆」を選択してペーストすると、「before」と「after」は次のようになります。

<h2 id="site03">北海道産米の実力</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

<h2 id="site03">北海道産米の実力退</h2>
<p>泥炭層を克服した先人の努力により、広大な大地と豊かな水を生かした大規模な水田が北海道の各地で営まれ、お米も全国トップクラスの大生産地となり、作付面積も収穫量も毎年新潟県と1、2を競うほどになりました。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 6-2 二行目の入力

★二行目の文章
2008年に誕生した「ゆめぴりか」は、ほどよい粘りと甘みにつややかな美しい炊き上がりでやわらかさも兼ね備え、日本穀物検定協会の食味ランキングで「特A」を獲得した北海道米の集大成とも言える品種です。厳しい統一基準と徹底した品質管理により、期待を裏切らない美味しさで食味官能試験でも堂々のトップをとりました。

太文字部分をコピーして二行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>2008年に誕生した「ゆめぴりか」は、ほどよい粘りと甘みにつややかな美しい炊き上がりでやわらかさも兼ね備え、日本穀物検定協会の食味ランキングで「特A」を獲得した北海道米の集大成とも言える品種です。厳しい統一基準と徹底した品質管理により、期待を裏切らない美味しさで食味官能試験でも堂々のトップをとりました。</p>

トップへ戻る

 6-3 三行目の入力

★三行目の文章
北海道では生産者主導で、お米の品質を管理する取組みが進められています。北海道米の最高峰「ゆめぴりか」も、本格栽培するにあたって「北海道米の新たなブランド形成協議会」が結成されました。「種子更新率百%・栽培適地での生産・タンパク含有率基準」など全道統一の取組みを定めて「ゆめぴりか」のおいしさを守っています

太文字部分をコピーして三行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>北海道では生産者主導で、お米の品質を管理する取組みが進められています。北海道米の最高峰「ゆめぴりか」も、本格栽培するにあたって「北海道米の新たなブランド形成協議会」が結成されました。「種子更新率百%・栽培適地での生産・タンパク含有率基準」など全道統一の取組みを定めて「ゆめぴりか」のおいしさを守っています</p>

トップへ戻る

 6-4 四行目の入力

★四行目の文章
北海道産のもち米は「やわらかさ」と「長持ち」が身上です。「きたゆきもち・風の子もち・はくちょうもち・きたふくもち」などは、おこわでも和菓子でも北海道だけでなく全国で広く活躍しています。酒米には「吟風(ぎんぷう)」「彗星(すいせい)」「きたしずく」などがあり、全国的な日本酒コンクールでも続々受賞しています。

太文字部分をコピーして四行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>北海道産のもち米は「やわらかさ」と「長持ち」が身上です。「きたゆきもち・風の子もち・はくちょうもち・きたふくもち」などは、おこわでも和菓子でも北海道だけでなく全国で広く活躍しています。酒米には「吟風(ぎんぷう)」「彗星(すいせい)」「きたしずく」などがあり、全国的な日本酒コンクールでも続々受賞しています。</p>

トップへ戻る

 6-5 五行目の入力

★五行目の文章
すばらしい北海道産米が誕生した背景は、排水不良の低湿地と泥炭地を改善するために山地から大量の土を馬ソリで運び込んだ想像を絶する農民の努力と、蛇行が激しく反乱を繰り返していた石狩川の捷水路(しょうすいろ)工事の成果でした。

太文字部分をコピーして五行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>すばらしい北海道産米が誕生した背景は、排水不良の低湿地と泥炭地を改善するために山地から大量の土を馬ソリで運び込んだ想像を絶する農民の努力と、蛇行が激しく反乱を繰り返していた石狩川の捷水路(しょうすいろ)工事の成果でした。</p>

すべてのコピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

トップへ戻る

7.第六グループの整備

 7-1 一行目の入力

第六グループの一行目「推理の根拠資料」の本文を入力します。入力する箇所は五行あり、上から一行ずつ入力していきます。まず、「一行目の文章」を読んで、太文字部分を左クリックしながらコピーします。

★一行目の文章
北海道の気候は、西岸海洋性気候や温暖湿潤気候が見られる道南の一部沿岸地域を除くと、ほぼ全域が亜寒帯湿潤気候です。夏と冬の温度差が大きく冬の積雪は日本でも1、2を争うほどの積雪量となります。道内全域が豪雪地帯で一部の地域は特別豪雪地帯になっています。

一行目の「<p>◆</p>」の「◆」を選択してペーストすると、「before」と「after」は次のようになります。

<h2 id="site03">推理の根拠資料</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

<h2 id="site03">推理の根拠資料</h2>
<p>北海道の気候は、西岸海洋性気候や温暖湿潤気候が見られる道南の一部沿岸地域を除くと、ほぼ全域が亜寒帯湿潤気候です。夏と冬の温度差が大きく冬の積雪は日本でも1、2を争うほどの積雪量となります。道内全域が豪雪地帯で一部の地域は特別豪雪地帯になっています。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 7-2 二行目の入力

★二行目の文章
このように過酷な地での米作は誰もが不可能と考えていました。しかし、客土を飲み込む湿地帯で想像を絶する重労働に耐え続けたとき、石狩川の捷水路は川底を削って泥炭層から水を抜き去り湿地帯を沃野へと変えたのです。

太文字部分をコピーして二行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>このように過酷な地での米作は誰もが不可能と考えていました。しかし、客土を飲み込む湿地帯で想像を絶する重労働に耐え続けたとき、石狩川の捷水路は川底を削って泥炭層から水を抜き去り湿地帯を沃野へと変えたのです。</p>

トップへ戻る

 7-3 三行目の入力

★三行目の文章
捷水路が完成するまで毎月のように石狩川があふれて左右両岸に氾濫し、幅約40キロ延長約100キロという琵琶湖二つ分の大きさに相当する巨大な湖が出現したこともあります。過去最高の8.2mという水位を記録し、この水が退いたのは1ヶ月後のことでした。捷水路の完成は悪夢の泥炭層地帯に希望の光を灯しました。

太文字部分をコピーして三行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>捷水路が完成するまで毎月のように石狩川があふれて左右両岸に氾濫し、幅約40キロ延長約100キロという琵琶湖二つ分の大きさに相当する巨大な湖が出現したこともあります。過去最高の8.2mという水位を記録し、この水が退いたのは1ヶ月後のことでした。捷水路の完成は悪夢の泥炭層地帯に希望の光を灯しました。</p>

トップへ戻る

 7-4 四行目の入力

★四行目の文章
日本で有数の米どころとなった北海道で栽培される米は、多種多様の品種があることが特徴です。主食のうるち米だけでも十数品種あり、粘りや食感と甘みなど、それぞれの持ち味も個性的なものが多く存在します。あなたの参考になれば幸いです。

太文字部分をコピーして四行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>日本で有数の米どころとなった北海道で栽培される米は、多種多様の品種があることが特徴です。主食のうるち米だけでも十数品種あり、粘りや食感と甘みなど、それぞれの持ち味も個性的なものが多く存在します。あなたの参考になれば幸いです。</p>

トップへ戻る

 7-5 五行目の入力

五行目の最終部分で、「いしかり市民カレッジ」と「防災情報新聞無料版」へのリンクを張ります。URLの表示は離れて見えますがすべてつながっているので、「日本」から「</a>。」までを選択します。

★五行目の文章
日本史の謎は「地形」で解ける・文明文化編(竹村公太郎、PHP研究所)、日本史の謎は「地形」で解ける・環境民族編(竹村公太郎、PHP研究所)、<a href="http://www.ishikari-c-college.com/topics/2012/01/15.html">いしかり市民カレッジ</a>、<a href="http://www.bosaijoho.jp/reading/item_1217.html">防災情報新聞無料版</a>。

太文字部分をコピーして五行目の「<p>◆</p>」の「◆」を選択してペーストすると、「after」は次のようになります。

<p>日本史の謎は「地形」で解ける・文明文化編(竹村公太郎、PHP研究所)、日本史の謎は「地形」で解ける・環境民族編(竹村公太郎、PHP研究所)、<a href="http://www.ishikari-c-college.com/topics/2012/01/15.html">いしかり市民カレッジ</a>、<a href="http://www.bosaijoho.jp/reading/item_1217.html">防災情報新聞無料版</a>。</p>

すべてのコピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

トップへ戻る

8 目次の作成

 8-1 目次の準備

サイドバーに「目次」を作ります。「<li><a href="#site04">◆</a></li>」をコピーし、「Enter」キーを1度押してペーストしたのち、「04」を「05」に修正すると「before」と「after」は次のようになります。

<aside id="sidebar">
<h3><strong>目次</strong></h3>
<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>
</ul>

<aside id="sidebar">
<h3><strong>目次</strong></h3>
<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>
</ul>

コピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

トップへ戻る

 8-2 目次の整備

目次となる「◆」に上から順に「北海道の誕生」「石狩平野の湿地帯」「泥炭層の誕生る」「石狩川の捷水路工事」「北海道産米の実力」とコピーしてペーストすると「before」と「after」は次のようになります。

<aside id="sidebar">
<h3><strong>目次</strong></h3>
<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>
</ul>

<aside id="sidebar">
<h3><strong>目次</strong></h3>
<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>
</ul>

コピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

トップへ戻る

9 写真の表示

 9-1 写真の選定

ウエブページに掲載される写真やイラストは、文章の補足をしたり内容の理解を深めさせてくれます。あなたがつくるウエブページ「日本史の謎」に写真を掲載します。他人が撮影した写真や他人が写っている写真は著作権や肖像権があるので、あなたが撮影した風景写真などを利用するのが最善です。

あなたのパソコンに保管されている風景などが写ったデジタル写真(拡張子が「.jpg」の写真)を7枚選択し、その写真のコピーを「home」の「shasin」フォルダーに保管します。写真の縮小方法と掲載方法を覚えるのが目的ですから、写真の選択に時間をかけるのはやめましょう。

適当な写真が見つからない場合は、はげちゃんが撮影した写真を使います。下のリンクボタンをクリックすると7枚の写真が表示されます。説明を読んでからディスクトップにダウンロードしてください。

     デジタル写真がない方  ⇒  講座で使用する写真4

トップへ戻る

 9-2 写真を保管する

ダウンロードした写真に名前をつけます。写真をポイントして右クリックし、「名前の変更」を選択します。写真の名前は次のように半角英数で入力してください。

・ 樽前山       を  03_01.jpg  に変更。

・ 駒ヶ岳       を  03_02.jpg  に変更。

・ 石狩川       を  03_03.jpg  に変更。

・ 泥炭地       を  03_04.jpg  に変更。

・ 湿地        を  03_05.jpg  に変更。

・ 水田        を  03_06.jpg  に変更。

・ 北海道産米     を  03_07.jpg  に変更。

写真を7枚ともディスクトップへダウンロードし終わったら、マイドキュメント内に作成された「home」フォルダーをダブルクリックで開き、「shasin」フォルダーをダブルクリックで開きます。

「Ctrl」キーを押しながら7枚の写真を次々にクリックしてから、「Ctrl」キーを放して「shasin」フォルダー内へドラッグ&ドロップ(引きずり落と)します。ダイアログがでたときは「移動」をクリックしてください。

「home」の「shasin」フォルダー内に、「03_01.jpg、03_02.jpg、03_03.jpg、03_04.jpg、03_05.jpg、03_06.jpg、03_07.jpg」と半角英数で名前が付けられた写真が6枚保管されました。

トップへ戻る

 9-3 写真の縮小

  9-3-1 すべての写真

タスクバー左端の「スタート」をクリックして「よく使うアプリのスクロールバー」を下ろして、「Windousアクセサリ」内にある「ペイント」ソフトを起動させます。

ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し、「home」の「shasin」をクリックして開きます。「shasin」フォルダーから「03_01.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。

メニューの左から二番目のグループにある「サイズの変更」をクリックすると「サイズ変更と傾斜」のダイアログが表示されます。サイズ変更の単位で「ピクセル」をクリックすると、水平方向「500」垂直方向「375」と表示されます。

中央部分にある「縦横比を維持する」にチェックが入っているのを確認してから「水平方向」の窓の数字「500」を「300」に修正します。垂直方向は自動的に「375」から「225」に変更されました。

「OK」をクリックすると縮小された写真が表示されます。メニューバー左端の「ファイル」をクリックして「上書き保存」をクリックすると、「shasin」の「03_01.jpg」の写真は縮小された状態で上書きされます(入れ替わります)。

同様に「03_02.jpg」「03_03.jpg」「03_04.jpg」「03_05.jpg」「03_06.jpg」「03_07.jpg」の写真も、水平方向「300」垂直方向「225」に縮小して上書き保存します。

トップへ戻る

  9-3-2 写真に名前を入れる

タスクバー左端の「スタート」をクリックして「よく使うアプリのスクロールバー」を下ろして、「Windousアクセサリ」内にある「ペイント」ソフトを起動させます。

次に、ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し、「home」の「shasin」をクリックで開きます。「shasin」フォルダーから「03_01.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。

上段の「ツール」で「」をクリックしてから、写真上にカーソルを移動させて写真の森の中をクリックすると「長方形の点線枠」が表示されます。


 かなで「たるまえ」と入力し、表示されるダイアログで「樽前山」をクリックします。ペイントソフトの上段にある「色」で「白色」をクリックしてから、「色2」の上の四角をクリックすると文字が白色になります。

「長方形の点線枠」上にカーソルを重ねて上下左右移動カーソルを表示させ、左クリックをしながら右下へ配置します。「ファイル」をクリックして開き、上書き保存を選択してペイントソフトを終了します。

再び、タスクバー左端の「スタート」をクリックして「よく使うアプリのスクロールバー」を下ろして、「Windousアクセサリ」内にある「ペイント」ソフトを起動させます。

先ほどと同様に、ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し、「home」の「shasin」をクリックで開きます。「shasin」フォルダーから「03_02.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。

上段の「ツール」で「」をクリックしてから、写真上にカーソルを移動させて写真の森の中をクリックすると「長方形の点線枠」が表示されます。「駒ヶ岳」と入力し、ペイントソフトの上段にある「色」で「白色」をクリックしてから、「色2」の上の四角をクリックすると文字が白色になります。

「長方形の点線枠」上にカーソルを重ねて上下左右移動カーソルを表示させ、左クリックをしながら右下へ配置します。「ファイル」をクリックして開き、上書き保存を選択してペイントソフトを終了します。ペイントソフトで思うよな結果にならないときは、再起動させて何度も繰り返し操作してください。

トップへ戻る

 9-4 写真の配置

  9-4-1 文字入りの写真

文章の行間に写真を表示させます。「北海道の誕生」の3段目の最終部分、「北海道駒ケ岳は、1640年に噴出物総量4立方キロメートルの巨大規模噴火を起こし山頂が吹き飛ばされました。」の「</p>」の右側にカーソルを入れて、「Enter」キーを1回押します。

「img」タグに「9-3-2 写真に名前を入れる」のデータを入力すると次のようになります。データを入力したイメージタグを左クリックで選択してコピーします。写真と写真の間に全角のスペースを入れます。二行に見えますが一行です。

<p><img src="shasin/03_01.jpg" width="300" height="224"> <img src="shasin/03_02.jpg" width="300" height="224"></p>

エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストし、「Enter」キーを1回押します。すると、行間に写真が2枚挿入されます。


 

メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。

トップへ戻る

  9-4-2 文字なし写真2枚

文章の行間に写真を表示させます。「石狩平野の湿地帯」の1行目の最終部分、「川の蛇行が大きくなるとあふれ出た水は蛇行部分に近道をつくり、取り残された旧流路は三日月状の河跡湖となって残りました。」の「</p>」の右側にカーソルを入れて、「Enter」キーを押します。

「img」タグに「9-3-2 写真に名前を入れる」のデータを入力すると次のようになります。データを入力したイメージタグを左クリックで選択してコピーします。写真と写真の間に全角のスペースを入れます。二行に見えますが一行です。

<p><img src="shasin/03_03.jpg" width="300" height="225"> <img src="shasin/03_04.jpg" width="300" height="225"></p>

エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストし、「Enter」キーを1回押します。すると、行間に写真が2枚挿入されます。

メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。

トップへ戻る

  9-4-3 文字なしの写真

文章の行間に写真を表示させます。「泥炭層の誕生」の2段目の冒頭、「寒冷地の北海道では、湿地帯の植物などが枯れても酸素不足の状態で微生物などの活動が抑制されます。」の「<p>」の右側にカーソルを入れて、「Enter」キーを押します。

「img」タグに「9-3-2 写真に名前を入れる」のデータを入力すると次のようになります。データを入力したイメージタグを左クリックで選択してコピーします。

<img src="shasin/03_05.jpg" width="300" height="224" class="right">

2段目の冒頭、カーソルの「位置にペーストします。


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

メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。

トップへ戻る

  9-4-4 写真文字なし2枚

文章の行間に写真を表示させます。「酒米には「吟風(ぎんぷう)」「彗星(すいせい)」「きたしずく」などがあり、全国的な日本酒コンクールでも続々受賞しています。」の「</p>」の右側にカーソルを入れて、「Enter」キーを2回押します。

「img」タグに「9-3-2 写真に名前を入れる」のデータを入力すると次のようになります。データを入力したイメージタグを左クリックで選択してコピーします。写真と写真の間に全角のスペースを入れます。

<p><img src="shasin/03_06.jpg" width="300" height="225"></p> <p><img src="shasin/03_07.jpg" width="300" height="225"></p>

エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストし、「Enter」キーを1回押します。すると、行間に写真が2枚挿入されます。

メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。

トップへ戻る

10 あなたの推理は

いよいよ最終部分となる第七グループに着手します。「あなたの推理」の小見出しを整備して、本文を入力していただきます。小見出しを入力する箇所は五ヶ所で、上から一行ずつ入力していきます。まず、小見出しをコピーしてペーストします。

 10-1 小見出し

第一グループの序文「あなたの推理」の本文を入力します。入力する箇所は五ヶ所で、上から順に入力していきます。まず、第一グループの小見出しをコピーします。

第一グループの小見出し  <h3>北海道の誕生について</h3>

第二グループの小見出し  <h3>石狩平野の湿地帯について</h3>

第三グループの小見出し  <h3>泥炭層の誕生について</h3>

第四グループの小見出し  <h3>史上まれな大軍勢について</h3>

第五グループの小見出し  <h3>北海道産米の実力について</h3>

一行目の「<h3>・ ◆</h3>」の「◆」を選択してペーストすると、「before」と「after」は次のようになります。

<h2 id="site03">あなたの推理</h2>
<h3>・ ◆</h3>
<p>◆</p>
<h3>・ ◆</h3>
<p>◆</p>
<h3>・ ◆</h3>
<p>◆</p>
<h3>・ ◆</h3>
<p>◆</p>
<h3>・ ◆</h3>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

<h2 id="site03">あなたの推理</h2>
<h3>・ 北海道の誕生について</h3>
<p>◆</p>
<h3>・ 石狩平野の湿地帯について</h3>
<p>◆</p>
<h3>・ 泥炭層の誕生について</h3>
<p>◆</p>
<h3>・ 史上まれな大軍勢について</h3>
<p>◆</p>
<h3>・ 北海道産米の実力について</h3>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

すべてのコピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「index.html」をクリックすると下図のようになっています。

メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。

トップへ戻る

 10-2 項目毎のあなたの推理

では、「・ 古代の国々について」の直下にある「<p>◆</p>」で「◆」を選択し、あなたのご意見を入力してください。項目は5つあるので、それぞれについてご意見を入力しましょう。

すべて項目への週力が完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。

トップへ戻る

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

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

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

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