【解答例】HTML5授業課題

HTML

HTML

HTMLの基本タグ1(html,head,body…)

html01_mojicode.html

<!DOCTYPE html>
<html>
	<head>
		<title>文字コードについて</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>文字コードについて</h1>
		<p>文字コードとは、パソコンで扱うための文字に番号を振った表のようなものである。<br>各国の言語や使用環境に応じて様々な文字コードが存在する。</p>
		<p>例)<br>ASCIIコード、ユニコード、JISコード...</p>
	</body>
</html>

html01_haiku.html

<!DOCTYPE html>
<html>
	<head>
		<title>今日の一句</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>今日の一句</h1>
		<p>
			スマートフォン<br>
			画面に映る<br>
			青い空
		</p>
	</body>
</html>

HTMLの基本タグ2(ol,ul,li)

google2020.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Google検索 2020年ベスト10</title>
</head>
<body>
	<h1>Google検索 2020年ベスト10</h1>
	<ol>
		<li>新型コロナウイルス感染症</li>
		<li>大統領選挙</li>
		<li>緊急事態宣言</li>
		<li>鬼滅の刃</li>
		<li>あつまれ どうぶつの森</li>
		<li>シャープ マスク</li>
		<li>台風10号</li>
		<li>Go To</li>
		<li>ユニクロ マスク</li>
		<li>Zoom</li>
	</ol>
</body>
</html>

eva.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>新世紀エヴァンゲリオン</title>
</head>
<body>
	<h1>新世紀エヴァンゲリオン</h1>
	<p><strong>新世紀エヴァンゲリオン</strong>は、1995年に放映された日本のテレビアニメである。<br>
	主題歌「<strong>残酷な天使のテーゼ</strong>」は、曲に同期したカットが多用され当時としては斬新であった。</p>
	<h2>主要キャラクタ</h2>
	<ul>
		<li>碇シンジ(サードチルドレン)</li>
		<li>綾波レイ(ファーストチルドレン)</li>
		<li>惣流・アスカ・ラングレー(セカンドチルドレン)</li>
	</ul>
	<h2>使徒(シト)</h2>
	<p>地球を襲う謎の生命体。シンジ達とは敵対する関係にある。<br>
	通常の兵器では倒すことはできない。</p>
	<h2>エヴァンゲリオン</h2>
	<p>シンジ達が乗り込むロボット型の機体。実際は有機生命体。<br>
	使徒に唯一対抗できる手段でもある。</p>
	<h2>A・Tフィールド</h2>
	<p>使徒に対抗するための防御壁。エヴァンゲリオンに備わっている。<br>
	人が誰でも持つ「<strong>心の壁</strong>」とも言われている。</p>
</body>
</html>

HTMLの基本タグ3(a)

tenki.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>リンク文字</title>
</head>
<body>
	<h1>リンク文字</h1>
	<p>天気予報は、<a href="https://weather.yahoo.co.jp/weather/" target="_blank">こちら</a>をクリックしてください。</li>
</body>
</html>

osusume.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>おすすめサイトベスト3</title>
</head>
<body>
	<h1>おすすめサイトベスト3</h1>
	<ol>
		<li><a href="https://gigazine.net/" target="_blank">GIGAZINE</a></li>
		<li><a href="https://www.windy.com/" target="_blank">Windy</a></li>
		<li><a href="https://b.hatena.ne.jp/" target="_blank">はてなブックマーク</a></li>
	</ol>
</body>
</html>

HTMLの基本タグ4(img)

gazou.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>好きな画像</title>
</head>
<body>
	<h1>好きな画像</h1>
	<p><img src="ladybug.jpg" width="1024" height="683" alt="てんとう虫の画像"></p>
	<p>庭で見つけたてんとう虫です。</p>
</body>
</html>

photo.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>レゴで作ったごまちゃん</title>
</head>
<body>
	<h1>レゴで作ったごまちゃん</h1>
	<p><img src="goma.jpg" width="500" height="373" alt="レゴで作ったごまちゃんの画像"></p>
	<p>仲良くツーショットです!</p>
</body>
</html>

choco.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>クリックしてね!</title>
</head>
<body>
	<p><a href="https://ja.wikipedia.org/wiki/%E3%83%81%E3%83%A7%E3%82%B3%E3%83%AC%E3%83%BC%E3%83%88" target="_blank"><img src="dareka.jpg" width="320" height="180" alt="誰かの絵"></a></p>
