はげちゃんの世界

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

中級講座4

 ホームページの作成

ウエブページの原版をコピーして、ウエブページの表紙にあたるホームページを作成します。ほとんどはコピー&ペーストで作成します。小中学校と高校で日本史を学びましたが、様々な資料を調べるたびに真実が見えてきます。

1.メインの領域整備

 1-1 情報入力の準備

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

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

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

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

ソースを確認するときには「home」フォルダーの「index.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 一行目の入力

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

★一行目の文章
昭和生まれの人々も平成生まれの若者も、小中学校と高校で日本史を学びました。歴史は過去のことですから、同じ内容を学んでいるはずですが、昭和の教科書と平成の教科書では内容が一変しているのです。資料を調べるたびに真実が見えてきます。

一行目の「<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>昭和生まれの人々も平成生まれの若者も、小中学校と高校で日本史を学びました。歴史は過去のことですから、同じ内容を学んでいるはずですが、昭和の教科書と平成の教科書では内容が一変しているのです。資料を調べるたびに真実が見えてきます。</p>

トップへ戻る

 2-2 二行目の入力

★二行目の文章
昭和生まれは「世界最大の古墳は仁徳天皇陵」と習いましたが、平成になると仁徳天皇陵とすることに異論が多くなり「全長が468mある代表的な前方後円墳で、世界最大級の墓です。」と改められました。

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

<p>昭和生まれは「世界最大の古墳は仁徳天皇陵」と習いましたが、平成になると仁徳天皇陵とすることに異論が多くなり「全長が468mある代表的な前方後円墳で、世界最大級の墓です。」と改められました。</p>

トップへ戻る

 2-3 三行目の入力

★三行目の文章
昭和生まれは「大和朝廷」と習いましたが、必ずしも天皇が政務を執っていたわけではないので「三世紀後半になると、奈良盆地を中心とする地域に強力な勢力(大和政権)が生まれ」と、「大和政権や大和王権」という言葉に置き変わりました。

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

<p>昭和生まれは「大和朝廷」と習いましたが、必ずしも天皇が政務を執っていたわけではないので「三世紀後半になると、奈良盆地を中心とする地域に強力な勢力(大和政権)が生まれ」と、「大和政権や大和王権」という言葉に置き変わりました。</p>

トップへ戻る

 2-4 四行目の入力

★四行目の文章
風林火山を旗印に疾風迅雷と言われた武田騎馬隊は消えました。当時の馬は小型なうえひ弱で、北海道和種馬(どさんこ)と木曽馬(きそうま)は125~135cm、野間馬(のまうま)は100~120cmしか体長がなかったのです。映画に出てくる馬はサラブレッドで、日本に輸入されて生産が始まったのは明治40(1907)年です。

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

<p>風林火山を旗印に疾風迅雷と言われた武田騎馬隊は消えました。当時の馬は小型なうえひ弱で、北海道和種馬(どさんこ)と木曽馬(きそうま)は125~135cm、野間馬(のまうま)は100~120cmしか体長がなかったのです。映画に出てくる馬はサラブレッドで、日本に輸入されて生産が始まったのは明治40(1907)年です。</p>

トップへ戻る

 2-5 五行目の入力

★五行目の文章
昭和生まれは「幕府は鎖国を理由に通商の要請を断り」と学びましたが、幕府は長崎の他にも対馬・薩摩・松前の各藩を海外交渉の窓口としていたことから、江戸時代に200年以上も続いたとされる鎖国は間違いとされて教科書から消えました。

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

<p>昭和生まれは「幕府は鎖国を理由に通商の要請を断り」と学びましたが、幕府は長崎の他にも対馬・薩摩・松前の各藩を海外交渉の窓口としていたことから、江戸時代に200年以上も続いたとされる鎖国は間違いとされて教科書から消えました。</p>

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

トップへ戻る

3.第二グループの整備

 3-1 一行目の入力

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

