2025.12.10 学習記録 ～HTML/CSS①～
Kumiko OkawaraHTMLの基礎を勉強し、実際にコードを編集してサイトの表示を整えた。
本日の実習作品
HTML編集後のサイト
HTML編集前のサイト
WEBページの構造について
Web ページ ＝ HTML（文書構造） ＋ CSS（レイアウト・装飾） ＋ JavaScript/jQuery（動き・処理）
- HTML（ハイパーテキスト・マークアップ・ランゲージ）
HTML は、Web ページ内の各要素の意味や文書構造を定義する。 - CSS（カスケーディング・スタイル・シート）
CSSは、Web ページのレイアウトデザインや各要素の装飾（色・サイズ・レイアウトなど）を定義する。
HTMLは、文書構造を定義するためのものなので、基本的にWeb ページの装飾にはCSSを用いる。 - JavaScript と jQuery
Webページに動きを付けたり計算などの処理を行うには、プログラミング言語であるJavaScriptを使用する。
また、JavaScript を容易に記述できるようにしたJavaScriptライブラリであるjQueryやJavaScript機能ライブラリを使用することもある。
HTMLの構造
- HTML の記述を行う場合には、子要素は、親要素に影響を受けることがあるため記載には注意する。
- 入れ子構造を作成する時に開始タグと終了タグ（閉じタグ）がクロスしないように注意すること。
- 入れ子構造を作成する際は、囲ってはいけないタグがる。
（h1 タグを div タグで囲うことはできるが、h1 タグを p タグで囲うことはできない。）
コード入力時の特殊文字について
HTMLのコードを記述する時にHTML文法に矛盾を発生させないために、特別な記述が必要な文字がある。
特殊文字の代表例は以下。「名称記述」「10進数」「16進数」のいずれかで記載する。
ヘッドブロックについて
!DOCTYPE 宣言（ドキュメントタイプ宣言）
<!DOCTYPE html>
作成したHTMLが、どのバージョンで記述されているかを宣言する。
!DOCTYPE 宣言は、HTMLドキュメントの一行目に記述すること。
厳密には!DOCTYPE宣言は、HTMLの要素ではない。
head 要素（ドキュメントヘッダー）
<head>ドキュメントヘッダコンテンツ</head>
ブラウザの画面に表示されない領域で、文章のメタデータ、スクリプト、スタイルシートなどを記述する。
ここに書かれた内容は機械が処理するために必要となる情報で、ブラウザの画面には表示されないが、表示される内容に間接的に寄与する点に注意。
link 要素（外部ファイルリンク）
<link href="URL" rel="リンク先との関係”>
外部ファイルとの関連付けを行う。
外部ファイルは、スタイルシートやアイコン（ファビコン）ファイルになる。
一般的に、ファビコンファイルのファイル名は、favicon.icoが使用される。
この要素はブラウザのページに直接表示されないためレイアウトには影響を与えない。
この要素は空要素で、終了タグはない。
meta 要素（メタ情報）
ドキュメントに必要なメタデータを指定する。
この要素はブラウザのページに直接表示されないためレイアウトには影響を与えない。
この要素は空要素のため終了タグはない。
charset
ドキュメントで使用する文字のエンコーディング方式。
通常は「UTF-8」を使用。この値は、ファイルを保存した時のエンコーディング方式と一致している必要がある点に注意。
name
メタデータの名前。内容はcontent属性で指定する。通常は、http-equiv 属性、charset 属性、property 属性と同時には指定しない。
property
OGP（Open Graph Protcol）を使う場合に採用される属性。
現時点では、OGP指定は、HTMLの標準仕様ではないが一般的に使用されている。
content
name属性、property属性で定義されたメタデータの値を表す。
ページ構成例
header
ページの先頭部であり一般的には各ページで共通のコンテンツが格納される。
Webサイトのロゴやタイトル、問い合わせボタン、SNS ボタン、グローバルナビゲーション（各ページ共通メニュー）などを配置する。
nav
ページの主要なナビゲーションが格納される。
ヘッダーのグローバルナビゲーションやサイドバーのコンテンツナビゲーションなど。
aside
親要素に含まれる情報の中で余談や補足および本筋から分離しても問題のない内容のコンテンツを定義する。
必ずしもサイドバーに使うことを推奨されているわけではない。（ただし、サイドバーとして使われることが多い。）
main
文章の中で主要な部分を定義する。ヘッダーやフッターを除いた、文章の中の主要コンテンツ。
section
章（セクション）のブロックを定義する。一つのまとまりとして見なすことができる節目。
article
単独で成り立つコンテンツのブロックを定義する。
独立した意味のある記事であると明示できる範囲に対して使用できる。
footer
ページの最下部であり一般的には各ページで共通のコンテンツが格納される。連絡先や著作権表示など。
p 要素（文書段落）
<p>文書段落コンテンツ</p>
文章段落を定義する。段落の中には、テキストだけでなく画像も配置できる。
レイアウトの初期値はブロックレベル。文章の改行に影響を与える。
段落の中で改行したい場合は、br要素を使用する。
hr 要素（区切り）
＜hr＞
段落と段落の間に区切りを定義する。
規定値では、話題やテーマの区切りを示す要素として水平線が引かれる。
ul 要素（順序性のないリスト）
<ul>順序性のないリストコンテンツ</ul>
順序性のないリストを定義する。リスト項目は、li 要素を使って定義する。
規定値ではリスト項目の先頭にマーカーが表示される。
リスト項目の中にリスト要素を配置して入れ子構造を作ることもできる。
順序性のあるリストを定義する場合は、ol 要素を使用すること。
レイアウトの初期値はブロックレベルで、文章の改行に影響を与える。
マーカーの種類は、スタイルシート（CSS）で変更することができる。
ol 要素（順序性のあるリスト）
<ol start="開始値” reversed＞順序性のあるリストコンテンツ</ol>
順序性のあるリストを定義する。リスト項目は、li 要素を使って定義する。
規定値ではリスト項目の先頭にマーカーが表示される。
リスト項目の中にリスト要素を配置して入れ子構造を作ることもできる。
順序性のないリストを定義する場合は、ul 要素を使用すること。
レイアウトの初期値はブロックレベル。文章の改行に影響を与える。
マーカーの種類は、スタイルシート（CSS）で変更することができる。
start
リスト項目のリーダーの開始値を整数で指定する。
reversed
リーダーを逆順で表示する。項目は大きい順に番号付けされる。
本属性は値のない論理属性である。
dl 要素（定義リスト）
<dl>定義リストコンテンツ</dl>
定義する用語と用語の説明や解説を組み合わせた定義リストを定義する。
定義リストコンテンツには、用語を表すdt要素と説明を表すdd要素を組み合わせて記述する。
dt要素とdd要素の組み合わせは、複数記述することができる。
レイアウトの初期値はブロックレベル。文章の改行に影響を与える。
main 要素（主要文書）
<main>主要文書コンテンツ</main>
文章の中で主要な部分を定義する。ヘッダーやフッターを除く文章の中の主要コンテンツになる。
レイアウトの初期値はブロックレベル。文章の改行に影響を与える。
文章のアウトラインには影響を与えない。
a 要素（リンク）
リンクコンテンツに対してリンク（ハイパーリンク）を定義する。
リンクコンテンツには、テキストだけでなく画像などを指定することも可能。
レイアウトの初期値はインラインレベル。文章の改行に影響を与えない。
規定値では、文字の色やアンダーラインと訪問済み効果などが設定されている。
target属性に_blankを使用した時に悪意ある外部サイトを指定しまうと外部サイトから自サイトを操作されるという脆弱性がある点に注意！
外部サイトを指定する時は、rel 属性にnoopenerとnoreferrerを同時に指定して外部サイトからの参照を無効にすること。
href
リンク先URLを指定する。リンク先がページ内の特定の場所になる場合は、ハッシュ（#）に続けてid名を指定。
メールアドレスや電話番号を指定することも可能。
target
リンク先を開くフレーム名やウィンドウ名を指定する。
- _self
同じウィンドウで開く。（初期値） - _blank
新しいタブまたは新しいウィンドウで開く。
rel
リンク先との関係を指定する。
- noopener
外部サイトへ移動する場合に発信元の文章改ざんを防ぐ。リンク先が信頼できない場合は指定すること。 - noreferrerReferer
ヘッダー情報を発信したくない場合に指定する。リンク先が信頼できない場合は指定すること。
span 要素（インライン要素の範囲）
<span>インライン要素の範囲コンテンツ</span>
汎用的なインラインレベルのコンテナを定義する。
これ自体はコンテンツに対する意味の持たせるものではないが、特定の範囲をまとめてスタイルシート（CSS）を適用したい場合などに使用する。
レイアウトの初期値はインラインレベル。文章の改行に影響を与えない。
div 要素（ブロックレベル要素の範囲）
<div>ブロックレベル要素コンテンツ</div>
汎用的なブロックレベルのコンテナを定義する。
div要素は、文章の意味や文脈には影響を与えないで見た目をスタイルシートで設定する場合などで使用する。
文章の意味や文脈に影響を与える部分には適切な要素を使用すること。
レイアウトの初期値はブロックレベル。文章の改行に影響を与える。
文章のアウトラインには影響を与えない。
img 要素（画像）
<img src="画像ファイルのパス"
alt="代替テキスト"
width="横方向ピクセル値"
height="縦方向ピクセル値"
loading="画像の読み込み方"
decoding="画像デコード時のヒント"
srcset="画像選択リスト"
sizes="画像サイズリスト">
ページの中に画像の埋め込みを定義する。
src属性で表示する画像ファイルを指定し、alt属性で代替テキストを指定する。
代替テキストは、なんらかの原因で画像が表示できない場合に代わりに表示する文字列のこと。
代替テキストはアクセシビリティの観点で必ず指定するようにする。
width属性とheight属性を使用して画像の縦横比を明示しておくことが推奨されている。
縦横比を明示しておくことでブラウザが早期に画像を表示する領域を確保することができる。
また、実際に表示される大きさは、スタイルシート（CSS）で指定することができる。
この場合は、画像の縦横比が変更されるのを防ぐために高さにautoを指定する必要がある。
sizes属性とsrcset属性を使用してビューポート幅によって表示する画像ファイルの切り替えが可能。
表示する画像の切り替えは、picture要素とsource要素を使用しても実現可能なので状況によって使い分ける。
レイアウトの初期値はインラインレベル。文章の改行に影響を与える。
この要素は空要素で、終了タグはない。
src
表示する画像ファイルのパスを指定する。
alt
表示する画像ファイルの代替テキストを指定する。
width
画像の横方向の単位なしのピクセル値を指定する。この値を指定しておくことでブラウザは画像を読み込む前に縦横比を計算し表示領域を確保することができる。
height
画像の縦方向の単位なしのピクセル値を指定する。
この値を指定しておくことでブラウザは画像を読み込む前に縦横比を計算し表示領域を確保することができる。
loading
画像の読み込み方を指定する。
eager
画像の配置箇所が表示領域に入る前から読み込みを開始する。（初期値）
lazy
画像の配置箇所が表示領域に入るまで読み込みを遅延する。
decoding
画像をデコードする時のヒントを指定する。
sync
他のコンテンツと同期的にデコードする。
async
他のコンテンツと非同期的にデコードする。
auto
ブラウザの規定値に従う。
srcset
利用可能な画像のソースセットを指定する。
画像ファイルへのパスとサイズを並べて指定することで、sizes 属性で指定した条件に一致したものを採用させることができる。
sizessrcset
属性で指定されたソースの中から表示するのに相応しいサイズを提案する。
値はメディア環境と採用するソースを指定。複数を列挙することで条件に一致するものをブラウザが採用します。
usemap
イメージマップを作成する時にmap要素と紐付けるイメージマップ名を指定する。
イメージマップ名は、map要素のname属性で指定した名前にハッシュ（#）を付与して指定する。
よく使うブロックレベル要素の例
| 用途 | 要素名 |
|---|---|
| 見出し | h1〜h6要素 |
| 段落 | p要素 |
| 箇条書き | ul, li要素 |
| 汎用タグ | div要素 |
よく使うインラインレベル要素の例
| 用途 | 要素名 |
|---|---|
| リンク | a要素 |
| 画像 | img要素 |
| 汎用タグ | span要素 |
備考・メモ
コードのチェックツール
Another HTML Lint - Gateway
https://www.htmllint.net/html-lint/htmllint.html
「DATA」からコード全部コピーして貼り付けるとエラーコードないか調べられる。
ファイル管理は重要！フォルダやファイル命名規則にはわかりやすいように統一すること。
Webサイト開発時には、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルなど多くのファイルを使用する。
また、各ファイルは随時変更されるので適切なバックアップも必要。
見出しは、h1 要素から順に使用するように注意すること。
h1 要素の後に h3 要素が出てくるような途中を飛ばすような使い方は避ける。
HTMLを記述する時は、可読性を向上させるためにインデンテーション（字下げ）を行う。
インデンテーションを行うことで親子関係がわかりやすい。
現在の字下げの主流は4文字分。スペースキーだと非効率なのでTabで字下げする。
表示→タブの文字数→4文字に設定しておく（tab一回で4文字の字下げができるようになる）
ファイル名は日本語にしない！グローバルなので英数字で。
HTML編集での使用エディタ…TeraPad
HTMLファイルの表示…Chrome
対応範囲が広く、検証も充実していて使い勝手が良い。
トップページのHTMLファイル名は「index.html」必須！（正しく指定しないと表示されない。）
それ以外は任意のファイル名で拡張子に「.html」をつける。
コードを書く際、全角空白はNG！半角ならOK。
設定で全角空白か半角か見れるように表示設定を変える。
表示→オプション→表示で該当項目にチェックを入れる。
保存の際は文字コード「UTN-8N」で保存する。（SJISだと文字化け起こす）
文字/改行コード指定保存から。
ヘッドブロック…WEBページ外の情報を書く。（タブの表示とか）
ボディブロック…WEBページ本体の情報を書く。