</body>
</html>

HTMLの基本タグ5(table)

tag_table.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>タグの種類</title>
		<meta charset="utf-8">
	</head>
	<body>
		<table border>
			<caption>テーブル用タグ一覧</caption>
			<tr><th>タグ</th><th>意味</th></tr>
			<tr><td>table</td><td>表を作る</td></tr>
			<tr><td>tr</td><td>行を作る</td></tr>
			<tr><td>th</td><td>見出しセルを作る</td></tr>
			<tr><td>caption</td><td>表の説明文</td></tr>
		</table>
	</body>
</html>

game_table.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>家庭用ゲーム機の販売台数</title>
		<meta charset="utf-8">
	</head>
	<body>
		<table border>
			<caption>家庭用ゲーム機の販売台数</caption>
			<tr><th>ハード名</th><th>メーカー名</th><th>発売日</th><th>推定累計<br>販売台数</th></tr>
			<tr><td>Nintendo Switch</td><td>任天堂</td><td>2017/3/3</td><td>17,340,374</td></tr>
			<tr><td>プレイステーション5</td><td>ソニー・インタラクティブ・エンタティメント</td><td>2020/11/12</td><td>255,150</td></tr>
			<tr><td>Xbox Series X|S</td><td>日本マイクロソフト</td><td>2020/11/10</td><td>31,424</td></tr>
			<tr><td>プレイステーション4</td><td>ソニー・インタラクティブ・エンタティメント</td><td>2014/2/22</td><td>9,290,890</td></tr>
			<tr><td>Xbox One</td><td>日本マイクロソフト</td><td>2014/9/4</td><td>114,831</td></tr>
			<tr><td>ニンテンドー3DS</td><td>任天堂</td><td>2011/2/26</td><td>24,558,908</td></tr>
		</table>
	</body>
</html>

CSS

CSSの基本(1)

midasi_red.html

<!DOCTYPE html>
<html>
	<head>
		<title>今日の一句</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1 style="color:red">今日の一句</h1>
		<p>
			夏草や<br>
			兵どもが<br>
			夢の跡
		</p>
	</body>
</html>

haikei_green.html

