|
| ||
| ホームページ作成の部屋−機能ごとの講座 | ||
| Webページは，いろいろな機能のタグを組み合わせることによって構成されます。ここでは比較的よく使われるタグを機能ごとに分類して，紹介します。 | ||
| ||
| 1． ページ関係のタグ | ||
| ブラウザのウィンドウ （狭義のウィンドウで，実際にWebページが表示される枠内） 背景色を指定するなど，影響がWebページ全体に及ぶものについて学びます。 次の「ページ関係のタグ」はページ関係のタグについて学ぶためのHTML文書です。ソース と Webページを見比べながら学びましょう。 | ||
|
「ページ関係のタグ」のHTMLソース 「ページ関係のタグ」のWebページ | ||
| 解説 | ||
| ここで登場したのは<body>タグだけです。このタグはWebページ内に1度だけしか使うことができませんので，ページの途中から背景色を変えたり，リンクアンカーの色を変えたりすることは不可能です。 <body>タグの属性については，「ページ関係のタグ」のWebページ内に解説がありますので，そちらを読んでください。 参考⇒♪色見本（カラーチャート） | ||
|
次の「続編：ページ関係のタグ」は，先程説明ができなかった <body> タグの background 属性について学ぶためのHTML文書です。「text 属性で文字の色を指定します」以降は「ページ関係のタグ」のWebページと同じ内容です。 | ||
|
「続編：ページ関係のタグ」のHTMLソース 「続編：ページ関係のタグ」のWebページ | ||
| 解説 | ||
| ここで紹介したもの以外にも，Webページ全体に及ぶタグはありますが，それらはブラウザの種類やバージョンによって機能したり機能しなかったりするものですので省略します。 | ||
| 2． テキスト関係のタグ | ||
| 文章や見出しなどのように，文字や記号の並びによって表されるデータをテキストといいます。そしてテキストは，一般の書籍などと同じようにWebページにおいても，最も中心的なデータとなっています。 それでは文字の大きさや色などを指定する方法について，ソースとWebページを見比べながら学びましょう。 | ||
|
「テキスト関係のタグ」のHTMLソース 「テキスト関係のタグ」のWebページ | ||
| 解説 | ||
| (1) | <h1>〜<h6> このタグは見出しを表示させるのに使います。数字が小さいほど字が大きくなります。 | |
| (2) | <font size="n"> フォントサイズを絶対サイズ n（n＝1〜7）で指定します。絶対サイズといってもブラウザの種類やブラウザの設定によって文字の大きさが異なりますので，あくまでも目安でしかありません。大きさを指定しない場合は n＝3 のときの大きさです。 n＝7 が最大ですので，n＝8 にしても大きくはなりません。 | |
| (3) | <basefont size="n"> 基準フォントサイズをm（m＝1〜7）で設定します。デフォルトはm＝3です。大きさを指定しない場合の文字は，基準フォントサイズで表示されます。 | |
| (4) | <font size="±n"> フォントサイズを基準フォントサイズ（m）からの相対値（±n）で指定します。m±n の大きさが絶対サイズに相当しますので，m±n は 1〜7 の範囲が有効です。 「テキスト関係のタグ」のページには意図的に m±n の値が 0 や 8 になるものを書いておきましたが，文字の大きさはその前後と変わらないことが分かります。 | |
| (5) | <font color="#RRGGBB"> 文字の色を指定します。RRは赤，GGは緑，BBは青で，それぞれの明るさを 2 桁の16進数で指定ます。 閉じタグ </font> によって，フォントはサイズも色も<font>の前の状態に戻ります。 参考⇒♪色見本（カラーチャート） | |
| (6) | <b> 太字（ボールド）フォントを指定します。 | |
| (7) | <i> 斜体（イタリック）フォントを指定します。 | |
| (8) | <tt> 等幅（タイプライタ）フォントを指定します。 | |
| (9) | <s> 抹消線（ストライク）を引くことを指定します。 | |
| (10) | <u> 下線（アンダーライン）を引くことを指定します。 | |
| (11) | <sup> 上付き文字を指定します。フォントサイズは 1 段階小さくなります。 | |
| (12) | <sub> 下付き文字を指定します。フォントサイズは 1 段階小さくなります。 | |
| 裏技 | ||
| 今見た「テキスト関係のタグ」のWebページの文字の色のところに，「白です」と書いてあるテキストに気が付きましたか？ 背景色も白ですから普通では白い文字は見えません。しかし付近をマウスでドラッグしてみますと，藍色の背景にテキストが白い文字で表示されます。この動作は，本来コピーをするときなどに選択範囲をするために行うものですが，このような使い方もあるのです。 | ||
| 3． テーブルを作る | ||
| テーブルとは表のことですが，Webページを作る場合のテーブルは，単なる表を越えた大きな働きをします。テーブルをうまくあやつることによって，驚くほど見栄えのするWebページを作ることができるのです。
ここでは簡単なテーブルから，やや複雑なテーブルまでを学びます。 | ||
|
「テーブルを作る−1」のHTMLソース 「テーブルを作る−1」のWebページ | ||
| 解説 | ||
| 最初のテーブルは「求人情報 A」です。なんとなくテーブルという感じはしますが，各データが少しバラバラしていて，まとまりがありません。<table>タグには何の属性も付けませんでしたが，この場合はテーブルの罫線は表示されません。 ここには次の 4 つのタグが新たに使われています。 | ||
| (1) | <table>〜</table> 開始タグと終了タグの間がテーブルであることを表すタグです。 | |
| (2) | <tr>〜</tr> 開始タグと終了タグの間が 1 つの行を構成することを表すタグです。 | |
| (3) | <th>〜</th> 項目の見出しを表すタグです。次で説明する<td>との違いは，セルの真ん中に表示される（センタリング）ことと，太字で表示されることだけです。 | |
| (4) | <td>〜</td> 開始タグと終了タグの間がセルで，そこにデータを置きます。 | |
| 次のテーブルは「求人情報 B」です。こんどは罫線が付いています。しかし「つしま美化」の行にある「募集人員」の列の表示がなんだか少し変です。セルの中にデータを入れないと，このようになります。 | ||
| (5) | <table border="☆"> border属性で表の罫線を付けます。☆＝0 のときは罫線が付きません。☆が 1 以上で罫線が付き，☆が大きくなるに従って，テーブルの外枠が太くなります（「求人情報 F」参照）。 | |
| 「求人情報 C」では「終了」というデータのあるセルを左右ひとつにまとめ，「KOSEI」というデータのあるセルを上下ひとつにまとめまし。だいぶすっきりとしてきました。 | ||
| (6) | <caption> 表のキャプション（タイトル）を付けるタグです。デフォルトで表の上の中央に表示されます。 | |
| (7) | <td colspan="☆"> 左右☆個のセルをまとめるタグです。 | |
| (8) | <td rowspan="☆"> 上下☆個のセルをまとめるタグです。 | |
| 「求人情報 D」では「募集人数」のデータをセルの右に寄せ，「終了」というデータをセルの中央に表示しました。またキャプションを太字で表しました。 | ||
| (9) | <td align="☆"> alignの値がleft（デフォルト）でデータは表の左から始まり，centerで中央，rightで右に寄せられます。 | |
| 「求人情報 E」ではセルの背景に色を付けました。 | ||
| (10) | <table bgcolor="☆"> テーブルの全てのセルの背景に色を付けます。 | |
| (11) | <tr bgcolor="☆"> その行にある全てのセルの背景に色を付けます。<table bgcolor="☆"> での指定よりも優先されます。 | |
| (12) | <td bgcolor="☆"> そのセルの背景に色を付けます。<tr bgcolor="☆"> での指定よりも優先されます。 参考⇒♪色見本（カラーチャート） | |
| 「求人情報 F」は <table border="5"> で外枠を太くしました。 | ||
| 「求人情報 G」は，<table cellspacing="10"> としてセルとセルの間隔を大きくしました。 | ||
| (13) | <table cellspacing"☆"> セルとセルの間隔を数値☆で指定します。デフォルトは☆＝2 です。 （ブラウザによってセル間の色が違うので，場合によると注意が必要です。） | |
| 「求人情報 H」は，<table cellpadding="6"> としてセルとデータとのマージンを大きくしました。マージンを大きくすることによって，データが見やすくなります。 | ||
| (14) | <table cellpadding="☆"> セルとデータとの間のマージンを数値☆で指定します。デフォルトは ☆＝1 です。 | |
| 「求人情報 I」は「企業名」と「職種」のセルの横幅を大き目に指定しました。こうすることによってゆったりとした感じのテーブルができあがります。 | ||
| (15) | <td width="☆"> セルの横幅をピクセルで指定します。ここでの指定よりも，ブラウザの横幅の方が優先されます。 | |
| (16) | <td height="☆"> セルの縦幅をピクセルで指定します。 | |
| 「求人情報 J」はセルとセルの間隔（<table cellspacing"☆">）を最小の値☆=1 で指定しました。結果的に罫線が細くなります。好みにもよりますが，罫線は細目の方が，すっきりした感じになります。 | ||
| 4． テーブルと表示位置 | ||
| ここではテーブル内のオブジェクトの表示位置やテーブルそのものの表示位置をコントロールする方法について学びます。 | ||
|
「テーブルを作る−2」のHTMLソース 「テーブルを作る−2」のWebページ | ||
| 解説 | ||
| 最初のテーブル「オブジェクトの表示位置」では，セル内のオブジェクト表示位置をいろいろと変えてみました。 ここで行っていることをタグ機能で説明します。 | ||
| (1) | <tr valign="☆"> ☆の部分には top, middle, botom の3つを指定することができます。上段の行ではtop, 中段ではmiddle（デフォルト）, 下段ではbottomが指定してあります。
| |
| (2) | <td width="☆" height="★" align="◎"> ☆と★の部分はそれぞれセルの幅と高さをピクセルで指定します。 メモ
◎の部分は left, center, right の3つを指定することができます。左の列では特に指定してませんが，デフォルトのleftを指定したのと同じことになります。中央の列ではcenter, 右の列ではrightが指定してあります。 | |
| 「テーブルの表示位置(左)」はテーブルを画面の左に寄せた場合（デフォルト），「テーブルの表示位置(中央)」は中央に置いた場合，「テーブルの表示位置(右)」は右に寄せた場合です。 | ||
| (3) | <table align="☆"> align 属性でテーブルの表示位置を指定します。☆にはleft（デフォルト）, center, rightが指定できます。 | |
| 最後の2つは違いが分かりますか。2つめの「氏名セル内の改行を規制した場合」は，氏名の途中で勝手に改行されないように氏名を入れてあるセルの<td>タグに nowrap 属性を付けてあります。 各セルの幅の指定がないとき，ブラウザはセルごとのオブジェクトの長さなどをもとに，セルの幅を決めます。 | ||
実験
| ||
| (4) | <td nowrap> そのセル内のテキストは改行されません。ただし<BR>タグによる改行は有効です。 | |
| 5． テーブルを利用したレイアウト | ||
| テーブルを利用することによって，かなり複雑なレイアウトを組み立てることができます。ここでは2つの例を紹介します。ソースとWebページを見比べながら学びましょう。 | ||
|
「テーブルを作る−3」のHTMLソース 「テーブルを作る−3」のWebページ | ||
| 解説 | ||
| 最初のテーブル「デジカメ調査 A」は，今までに学んだことだけで作成しました。ということで2番目の「デジカメ調査 B」を見てみましょう。大きく変わったことは 2 段組みになったことです。2 段組み用のタグはありませんので，段組み表示をさせるには工夫が必要です。どうしたらよいか，ちょっと考えてみてください。 実はこのような段組みもテーブルを使うと出来るのです。次の「デジカメ調査 B-2」を見てください。テーブルの中にテーブルが入っていることが分かります。外側のテーブルの枠や罫線を<table border="0">で表示させないようにすれば「デジカメ調査 B」になります。 なおテーブルは何重にでも入れ子にできます。 | ||
| ||
| テーブルを使う醍醐味は，何と言っても画面のレイアウトです。ということで「テーブルを使用したレイアウト」を見てください。どこにテーブルが使われているか分かりますか。 それでは「「テーブルを使用したレイアウト」の種あかし」の方を見てみましょう。テーブルの枠や罫線がすべて表示してあります。 ここには大きく分けて次の3つのテーブルが使われています。 | ||
| (1) | テーブル内の背景に色（空色）を付けるためだけに使われている最も外側にあるテーブル | |
| (2) | レイアウトのために使われているテーブル | |
| (3) | タイトルを表示させる部分のテーブル | |
| 3つのうち(1)については特に説明する必要がないでしょうし，(3)についてはソースのコメントを見れば十分に理解できると思いますので，2番目の「レイアウトのために使われているテーブル」についてだけ説明します。 | ||
| (1) | テーブルは6行7列 テーブルの上端と左端を見るとそれが分かります。テーブルは行ごとに記述しますので，行のの開始を表す<tr>タグは 6 回登場します。 | |
| (2) | 行の高さと列の幅 テーブルの上端と左端に並んでいるセルは，各セルの高さや幅を決める働きをします。これらのセルは必ず必要というものではありませんが，特にテーブル構造が複雑な場合には，ぜひ設けてください。そうすればその他のセルについては，高さや幅をいちいち指定する必要がありません。 セルの高さは <td height="☆"> で，幅は <td width="☆"> で指定し，☆にはピクセルを与えます。 注意
| |
| (3) | セルの背景に画像を使う <td background="☆"> によってセルに背景をつけることができます。☆には画像のファイル名を与えます。 セルのサイズよりも画像のサイズが小さい場合は画像がタイル状に敷き詰められます。反対にセルよりも画像が大きい場合は画像の一部分が貼り付けられます。 背景に画像を使用したときは，背景の画像の上に文字や別の画像を置くことができます。 | |
| (4) | レイアウトの方法 最初は紙の上に簡単にデザインします。表示させたい画像については，ピクセル単位の寸法を添えておきます。セルを区切るための縦横の線を引き，上端の行と左端の列のセル以外については，不必要な線を消します。上端と左端のセルについて寸法を記入します。このとき簡単な計算（足し算と引き算だけ）が必要です。上端の全部のセルについては <td width="☆"> の指定をし，左端の全部のセルについては <td height="☆"> の指定をします。その他のセルについては，<td rowspan="☆"> と <td colspan="☆"> の指定に注意します。 | |
| (5) | レイアウトの表示 ブラウザに表示させて，出来ぐあいを確認します。 | |
|
「ホームページ作成の部屋」メニュー | ||