第7回サイトの作成

戻る

課題の概要

HTMLの基礎技術を今まで紹介してきましたが、そろそろ実践的なホームページの制作を行ってみましょう。

というわけで、HTMLや画像、リンクを使ったサイトを新たに作成します。

最終的に指定のサイトが完成したら、サイトで使用するHTMLファイルや画像ファイルなどをすべてmoodleに提出してください。

この課題では、今までに解説したさまざまなHTMLタグを使用します。表 <table>、画像 <img>、リンク <a> などのタグの使い方を確認してください。

過去の資料を確認したり、ネットで検索したりして、分からない情報を調べてください。

作成するサイト

課題で作成するサイトは、以下のようなものです

あなたが気になるトレンドワードを先生に紹介するサイトです。
下の作成例のようなデザインで作成してください。上部の赤いところをクリックすると、３ページに分かれるサイトです。

作成例（ここをクリックすると、大きな画面で動作確認ができます）

デザインには別途、画像などの関連ファイルが必要になります。このページを読み進めていくと掲載されているので、適宜ダウンロードしてください。

その他、もし独自に掲載したいものがある場合は、自由に追加してＯＫです。デザインの一部改変もＯＫです。

全体構成

今回の課題用フォルダとして、trend（トレンド）という名前のフォルダを新しく作るものとします。

Microapacheを使っている場合は、htdocs フォルダの中に trend フォルダを作るのがおすすめです。

trendフォルダ内に作るサイトは、３枚のページで構成されるものとします。各ページは以下のようにするものとします。

No	ファイル名	ページ
1	`index.html`	トップページ
2	`info.html`	紹介ページ
3	`contact.html`	問い合わせページ

今回作成する３つのファイル
位置関係に注意！

元となるHTMLファイルは、補足資料コーナーに記載されている基本HTMLページの記事を参考に作ると良いでしょう。

３ページもあるので大変そうですが、見た目よりは楽です。３ページともページのデザインは全く同じで、本文の内容が異なるだけだからです。よって１ページ目 index.html を製作し終えたら、コピーして複製すると簡単に枚数を増やせます。

各ページの内容は以下のとおりとします。

トップページの内容

作成例 index.html

このサイトの内容がどういうものかを説明し、イメージが伝わりやすいように必要に応じて画像などを掲載してください。

例:「HTMLでサイトを作成しました。紹介コーナーで私の気になるトレンドワードを紹介します。」

紹介ページの内容

作成例 info.html

あなたが気になる最近の流行語、トレンドワードなどをウェブで検索して調べ、それが何なのかを先生に紹介する内容を記入してください。思いつかない人は、以下のようなキーワードから興味のあるものを選んでも良いでしょう。

例：量子コンピュータ　ＶＲ　４Ｋ　ＳＮＳ　ユビキタス　オンデマンド　自動運転　クラウドファンディング　ＩｏＴ　ＰＳ５

上の例はＩＴ関連ワードですが、もちろん異なるジャンルのワードでもOKです。

問い合わせページの内容

作成例 contact.html

今回は学生番号と氏名を記入しておいてください。簡単ですね！

例

学生番号 ○○○○○
氏名　○○○○

以上のように、トップページ index.html ／紹介ページ info.html ／問い合わせページ contact.html の計３ページを作ることになります。

作業のコツ

以前にも紹介しましたが、HTML制作のコツを紹介しておきます。

一気に完成させようとせず、少しずつ画面表示を確認しながら進めるのが確実です。
間違いがある状態のまま強引に先に進んでも、状況は好転しません。
なるべくコピー(Ctrl+C) と貼り付け(Ctrl+V) を使って入力すると、入力間違いを起こしにくいです。
HTMLでは記述に間違いがあるとき、エラーメッセージなどは表示されません。該当部分は単に無視されます。入力した内容が画面に表示されない場合や、効果がない場合は、その周辺に間違いがある可能性が高いです。
HTMLは1行目から順に下に向かって解釈されます。表示がおかしいと感じたら、HTMLの該当箇所より上の部分に間違いがあることが多いです。
問題の場所を見つけるのが難しい場合は、怪しい箇所を切り取り(Ctrl+X) → 貼り付け(Ctrl+V) で別のエディタに一旦退避して、残った部分で表示が正しいか確かめると良いでしょう。表示が正しければ、残っている部分に間違いは無いはずです。少しずつ切り取る範囲を狭くするなどして、間違った部分を特定しましょう。

詳しくは以前紹介した「書き方を間違えたら」の項目を参考にしてください。

同名ファイルが複数存在するので注意

今回の課題で、trend フォルダ内に index.html という名前のファイルを作りますが、作業フォルダの直下にも別の index.html がすでに存在しているはずです。index.html が複数存在することになるので、編集するファイルを間違えないよう注意しましょう。

htdocs 直下にある index.html が MicroApache サーバーが起動した時に最初に表示されるページで、trend フォルダ内にある index.html が今回の課題のトップページになります。
提出するのは後者です。

エクスプローラーの上部には、現在開いている場所が表示されます。またテキストエディタの画面上部にも、現在編集中のファイルの名前や場所が表示されるので、今どこにある何というファイルを編集しているのかに注意して、間違ったファイルを書き換えないようにしてください。¹⁾

エクスプローラーの上部には、現在開いている場所が表示されます。
「> trend」のように書いてある部分に注目すれば
現在 trend フォルダの中身を見ていること分かります。
作業場所を間違えないようにしましょう！

準備

まずはサイトを作る準備をしましょう。具体的な操作方法なども解説していきます。

課題用フォルダの用意

今回の課題では trend（トレンド）フォルダ内にページを作るので、まず trend フォルダを作成します。

新しいフォルダは以下のようにして作れます。

作業用のフォルダ（デスクトップやドキュメント）で「右クリック」→「新規作成」→「フォルダ」を選択します。
（Macの場合は、Finderでフォルダを作りたい場所にアクセスし、画面上部の「ファイル」メニュー→「新規フォルダ」を選択します）
新しいフォルダが作成され、名前をつけられるので、半角英数文字で trend と入力して Enter キーを押します。これでフォルダ作成完了です。

もし名前を間違えたら、対象を「右クリック」→「名前の変更」で再度名前を変えられます。

以降はこの trend フォルダの中で作業をします。他の課題用のファイルなどが混じって混乱しないようにしましょう。

index.html の用意

新しく作った trend フォルダの中身は空っぽですので、最初のページとなる index.html を作成しましょう。

新しい index.html にはHTMLページとして最低限必要になるタグ（<!DOCTYPE> <html> <head> <body> などなど）を書き記す必要がありますが、完全に白紙の状態から作るのは大変です。

そこで補足資料コーナーにある新規HTMLページをベースに作るか、今までに作った課題用HTMLをコピーして使い回すなどして、効率よく新しい index.html を作り、trendフォルダの中に配置しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトルをここに記入してください</title>
</head>

<body>
<!-- 本文ここから -->



<!-- 本文ここまで -->
</body>
</html>

HTMLに必要な基本構造

ちなみに VSCode を使用している場合は、日本語入力がＯＦＦの状態で ! と入力し Tab キーを押すと、上記のような最低限のタグを自動生成してくれます。

必要な画像ファイルを取得

この課題では、画像を使ってページのデザインを行います。