★一行目の文章
日本は北緯45度から25度の温帯に位置する南北に縦長の列島です。列島の中央に険しい山脈が走り、その山々から流れ下る無数の川が太平洋と日本海にそそいでいます。文明が発達するまで、現在平野と呼ばれるところは川の土砂が堆積した湿地帯でした。

一行目の「<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>日本は北緯45度から25度の温帯に位置する南北に縦長の列島です。列島の中央に険しい山脈が走り、その山々から流れ下る無数の川が太平洋と日本海にそそいでいます。文明が発達するまで、現在平野と呼ばれるところは川の土砂が堆積した湿地帯でした。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 3-2 二行目の入力

★二行目の文章
世界の大地震の20%は日本で発生し、世界の活火山の10%は日本にあります。一世紀の間に1度は押し寄せる大津波により1万人以上の犠牲者を、5~10回起きる大地震のたびに千人以上の死者が出ています。

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

<p>世界の大地震の20%は日本で発生し、世界の活火山の10%は日本にあります。一世紀の間に1度は押し寄せる大津波により1万人以上の犠牲者を、5~10回起きる大地震のたびに千人以上の死者が出ています。</p>

トップへ戻る

 3-3 三行目の入力

★三行目の文章
被害額も巨額で、2016年に発生した熊本地震の被害額は4.6兆円で、自然災害による世界の経済的損失の半分を占めました。2011年の東日本大震災による被害総額は16兆9千億円で、自然災害による世界の損失額の2年分を超えています。日本がいかに自然災害大国かがわかります。

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

<p>被害額も巨額で、2016年に発生した熊本地震の被害額は4.6兆円で、自然災害による世界の経済的損失の半分を占めました。2011年の東日本大震災による被害総額は16兆9千億円で、自然災害による世界の損失額の2年分を超えています。日本がいかに自然災害大国かがわかります。</p>

トップへ戻る

 3-4 四行目の入力

★四行目の文章
北海道の寒冷地から沖縄や小笠原の亜熱帯へつながる日本の気候はゆっくり変化していきます。山々は緑に包まれて鳥の声に満ち、野には草花が咲き乱れています。透き通る湧き水や川は生き物をはぐくみ、人々は自然と一体となって生活していました。

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

<p>北海道の寒冷地から沖縄や小笠原の亜熱帯へつながる日本の気候はゆっくり変化していきます。山々は緑に包まれて鳥の声に満ち、野には草花が咲き乱れています。透き通る湧き水や川は生き物をはぐくみ、人々は自然と一体となって生活していました。</p>

トップへ戻る

 3-5 五行目の入力

★五行目の文章
北の端から南の端まで日本人の顔は似通り、同一言語を使用することで意思を通じ合い、文化は連綿として継承されていきました。灼熱の太陽のもと砂嵐の舞う土地では永遠・無限・絶対という発想が生まれますが、 日本人には猛威を振るう自然に即して、考え方や行動に差別やこだわりのない融通無碍な無原則が身に付きました。

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

<p>北の端から南の端まで日本人の顔は似通り、同一言語を使用することで意思を通じ合い、文化は連綿として継承されていきました。灼熱の太陽のもと砂嵐の舞う土地では永遠・無限・絶対という発想が生まれますが、 日本人には猛威を振るう自然に即して、考え方や行動に差別やこだわりのない融通無碍な無原則が身に付きました。</p>

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

トップへ戻る

4.第三グループの整備

 4-1 一行目の入力

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

★一行目の文章
日本民族は、メラネシア原住民やインドシナ族、インドネシア族、満州や朝鮮方面からツングース系統の種族が流入して同化し、約3万年以上前に私たちの先祖が形成されたと推定されています。日本人のDNAには、中国大陸や東アジアの人々とは異なる特徴があり、チベットやインド洋の孤島にだけ見られる珍しいDタイプが三割ほど存在します。

