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の基本（１）
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;
}
コメント