学科 HTML基礎③【オンライン】

2023年9月7日

下記のように文法や語彙集をまとめたサイトを参照することが上達の秘訣。

自作でつくるのもよいが、学校で準備されているものをとりあえず活用する。

コメントアウト

html

検証ツール左上の　矢印ボタンをおすと、左側に該当行に反転表示してくれる。

L2.5 セクション分類タグ

L2.5.1 セクション分類の構成例

header

nav

main

section

article

aside

footer

L2.5.2 h1～h6 要素（見出し）

<h1>h1 レベル見出し情報</h1>
<h2>h2 レベル見出し情報</h2>
<h3>h3 レベル見出し情報</h3>
<h4>h4 レベル見出し情報</h4>
<h5>h5 レベル見出し情報</h5>
<h6>h6 レベル見出し情報</h6>

Copy

各レベルに従った見出しを指定します。一般的に h1 はページに 1 つだけ指定します。

L2.5.3 article 要素（アーティクル）

<article>アーティクル定義情報</article>

Copy

単独で成り立つコンテンツのブロックを定義します。

L2.5.4 section 要素（セクション）

<section>セクション定義情報</section>

Copy

章のブロックを定義します。

L2.5.5 header 要素（ヘッダー）

<header>ヘッダー定義情報</header>

Copy

ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。

L2.5.6 footer 要素（フッター）

<footer>フッター定義情報</footer>

Copy

ページ下部のフッターブロックを定義します。セクション要素やアーティクル要素内のフッター情報としても使用可能です。

L2.5.7 nav 要素（ナビ）

<nav>グローバルナビゲーション定義情報</nav>

Copy

グローバルナビゲーションのブロックを定義します。

L2.5.8 aside 要素（アサイド）

<aside>アサイド定義情報</aside>

Copy

ページの内容と関連がないブロックや補足情報のブロックを定義します。

L2.5.9 表示サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML セクション サンプル</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
</style>
</head>
<body>
	<div class="container">
		<h1>h1 レベル見出し情報</h1>
		<h2>h2 レベル見出し情報</h2>
		<h3>h3 レベル見出し情報</h3>
		<h4>h4 レベル見出し情報</h4>
		<h5>h5 レベル見出し情報</h5>
		<h6>h6 レベル見出し情報</h6>
		<article>アーティクル定義情報</article>
		<section>セクション定義情報</section>
		<header>ヘッダー定義情報</header>
		<footer>フッター定義情報</footer>
		<nav>グローバルナビゲーション定義情報</nav>
		<aside>アサイド定義情報</aside>
	</div>
</body>
</html>

Copyhttps://html-css.hamaya2020.com/sample/l2-section.html

L2.11 関連事項

L2.11.1 CSS との紐付け

(1) id 属性

<要素名 id="id 名">コンテンツ</要素名>

Copy

要素に対して id 名を付与します。1 つの Web ページ内では1箇所にしか同一の名前を付けれません。CSS などで id 名を参照する時は、先頭に「ハッシュ（#）」を付与します。id 名は、a タグ（アンカータグ）のリンク先として使用することもできます。

ページの途中にとび先を指定するときには、IDを使うが、
殆どの紐づけはCLASS名を使うのがほとんど。また、使いやすい。

使用例

<p id="text1">サンプルテキスト</p>

Copy

(2) class 属性

<要素名 class="class 名">コンテンツ</要素名>

Copy

要素に対して class 名を付与します。複数の箇所に同一の名前を付けれます。class 名には複数の名前をスペースで区切って指定することができます。CSS などで class 名を使用する時は、先頭にピリオド（.）を付与します。

使用例

<p class="size1 color1">サンプルテキスト</p>

Copy

L2.11.2 特殊文字

HTML のコードを記述する時に特別な書き方をする必要のある特殊文字で主要なものは以下の通りです。

文字	名称記述	10進数記述	16進数記述	名称
“	"	"	"	ダブルクォーテーション
&	&	&	&	アンパサンド
<	<	<	<	小なり
>	>	>	>	大なり
（スペース）				ノーブレークスペース
©	©	©	©	著作権記号(コピーライト)
®	®	®	®	登録商標

特殊文字変換ツール

HTML に HTML コードを記述する時に使用する変換ツールです。「変換前文字列」に記述する HTML を張り付けて「変換」ボタンを押下後に「変換後文字列」をコピーしてください。対象の文字は、アンパサンド（&）、小なり（<）、大なり（>）です。

変換前文字列

変換後文字列

L2.11.3 インデンテーション（字下げ）