一行目の「<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>日本民族は、メラネシア原住民やインドシナ族、インドネシア族、満州や朝鮮方面からツングース系統の種族が流入して同化し、約3万年以上前に私たちの先祖が形成されたと推定されています。日本人のDNAには、中国大陸や東アジアの人々とは異なる特徴があり、チベットやインド洋の孤島にだけ見られる珍しいDタイプが三割ほど存在します。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 4-2 二行目の入力

★二行目の文章
種子島の横峯遺跡では約3万年以上前の地層から、日本国内最古の調理場跡が発見されました。長崎県佐世保市瀬戸越にある泉福寺洞窟遺跡から、約1万2千~1万3千年前といわれる世界最古級の土器である豆粒文土器(とうりゅうもんどき)が発見されました。

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

<p>種子島の横峯遺跡では約3万年以上前の地層から、日本国内最古の調理場跡が発見されました。長崎県佐世保市瀬戸越にある泉福寺洞窟遺跡から、約1万2千~1万3千年前といわれる世界最古級の土器である豆粒文土器(とうりゅうもんどき)が発見されました。</p>

トップへ戻る

 4-3 三行目の入力

★三行目の文章
青森県三内丸山遺跡は約5500年前~4000年前の縄文時代の集落跡で、縄文時代中期後半には最大500人という人口となり、1500年間という長きにわたり生活の拠点になっていました。

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

<p>青森県三内丸山遺跡は約5500年前~4000年前の縄文時代の集落跡で、縄文時代中期後半には最大500人という人口となり、1500年間という長きにわたり生活の拠点になっていました。</p>

トップへ戻る

 4-4 四行目の入力

★四行目の文章
人間が居住しているとトイレが必要ですが、トイレの痕跡を見つけることは困難です。排泄物はやがて分解され、トイレの証拠はなくなってしまいます。しかし、奈良教育大学の金原正明教授は三内丸山遺跡の一角で、1千~1万個という高い密度の寄生虫卵を発見しました。

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

<p>人間が居住しているとトイレが必要ですが、トイレの痕跡を見つけることは困難です。排泄物はやがて分解され、トイレの証拠はなくなってしまいます。しかし、奈良教育大学の金原正明教授は三内丸山遺跡の一角で、1千~1万個という高い密度の寄生虫卵を発見しました。</p>

トップへ戻る

 4-5 五行目の入力

★五行目の文章
寄生虫卵も鞭虫(べんちゅう)がほとんどで、当時の人々は植物性食料を多く摂っていたと推定されます。高密度の寄生虫卵が見つかったことで、三内丸山に住んでいた縄文人は腹痛などの鞭虫症に悩まされていたと想像されます。

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

<p>寄生虫卵も鞭虫(べんちゅう)がほとんどで、当時の人々は植物性食料を多く摂っていたと推定されます。高密度の寄生虫卵が見つかったことで、三内丸山に住んでいた縄文人は腹痛などの鞭虫症に悩まされていたと想像されます。</p>

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

トップへ戻る

5.第四グループの整備

 5-1 一行目の入力

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

★一行目の文章
イギリスの歴史は、イングランド、ウェールズ、スコットランド、北アイルランドの連合王国時代となり複雑です。アイルランドを植民地化して北米東海岸に13植民地を形成し、英仏戦争でカナダを植民地とし、ジャマイカ、シンガポール、マレーシヤ、中国、ビルマ、ケニア、タンザニア、ナイジェリア、ガーナを植民地化し、ニュージーランド、サモア、トンガ、フィジー、ソロモン諸島もイギリス領としました。イギリスの元植民地は70ヶ国以上もありました。

一行目の「<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>イギリスの歴史は、イングランド、ウェールズ、スコットランド、北アイルランドの連合王国時代となり複雑です。アイルランドを植民地化して北米東海岸に13植民地を形成し、英仏戦争でカナダを植民地とし、ジャマイカ、シンガポール、マレーシヤ、中国、ビルマ、ケニア、タンザニア、ナイジェリア、ガーナを植民地化し、ニュージーランド、サモア、トンガ、フィジー、ソロモン諸島もイギリス領としました。イギリスの元植民地は70ヶ国以上もありました。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 5-2 二行目の入力