以下のページから、サイトで使用する画像ファイルをダウンロードしてください。

素材ファイル　← ここをクリック

開いた先のページにある「ダウンロード」書かれたリンクをクリックすれば保存できます。

ダウンロードしたものは、まとめて１つのZIP圧縮フォルダに格納されている状態で、そのままでは使えません。圧縮フォルダをダブルクリックするなどして中に入っている画像ファイルをすべて取り出し、trend フォルダ内に配置しておきましょう。

必要な画像を揃えると trend フォルダの中身は、おおむね以下のようになるでしょう。（すでにファイル数が結構多いです）

trend フォルダの中の様子
ZIPから取り出した画像ファイルがたくさん混じっています。

ページの制作方法

それでは、index.html ファイルの中身を作成していきます。

ページの構造

まず index.html をテキストエディタなどで開いて編集を開始します。

これから作るページは表 <table> によってレイアウトを行います。

表の構造は、最終的に以下のようになるでしょう。
下の図では罫線に色を付けて見やすくし、表の構造が分かりやすいようにしてあります。

表の構造が分かりやすい例（このリンクをクリックすると大きな画面で確認できます）

２つの表でできていて、
紫色の表と、緑色の表の
二重構造になっています。

上の紫色のような形の表と、緑色のような形の表を合わせて２つ作り、罫線を消せば隙間がなくなって、最終的に作成例のようなデザインになるわけです。

表の作成

さっそく表を作っていきましょう。

まずは <table> を使って上の紫色の表のような構造を作りましょう。

table タグに使用する属性

<table> タグには以下のような属性を追加する必要があります。

border="1" cellspacing="0" cellpadding="0"

border="1"：罫線を1ピクセルの太さで引く。
cellspacing="0"：セル同士の隙間をゼロにする。
cellpadding="0"：セル内の余白をゼロにする。

表の構造

作る表は以下のような構造になります。

タイトルロゴ用スペース幅`780`　高さ`70`　`colspan="4"`　背景画像 `title_back.gif`
トップページへ幅`148`　高さ`24` `index.html`へリンク背景画像 `tab.gif`	紹介ページへ幅`148`　高さ`24` `info.html`へリンク背景画像 `tab.gif`	問い合わせページへ幅`148`　高さ`24` `contact.html`へリンク背景画像 `tab.gif`	空きスペース幅`336`　高さ`24` リンクなし背景画像なし
本文用スペース幅`780`　高さ指定なし `colspan="4"` 背景画像なし

上の条件に従って、具体的に表を作る方法を解説します。

まず、<body>～</body> の範囲内に、<table> タグを使って表を作りましょう。上のような構造にするためには、以下のように記述する必要があります。なおそれぞれのセルには、分かりやすいように仮の文字列を入れておきます。

<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td colspan="4">タイトルロゴ用スペース</td>
</tr>
<tr>
  <td>トップページへ</td>
  <td>紹介ページへ</td>
  <td>問い合わせページへ</td>
  <td>空きスペース</td>
</tr>
<tr>
  <td colspan="4">本文用スペース</td>
</tr>
</table>

表の作成（body タグの外側は省略しています）



  タイトルロゴ用スペース


  トップページへ
  紹介ページへ
  問い合わせページへ
  空きスペース


  本文用スペース

とりあえず表の形ができました。

サイズの調整

表の構造に書かれている縦横のサイズ指定を表に反映させます。上で作った表に width（ウィドス）と height（ヘイト）属性を追加し、形を整えます。各セルのサイズは下記の幅と高さに設定してください。

タイトルロゴ用スペース幅`780`　高さ`70`
トップページへ幅`148`　高さ`24`	紹介ページへ幅`148`　高さ`24`	問い合わせページへ幅`148`　高さ`24`	空きスペース幅`336`　高さ`24`
本文用スペース幅`780`　高さ指定なし

<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td colspan="4" width="780" height="70">タイトルロゴ用スペース</td>
</tr>
<tr>
  <td width="148" height="24">トップページへ</td>
  <td width="148" height="24">紹介ページへ</td>
  <td width="148" height="24">問い合わせページへ</td>
  <td width="336" height="24">空きスペース</td>
</tr>
<tr>
  <td colspan="4" width="780">本文用スペース</td>
</tr>
</table>



  タイトルロゴ用スペース


  トップページへ
  紹介ページへ
  問い合わせページへ
  空きスペース


  本文用スペース

width と height が書き足され、表のサイズが固定されました。
表の縦幅や横幅が設定されて、全体的に大きくなっています。

なお下部にある「本文用スペース」の高さは、中身の記事の量によって伸び縮みするようにしたいので、高さ指定をしていません。中身を書き込めば縦に伸びていきます。（伸びる様子を確かめたい場合は、<br><br><br>… などと改行をいくつか書き込んでみると良いでしょう）

背景画像の配置

各セルの背景に画像を敷くことによってデザインをします。
セルの背景画像は、<td> に background（バックグラウンド）属性を追加すると設定できます。
設定する画像ファイルの名前は、下記を参照してください。

td タグに背景画像を追加する例

<td width="148" height="24" background="tab.gif">

上記を参考に、表の構造に書かれている背景画像の指定を反映させます。

タイトルロゴ用スペース背景画像 `title_back.gif`
トップページへ背景画像 `tab.gif`	紹介ページへ背景画像 `tab.gif`	問い合わせページへ背景画像 `tab.gif`	空きスペース背景画像なし
本文用スペース背景画像なし

<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td colspan="4" width="780" height="70" background="title_back.gif">タイトルロゴ用スペース</td>
</tr>
<tr>
  <td width="148" height="24" background="tab.gif">トップページへ</td>
  <td width="148" height="24" background="tab.gif">紹介ページへ</td>
  <td width="148" height="24" background="tab.gif">問い合わせページへ</td>
  <td width="336" height="24">空きスペース</td>
</tr>
<tr>
  <td colspan="4" width="780">本文用スペース</td>
</tr>
</table>



  タイトルロゴ用スペース


  トップページへ
  紹介ページへ
  問い合わせページへ
  空きスペース


  本文用スペース

background="～" を追加し、画像が配置されました。
それっぽい見た目になってきました。

なお現在、画像に少し乱れが見えます。これは見た目が分かりやすいように表に罫線を表示しているためです。そのせいで罫線の厚み分だけ表のサイズに狂いが生じているのです。しかし最終的に表の罫線を消す（border="0"）とぴったり収まるはずです。ここでは作業の分かりやすさ優先のため、まだ罫線を消しません。

画像が表示されない場合

もし背景画像が表示されないときは、以下のような点をチェックしてみましょう。

クリックして詳細を確認する

background="" の綴りは正しいでしょうか？スペルミスなどがあると無視されて動作しません。入力ミスを減らすにはコピーと貼り付けで入力するのがおすすめです。
ファイル名は間違っていませんでしょうか？ tab.gif を tag.gif のように間違えたり、tab .gif のように余計なスペースが入ったりしていないか確認してください。やはり入力ミスを減らすにはコピーと貼り付けがおすすめです。
画像ファイルは index.html と同じ場所に配置してあるでしょうか？原則、HTMLファイルと同じ場所に置いてある画像が呼び出されます²⁾。あなたの作業用フォルダの中を見て確認してください。
- もしまだダウンロードしていないなら、素材ファイルページから入手しましょう。
- ダウンロードしたものはZIP圧縮されているので、展開して中身の画像ファイルを全て取り出し、編集中のHTMLと同じフォルダ内に配置しておきましょう。

