ＨＴＭＬ 2日目
第１章：ＨＴＭＬの基本
自宅で予習・復習環境を整える
- TeraPadをインストールして設定する
（JOBTECHにインスト→設定方法の説明がある。 - HTMLファイルは拡張子が表示されるように設定する。
TeraPadで開いたファイルをブラウザで表示確認する設定
Chromeで表示確認するための設定をTeraPadに入れる
「TeraPad」のツール＞「ツールの設定」
ツール設定画面の「追加」ボタンをクリックして設定を入れる。
★TeraPadの「ツール」から「Chrome」を選択すると
↓ このようにChromeで表示がされる
TeraPadのオススメ設定
- タイトルバーのファイル名をフルパス表示
- タブ記号や半角空白、全角空白を表示
- 新規ファイル作成時の文字コードと改行コードを指定
ＨＴＭＬタグの記述法
見出し、文字の大きさ、余白、段落等の配置に「印」をつけて
コンピュータにデータとして伝える言語
大見出し：h1
headline1
中見出し：h2
headline2
段落：p
paragrapf
リスト：ul,li
unordered list
list item
ＨＴＭＬタグ
タグ＝「印」のこと
- 半角文字で入力
- 小文字で記述
タグ前の空白も半角
とりあえず、行先頭の空白はつけなくてもOK
（VSCodeでは自動で空白を付けてくれる）
開始タグと終了タグで囲んで要素（意味のあるかたまり）を作る
＜要素名＞意味づけの対象＜/要素名＞
開始タグ 終了タグ
囲む対象がない要素を作る
＜要素名＞
開始タグ
タグは必ず入れ子構造にする
<p>タグは<strong>入れ子構造</strong>にする<p>
<p>タグは<strong>入れ子構造</p>にする</strong>タグは入れ子構造にする
タグは入れ子構造
にする
※間違っても「エラー」が出ないで、ブラウザによって補完されて表示されてしまう。
間違った記述が勝手に修正されたコード
<p>タグは<strong>入れ子構造</strong></p><strong>にする</strong>タグは入れ子構造
にする
ＨＴＭＬのエラーチェック
The W3C Markup Validation Service
ＨＴＭＬタグに属性を追加
<h1 style="color:red;">属性の記述法</h1>
<p>
<input type="checkbox"> 項目
<input type="checkbox" checked="checked"> 項目
<input type="checkbox" checked> 項目
</p>
- 属性のみを記述することはできず、
必ず「要素」に追記する - 要素によって使える属性が決まっている
- 属性は要素の開始タグに
「属性名＝”属性値”」の形式で記述する - 一部の属性は「＝”属性値”」を省略し「属性名」のみで記述が可能
- 一つの要素に複数の属性を記述できる（記述順は自由）
＜要素名 属性名＝”属性値”＞・・・＜／要素名＞
属性
※複数の属性を記述するときは半角スペースで区切る
省略できる属性の記述法：省略が許されている場合
属性名と属性値が同じ場合は省略できる
省略しない記述例
<input type=”checkbox” checked=”checked”> 項目
checked属性
省略した記述例
<input type=”checkbox” checked“> 項目
checked属性
ＨＴＭＬの基本構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLは印をつける言語</title>
</head>
<body>
・
・
・
</body>
</html>文章型宣言
<!DOCTYPE HTML>どくたいぷ
HTMLの仕様を決める記述（文章型宣言）
html要素
<html>~</html>
HTML文書の最初と最後に記述し、すべての要素の内包する
<html lang=”ja”> ⇒HTMLファイルの言語を指定
head要素
<head>~</head>
タイトルや概要、文字コードなどブラウザに表示されないけれど重要な情報を記述
meta要素
画面に表示しない情報の記述、検索エンジンや外部アプリケーションに向けた情報を記述
文字コード指定
<meta charset=”UTF-8″>
※UTF-8Nでも「Nは付けない！」
※全角文字の利用より上に記述する（推奨）
※文字コードの指定はheadの頭に付ける（推奨）
先頭でなくてもOKだが、先頭1024バイト以内に記述するという「縛り」
がある
文字化けが起きた時の対処法
title要素
ブラウザの「タブ」に表示される「名前」
サイトアクセス数に影響を及ぼすので
＜title＞ページタイトル｜サイト名＜／title＞
<body>~</body>
ブラウザに表示されるコンテンツを扱う
コメントの記述
コメントブロック
<!– コメント –>
ブラウザ上には表示されないけど、「※ソースコードを表示」させれば誰でも見ることができるので、コメントは見られることを前提にして使用する
※ソースコードを確認したいページで右クリック「ページのソースを表示」を選択すると、別タブでソースコードが表示される。
第２章：文章の定義
見出しを定義する
ｈ要素：見出し
語源：headline（ヘッドライン、見出し）
h1～h6タグを使用して文書構造を定義する。ｈの後の数字が小さいほど重要度は高い。
文字の大きさ等でタグを変更しないようにする。
あくまでも「文書構造を定義するもの」であることを頭に入れておく
※まずは見出しレベルを決めてつけてしまうと良い
段落を定義する
ｐ要素：段落
語源：paragraph（パラグラフ、段落）
ｐタグを使用して段落を定義する。主に文章が段落の対象になる。
※長い文章があったら＜ｐ＞で囲む！
<p>
新人研修や企業研修、学校の課外授業など出張講座も引き受けています。
</p>
<p>新人研修や企業研修、学校の課外授業など出張講座も引き受けています。
</p>↑どちらでもOK
br要素：改行
語源：line break（ラインブレイク、改行）
ソースコード上で改行してもブラウザ上では改行されないため
＜br＞タグをしようする。
※brタグを連続で使用すると複数行の改行になりますが、推奨されない。
強調を定義する
em要素：強調
語源：emphasis（強調）
emタグで強調した文字列は「斜体」で表示される。
※標準書体メイリオでは斜体表示がないため見た目の変化がない。
<p>サンプル<em>強調する単語</em>サンプル</p>サンプル強調する単語サンプル
強い重要性を定義する
strong要素：強い重要性
語源：strong importance（強い重要性）
strongタグで強調した文字列は「太字」で表示される。
<p>サンプル<strong>重要な単語</strong>サンプル</p>サンプル重要な単語サンプル
入力したとおりに表示する
pre要素：整形済テキスト
語源：preformatted text（整形済テキスト）
pre要素で囲まれると整形済テキストと認識され、空白文字や改行などを含め
ソースコードと同じ状態でブラウザに表示される。
等幅フォントが使われる。
※特殊な状況下でしか使わない。
主にプログラムコード、アスキーアート、電子メールの内容等
そのまま表示させたい時にのみ使う。
<pre>
学生時代に大事なのは、
何を学んだかではなくて、
どうやって学んだかということ
</pre>学生時代に大事なのは、 何を学んだかではなくて、 どうやって学んだかということ
その他のよく使うHTML要素
blockquote要素：長い引用文
語源： block quotation（引用文のかたまり）
他サイトの文章や文献などの文章を引用する時に使う。
要素内に段落のp要素などを入れ子にすることができる。
<blockquote>
<p>どっどど どどうど どどうど どどう<br>
青いくるみも吹きとばせ<br>
すっぱいかりんも吹きとばせ<br>
どっどど どどうど どどうど どどう</p>
</blockquote>どっどど どどうど どどうど どどう
青いくるみも吹きとばせ
すっぱいかりんも吹きとばせ
どっどど どどうど どどうど どどう
ins要素：あとから内容を追加
語源： inserted text（挿入された文章）
insタグを定義した個所には下線が表示される。
あとから追加した個所で使う。
<p><ins>日付が変更されました。</ins></p>日付が変更されました。
del要素：あとから内容を追加
語源： deleted text（削除された文章）
delタグを定義した個所には取り消し線が表示される。
あとから削除した個所で使う。
<p><del>5月9日</del><ins>変更後：5月10日</ins>に開催します。</p>5月9日変更後：5月10日に開催します。