<!DOCTYPE html>
<html>
	<head>
		<title>黒板</title>
		<meta charset="utf-8">
		<style>
			body{
				color: white;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<p>黒板っぽく見えますか?</p>
	</body>
</html>

p_big.html

<!DOCTYPE html>
<html>
	<head>
		<title>大きな段落文字</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="p_big.css">
	</head>
	<body>
		<h1>国名</h1>
		<p>アルジェリア</p>
	</body>
</html>

p_big.css

/* p_big.css */
@charset "utf-8";

h1{
	font-size: 16pt;
	color:red;
	border-bottom: solid 1px red;
}

p{
	font-size: 24pt;
	color: green;
}

CSSの基本2

mobile_suits.html

<!DOCTYPE html>
<html>
	<head>
		<title>Mobile Suits</title>
		<meta charset="utf-8">
		<style>
			body{
				margin: 1em;
				font-size: 24px;
			}
			.red{
				color: red;
			}
			.blue{
				color: royalblue;
				font-weight: 900;
			}
			.gold{
				color: gold;
			}
		</style>
	</head>
	<body>
		<h2>稼働機体</h2>
		<ul>
			<li class="red">リック・ディアス</li>
			<li class="blue">ガンダム MkⅡ</li>
			<li class="gold">百式</li>
		</ul>
	</body>
</html>

bone_clocks.html

<!DOCTYPE html>
<html>
	<head>
		<title>Bone Clocks</title>
		<meta charset="utf-8">
		<style>
			body{
				margin: 1em;
				font-size: 24pt;
			}
			span{
				color: tomato;
			}
			p.right{
				text-align: right;
			}
		</style>
	</head>
	<body>
		<p>生まれるって、<span>宝くじ</span>を買うみたい、ほんとに<span>運</span>頼みだ。</p>
		<p class="right">『ボーン・クロックス』より</p>
	</body>
</html>

eugo.html

<!DOCTYPE html>
<html>
	<head>
		<title>Eugo</title>
		<meta charset="utf-8">
		<style>
			body{
				margin: 1em;
				font-size: 18pt;
			}
			table{
				border-collapse: collapse;
			}
			th, td{
				width: 10em;
				padding: 0.5em;
				border: solid 1px black;
			}
			th{
				background-color: crimson;
				color: white;
			}
			td.right{
				text-align: right;
			}
		</style>
	</head>
	<body>
		<table>
			<caption>エゥーゴ</caption>
			<tr><th>メンバー</th><th>モビルスーツ</th><th>全高</th></tr>
			<tr><td>カミーユ・ビダン</td><td>ガンダム Mk-Ⅱ</td><td class="right">18.9m</td></tr>
			<tr><td>アポリー</td><td>リック・ディアス</td><td class="right">18.7m</td></tr>
			<tr><td>クワトロ・バジーナ</td><td>百式</td><td class="right">19.2m</td></tr>
		</table>
	</body>
</html>

請求金額一覧表(CSSを使ったテーブル)

index.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<title>請求金額一覧表</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<table>
			<caption>請求金額一覧表</caption>

			<tr>
				<th>代表者名</th>
				<th>1泊料金</th>
				<th>人数</th>
				<th>宿泊日数</th>
				<th>宿泊料金</th>
				<th>サービス料</th>
				<th>請求金額</th>
			</tr>
			<tr>
				<td class="name">井上 洋子</td>
				<td>10,900</td>
				<td>1</td>
				<td>3</td>
				<td>32,700</td>
				<td>3,270</td>
				<td>35,970</td>
			</tr>
			<tr>
				<td class="name">堀 幸四郎</td>
				<td>9,200</td>
				<td>5</td>
				<td>1</td>
				<td>46,000</td>
				<td>4,600</td>
				<td>50,600</td>
			</tr>
			<tr>
				<td class="name">赤池 久美</td>
				<td>7,400</td>
				<td>2</td>
				<td>4</td>
				<td>59,200</td>
				<td>5,920</td>
				<td>65,120</td>
			</tr>
			<tr>
				<td class="name">小早川 修</td>
				<td>11,500</td>
				<td>3</td>
				<td>2</td>
				<td>69,000</td>
				<td>6,900</td>
				<td>75,900</td>
			</tr>
			<tr>
				<td class="name">加藤 ミサ</td>
				<td>6,700</td>
				<td>2</td>
				<td>3</td>
				<td>40,200</td>
				<td>4,020</td>
				<td>44,220</td>
			</tr>
			<tr>
				<td class="name">石田 信二</td>
				<td>13,800</td>
				<td>1</td>
				<td>4</td>
				<td>55,200</td>
				<td>5,520</td>
				<td>60,720</td>
			</tr>
			<tr>
				<td class="name">原 みどり</td>
				<td>12,100</td>
				<td>4</td>
				<td>1</td>
				<td>48,400</td>
				<td>4,840</td>
				<td>53,240</td>
			</tr>
			<tr>
				<td class="name">森山 正義</td>
				<td>8,600</td>
				<td>3</td>
				<td>2</td>
				<td>51,600</td>
				<td>5,160</td>
				<td>56,760</td>
			</tr>
			<tr>
				<td class="space"></td>
				<td class="space"></td>
				<td class="space"></td>
				<td class="space"></td>
				<td class="space"></td>
				<td class="space"></td>
				<td class="space"></td>
			</tr>
			<tr>
				<td class="center">合計</td>
				<td class="space"></td>
				<td>21</td>
				<td>20</td>
				<td>402,300</td>
				<td>40,230</td>
				<td>442,530</td>
			</tr>
			<tr>
				<td class="center">平均</td>
				<td class="space"></td>
				<td>3</td>
				<td>3</td>
				<td>50,288</td>
				<td>5,029</td>
				<td>55,316</td>
			</tr>
		</table>
	</body>
</html>

style.css

@charset "utf-8";

/* style.css */

body{
	font-size: 14pt;		/* フォントサイズ 14pt */
	font-family: serif;		/* 明朝体 */
}

table{
	border-collapse: collapse;
	border: solid 3px black;
}

th, td{
	border: solid 1px black;
	padding: 0.25em 0.5em;
}
caption{
	letter-spacing: 1em;
}

td{
	text-align: right;
}
td.name{
	text-align: left;
	width: 7em;
}

.center{
	text-align: center;
	letter-spacing: 1em;
}
.space{
	padding: 1em;
}

コメント