コンピュータは指示されたことしかやりませんので、指示が合っており、必要な画像がちゃんと見つかるのであれば、動作するはずです。逆に言えば、指示が間違っていたり、必要なファイルが指定の場所に無いと、動きません。多少の間違いがあっても空気を読んで表示してくれれば良いのですが、コンピュータは言われたことを言われたとおりにしかできない究極の指示待ちヤロウなのです……。

タイトルロゴ

タイトルロゴは「○○のサイト」のように、サイトの内容がよく分かるものが良いでしょう。「タイトルロゴ用スペース」内に直接書き込めばＯＫです。

タイトル文字を中央寄せにしたい場合は、「タイトルロゴ用スペース」の <td> に align="center" と valign="middle" を加えて中央寄せにすると良いでしょう。

さらに目立つタイトルロゴを作りたい場合は、<font> を使って文字の大きさや色を変更しても構いません。color 属性で文字の色、size 属性で文字の大きさを調整できます。たとえば、以下のように設定できます。

<font color="orange" size="6">私の趣味のサイト</font>

私の趣味のサイト

さらにカッコイイ！タイトルロゴのチャレンジ

このチャレンジはやや挑戦的な内容になっています。もし余裕があれば試してみてください。
できなくてもマイナス評価にはなりません。

クリックして詳細を確認する

タイトルロゴをより豪華に飾るために、ロゴを画像で製作し、サイト上部に配置することもできます。
ワードアートなどでロゴを別途作成し、Snipping Tool や Win+Shift+S で画面を画像として保存し、<img> で表示させる方法があります。

<td colspan="4" width="780" height="70" background="title_back.gif"><img src="ロゴ画像名"></td>

タイトルロゴ画像は、たとえば以下のような手順で作成すると良いでしょう。

WORDを起動し、ワードアート等でロゴを作成します。ロゴ画像は実寸大で掲載されるので、大きく作りすぎると表の枠からはみ出してしまいます。WORD画面で右下の拡大率が100%のとき、フォントサイズ30以下が目安です。
Snipping tool アプリを使って画像として切り出し、trend フォルダ内に保存します。ここでは logo.png として保存したとします。

Snipping tool は画面の一部を切り出して画像として保存できるWindowsのツールです。詳しい使い方は、補足資料コーナーの Snipping Tool による画像処理を参考にしてください。

Windowsの場合は Win+Shift+S で、Macの場合は Shift+⌘Command+4 で画面の一部を切り出し、画像として保存できる「スクリーンキャプチャ」機能がありますので活用するのも良いでしょう。
参考：Macでスクリーンショットを撮る
HTMLファイル内で <img> タグを使って表示させます。
```
<img src="logo.png">
```

ページの上部にワードアートで作られたタイトルロゴが表示されたら成功です。

リンクの設置

次は、画面上部にリンクを設置します。

作成例を見ると、サイトの上部に「トップページ」「紹介ページ」「問い合わせ」のように書かれていて、クリック可能になっています。これらはそれぞれリンクです。

サイト上部のリンク

作成した表の「トップページへ」「紹介ページへ」「問い合わせページへ」と書かれているセルに、それぞれリンクを設置しましょう。

リンク先は、先述のページ構成に従って、次のようになります。

No	ページ	ファイル名
1	トップページ	`index.html`
2	紹介ページ	`info.html`
3	問い合わせページ	`contact.html`

さらに「空きスペース」の文字はもう不要になりましたので、削除しておきます。

リンクは <a> タグで以下のように実装できます。

<a href="リンク先">画面に表示する内容</a>

具体的には、上で作った表の一部を、以下のように修正すると良いでしょう。（必要な部分以外、表示を省略しています。）

<tr>
  <td width="148" height="24" background="tab.gif"><a href="index.html">トップページ</a></td>
  <td width="148" height="24" background="tab.gif"><a href="info.html">紹介ページ</a></td>
  <td width="148" height="24" background="tab.gif"><a href="contact.html">問い合わせ</a></td>
  <td width="336" height="24">空きスペース</td>
</tr>



  私の趣味のサイト


  トップページ
  紹介ページ
  問い合わせ
  


  本文用スペース

<a href="…">～</a> を書き足してリンクが追加されました。
「トップページへ」「紹介ページへ」「問い合わせ」の部分がリンクによって青くなりました。

リンクの色が見にくいので、<body> に link 属性と vlink 属性を追加し、リンクの文字色を変更すると良いでしょう。ここでは白色にしています。

また、リンクの文字が左に寄っているので <td> に align="center" を追加して、中央寄せにします。

<body link="white" vlink="white">
 
・・省略・・
 
<tr>
  <td width="148" height="24" background="tab.gif" align="center"><a href="index.html">トップページ</a></td>
  <td width="148" height="24" background="tab.gif" align="center"><a href="info.html">紹介ページ</a></td>
  <td width="148" height="24" background="tab.gif" align="center"><a href="contact.html">問い合わせ</a></td>
  <td width="336" height="24"></td>
</tr>



  私の趣味のサイト


  トップページ
  紹介ページ
  問い合わせ
  


  本文用スペース

青かったリンクの色が白になり、文字がセルの中で中央寄せになりました。
クリック可能なボタンが出来上がりました。

なお実際にクリックするとファイルが見つからない旨のエラーが出ますが、これはまだ続きのページである info.html や contact.html を作成していないからで、正常な動作です。それらは現在編集中の index.html が完全に仕上がってから作ることにしましょう。あわてないで！🤣

本文用スペースの作成

いよいよ本文を書くための場所の制作に取り掛かります。

本文用スペース

この部分は、どういう仕組みになっているのでしょうか？🤔

本文の文章は、丸い飾り枠で囲まれます。
この部分は、表 <table> を使って実現しています。表の中に画像を置くことで、飾り枠っぽく見せています。

最初にダウンロードした画像の中に、丸い部分を再現するための飾り枠が含まれています。
画像は８つの部分に分割されていますので、これらを表 <table> の中に適切に配置します。

下の図は配置の仕方が分かりやすいように示した例です。

赤い飾り枠が、表によって分割されている様子

簡単に書くと、下のように縦横３ｘ３の表を作るイメージです。

上を単純に表したもの
３ｘ３の表

そして周りの赤い線のように見える部分は、それぞれ小さな画像が置かれていて、それらがつながって飾り枠になるというわけです。

上で作成した表のうち「本文用スペース」にあたるセル内に、このパーツが丸ごと入る事になります。

HTMLは現在、以下のようになっているかと思いますが、まず「本文用スペース」と書かれている部分の前後に Enter キーで改行を入れ、十分な空間を用意しましょう。

<body link="white" vlink="white">

<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td colspan="4" width="780" height="70" background="title_back.gif" align="center" valign="middle" >
    <font color="orange" size="6">私の趣味のサイト</font>
  </td>