HTMLを記述する時は、可読性を向上させるためにインデンテーション（字下げ）を意識しましょう。

(1) インデンテーション無し

HTML

<main>
<h1>タイトル</h1>
<div>
<h2>サブタイトル</h2>
<p>段落</p>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>
</main>

Copy

(2) インデンテーション有り

HTML

<main>
	<h1>タイトル</h1>
	<div>
		<h2>サブタイトル</h2>
		<p>段落</p>
		<ul>
			<li>リスト</li>
			<li>リスト</li>
		</ul>
	</div>
</main>

Copy

L2.12 マークアップの練習

L2.12.1 自己紹介ページ

マークアップの練習をしましょう。

山田太郎さんから自己紹介ページを作ってほしいとの依頼を受けました。山田太郎さんから自己紹介の原稿と似顔絵の画像ファイルなどを提供してもらいました。これらのコンテンツを使用して自己紹介ページのマークアップをしてみましょう。

山田太郎さんから提供してもらったコンテンツは、下記のリンク先からダウンロードしてください。

山田太郎さんから提供されたコンテンツファイル（request-form.zip）

ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
自己紹介の原稿は、request-form/request-form.txt になります。css/style.css（参考のスタイルシートファイル）の使用法は、この章の後ろの方で記述します。

request-form
- css（スタイルシートフォルダ）
  - style.css（参考のスタイルシートファイル）
- images（画像ファイルフォルダ）
  - favicon.ico（ファビコンファイル）
  - tarou（似顔絵ファイル）
- request-form.txt（Web ページ作成依頼ファイル）

自己紹介ページの作成手順は、次の通りです。

自己紹介ページ用の開発フォルダを作成します。
開発フォルダにスタイルシートフォルダと画像ファイルフォルダをコピーします。
開発フォルダに HTML ファイル（index.html）を作成し、HTML の記述（マークアップ）を行います。
HTML チェックサイトを利用して記述して HTML に誤りがないかを確認します。
マークアップした結果をブラウザで表示確認します。

(1) マークアップ例

マークアップには、正解があるわけではありません。適切と思われるタグを用いてマークアップを実施してください。下記にマークアップの例を示しますので参考にしてみてください。

マークアップ例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="山田太郎の自己紹介サイトです。">
<meta name="keywords" content="山田,太郎,yamada,tarou">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>山田太郎 自己紹介</title>
<link href="images/favicon.ico" rel="icon">
</head>
<body>

<header>
	<h1>自己紹介</h1>
</header>

<main>
	<h2>氏名</h2>
	<p><span>山田 太郎</span></p>
	<h2>イメージ絵</h2>
	<div><img src="images/tarou.png" alt="山田太郎"></div>
	<h2>生年月日</h2>
	<p>1959年2月17日</p>
	<h2>出身地</h2>
	<p>北海道</p>
	<h2>性格</h2>
	<p>普段は温厚ですがお腹がすくと怒り出します。<br>
	お酒が好きで毎日、晩酌をしています。</p>
	<h2>趣味</h2>
	<ul>
		<li>写真撮影</li>
		<li>散歩</li>
		<li>Webサイト作成</li>
	</ul>
	<h2>好きな食べ物トップ3</h2>
	<ol>
		<li>お寿司</li>
		<li>焼肉</li>
		<li>ラーメン</li>
	</ol>
</main>

<footer>
	<p><small>&copy; 2023 山田太郎</small></p>
</footer>

</body>
</html>

Copy

画面表示形式

別画面で表示https://html-css.hamaya2020.com/sample/markup/profile-site/tarou.html

(2) スタイルシートの適用

参考にマークアップした自己紹介ページにスタイルシートを適用してみましょう。山田太郎さんから提供してもらったファイルの中に参考のスタイルシートを格納してありますので、これを適用します。

HTML ファイル（index.html）の head タグ内に以下の記述を追加します。

<link href="css/style.css" rel="stylesheet"  type="text/css">

Copy

画面表示形式

別画面で表示https://html-css.hamaya2020.com/sample/markup/profile-site/index.html

(3) マークアップコードのダウンロード

もし、マークアップがうまくいかない場合は、以下からマークアップ例のファイルをダウンロードして内容を確認してください。

山田太郎さんの自己紹介ページのマークアップ例（profile-site.zip）

ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
マークアップ例の HTML ファイルは、profile-site/index.html になります。

profile-site
- css（スタイルシートフォルダ）
  - style.css（参考のスタイルシートファイル）
- images（画像ファイルフォルダ）
  - favicon.ico（ファビコンファイル）
  - tarou（似顔絵ファイル）
- index.html（HTML ファイル）