★二行目の文章
アメリカの歴史は1620年イギリス国教会の弾圧を受けた清教徒102人が、メイフラワー号でイギリスから新天地アメリカへ移民しました。寒さと病気のため半数以上の人が死亡し、インディアンの助けにより生き残った人々は理想社会の建設に向ってひたすら働きました。増え続ける移民は土地を奪い、入植者達の邪魔者となったインディアンの虐殺は1890年まで続きました。アメリカの歴史は1776年の独立記念日から始まり、アメリカインディアンの歴史は文字がないため無視されたままです。

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

<p>アメリカの歴史は1620年イギリス国教会の弾圧を受けた清教徒102人が、メイフラワー号でイギリスから新天地アメリカへ移民しました。寒さと病気のため半数以上の人が死亡し、インディアンの助けにより生き残った人々は理想社会の建設に向ってひたすら働きました。増え続ける移民は土地を奪い、入植者達の邪魔者となったインディアンの虐殺は1890年まで続きました。アメリカの歴史は1776年の独立記念日から始まり、アメリカインディアンの歴史は文字がないため無視されたままです。</p>

トップへ戻る

 5-3 三行目の入力

★三行目の文章
ロシアのキエフ公国がモンゴルに支配され、その後モスクワ公国として独立し、凍らない海を求めて南下しました。ヨーロッパや中央アジア、日本と戦争し、第一次大戦中にも革命が起きロマノフ皇帝が亡命し、ソヴィエト政権が誕生し社会主義国となりました。社会主義が拡大してアメリカとの代理戦争が始まりましたが資金難で崩壊すると、社会主義を捨てたロシア連邦が成立しました。グルジアに侵攻するなど戦争には積極的です。

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

<p>ロシアのキエフ公国がモンゴルに支配され、その後モスクワ公国として独立し、凍らない海を求めて南下しました。ヨーロッパや中央アジア、日本と戦争し、第一次大戦中にも革命が起きロマノフ皇帝が亡命し、ソヴィエト政権が誕生し社会主義国となりました。社会主義が拡大してアメリカとの代理戦争が始まりましたが資金難で崩壊すると、社会主義を捨てたロシア連邦が成立しました。グルジアに侵攻するなど戦争には積極的です。</p>

トップへ戻る

 5-4 四行目の入力

★四行目の文章
中国で漢民族の王朝が誕生しても内部腐敗で衰退し、異民族である契丹・モンゴル・満州・女真族などが支配しました。中国に成立した政権は前の政権の業績を否定するため、1966年の文化大革命により旧文化・旧思想は完全に破棄されてしまいました。漢字は中国から日本へ渡来しましたが、日清戦争後に中国人留学生が教科書を祖国に持ち帰り、現代中国語で使われている漢字の7~8割は日本起源の文字が多いそうです。

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

<p>中国で漢民族の王朝が誕生しても内部腐敗で衰退し、異民族である契丹・モンゴル・満州・女真族などが支配しました。中国に成立した政権は前の政権の業績を否定するため、1966年の文化大革命により旧文化・旧思想は完全に破棄されてしまいました。漢字は中国から日本へ渡来しましたが、日清戦争後に中国人留学生が教科書を祖国に持ち帰り、現代中国語で使われている漢字の7~8割は日本起源の文字が多いそうです。</p>

トップへ戻る

 5-5 五行目の入力

★五行目の文章
中国の全国人民代表大会などのニュースを見ると、議論している姿を見ることはできません。権力者により方向が決められていることに対して反対すれば、反逆者と断定されて失脚するだけです。誤りと分かっていても、100%賛成となるのが中国の特徴です。北朝鮮も同様な手法で、代議員は報告を静聴した後に挙手または拍手により満場一致で可決することしかできないようです。

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