</tr>
<tr>
  <td width="148" height="24" background="tab.gif" align="center"><a href="index.html">トップページ</a></td>
  <td width="148" height="24" background="tab.gif" align="center"><a href="info.html">紹介ページ</a></td>
  <td width="148" height="24" background="tab.gif" align="center"><a href="contact.html">問い合わせ</a></td>
  <td width="336" height="24"></td>
</tr>
<tr>
  <td colspan="4" width="780"><!-- もともと「本文用スペース」と書いてあった部分で改行を行い、広い空間を作りました。
     ここにこれからもう一つの表を作ります。 -->







  </td>
</tr>
</table>

</body>

「本文用スペース」のための <td> と </td> の間に改行をたくさん入れて、目印にする感じです。もちろん「本文用スペース」という仮の文字はもう不要なので消しておきます。

そして作成した空間に下のような構造の表を新たに作成してください。あともう少しでデザイン完成です!

丸い飾り枠を表現する表 <table> は以下のような３列 x ３行の構造とします。

左上背景画像 `main_top_left.gif` 幅`16`　高さ`16`	上背景画像 `main_top.gif` 幅`748`　高さ指定なし	右上背景画像 `main_top_right.gif` 幅`16`　高さ`16`
左背景画像 `main_left.gif` 幅`16`　高さ指定なし	中央背景画像なし幅`748`　高さ指定なし	右背景画像 `main_right.gif` 幅`16`　高さ指定なし
左下背景画像 `main_bottom_left.gif` 幅`16`　高さ`16`	下背景画像 `main_bottom.gif` 幅`748`　高さ指定なし	右下背景画像 `main_bottom_right.gif` 幅`16`　高さ`16`

とりあえず３ｘ３の表を作りましょう。以下のようになるはずです。
必要な部分以外は省略しています。（コピー・貼り付けする場合は貼り付ける場所に気をつけましょう）
例では見やすいように改行を多めに入れています。

<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td>左上</td>
  <td>上</td>
  <td>右上</td>
</tr>
<tr>
  <td>左</td>
  <td>中央</td>
  <td>右</td>
</tr>
<tr>
  <td>左下</td>
  <td>下</td>
  <td>右下</td>
</tr>
</table>

もう一つの表
さっき確保した広い場所に追加します



  左上
  上
  右上


  左
  中央
  右


  左下
  下
  右下

とりあえず３ｘ３の表ができました。
ここでは分かりやすいように一旦「右上」や「左下」のように文字を書いておきます。

この後、先ほどと同じようにサイズの調整と背景画像を行います。まずはサイズを調整します。

サイズの調整(本文)

縦横サイズの指定を表に反映させます。 <td> に width と height 属性を追加します。よく似た部分が多いので、コピーと貼り付けを使えば効率よく入力できることでしょう。（ width="16" height="16" をコピー・貼り付けでたくさん作り、部分的に修正するなど工夫をすると良いでしょう）

左上幅`16`　高さ`16`	上幅`748`　高さ指定なし	右上幅`16`　高さ`16`
左幅`16`　高さ指定なし	中央幅`748`　高さ指定なし	右幅`16`　高さ指定なし
左下幅`16`　高さ`16`	下幅`748`　高さ指定なし	右下幅`16`　高さ`16`

<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td width="16" height="16">左上</td>
  <td width="748"           >上</td>
  <td width="16" height="16">右上</td>
</tr>
<tr>
  <td width="16"            >左</td>
  <td width="748"           >中央</td>
  <td width="16"            >右</td>
</tr>
<tr>
  <td width="16" height="16">左下</td>
  <td width="748"           >下</td>
  <td width="16" height="16">右下</td>
</tr>
</table>



  左上
  上
  右上


  左
  中央
  右


  左下
  下
  右下

width= と height= を追加して、表のサイズが調整されました。
セルの中に入っている文字と罫線の厚みのせいでサイズに狂いが生じていますが、文字を消せば指定通りのサイズになるはずです。

背景画像の配置(本文)

背景画像の指定を表に反映させます。 <td> に background 属性を追加し、指定の画像を配置します。

また、仮に書いておいた「右上」などの文字も不要になるので、「中央」の文字だけを残し、それ以外を削除します。
これは「中央」の部分に後から記事を書き込むためのもので、目印のために「中央」を残すものとします。

左上背景画像 `main_top_left.gif`	上背景画像 `main_top.gif`	右上背景画像 `main_top_right.gif`
左背景画像 `main_left.gif`	中央背景画像なし	右背景画像 `main_right.gif`
左下背景画像 `main_bottom_left.gif`	下背景画像 `main_bottom.gif`	右下背景画像 `main_bottom_right.gif`

<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td width="16" height="16" background="main_top_left.gif" >左上</td>
  <td width="748"            background="main_top.gif"      >上</td>
  <td width="16" height="16" background="main_top_right.gif">右上</td>
</tr>
<tr>
  <td width="16"             background="main_left.gif" >左</td>
  <td width="748"                                       >中央</td>
  <td width="16"             background="main_right.gif">右</td>
</tr>
<tr>
  <td width="16" height="16" background="main_bottom_left.gif" >左下</td>
  <td width="748"            background="main_bottom.gif"      >下</td>
  <td width="16" height="16" background="main_bottom_right.gif">右下</td>
</tr>
</table>

background= を追加して、画像を配置しました。「左上」「右下」などの文字は消しました。
赤い枠が円形に繋がりました。

良く似た名前に注意

画像の配置間違いや、ファイル名の間違いに注意してください。
配置を間違えると、つなぎ目でズレが発生しますし、ファイル名を間違えると、その部分の枠線が表示されません。

もしつなぎ目が切れたりしている場合は、その部分の背景画像が誤って配置されていると思われます。
HTML上ではセルが「左上」「上」「右上」　「左」「中央」「右」　「左下」「下」「右下」の順に並んでいるので、対応する場所をよく見て、配置する画像に間違いがないかを確認しましょう。

画像ファイルの名前には以下のような規則性があるので、参考にしてください。

画像ファイルの命名規則
上記のようなキーワードを組み合わせてファイル名を決定します。
main_top_left.gif、main_right.gif など

仕上げ

いろいろあってHTMLは以下のようになっていることでしょう。（<body> 要素の外側部分は省略しています）

<body link="white" vlink="white">

<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td colspan="4" width="780" height="70" background="title_back.gif" align="center" valign="middle" >
    <font color="orange" size="6">私の趣味のサイト</font>
  </td>
</tr>
<tr>
  <td width="148" height="24" background="tab.gif" align="center">
    <a href="index.html">トップページ</a>
  </td>
  <td width="148" height="24" background="tab.gif" align="center">
    <a href="info.html">紹介ページ</a>
  </td>
  <td width="148" height="24" background="tab.gif" align="center">
    <a href="contact.html">問い合わせ</a>
  </td>
  <td width="336" height="24"></td>
</tr>
<tr>
  <td colspan="4" width="780">


   <!-- ↓↓↓↓ここから本文用スペース↓↓↓↓ -->
  <table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td width="16" height="16" background="main_top_left.gif" ></td>
  <td width="748"            background="main_top.gif"      ></td>
  <td width="16" height="16" background="main_top_right.gif"></td>
</tr>
<tr>
  <td width="16"             background="main_left.gif" ></td>
  <td width="748"                                       >中央</td>
  <td width="16"             background="main_right.gif"></td>
