目次
第7回 サイトの作成（前半）
課題の概要
HTMLの基礎技術を今まで紹介してきましたが、そろそろ実践的なホームページの制作を行ってみましょう。
というわけで、今週と来週の２週間をかけて、HTMLや画像、リンクを使ったサイトを新たに作成します。今回はその前半部分です。
最終的に指定のサイトが完成したら、サイトで使用するHTMLファイルや画像ファイルなどをすべてmoodleに提出してください。２週間かけて作成するので、提出期限も長めに設定されています（詳細はmoodle参照）。
この課題では、今までに解説したさまざまなHTMLタグを使用します。表（<table>）、画像（<img>）、リンク（<a>）などのタグの使い方を確認してください。
教科書を持っている場合は目次から必要なタグの使い方を確認したり、巻末資料を確認したり、過去の資料を確認したり、ネットで検索したりして、分からない情報を調べてください。
作成するサイト
課題で作成するサイトは、以下のようなものです
あなたが気になるトレンドワードを先生に紹介するサイトです。
下の作成例のようなデザインで作成してください。上部の赤いところをクリックすると、３ページに分かれるサイトです。
作成例（ここをクリックすると、大きな画面で動作確認ができます）
デザインには別途、画像などの関連ファイルが必要になります。このページを読み進めていくと掲載されているので、適宜ダウンロードしてください。
その他、もし独自に掲載したいものがある場合は、自由に追加してＯＫです。デザインの一部改変もＯＫです。
ページ構成
今回の課題用フォルダとして、trend（トレンド）という名前のフォルダを新しく作るものとします。
trendフォルダ内に作るサイトは、３枚のページで構成されるものとします。各ページは以下のようにするものとします。
| No | ファイル名 | ページ |
|---|---|---|
| 1 | index.html | トップページ |
| 2 | info.html | 紹介ページ |
| 3 | contact.html | 問い合わせページ |
元となるHTMLファイルは、補足資料コーナーに記載されている「新規HTMLページ」の記事を参考に作ると良いでしょう。
３ページもあるので大変そうですが、見た目よりは楽です。３ページともページのデザインは全く同じで、本文の内容が異なるだけだからです。よって１ページ目（index.html）を製作し終えたら、コピーして複製すると簡単に枚数を増やせます。
各ページの内容は以下のとおりとします。
トップページの内容
このサイトの内容がどういうものかを説明し、イメージ画像を掲載してください。
例:「HTMLでサイトを作成しました。紹介コーナーで私の気になるトレンドワードを紹介します。」
紹介ページの内容
あなたが気になる最近の流行語、トレンドワードなどをウェブで検索して調べ、それが何なのかを先生に紹介する内容を記入してください。思いつかない人は、以下のようなキーワードから興味のあるものを選んでも良いでしょう。
例： 量子コンピュータ ＶＲ ４Ｋ ＳＮＳ ユビキタス オンデマンド 自動運転 クラウドファンディング ＩｏＴ ＰＳ５
上の例はＩＴ関連ワードですが、もちろん異なるジャンルのワードでもOKです。
問い合わせページの内容
今回は学生番号と氏名を記入しておいてください。簡単ですね！
例
学生番号 ○○○○○ 氏名 ○○○○
以上のように、「トップページ」「紹介ページ」「問い合わせページ」の計３ページを作ることになります。
作業のコツ
以前にも紹介しましたが、HTML制作のコツを紹介しておきます。
- 一気に完成させようとせず、少しずつ画面表示を確認しながら進めるのが確実です。
間違いがある状態のまま強引に先に進んでも、状況は好転しません。 - なるべく コピー(
Ctrl+C) と 貼り付け(Ctrl+V) を使って入力すると、入力間違いを起こしにくいです。 - HTMLでは記述に間違いがあるとき、エラーメッセージなどは表示されません。該当部分は単に無視されます。入力した内容が画面に表示されない場合や、効果がない場合は、その周辺に間違いがある可能性が高いです。
- HTMLは1行目から順に下に向かって解釈されます。表示がおかしいと感じたら、HTMLの該当箇所より上の部分に間違いがあることが多いです。
- 問題の場所を見つけるのが難しい場合は、怪しい箇所を切り取り(
Ctrl+X) → 貼り付け(Ctrl+V) で別のエディタに一旦退避して、残った部分で表示が正しいか確かめると良いでしょう。表示が正しければ、残っている部分に間違いは無いはずです。少しずつ切り取る範囲を狭くするなどして、間違った部分を特定しましょう。
詳しくは以前紹介した「書き方を間違えたら」の項目を参考にしてください。
準備
まずはサイトを作る準備をしましょう。
作業用フォルダの用意
必要なファイルの数が多くなるので、フォルダの中にまとめて入れることにします。他の課題のファイルと混ざると混乱するので、新たに別のフォルダを作って保存場所を分けるのが良いでしょう。
今回は trend（トレンド）フォルダ内に作成するものとします。
新しいフォルダは以下のようにして作れます。
- 作業用のフォルダ（デスクトップやドキュメント）で「右クリック」→「新規作成」→「フォルダ」を選択します。
（Macの場合は、Finderでフォルダを作りたい場所にアクセスし、画面上部の「ファイル」メニュー→「新規フォルダ」を選択します） - 新しいフォルダが作成され、名前をつけられるので、半角英数文字で「
trend」と入力してEnterキーを押します。 - もし名前を間違えたら、対象を「右クリック」→「名前の変更」で再度名前を変えられます。
以降はこのtrendフォルダの中で作業をします。他の課題用のファイルなどが混じって混乱しないようにしましょう。
index.html の用意
新しく作ったtrendフォルダの中身は空っぽですので、最初のページとなるindex.htmlを作成しましょう。
新しいindex.htmlにはHTMLページとして最低限必要になるタグ（<!DOCTYPE> <html> <head> <body>などなど）を書き記す必要がありますが、完全に白紙の状態から作るのは大変です。
そこで補足資料コーナーにある「新規HTMLページ」をベースにするか、今までに作った課題用HTMLをコピーして使い回すなどして、効率よく新しい index.html を作り、trendフォルダの中に配置しましょう。
必要な画像ファイルを取得
この課題では、画像を使ってページのデザインを行います。
以下のページから、サイトで使用する画像ファイルをダウンロードしてください。
素材ファイル ← ここをクリック
開いた先のページにある「ダウンロード」書かれたリンクをクリックすれば保存できます。ダウンロードした画像は、trendフォルダ内に配置してください。
また、ダウンロードしたものは、まとめて１つの圧縮ファイルに格納されている状態なので、ダブルクリックするなどして中身を取り出し、trendフォルダ内に配置しておきましょう。
trendフォルダの中身は、おおむね以下のようになるでしょう。（すでにファイル数が結構多いです）
ページの制作方法
それでは、サイトを作る具体的な手順について解説します。
ページの全体構造
まずindex.htmlをテキストエディタなどで開いて編集を開始します。
ページは表(<table>)によってレイアウトします。
最終的には、以下のような構造を持つ表を作る必要があります。
表の構造が分かりやすい例（このリンクをクリックすると大きな画面で確認できます）
まずは<table>を使って上のような表構造を作りましょう。<table>には以下のような属性が必要となるでしょう。
使用する属性
border="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>
| タイトルロゴ用スペース | |||
| トップページへ | 紹介ページへ | 問い合わせページへ | 空きスペース |
| 本文用スペース | |||
とりあえず表の形ができました。
サイズの調整
表の構造に書かれている縦横のサイズ指定を表に反映させます。上で作った表に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 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ファイルと同じ場所に置いてある画像が呼び出されます1)。 あなたの作業用フォルダの中を見て確認してください。- もしまだダウンロードしていないなら、素材ファイルページから入手しましょう。
- ダウンロードしたものはZIP圧縮されているので、展開して中身の画像ファイルを全て取り出し、編集中のHTMLと同じフォルダ内に配置しておきましょう。
コンピュータは指示されたことしかやりませんので、指示が合っており、必要な画像がちゃんと見つかるのであれば、動作するはずです。逆に言えば、指示が間違っていたり、必要なファイルが指定の場所に無いと、動きません。多少の間違いがあっても空気を読んで表示してくれれば良いのですが、コンピュータは言われたことを言われたとおりにしかできない究極の指示待ちヤロウなのです……。
タイトルロゴ
タイトルロゴは「○○のサイト」のように、サイトの内容がよく分かるものが良いでしょう。「タイトルロゴ用スペース」内に直接書き込めばＯＫです。
タイトル文字を中央寄せにしたい場合は、「タイトルロゴ用スペース」の<td>にalign="center"とvalign="middle"を加えて中央寄せにすると良いでしょう。
さらに目立つタイトルロゴを作りたい場合は、<font>を使って文字の大きさや色を変更しても構いません。color属性で文字の色、size属性で文字の大きさを調整できます。たとえば、以下のように設定できます。
<font color="orange" size="6">私の趣味のサイト</font>
私の趣味のサイト
さらにカッコイイ！タイトルロゴのチャレンジ
このチャレンジはやや挑戦的な内容になっています。もし余裕があれば試してみてください。
できなくてもマイナス評価にはなりません。
タイトルロゴをより豪華に飾るために、ロゴを画像で製作し、サイト上部に配置することもできます。
ワードアートなどでロゴを別途作成し、Snipping Toolで画像として保存して、<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のツールです。 詳しい使い方は、補足資料コーナーの「SnippingToolによる画像取り込み」を参考にしてください。
Macの場合は、Shift+Command+4で画面の一部を切り出し、画像として保存できるので活用してください。
参考：Macでスクリーンショットを撮る - HTMLファイル内で<img>タグを使って表示させます。
<img src="logo.png">
ページの上部にワードアートで作られたタイトルロゴが表示されたら成功です。
リンクの設置
作成例を見ると、サイトの上部に「トップページ」「紹介ページ」「問い合わせ」のように書かれていて、クリック可能になっています。これはそれぞれリンクです。
作成した表の「トップページへ」「紹介ページへ」「問い合わせページへ」と書かれているセルに、それぞれリンクを設置しましょう。
リンク先は、先述のページ構成に従って、次のようになります。
| No | ページ | ファイル名 |
|---|---|---|
| 1 | トップページ | index.html |
| 2 | 紹介ページ | info.html |
| 3 | 問い合わせページ | contact.html |
さらに「空きスペース」の文字はもう不要になりましたので、削除しておきます。
具体的には、上で作った表の一部を、以下のように修正すると良いでしょう。（必要な部分以外、表示を省略しています。）
<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>
| 私の趣味のサイト | |||
| トップページ | 紹介ページ | 問い合わせ | |
| 本文用スペース | |||
リンクの色が見にくいので、<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が完全に仕上がってから作ることにしましょう。あわてないで！
本文用スペースの作成
いよいよ本文を書くための場所の制作に取り掛かります。
本文の文章は、丸い飾り枠で囲まれます。丸い部分を再現するために、飾り枠を画像で用意しました。画像は8つの部分に分割されています。下の図は分割の様子が分かりやすいように示した例です。
簡単に書くと、下のように縦横３ｘ３の表を作るイメージです。
そして周りの赤い線のように見える部分は、それぞれ小さな画像が置かれていて、それらがつながって飾り枠になるというわけです。
上で作成した表のうち「本文用スペース」にあたるセル内に、このパーツが丸ごと入る事になります。
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)は以下のような 3列 x 3行 の構造とします。
| 左上 背景画像 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>
| 左上 | 上 | 右上 |
| 左 | 中央 | 右 |
| 左下 | 下 | 右下 |
サイズが調整されました。セルの中に入っている文字と罫線の厚みのせいでサイズに狂いが生じていますが、文字を消せば指定通りのサイズになるはずです。
背景画像の配置(本文)
背景画像の指定を表に反映させます。 <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>
| 中央 | ||
赤い枠が円形に繋がりました。
もしつなぎ目が切れたりしている場合は、その部分の背景画像が誤って配置されていると思われます。
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>タグは２箇所あります。修正箇所も２箇所あるので注意してください。
| 私の趣味のサイト | ||||||||||||
| トップページ | 紹介ページ | 問い合わせ | ||||||||||
|
||||||||||||
罫線が消えると、このようになります。美しい！😋
これでindex.htmlファイルは完成です。
今後は上の例で「中央」と書かれている部分にページの内容となる文章を追加し、完成を目指す流れになります。
来週の後半に続きます。
今週の課題
今週は特別に、moodleにて出席操作を行うだけの簡易的なものとします。くわしくはmoodleにて。
学習支援システム moodle
https://cclms.kyoto-su.ac.jp/
今週の出席操作は、授業当日中のみ受け付けという時間制限付きです。
いつもよりも受け付け時間が短いです！ ご注意ください。