<p>中国の全国人民代表大会などのニュースを見ると、議論している姿を見ることはできません。権力者により方向が決められていることに対して反対すれば、反逆者と断定されて失脚するだけです。誤りと分かっていても、100%賛成となるのが中国の特徴です。北朝鮮も同様な手法で、代議員は報告を静聴した後に挙手または拍手により満場一致で可決することしかできないようです</p>

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

トップへ戻る

6.第五グループの整備

 6-1 一行目の入力

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

★一行目の文章
日本人の平均寿命は世界一です。その理由として考えられるのは、日本人の清潔好きと日本の医療の進歩、健康保険制度の充実などが挙げられます。忘れてならないのは、大正12年の関東大震災の時に帝都復興院総裁となった後藤新平が、軍事機密の液体塩素で水道水を殺菌させたことにより乳幼児の死亡率を押さえて生存率を伸ばしたことです。

一行目の「<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>日本人の平均寿命は世界一です。その理由として考えられるのは、日本人の清潔好きと日本の医療の進歩、健康保険制度の充実などが挙げられます。忘れてならないのは、大正12年の関東大震災の時に帝都復興院総裁となった後藤新平が、軍事機密の液体塩素で水道水を殺菌させたことにより乳幼児の死亡率を押さえて生存率を伸ばしたことです。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 6-2 二行目の入力

★二行目の文章
日本人の口癖は、愛おしいと感じる「小さな」ものに対して「かわいい」と言います。更に、日本人の性癖は何でも「縮め」て「かわいく」してしまうことです。大自然を縮小した日本庭園、大きな木の成長を止めた盆栽をはじめとして、テーブルの上の料理を縮め込んだ幕の内弁当、団扇(うちわ)を折りたためる扇子に、ステッキのように長い傘を折り畳む傘に、ステレオを持ち歩けるウオークマンに縮小してきました。

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

<p>日本人の口癖は、愛おしいと感じる「小さな」ものに対して「かわいい」と言います。更に、日本人の性癖は何でも「縮め」て「かわいく」してしまうことです。大自然を縮小した日本庭園、大きな木の成長を止めた盆栽をはじめとして、テーブルの上の料理を縮め込んだ幕の内弁当、団扇(うちわ)を折りたためる扇子に、ステッキのように長い傘を折り畳む傘に、ステレオを持ち歩けるウオークマンに縮小してきました。</p>

トップへ戻る

 6-3 三行目の入力

★三行目の文章
日本人の口癖に「もったいない」という言葉があります。田畑を作れる平野は狭く、物を作るための天然資源はほとんどありません。植物の綿から着物が作られ、古着になると布団として再利用され、布団は座布団となり、やがて下駄の鼻緒や雑巾に利用され、燃やされた灰は植物の肥料になります。物を捨てないで繰り返し使うリサイクル社会を作り上げてきたのです。

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

<p>日本人の口癖に「もったいない」という言葉があります。田畑を作れる平野は狭く、物を作るための天然資源はほとんどありません。植物の綿から着物が作られ、古着になると布団として再利用され、布団は座布団となり、やがて下駄の鼻緒や雑巾に利用され、燃やされた灰は植物の肥料になります。物を捨てないで繰り返し使うリサイクル社会を作り上げてきたのです。</p>

トップへ戻る

 6-4 四行目の入力

★四行目の文章
日本人は「謙譲の美徳」を尊び、謙遜を礼儀として相手を尊重します。諸外国大使館の記録によると南京市の人口は20万人で、住民が日本兵と笑顔で交流する写真が数多く残されています。独裁政権は人民を支配するために教科書で30万人を虐殺と教え、日本のマスコミも真実を無視して嘘を容認しています。

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

<p>日本人は「謙譲の美徳」を尊び、謙遜を礼儀として相手を尊重します。諸外国大使館の記録によると南京市の人口は20万人で、住民が日本兵と笑顔で交流する写真が数多く残されています。独裁政権は人民を支配するために教科書で30万人を虐殺と教え、日本のマスコミも真実を無視して嘘を容認しています。</p>