</tr>
<tr>
  <td width="16" height="16" background="main_bottom_left.gif" ></td>
  <td width="748"            background="main_bottom.gif"      ></td>
  <td width="16" height="16" background="main_bottom_right.gif"></td>
</tr>
</table>
  <!-- ↑↑↑↑ここまで本文用スペース↑↑↑↑ -->


  </td>
</tr>
</table>

</body>



  私の趣味のサイト


  トップページ
  紹介ページ
  問い合わせ
  


  




  
  
  


  
  中央

分かりやすいように一部コメントを追加しています。

罫線の厚みがあるせいで、まだサイズに狂いが生じていますが、表の罫線を消すと、狂いはなくなるはずです。ですが罫線を消すと表の構造がよく分からなくなるので、問題がないかこの時点でよく確認しておきましょう。画像が表示されていなかったり、罫線がつながっていなかったりしないかチェックしましょう。

問題がなければ、罫線を消します。罫線は <table> に対して border="1" という属性を追加して描いているので、これを border="0" に変更すれば罫線は消えるはずです。

表は２重になっているので、<table> タグは２箇所あります。修正箇所も２箇所あるので注意してください。



  私の趣味のサイト


  トップページ
  紹介ページ
  問い合わせ
  


  




  
  
  


  
  中央

２箇所 border="0" に書き換えて罫線が消えると、このようになります。
罫線の厚みが無くなって画像のズレも解消されます。美しい！😋

これで index.html ファイルは完成です。

以降は上の例で「中央」と書かれている部分にページの内容となる文章を追加し、完成を目指します。

他ページの制作

上の作業で完成させた index.html を複製し、残りの２ページである info.html と contact.html を作ります。

複製作業を始める前に index.html ダブルクリックして開き、表構造の崩れや画像の不足など、内容に問題がないか確認してください。index.html を元にして他のページを作るので、この時点で何か問題があると、他のページにも問題が広がってしまいます。

ファイルの複製

index.html の複製を行います。

index.html を「右クリック」→「コピー（Ctrl+C）」し、近くの空いた場所で「右クリック」→「貼り付け（Ctrl+V）」をしましょう。これでファイルが複製されます。（ショートカットキーを使う場合は、index.html をクリックして選択し、キーボードで Ctrl キーを押しっぱなしにして C V と順にキーを押して複製できます）

index.html を複製した状態
index - コピー.html が複製されたファイルです。

合計３ページ必要なので、もう一つ複製しましょう。さらに近くの空いた場所で「右クリック」→「貼り付け」すれば複製され、合計３ファイルできます。

さらに複製した状態
index - コピー(2).html が複製されたファイルです。

Macの場合は、Finder上で index.html を選択し、⌘Command+D キーを押すと、ただちにファイルの複製が作成されます。（Windowsと同様に ⌘Command+C でコピーし、⌘Command+V で貼り付けても複製できます）

ファイルの名前を変更します。コピーされたファイルを「右クリック」→「名前の変更」でファイル名を変えられます。
それぞれ以下のように info.html と contact.html という名前に変更してください。

No	ファイル名	ページ
2	`info.html`	紹介ページ
3	`contact.html`	問い合わせページ

ファイル名の変更が完了した状態

ファイル名入力時の注意

クリックして詳細を確認する

ファイル名は半角英数文字で正確に入力しましょう。日本語入力がOFFの状態で入力するのが安全です。

複製されたファイルは index - コピー.html のようにファイル名にスペース文字を含んでいます。ファイル名を修正する際は、末尾にスペースを残さないよう注意しましょう。

info.html     ← ○ 正しい例
info .html    ← × 誤り ファイル名の後ろにスペースが一つ残っています。
imfo.html     ← × 誤り ファイル名が間違っています。
info,html     ← × 誤り 拡張子のドット「.」がカンマ「,」になっています。

問い合わせページの内容を記入

それでは問い合わせページの内容を編集していきましょう。

問い合わせページに該当する contact.html の内容は単純です。今回は学生番号と氏名を記入しておいてください。

問い合わせページの例

学生番号 １２３４５６
氏名　山田孝太郎

contact.html をテキストエディタのウインドウ上にドラッグして開き、内容を修正します。

どのファイルを編集中なのか把握しましょう

もしも、よく似た内容のファイルを複数開いている場合は、編集するファイルを間違えないようにしましょう。せっかく作ったページを間違えて壊してしまったら大変です。

大抵のテキストエディタでは、ウインドウ上部に編集中のファイルが書かれています。下の図の場合は、現在 contact.html を編集しているというわけです。

「サクラエディタ」の例
上部で編集中のファイルが確認できます。

他のアプリでも、たいていウインドウ上部に注目すると、編集しているファイルが分かることが多いです。

別のテキストエディタの例
同じように上部で編集中のファイルが確認できます。

サクラエディタの場合、どの場所にあるファイルを編集しているかも分かります。異なるフォルダに似たような名前のファイルがある場合もあるので、間違えないように注意しましょう。

「現在どのファイルを編集しているか」を確認し、誤ったファイルを書き換えないよう注意しましょう。

前回のHTMLでは「本文用スペース」に該当する表 <table> の中にある「中央」と書かれたセル <td> の中に記事を収める必要があります。下の例では分かりやすいように「中央」の周囲にスペースを設けています。あなたのHTML内にも同じような場所があるはずなので、探してください。

<!-- ↓↓↓↓ここから本文用スペース↓↓↓↓ -->
<table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td width="16" height="16" background="main_top_left.gif" ></td>
  <td width="748"            background="main_top.gif"      ></td>
  <td width="16" height="16" background="main_top_right.gif"></td>
</tr>
<tr>
  <td width="16"             background="main_left.gif" ></td>
  <td width="748"                                       >     中央     </td>
  <td width="16"             background="main_right.gif"></td>
</tr>
<tr>
  <td width="16" height="16" background="main_bottom_left.gif" ></td>
  <td width="748"            background="main_bottom.gif"      ></td>
  <td width="16" height="16" background="main_bottom_right.gif"></td>
</tr>
</table>
<!-- ↑↑↑↑ここまで本文用スペース↑↑↑↑ -->

記事を書くべき場所が分かりやすいように、Enter キーを何度か押して、広めの空間を作っておくと良いでしょう。
<td width="748" > と </td> の間に広い空間を作るイメージです。

そして目印にしていた「中央」という文字は、もう必要ないので削除しておきます。

   <!-- ↓↓↓↓ここから本文用スペース↓↓↓↓ -->
  <table border="1" cellspacing="0" cellpadding="0">
<tr>
  <td width="16" height="16" background="main_top_left.gif" ></td>
  <td width="748"            background="main_top.gif"      ></td>
  <td width="16" height="16" background="main_top_right.gif"></td>
</tr>
<tr>
  <td width="16"             background="main_left.gif" ></td>
  <td width="748"                                       >  <!-- 広い空間を確保 -->






  </td>
  <td width="16"             background="main_right.gif"></td>
</tr>
<tr>
  <td width="16" height="16" background="main_bottom_left.gif" ></td>
  <td width="748"            background="main_bottom.gif"      ></td>
  <td width="16" height="16" background="main_bottom_right.gif"></td>
</tr>
</table>
  <!-- ↑↑↑↑ここまで本文用スペース↑↑↑↑ -->

