ウェブページ作成（2）：HTMLとCSS
到達目標
HTMLタグを使って，簡単なウェブページをデザインできる
CSSの役割を説明できる
様々なHTMLタグ
リンクの設定
code:link.html
<!--ウェブ上のほかのページにリンク-->
<!--自分が作成したファイルへリンク-->
<a href="link.html">リンク集へ</a>
<a>タグを使用
上記をコピーして，<body>～</body>の間に貼り付けて保存して，ブラウザを更新
基本的な書き方 <a href="リンク先のアドレス">アンカーテキスト（リンクに表示される文字列）</a>
リンク先のアドレスの部分を変える = クリックして移動する先が変わる
アンカーテキストの部分を変える = クリックする部分の文字列が変わる（移動先は変わらない）
自分が作った別のページ（同じディレクトリに保存）へのリンク方法
1. 参照先のページとの位置関係に基づく指定方法を相対パスと言う（この方法が楽）
例では，フォルダ「public_html」にlink.htmlという別のHTMLファイルを作成し，相対リンクでそのファイルにリンクさせている
public_htmlフォルダ
index.html
link.html
2. URL全体を指定する方法もある（絶対パス）: ローカルのファイルパス（C:\～～）と間違いやすいため，授業では推奨しない
画像の挿入
code:img.html
<!--Web上のファイルを指定する場合-->
<!--自分で同じフォルダにアップロードしたファイルを指定する場合は画像のファイル名だけで良い-->
<img src="image.jpg">
<!--画像サイズを調整したい場合には、以下のように画像の幅 width と画像の高さ height を調整すれば良い。片方だけを書いて調整する方法もあります-->
<img src="image.jpg" width="300" height="150">
<img src="image.jpg" width="300">
<img src="image.jpg" height="150">
<img>タグを使用。終了タグは使わない
<img src="画像ファイル名"> ≒ 画像ファイルへのリンクを作成
表示させたい画像を「public_html」フォルダに保存しておく
サンプル画像（リンク先にアクセスしてCtrl+Sまたは右クリックメニューから画像を保存） public_htmlフォルダ
index.html
link.html
image.jpg（自分で撮った写真などの名前を変更する）
ウェブで表示する際は，画像のファイルもサーバにアップロードしないと閲覧できないので注意
画像を利用する際は著作権及び肖像権に十分に留意すること
スマートフォンなど撮影した写真が大きすぎる場合は，画像編集のアプリなどを使って縮小した方が良い
Windows11でファイルの拡張子が表示されていない場合は，以下の操作で拡張子を表示しておく
https://gyazo.com/a469fef48c1c82ede454abbe399bdf0a
その他のタグ
文字の装飾
code:font.html
<font size="7" face="Times New Roman" color="red">hello</font>
<!--色をカラーコード（#記号と16進数6桁）で指定-->
<font size="7" face="Yu Gothic" color="#ff0000">こんにちは</font>
<font>: フォントのサイズや色を変更（※通常は使用しない）
size: 大きさ（1～7）
color: 色
face: フォントの種類
現在ではCSS（後述）を使って変更するので，ほとんど使われない
Googleで「カラーピッカー」と検索すると，カラーピッカーで表示される。好みの色が選択できたら，HEXの部分をコピーしてcolorの部分に貼り付けると良い。その他の色を使うときにも応用可能。
https://gyazo.com/09bef07de702aabef48bf4f64ba158f6
code:sup.html
1000m<sup>2</sup>
H<sub>2</sub>O
<sup>: 上付き文字
<sub>: 下付き文字
表
code:table.html
<table border=1>
<tr><th>学年</th><th>人数</th></tr>
<tr><td>1年</td><td>10人</td></tr>
<tr><td>2年</td><td>12人</td></tr>
<tr><td>3年</td><td>9人</td></tr>
<tr><td>4年</td><td>7人</td></tr>
</table>
<table>: 表全体の枠
<tr>: 行
<th>: 見出し
<td>: データ
リスト
code:list.html
<!--箇条書き-->
<ul>
<li>箇条書き3</li>
</ul>
<!--順序リスト-->
<ol>
<li>順序リスト1</li>
<li>順序リスト2</li>
<li>順序リスト3</li>
</ol>
<!--入れ子も可能-->
<ul>
<li>入れ子にもできる
<ol>
<li>順序リスト1</li>
<li>順序リスト2</li>
<li>順序リスト3</li>
</ol></li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>
<!--定義リスト-->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Languageの略</dd>
<dt>WSYIWYM</dt>
<dd>What You See is What You Meanの略</dd>
</dl>
<ul>: 順序なし（箇条書き）
<li>: リストの項目
<ol>: 順序付き
<li>: リストの項目
<dl>: 定義リスト：説明付きリスト。見出しの言葉とその説明を表示するようなリスト
<dt>: 定義語（見出し）
<dd>: 記述（説明）
文書の構造
<br>: 改行
HTMLではエンターキーで改行してもブラウザ上では改行されない。改行が必要な箇所には<br>タグを記述する
終了タグ（</br>）は使わない
<p>: 段落
<h1>，<h2>，<h3>，<h4>，<h5>，<h6>: 見出し。
<h1>が大きい見出し→<h6>が小さい見出し
<div>: ブロック（CSSと組み合わせて利用）
<span>: divのインライン版（CSSと利用）
背景の変更
code:bg.html
<!--bodyタグを書き換える-->
<!--画像を指定-->
<body background="image.jpg">
<!--背景色を指定-->
<body bgcolor="red">
<body bgcolor="#875b32">
<body>タグのbackground要素
<img>と同様，同じフォルダに画像を保存しておく必要がある
<body>タグのbgcolor要素
AIを活用したHTML作成
生成AIは自然言語のタスク（調べ物や創作）に比べて，コーディング（プログラミングやHTML作成）で優れた性能を示す
理由1: 論理と構造が明確
理由2: コーディングに関する学習用のリソースが多数存在している
理由3: フィードバックが明確
生成AIの例
AIを活用すれば，コーディングとその学習はかなり容易になる
ただし，AIの出力は，きちんと自分で確認し問題があれば修正すること
その際にAIにより細かい指示を出して，修正することもできる
使用法1: 特定の部分についてHTML化する
貼り付けたデータをHTMLのtableにフォーマットさせている
自分で作成したHTMLファイルにコピペする
https://gyazo.com/3df444bdf5ae0b0b5115a758031d33de
使用法2: 画像からHTML化する
画像で作成したいHTMLのイメージを作成し，それをHTML化させている
テキスト部分は自分でHTMLを編集する
https://gyazo.com/f1b5232bab10c62b646f6292e1a5a665
https://gyazo.com/35f1c6202085b95d02c0cf699e40da8a
★スタイルシート
スタイルシートは課題に含めるかどうかは任意（上手に扱った場合は加点対象）とするが，内容には目を通してCSSが何なのかは理解しておく
HTMLは，人間だけではく，機械（コンピュータ）も読む
例）検索エンジンのロボット，読み上げソフト，スクレイピングのプログラムなど
→ 機械にとって読みやすい（扱いやすい）と，人間の役にも立つ
機械には分かりづらい例
<font color="red" size=7>注意！</font>
→ 意味とデザインが一緒くた
人間には，赤い字で大きなサイズで書かれれば，注意を換気していることが分かる
機械には，赤い字で大きなサイズで書いていることしかわからない
機械にも分かりやすい例
code:style.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
em{
color: red;
font-size: 24pt;
}
</style>
</head>
<body>
<em>注意</em>
</body>
</html>
意味とデザインを分離
<em>は強調を示すHTMLタグ = 注意の部分は強調されていると機械が理解できる
見た目を変える（赤字で大きく表示）ことで，人間にとっても分かりやすい
<style>で囲われた部分で書式を設定=CSS
CSS Cascading Style Sheets
HTML文書のデザインを制御
CSSの構造
code:cssの構造
セレクタ {
プロパティ: 値; /* ←宣言 */
プロパティ: 値;
}
なにの {
どこを: どうする;
}
セレクタ
スタイルを適用したいタグやクラス
プロパティ
デザインを適用する属性
文字の大きさ，色，フォントの種類，枠線など
値
適用するスタイル
CSSのプロパティと値の指定方法は多岐にわたるので，普通は参考サイトや検索エンジンで調べながら使う
ソースの閲覧
Chromeで閲覧しているウェブページのどこかを右クリックして「ソースの表示」またCtrl+Uでウェブページのソース（元のHTML）を見ることができる
どのようにデザインや機能を実現しているか，参考にすることは良いが，コピペ・丸パクリは絶対にしてはいけない
https://gyazo.com/5998911459181f6d931ea48f741c6941
また開発者ツール（Ctrl+Shift+IまたF12）を使うと，指定した部分のソースを見たり適用されているスタイルシートを見たりすることもできる
https://gyazo.com/c0552d49b3785f42c316c17f9970f169
CMS（コンテンツ・マネジメント・システム）
WordPress，Googleサイトなどを使うと，HTMLの知識がなくても自分のサイトを作成・管理できる
CMSにもメリットとデメリットがあるので理解しておくこと
table:HTML直打ちとCMS
メリット デメリット
HTML直打ち なんでもできる HTML，サーバなどの知識がある程度必要
CMS 専門的知識がなくても使える なにができるかはシステム依存
軽量マークアップ言語
HTMLタグを手打ちしていくのは面倒くさい
より手軽にHTMLを記述するための方法として軽量マークアップ言語がある
ただし，HTMLへの変換処理が必要
各種システム（Github，Jupyter notebookなど）での実装，pandocなど変換エンジン メールを書くときの記述を応用した書式
https://gyazo.com/2b9c8bc0a3b91ad17365dc97bf2e5e59
Markdownよりも充実した機能。ただしMarkdownの方がよく使われている
その他各種サービスでの記法
参考ページ
![http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png">](http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png">){kind=link}