トップへ戻る

 6-5 五行目の入力

★五行目の文章
日本は列島を囲む海が異民族の侵略や蹂躙を防ぎました。ヨーロッパや中国では異民族から身を守るために都市を囲む城壁を必要としましたが、異民族がいない日本では天守閣を囲う城砦(じょうさい)しかありません。殺戮されたり支配された経験が一度しかない民族は世界中で日本人だけなのです。

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

<p>日本は列島を囲む海が異民族の侵略や蹂躙を防ぎました。ヨーロッパや中国では異民族から身を守るために都市を囲む城壁を必要としましたが、異民族がいない日本では天守閣を囲う城砦(じょうさい)しかありません。殺戮されたり支配された経験が一度しかない民族は日本人だけなのです。</p>

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

トップへ戻る

7.第六グループの整備

 7-1 一行目の入力

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

★一行目の文章
2010年にスタンフォード大学が行った調査報告について、ピーター・ドウス名誉教授が雑誌sapio(小学館)に「日米中韓台の比較研究で分かった一番公正な歴史教科書は日本」と題した論文を寄稿しています。中国と韓国と日本の教科書についての調査結果を抜粋しました。

一行目の「<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>2010年にスタンフォード大学が行った調査報告について、ピーター・ドウス名誉教授が雑誌sapio(小学館)に「日米中韓台の比較研究で分かった一番公正な歴史教科書は日本」と題した論文を寄稿しています。中国と韓国と日本の教科書についての調査結果を抜粋しました。</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

トップへ戻る

 7-2 二行目の入力

二行目から四行目までは、著作権が設定されている文書を引用します。一行目で、引用する書籍名と著者と発行所を明示しました。ルールに基づいて引用した文章を引用符で「<blockquote>と</blockquote>」で「<p>と</p>」の前後を囲みます。

★二行目の文章
<blockquote><p>歴史学の観点から見て最も問題が多いのは中国の教科書だ。中国の教科書は全くのプロパガンダになっている。共産党のイデオロギーに満ちており、非常に政治化されている。太平洋戦争に関してほとんど記述がなく、広島・長崎の原爆投下もほとんど言及していない。中国の教科書は2004年に改定されているが、改定後は中国人の愛国心を謳い、日本との戦いを強調している。内戦の話は後退し、抗日戦線での勇ましい描写が増えた。南京事件などをより詳細に記述するなど、日本軍による残虐行為もより強調されている。つまり中国人のナショナリズムを煽っている。</p></blockquote>

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

<blockquote><p>歴史学の観点から見て最も問題が多いのは中国の教科書だ。中国の教科書は全くのプロパガンダになっている。共産党のイデオロギーに満ちており、非常に政治化されている。太平洋戦争に関してほとんど記述がなく、広島・長崎の原爆投下もほとんど言及していない。中国の教科書は2004年に改定されているが、改定後は中国人の愛国心を謳い、日本との戦いを強調している。内戦の話は後退し、抗日戦線での勇ましい描写が増えた。南京事件などをより詳細に記述するなど、日本軍による残虐行為もより強調されている。つまり中国人のナショナリズムを煽っている。</p>blockquote>

トップへ戻る

 7-3 三行目の入力

★三行目の文章
<blockquote><p>韓国の教科書は、特にナショナル・アイデンティティーの意識の形成に強く焦点を当てている。自分たち韓国人に起こったことを詳細かつ念入りに記述している。韓国の教科書は中国で起きた戦争に関する記述が希薄だ。韓国は日本の中国に対する行為には興味はなく、日本が自分たちに行ったことだけに関心がある。私が驚愕した一つの例は、主要な韓国の教科書には広島長崎の原爆投下の記述がないことだ。それほどまでに彼らは自己中心的にしか歴史を見ていない。</p></blockquote>

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