「中央」と書かれていた場所を広げて空間を作りました。

あとは作った空間部分に、問い合わせページの内容である「学生番号」と「氏名」を入力するだけです。

学生番号 ○○○○○<br>
氏名　○○○○<br>

問い合わせページに書き込む内容

これで contact.html は完成です。簡単ですね。

他のページに記事を書き込むときも同様に、「中央」と書かれたセルの中身を広げ、記事となる文章を記入してください。

紹介ページの内容を記入

続けて、紹介ページの内容を編集していきましょう。

紹介ページに該当する info.html の内容は、あなたが気になる最近の流行語、トレンドワードなどをウェブで検索して調べ、それが何なのかを先生に紹介する内容を記入してください。

例：量子コンピュータ　ＶＲ　ＡＲ　４Ｋ　ＳＮＳ　メタバース　自動運転　クラウドファンディング　ＩｏＴ　ＰＳ５

この例はIT関連ワードですが、もちろん異なるジャンルのワードでもＯＫです。自由なテーマで記事を作成してください。

作業工程は contact.html と同様です。

今度は info.html をテキストエディタにドラッグして開き、内容を修正します。

上の項と同じように「中央」のセルを広げて空間を作り、記事となる文章を記入してください。

この記事がサイトのメインコンテンツなので、頑張って記事を作りましょう。

基本的には、<h1> <h2> <h3> などを使って適切な見出しを作り、文章を段落ごとに <p> でまとめて整形する感じです。

その他、表 <table> や、画像 <img src="画像ファイル名"> などを必要に応じて追加しましょう。

紹介ページの具体例

具体的には作成例 info.html を参考にしてください。
もし上の info.html のHTMLがどうなっているか知りたい場合は、下の部分をクリックして確認できます。参考にしてください。

クリックして詳細を確認する

info.html のHTMLは以下のようになっています。
（<body> の外側は省略しています）

細かい文章の内容はさておき、要所要所で <h2> や <h3> の見出しを使っていたり、<blockquote> で字下げを作ったり、関連する他のウェブページへのリンク <a> を入れたりしていることが分かると思います。

<h2>気になるトレンドワード 「電子書籍 」 について</h2>
<p>このページでは私が気になるトレンドワードである <b>電子書籍</b> の紹介をします。</p>
<h3>電子書籍 とは</h3>

<blockquote>
<p><b>電子書籍</b>とは紙とインクを利用した印刷物ではなく、文字や図に加えて音声や動画などをデジタル媒体に記録し、ネットワークで流通させた情報を指します。ここではとくに<b>書籍</b>を<b>電子化したものについて紹介</b>します。</p>
<p>本来、電子書籍はソフトウェアであるコンテンツのことだけを指しますが、再生用の端末機器 [ <b>電子ブックリーダー</b> ] も重要な要素といえます。</p>
</blockquote>

<h3>電子書籍の種類</h3>

<blockquote>
<p>現在流行している 主な電子ブックリーダーには、<a href="http://www.amazon.co.jp/exec/obidos/tg/browse/-/2250738051" target="_blank" style="color:blue;">Amazon Kindle</a>、<a href="https://books.rakuten.co.jp/e-book/" target="_blank" style="color:blue;">楽天Kobo</a>、<a href="http://sharpgalapagos.jp/" target="_blank" style="color:blue;">シャープ GALAPAGOS(ガラパゴス)</a> などがあります。また、スマートフォンのアプリケーションとしても電子ブックリーダーが存在するので、例えば Amazon Kindle 用のコンテンツをアンドロイドOSを搭載したスマートフォンで閲覧することも出来ます。</p>
<p>電子ブックリーダーで閲覧をするコンテンツは、通常、各電子リーダーごとに専用形式のデータを使用します。<br>
しかし多くの電子ブックリーダーはPDF形式などにも対応しているため、自身で作成したデジタルコンテンツをPDF形式で保存し、電子ブックリーダーで閲覧するという使い方もできます。</p>
</blockquote>

<h3>なぜ電子書籍を使うのか</h3>

<blockquote>
<p>私の場合、最初は紙の本で読書をしていましたが、次第に<b>読み終わった紙の本がかさばる</b>ことが問題になってきました。小説以外にも漫画本などを所有していますが、部屋のを徐々に読み終わった本が占領していき、次第に部屋のスペースを圧迫している事に気づいたのです。<br>
しかも、<b>一度読み終わった本をもう一度読む、ということはほぼ無い</b>ことにも気づきました。本というものは新刊が毎月どんどん発売されます。読みたい本をリストアップしていくと、どんどん増える一方で、減る気配がありません。このままでは死ぬまでに読み切ることは無理であると悟りました。確かに面白い本はもう一度読みたくなりますが、まだ読んでいない本の中に面白い本があるかもしれないと思うと、<b>一度読んだ本をもう一度読むために時間を割くのがもったいない</b>と感じるようになったのです。</p>
<p>ということは、本を物理的に所有していることにはあまり意味が無いと感じました。その点、電子書籍であれば、あくまでデジタルデータで端末から消せば全く かさばらない ため、負担になりません。<br>
またAmazon等の場合、欲しい本があったり、もう一度読みたくなった場合には、簡単にネットワークからダウンロードすることが出来ます。例えば図書館で借りる場合、本が貸出中であれば返却されるまで待つ必要がありますが、それも必要ないというわけです。</p>
<p>手元に本は残りませんが、本を買うよりは安い値段で購入でき、読めさえすればいいと思っている私の場合、電子書籍が最適だという結論に達したのです。</p>
</blockquote>

<h3>電子書籍の使い勝手</h3>

<blockquote>
<p>私は Amazon Kindle を使っていますが、 実際に使って見ていくつかのメリットとデメリットに気づきました。</p>
<p>まず<b>デメリット</b>ですが、電子書籍を読むための端末 <b>電子ブックリーダー が必要</b>であるという点があります。<br>
また、充電式の機器なので、<b>充電できていないと読めない</b> という問題が有ります。</p>
<p>電子ブックリーダーが必要になるせいで 荷物がひとつ増えるのは邪魔ですが、本よりは重量がかさばらず厚みもないため、バッグなどがあればあまり問題ではないかもしれません。<br>
また、Amazon Kindle の場合、スマートフォンのアプリと連動するため、電子ブックリーダーを携行するのを忘れた場合も、スマートフォンで続きを読んで解決する方法があります。</p>
<p>充電に関しては、<b>Amazon Kindle の場合は、かなり連続稼働時間が長い</b>ため、あまり問題にはなりませんでした。例えば毎日普通に本を呼んでいて、2週間以上充電する必要が無かったぐらいです。</p>
<p><b>メリット</b>としては、<b>かさばらない</b>ことの他に<b>読みやすい</b>事があります。<br>
Amazon Kindle の場合は、液晶が特殊な設計になっているようで、<b>直射日光下</b>でもはっきり文字を見ることが出来ます。また、私は寝る前に本を読むことが多いのですが、電子ブックリーダーが自ら光っているため<b>暗闇の中でも問題なく読むことが出来ました</b>。<br>
また、紙の本の場合、寝る前に読むとき、本を支えるのが疲れるのですが、硬い板状の電子ブックリーダーを支えるのは紙の本よりは楽だと感じました。</p>
<p>このようにおおむね問題が解消され、メリットが有るため今では電子書籍を大変愛用しています。</p>
</blockquote>

