サンプルページ解説１
１． ホームページの土台を作る
本解説の仕上がり予定ページ
まず、<html>、<head>、<meta>、
<body> などの、「ページを宣言するタグ」を記述します。HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"> ･･･①
<title>サンプルページ</title> ･･･②
</head>
<body>
演習用サンプルページ ･･･③
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8"> ･･･①
<title>サンプルページ</title> ･･･②
</head>
<body>
演習用サンプルページ ･･･③
</body>
</html>
| 🗋 ②サンプルページ |
| 🠤 🠦 ⟳ ✕ ☖ ⓘ ファイル･･･ |
| 演習用サンプルページ ･･･③ |
・タイトルバーに表示される文字②は、<title>タグで記述します。
・画面に表示される内容③等は、<body>～<body>タグの中に記述します。
２． ページのレイアウト、タイトル、背景を整える
ページを中央配置とする為、<table> タグを使い各ブロックはそのセル内に作り、見出しは<caption> に書くことにします。HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body style="background:url(st01_bg.gif);"> ･･･③
<table border="1" style="width:900px; margin:0 auto;"> ･･･④
<caption style="color:#930; font-size:3rem; font-weight:bolder; text-align:center;">演習用サンプルページ</caption> ･･･⑤
<tr><td> ブロック１⑥ </td></tr>
<tr><td> ブロック２⑦ </td></tr>
</table>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body style="background:url(st01_bg.gif);"> ･･･③
<table border="1" style="width:900px; margin:0 auto;"> ･･･④
<caption style="color:#930; font-size:3rem; font-weight:bolder; text-align:center;">演習用サンプルページ</caption> ･･･⑤
<tr><td> ブロック１⑥ </td></tr>
<tr><td> ブロック２⑦ </td></tr>
</table>
</body>
</html>
| 🗋 サンプルページ | ||
| 🠤 🠦 ⟳ ✕ ☖ ⓘ ファイル･･･ | ||
|
・まずページ全体を中央配置にするための table④ を配置します。
・ table には取り敢えず枠線を表示し border="1"、幅 900px で 中央に配置 margin:0 auto; とします。④
・ページの見出しに表示される文字は、<caption>に記述します。⑤
・文字は赤 color:#930; 、サイズが font-size:3rem; の太字 font-weight:bolder; とし、中央配置 text-align:center; にします。⑤
・table 内に縦に２つのセル⑥⑦を並べ、ここに具体的な内容を書き込むことにします。
３． 各セル内の内容を書き込む
各セル内に書き込む内容も <table> で整形して書き込みます。HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body style="background:url(st01_bg.gif);">
<table border="1" style="width:900px; margin:0 auto; ">
<caption style="color:#930; font-size:3rem; font-weight:bolder; text-align:center;">演習用サンプルページ</caption>
<tr><td>
<table border="1" style="border-collapse:collapse; border:#3d3; width:95%; margin:0 auto 8px; background:#ffe;"> ･･･⑥
<tr>
<td style="width: 65%; padding:8px; ">Ⓐテキスト </td>
<td rowspan="4" style="text-align:center; vertical-align:middle;"> Ⓑ画像</td>
</tr> <tr>
<td style="padding:8px; vertical-align:top;">Ⓒテキスト </td>
</tr> <tr>
<td style="padding:8px; vertical-align:top;">Ⓓテキスト </td>
</tr> <tr>
<td style="padding:8px; vertical-align:top;">Ⓔテキスト </td> </tr>
</table>
</td></tr>
<tr><td>
<table border="0" style="width:100%; margin-top:1.5em; text-align:center;"> ･･･⑦
<tr>
<td style="width:25%; padding:8px;">ⓐ画像 </td>
<td style="width:25%; padding:8px;">ⓑ画像 </td>
<td style="width:25%; padding:8px;">ⓒ画像 </td>
<td style="width:25%; padding:8px;">ⓓ画像 </td>
</tr> <tr>
<td style="padding:8px;">ⓔ画像 </td>
<td style="padding:8px;">ⓕ画像 </td>
<td style="padding:8px;">ⓖ画像 </td>
<td style="padding:8px;">ⓗ画像 </td>
</tr> <tr>
<td colspan="4" style="text-align: left;"> ⓘ <hr style="width:95%; height:5px; margin:8px auto; background:#630 ;">
ⓙリンク等 </td></tr>
</table>
</td></tr>
</table>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body style="background:url(st01_bg.gif);">
<table border="1" style="width:900px; margin:0 auto; ">
<caption style="color:#930; font-size:3rem; font-weight:bolder; text-align:center;">演習用サンプルページ</caption>
<tr><td>
<table border="1" style="border-collapse:collapse; border:#3d3; width:95%; margin:0 auto 8px; background:#ffe;"> ･･･⑥
<tr>
<td style="width: 65%; padding:8px; ">Ⓐテキスト </td>
<td rowspan="4" style="text-align:center; vertical-align:middle;"> Ⓑ画像</td>
</tr> <tr>
<td style="padding:8px; vertical-align:top;">Ⓒテキスト </td>
</tr> <tr>
<td style="padding:8px; vertical-align:top;">Ⓓテキスト </td>
</tr> <tr>
<td style="padding:8px; vertical-align:top;">Ⓔテキスト </td> </tr>
</table>
</td></tr>
<tr><td>
<table border="0" style="width:100%; margin-top:1.5em; text-align:center;"> ･･･⑦
<tr>
<td style="width:25%; padding:8px;">ⓐ画像 </td>
<td style="width:25%; padding:8px;">ⓑ画像 </td>
<td style="width:25%; padding:8px;">ⓒ画像 </td>
<td style="width:25%; padding:8px;">ⓓ画像 </td>
</tr> <tr>
<td style="padding:8px;">ⓔ画像 </td>
<td style="padding:8px;">ⓕ画像 </td>
<td style="padding:8px;">ⓖ画像 </td>
<td style="padding:8px;">ⓗ画像 </td>
</tr> <tr>
<td colspan="4" style="text-align: left;"> ⓘ <hr style="width:95%; height:5px; margin:8px auto; background:#630 ;">
ⓙリンク等 </td></tr>
</table>
</td></tr>
</table>
</body>
</html>
| 🗋 サンプルページ | |||||||||||||||||||
| 🠤 🠦 ⟳ ✕ ☖ ⓘ ファイル･･･ | |||||||||||||||||||
| |||||||||||||||||||
本解説の仕上がり予定ページ
・この table⑥ には、緑色の枠を設け、border="1" border-collapse:collapse; border:#3d3; 幅 95% 、中央配置 width:95%; margin:0 auto 8px; クリーム色の背景 background:#ffe; でレイアウトします。
・ブロック２⑦には、２行２列の画像枠と、その下にフッター用の枠をやはり table でレイアウトします。
・この table⑦ には枠が無く border="0" 、幅 100% width:100%; で、子の td 内も中央配置 text-align:center; してレイアウトします。
＊全体枠は説明の便宜上仮に表示しています。 本解説の仕上がり予定ページ
くらげのTop HP作りのTop