<blockquote><p>韓国の教科書は、特にナショナル・アイデンティティーの意識の形成に強く焦点を当てている。自分たち韓国人に起こったことを詳細かつ念入りに記述している。韓国の教科書は中国で起きた戦争に関する記述が希薄だ。韓国は日本の中国に対する行為には興味はなく、日本が自分たちに行ったことだけに関心がある。私が驚愕した一つの例は、主要な韓国の教科書には広島長崎の原爆投下の記述がないことだ。それほどまでに彼らは自己中心的にしか歴史を見ていない。</p></blockquote>

トップへ戻る

 7-4 四行目の入力

★四行目の文章
<blockquote><p>今回比較した中では日本の教科書が最も愛国的記述がなく、戦争の賛美などは全くしていない。日本の中国進出についてのくだりは全く事実をそのまま伝えており、当時の軍と政府のリーダーたちの責任だとしている。非常に平板なスタイルでの事実の羅列であり、感情的なものがない。</p></blockquote>

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

<blockquote><p>今回比較した中では日本の教科書が最も愛国的記述がなく、戦争の賛美などは全くしていない。日本の中国進出についてのくだりは全く事実をそのまま伝えており、当時の軍と政府のリーダーたちの責任だとしている。非常に平板なスタイルでの事実の羅列であり、感情的なものがない。</p></blockquote>

トップへ戻る

 7-5 五行目の入力

★五行目の文章
権力にしがみ付く人々が歪曲した歴史を教え、洗脳されて操り人形と化した人々は不幸です。日本の歴史を悪と決めつける、マスコミや知識人と称される方々の自虐史観にも辟易しますが、資料に基づいて偏らない正論が述べられているものもありました。あなたの参考になりそうな書籍も紹介していきます。

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

権力にしがみ付く人々が歪曲した歴史を教え、洗脳されて操り人形と化した人々は不幸です。日本の歴史を悪と決めつける、マスコミや知識人と称される方々の自虐史観にも辟易しますが、資料に基づいて偏らない正論が述べられているものもありました。あなたの参考になりそうな書籍も紹介していきます。

すべてのコピー&ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。「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 写真について

「奇跡の列島と民族」の「過酷で美しい自然」と「珍しい民族」の文章の中に写真を挿入します。

トップへ戻る

 9-2 写真の縮小

「home」の「shasin」フォルダー内の写真「00_00.jpg」はすべてのページに表示させる共通データです。「00_00.jpg」写真を右クリックして最下段の「プロパティ」をクリックし、タブの「詳細」をクリックすると、「イメージID 大きさ940×200」と表示されます。この写真は縮小せずに、このままの大きさですべてのページに表示させます。

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

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

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

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

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

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

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

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

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

トップへ戻る

 9-3 写真の1枚目

文章の間に写真を表示させます。第二グループの「過酷で美しい自然」の4番目に、「北海道の寒冷地から沖縄や小笠原の亜熱帯へつながる日本の気候はゆっくり変化していきます。山々は緑に包まれて鳥の声に満ち」の「声」と「に」の間にカーソルを入れてクリックします。

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

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

<img src="shasin/00_01.jpg" width="350" height="262" class="right">

エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストします。写真は文章の右側へ配置するために「class=""right”」と指定しました。すると、次のようになります。

トップへ戻る

 9-4 写真の2枚目

文章の間に写真を表示させます。第二グループ「過酷で美しい自然」4番目、「日本人の口癖は、愛おしいと感じる「小さな」ものに対して」の「感じ」と「る」の間にカーソルを入れてクリックします。

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

「img」タグに「9-2 写真の縮小」時のデータを入力すると次のようになります。データを入力したイメージタグを右クリックでコピーします。「class="left"」となっていることに注目してください。

<img src="shasin/00_02.jpg" width="262" height="262" class="left">

エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストします。写真は文章の左側へ配置するために「class=""left”」と指定しました。すると、次のようになります。

トップへ戻る

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

トップへ戻る

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つあるので、それぞれについてご意見を入力しましょう。

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

トップへ戻る

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