<h3>注意すべき問題点</h3>

<blockquote>
<p>大変便利な電子書籍なのですが、データが手元に残らないため、例えば<b>Amazonがサービス提供を中止した場合、コンテンツが手に入らなくなる</b>という問題が有ります。また、読み終わった本が手元に残らないため、例えば<b>友人に貸すと言ったことが出来ない</b>のが、難点です。<br>
また、ネットワークに接続されていないと本をダウンロード出来ないため、旅行などでネットワークの環境が充分でない時にはあらたなコンテンツを手に入れることが苦しいと言えます。<br>
（ただしあらかじめ端末にコンテンツをダウンロードし準備しておくことが出来るなら、この問題は回避できます。）</p>
<p>そして何よりも恐ろしいのは<b>電子ブックリーダーを紛失・盗難された場合</b>です。<br>
電子ブックリーダーでは、簡単な操作で新たな本が買えるのですが、<b>電子ブックリーダーを盗難されると、第三者に勝手に本を買われてしまう</b>という問題点があります。<br>
また、Amazon Kindle の場合、Amazonに私のアカウントでログインした状態で使用するのですが、Amazon内で販売されている他の商品も第三者に勝手に買われてしまったり、Amazonに登録している個人情報が流出したりする可能性があります。</p>
<p>この問題に対する対策として、Amazon Kindle の場合、購入後に購入を取り消す仕組みが備わっています。<br>
また、根本的な対策としては、<b>Amazonアカウントのパスワードを変えてしまう</b> 方法もあります。<br>
こうすれば、電子ブックリーダー側からは、パスワードが無効になるため、すべての購入や個人情報の参照ができなくなるはずです。</p>
<p>このように対策方法はあるものの、取り扱いに注意を要するということには違いありません。</p>
<p>紙の本を扱う場合とはまた違った注意が必要になるということを意識させられました。</p>
</blockquote>
<p>以上が私が電子書籍を使ってみて気づいた点です。<br>
先生もぜひ電子書籍を利用してみてください。<br>
</p>

トップページの内容を記入

トップページに該当する index.html の内容は、このサイトの内容がどういうものかを説明し、イメージ画像を掲載するなどしてください。
例:「このサイトは○○について解説するサイトです。紹介コーナーで私の気になるトレンドワードを紹介します。」

具体的には作成例を参考にしてください。

作業工程は、やはり contact.html と同様です。

今度は index.html をテキストエディタにドラッグして開き、内容を修正します。

上の項と同じように「中央」のセルを広げて空間を作り、記事となる文章を記入してください。

これで全３ページの内容が揃いました。

リンクの動作確認

ページ上部のボタン部分は、各ページへのリンクになっているはずです。

サイト上部のリンク
クリックしたらちゃんとつながっていますか？
動作確認しましょう。

並んでいる３つのリンクを試しにクリックし、それぞれのページに画面が切り替わるかチェックしましょう。動作確認はとても大切です！かならずチェックしましょう。index.html info.html contact.html それぞれの内容が表示されれば問題ありません。

正しく動作しない場合

もし正しく動作しない場合は、リンク <a> が正しく設定されているかチェックしましょう。

クリックして詳細を確認する

index.html をテキストエディタで開くと、以下のような部分があるはずです。この周辺に問題がある可能性が高いです。

<tr>
  <td width="148" height="24" background="tab.gif" align="center">
    <a href="index.html">トップページ</a>
  </td>
  <td width="148" height="24" background="tab.gif" align="center">
    <a href="info.html">紹介ページ</a>
  </td>
  <td width="148" height="24" background="tab.gif" align="center">
    <a href="contact.html">問い合わせ</a>
  </td>
  <td width="336" height="24"></td>
</tr>

以下の点に注意し、間違いがないか確認してください。

ファイル名は間違っていませんか？
リンク先が正しく index.html info.html contact.html に設定されていることを確認してください。
例えば index .html のように余分なスペースが入っていたりしないか確認しましょう。
３つのHTMLファイルは同じフォルダ内に保存されていますか？
HTMLの保存場所が異なっていると正しくリンクできません。作業用フォルダの中を確認し、３つのHTMLファイルが同じフォルダ内に存在するか確認しましょう。（もちろん他にも使用した画像ファイルなどがたくさんあるはずです）

もしもファイルをどこに保存したのか分からなくなってしまった場合は、たいてい「ファイル」メニュー→「最近使用したファイルを開く」に、以前に編集したHTMLファイルが記載されるので、見つかるはずです。目的のファイルを開き、「ファイル」メニュー→「名前をつけて保存」で、保存場所をあなたの作業フォルダにしっかり指定してから保存し直してください。
ファイルの実際の名前は異なっていませんか？
リンク先として指定した index.html info.html contact.html の実際のファイル名が異なっていると正しくアクセスできません。もし指定の名前と異なる場合は、「右クリック」→「名前の変更」でファイルの名前を変えられます。<a> で指定したファイル名と同じになるよう調整してください。
他のファイルも同様に修正しましょう
もし何らかのミスを見つけた場合、３つのHTMLファイルは index.html を複製して作ったので、他の２つのファイルも同様にミスがあるはずです。残りのファイルも改めてテキストエディタで開いて、同じ箇所にミスが無いか確認し、適宜修正しましょう。

正しく動作するようになったら、いよいよ課題の提出です。

課題の提出

作成したサイトで使用するファイルをすべて「圧縮フォルダ」機能を使って圧縮し、moodleにアップロードしてください。

提出期限は、次週の授業日いっぱいまでとします。

もし圧縮フォルダの作り方が分からない場合はこちらを参考にしてください。

３つのHTMLファイル index.html info.html contact.html の他に、画像ファイルも10点以上使用しているはずです。それらを全て忘れずアップロードしてください。

作業用フォルダ内にファイルを全て収めている場合は、フォルダを丸ごと圧縮すると手っ取り早いです。ここでは trend フォルダ内で作業しているとします。その場合、以下のような操作を行って、フォルダを丸ごと圧縮すると良いでしょう。
1. 作業用フォルダを開いていることを確認します。必要なHTMLファイルや画像ファイルが存在することを確認します。ウインドウ上部には現在の場所が表示されているので、把握しておきます。
  
  作業用フォルダ trend 内の様子
  十数個のファイルが存在します。
  
  もし trend ではない別の名前のフォルダで作業していたとしても、そのままで構いません。trend をあなたのフォルダ名に置き換えて、続きの操作を行ってください。
2. 作業用フォルダの外に出ます。ウインドウ上部にある「↑」ボタンを押すと、フォルダの外に出られます。（Macの場合は⌘Command+↑キーを押すと同様にフォルダの外に出られます）
  
  trend フォルダの外に出るボタン「上へ」
  trend フォルダの外に出ました。
  上の例は、デスクトップ上にある trend フォルダ内で作業をしていた状況です。trend フォルダの外に出たことでデスクトップに移動し、さっきまで居た trend フォルダが見えているというわけです。
