９ 写真の表示
9-1 写真の選定
ウエブページに掲載される写真やイラストは、文章の補足をしたり内容の理解を深めさせてくれます。あなたがつくるウエブページ「日本史の謎」に写真を掲載します。他人が撮影した写真や他人が写っている写真は著作権や肖像権があるので、あなたが撮影した風景写真などを利用するのが最善です。
あなたのパソコンに保管されている風景などが写ったデジタル写真（拡張子が「.jpg」の写真）を４枚選択し、その写真のコピーを「home」の「shasin」フォルダーに保管します。写真の縮小方法と掲載方法を覚えるのが目的ですから、写真の選択に時間をかけるのはやめましょう。
適当な写真が見つからない場合は、はげちゃんが撮影した写真を使います。下のリンクボタンをクリックすると４枚の写真が表示されます。説明を読んでからディスクトップにダウンロードしてください。
デジタル写真がない方 ⇒ 講座で使用する写真
トップへ戻る
9-2 写真を保管する
ダウンロードした写真に名前をつけます。写真をポイントして右クリックし、「名前の変更」を選択します。写真の名前は次のように半角英数で入力してください。
・ 雲間の光 を 01_01.jpg に変更。
・ 原始の森１ を 01_02.jpg に変更。
・ 原始の森２ を 01_03.jpg に変更。
・ 神代杉 を 01_04.jpg に変更。
・ 夕日 を 01_05.jpg に変更。
写真を５枚ともディスクトップへダウンロードし終わったら、マイドキュメント内に作成された「home」フォルダーをダブルクリックで開き､「shasin」フォルダーをダブルクリックで開きます。
「Ctrl」キーを押しながら５枚の写真を次々にクリックしてから、「Ctrl」キーを放して「shasin」フォルダー内へ５枚の写真をドラッグ＆ドロップ（引きずり落と）します。ダイアログがでたときは「移動」をクリックしてください。
「home」の「shasin」フォルダー内に、「01_01.jpg、01_01.jpg、01_01.jpg、01_04.jpg、01_05.jpg」と半角英数で名前が付けられた写真が５枚保管されました。
「古代の国々」「邪馬台国とは」「卑弥呼の死」「卑弥呼は日御子」の文章の中に写真を挿入します。
トップへ戻る
9-2 写真の縮小
9-2-1 横長の写真
タスクバー左端の「スタート」をクリックして「よく使うアプリのスクロールバー」を下ろして、「Windousアクセサリ」内にある「ペイント」ソフトを起動させます。
ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し､「home」の「shasin」をクリックして開きます。｢shasin」フォルダーから「01_01.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。
メニューの左から二番目のグループにある「サイズの変更」をクリックすると「サイズ変更と傾斜」のダイアログが表示されます。サイズ変更の単位で「ピクセル」をクリックすると、水平方向「５００」垂直方向「３７５」と表示されます。
中央部分にある「縦横比を維持する」にチェックが入っているのを確認してから「水平方向」の窓の数字「５００」を「３００」に修正します。垂直方向は自動的に「３７５」から「２２５」に変更されました。
「ＯＫ」をクリックすると縮小された写真が表示されます。メニューバー左端の「ファイル」をクリックして「上書き保存」をクリックすると、「shasin」の「01_01.jpg」の写真は縮小された状態で上書きされます（入れ替わります）。
再び、ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し､「home」の「shasin」をクリックして開きます。｢shasin」フォルダーから「01_05.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。前記同様の方法で同じ寸法に縮小して上書き保存してください。
トップへ戻る
9-2-2 一枚に見せる写真
更に、ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し､「home」の「shasin」をクリックして開きます。｢shasin」フォルダーから「01_02.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。
メニューの左から二番目のグループにある「サイズの変更」をクリックすると「サイズ変更と傾斜」のダイアログが表示されます。サイズ変更の単位で「ピクセル」をクリックすると、水平方向「４４８」垂直方向「３８０」と表示されます。
中央部分にある「縦横比を維持する」にチェックが入っているのを確認してから「水平方向」の窓の数字「４４８」を「３１０」に修正します。垂直方向は自動的に「３８０」から「２６２」に変更されました。
「ＯＫ」をクリックすると縮小された写真が表示されます。メニューバー左端の「ファイル」をクリックして「上書き保存」をクリックすると、「shasin」の「01_02.jpg」の写真は縮小された状態で上書きされます（入れ替わります）。
再び、ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し､「home」の「shasin」をクリックして開きます。｢shasin」フォルダーから「01_03.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。前記同様の方法で同じ寸法に縮小して上書き保存してください。
トップへ戻る
9-2-3 縦長の写真
次に、ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し､「home」の「shasin」をクリックして開きます。｢shasin」フォルダーから「01_04.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。
メニューの左から二番目のグループにある「サイズの変更」をクリックすると「サイズ変更と傾斜」のダイアログが表示されます。サイズ変更の単位で「ピクセル」をクリックすると、水平方向「３７５」垂直方向「５００」と表示されます。
中央部分にある「縦横比を維持する」にチェックが入っているのを確認してから「水平方向」の窓の数字「３７５」を「２２５」に修正します。垂直方向は自動的に「５００」から「３００」に変更されました。
「ＯＫ」をクリックすると縮小された写真が表示されます。メニューバー左端の「ファイル」をクリックして「上書き保存」をクリックすると、「shasin」の「01_04.jpg」の写真は縮小された状態で上書きされます（入れ替わります）。
トップへ戻る
9-3 写真の１枚目
「古代の国々」文章の間に写真を表示させます。第二グループの「大陸との玄関口」の最終部、「平野で大規模な環濠集落跡の原の辻遺跡が発見され、壮麗な一支（いき）国の王都が」の「）」と「国」の間にカーソルを入れてクリックします。
写真を読み込むときは「img」タグを使います。「img」タグに「写真の保管してある場所、写真の名前、写真の横幅、写真の縦幅、写真を表示しない設定者のために写真の簡単な説明、写真の表示する位置」などのデータを入力します。写真は右側に配置します。
「img」タグに「9-2-1」時のデータを入力すると次のようになります。データを入力したイメージタグを左クリックしながらコピーします。
<img src="shasin/01_01.jpg" width="300" height="225" class="right">
エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストします。すると、次のようになります。
コピー＆ペーストが終わったら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。
トップへ戻る
9-4 写真の２・３枚目
「邪馬台国とは」の文章に写真を表示させます。第二グループ最終部分「邪馬台国の所在が分からなくなったのです。」の「。</p>」の右側にカーソルを入れて「Enter」キーを２回押します。
「img」タグに２枚の写真のデーターを並べて入力します。「img」タグに「9-2-2」時のデータを入力すると次のようになります。データを入力したイメージタグを左クリックしながらコピーします。
<img src="shasin/01_02.jpg" width="310" height="271" class="right"><img src="shasin/01_03.jpg" width="310" height="271" class="right">
エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストします。すると、次のようになります。
２枚の写真が１枚の写真のように見えるでしょう。
コピー＆ペーストが終わったら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。
トップへ戻る
9-5 写真の４枚目
「卑弥呼の死」の文章の間に写真を表示させます。第二グループ「卑弥呼は狗奴国との戦争で」の最終部「戦地に赴いて死亡することは考えられません。</p>」の「。」の右側をクリックしてカーソルを入れます。
「img」タグに「9-2-3」時のデータを入力すると次のようになります。データを入力したイメージタグを左クリックしながらコピーします。
<img src="shasin/01_05.jpg" width="225" height="300" class="right">
エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストします。すると、次のようになります。
コピー＆ペーストが終わったら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。
トップへ戻る
9-6 写真の５枚目
「卑弥呼は日御子」の文章の間に写真を表示させます。第四グループ「西暦２４７年３月４日」の最終部「日没の１８時２５分にほぼ皆既日食状態を迎えました。</p>」の、「日没の１８」の右側をクリックしてカーソルを入れます。
「img」タグに「9-2-3」時のデータを入力すると次のようになります。データを入力したイメージタグを左クリックしながらコピーします。
<img src="shasin/01_05.jpg" width="300" height="225" class="right">
エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストします。すると、次のようになります。
トップへ戻る
コピー＆ペーストが完了したら、メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。
トップへ戻る