3. 作業用フォルダ trend にマウスカーソルを重ねた状態で「右クリック」→「送る」→「圧縮(ZIP形式)フォルダー」を選択します。
  少し待つと圧縮が行われ、zipファイルが作られます。
  
  trend フォルダを丸ごと圧縮した
  trend.zip が作られました。
  このように、フォルダを丸ごと圧縮するには、フォルダの外に出てから圧縮する必要があるでしょう。

提出する際は、この圧縮ファイル trend.zip を moodle にアップロードしてください。フォルダ内にあった十数個のファイルが全て含まれています。

提出時のファイル名は 学生番号氏名 trend.zip としてください。

圧縮フォルダの使い方については基礎実習ページの補足資料コーナーにある「圧縮フォルダの利用方法」記事を参照してください。

学習支援システム moodle
https://cclms.kyoto-su.ac.jp/

moodleへの課題提出方法が分からない場合は、こちらを参照してください。
moodleに課題をアップロードする方法

以上で今回の作業は終了です。大変おつかれさまでした。

サイトの作成はここで一区切りし、次回からはまた別の内容となります。

次回の演習について

次回はCGIと呼ばれるプログラムの取り扱いについて解説します。

次回の授業ではプログラムを動かすので、MicroApache などのウェブサーバー環境が必須になります。ウェブサーバーの作り方については第3回サーバーと色と画像の利用の資料を参照しておいてください。

説明どおり作業した場合、USBメモリ上に MicroApacheウェブサーバーを作っていることと思いますので、次回はそのUSBメモリを持参してください。よろしくおねがいします。

おまけ

htdocs 直下にあるトップページ index.html に、trend フォルダへのリンクを作っておくと、今回作成するサイトにスムーズにアクセスできるので便利でしょう。

index.html

<p><a href="trend/">私の○○サイト</a></p>

trend フォルダへのリンクを表現するために、最後にスラッシュ / が付いているのがポイントです。
（もし別の場所を参照する方法について詳しく知りたい場合は、補足資料コーナーに掲載したパスについての資料を確認してください）

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>基礎実習の課題ページ</title>
</head>
 
<body bgcolor="wheat" text="#444444">
<!-- 本文ここから -->

<table border="1" cellpadding="16" cellspacing="0" bgcolor="white" width="80%" align="center">
<tr><td>

<h1>コンピュータ基礎実習（上級）課題のページ</h1>

<p>ここにはコンピュータ基礎実習で作成した課題を掲載しておきます。</p>

<h2>課題</h2>

<p><a href="jikosyokai.html" target="_blank">自己紹介ページはこちら</a></p>
<p><a href="recipe.html" target="_blank">ゴブリン・シチューのレシピ</a></p>

<p><a href="gousei.pdn" target="_blank">合成写真</a><br>
<a href="button.pdn" target="_blank">ボタン画像</a></p>

<p><a href="trend/">私の○○サイト</a></p>

<h2>リンク集</h2>

<p><a href="https://www.cc.kyoto-su.ac.jp/~shimizu/" target="_blank">基礎実習のページ</a> <a href="https://cclms.kyoto-su.ac.jp/" target="_blank">moodle</a></p>

<p><a href="https://www.kyoto-su.ac.jp/entrance/index-ksu.html" target="_blank">学内TOP</a></p>

</td></tr>
</table>

<!-- 本文ここまで -->
</body>
</html>

index.html に今回作ったサイトを掲載してみた例

戻る

¹⁾

こういう間違いは、実務においても発生しやすいです。
たとえば、Ａ社向けの発表資料を編集するつもりでＢ社向けの発表資料に書き込んでしまったり、今月の報告書を編集するつもりが先月の報告書を書き換えてしまったりといったミスをしがちです。
別の場所にあるよく似た名前のファイルと間違えないよう、編集中ファイルの名前と位置をよく確認するようにしましょう。

²⁾

「パス」を指定すれば別のフォルダに入っている画像も呼び出すこともできます。詳しくは<img>を扱った回の資料を参照のこと。

タイトルロゴ用スペース幅`780`　高さ`70`　`colspan="4"`　背景画像 `title_back.gif`
トップページへ幅`148`　高さ`24` `index.html`へリンク背景画像 `tab.gif`	紹介ページへ幅`148`　高さ`24` `info.html`へリンク背景画像 `tab.gif`	問い合わせページへ幅`148`　高さ`24` `contact.html`へリンク背景画像 `tab.gif`	空きスペース幅`336`　高さ`24` リンクなし背景画像なし
本文用スペース幅`780`　高さ指定なし `colspan="4"` 背景画像なし

タイトルロゴ用スペース幅`780`　高さ`70`
トップページへ幅`148`　高さ`24`	紹介ページへ幅`148`　高さ`24`	問い合わせページへ幅`148`　高さ`24`	空きスペース幅`336`　高さ`24`
本文用スペース幅`780`　高さ指定なし

タイトルロゴ用スペース背景画像 `title_back.gif`
トップページへ背景画像 `tab.gif`	紹介ページへ背景画像 `tab.gif`	問い合わせページへ背景画像 `tab.gif`	空きスペース背景画像なし
本文用スペース背景画像なし

左上背景画像 `main_top_left.gif` 幅`16`　高さ`16`	上背景画像 `main_top.gif` 幅`748`　高さ指定なし	右上背景画像 `main_top_right.gif` 幅`16`　高さ`16`
左背景画像 `main_left.gif` 幅`16`　高さ指定なし	中央背景画像なし幅`748`　高さ指定なし	右背景画像 `main_right.gif` 幅`16`　高さ指定なし
左下背景画像 `main_bottom_left.gif` 幅`16`　高さ`16`	下背景画像 `main_bottom.gif` 幅`748`　高さ指定なし	右下背景画像 `main_bottom_right.gif` 幅`16`　高さ`16`

左上幅`16`　高さ`16`	上幅`748`　高さ指定なし	右上幅`16`　高さ`16`
左幅`16`　高さ指定なし	中央幅`748`　高さ指定なし	右幅`16`　高さ指定なし
左下幅`16`　高さ`16`	下幅`748`　高さ指定なし	右下幅`16`　高さ`16`

タイトルロゴ用スペース
トップページへ	紹介ページへ	問い合わせページへ	空きスペース
本文用スペース

私の趣味のサイト
トップページ	紹介ページ	問い合わせ
本文用スペース

目次

第7回 サイトの作成

課題の概要

作成するサイト

全体構成

トップページの内容

紹介ページの内容

問い合わせページの内容

例

作業のコツ

同名ファイルが複数存在するので注意

準備

課題用フォルダの用意

index.html の用意

必要な画像ファイルを取得

ページの制作方法

ページの構造

表の作成

table タグに使用する属性

表の構造

サイズの調整

背景画像の配置

td タグに背景画像を追加する例

画像が表示されない場合

タイトルロゴ

さらにカッコイイ！タイトルロゴのチャレンジ

リンクの設置

本文用スペースの作成

サイズの調整(本文)

背景画像の配置(本文)

良く似た名前に注意

仕上げ

他ページの制作

ファイルの複製

ファイル名入力時の注意

問い合わせページの内容を記入

問い合わせページの例

どのファイルを編集中なのか把握しましょう

紹介ページの内容を記入

紹介ページの具体例

トップページの内容を記入

リンクの動作確認

正しく動作しない場合

課題の提出

次回の演習について

おまけ

第7回サイトの作成