tags: `HTML`

HTMLを書いてみよう

エディタは VSCode ，ブラウザは Google Chrome になります．
違うエディタ・ブラウザをご使用の方は，当てはまらない部分や自身で読み替えなければいけない場合がありますが，ご了承ください．

HTMLファイルを作成

お使いのエディタを開いて，prac.htmlというファイルを作成してください．

ディレクトリは，クローンしたGitHub Pagesのディレクトリ内以外であればどこでもいいです．

作成し終えたら，お好きなブラウザで開きましょう．
開き方は，GitHub Pagesの準備でやった通りです！

基本構成を記述

作成したHTMLファイルを開いて，HTML文書の基本構成を記述していきます．
以下を記述しましょう．

<!DOCTYPE html>
<html lang="ja">
    
<head>
</head>
    
<body>
</body>
    
</html>

DOCTYPE宣言

<!DOCTYPE html>

まず，一行目はDOCTYPE宣言です．
このHTMLファイルがHTML5の構文で書かれていることを明示します．

html要素

<html lang="ja">
    <!-- この中はHTMLです -->
</html>

次にhtml要素です．
この要素内に記述されたものが，HTMLであると解釈されます．

そして，lang属性はhtml要素の属性として記述されます.
こうすることで，html要素内の文書がすべて，指定した言語(ja: 日本語) であると設定できます．

head要素

<html lang="ja">
<head>
    <!-- head要素内に記述していく -->
</head>
    ...
</html>

head要素内にはこのHTML文書のメタ情報を記述するmeta要素やCSSファイル，JavaScriptファイルといった外部ファイルの参照，CDNなどの参照を記述します．

body要素

<html lang="ja">
    ...
<body>    
    <!-- body要素内に記述していく -->
</body>
</html>

body要素では，HTMLの本文を記述します．

以上が，HTMLの基本構成となっています．
head，body要素内にマークアップしていくのが，基本的なコーディングになっていきます．

ひな型の記述

ひな型

VSCodeなどのエディタでは，Emmetという機能が標準搭載されており，要素名を入力していくと自動で補完候補を提示，Enterを押して確定・自動で記述，といった風にコーディングを効率化することができます．
その中に，HTML5のひな型の補完があります．

prac.htmlを一度まっさらにして，htmlと入力してみてください．

html:5に選択を合わせて，Enterを押してください．

このように補完されれば，Emmetの体感できました．

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

先ほどと少々違いますが，差分を説明します．

html要素

<html lang="en">

まずは，lang属性がenになっています．
日本向けの日本語ページを作るなら，ここをjaに書き換えましょう．

文字コード

<meta charset="UTF-8">

meta要素には，HTMLファイルのメタ情報の設定が記述されます．
この要素は，タグ内に属性を記述することで，メタ情報を付与します．

charset属性は，このHTMLファイルがどの文字コードで保存されているかを記述します．
ひな型では，UTF-8が指定されています．
他にも，Shift_JIS等がありますが，HTML5ではUTF-8が推奨されています．

VSCodeでは，デフォルトのエンコード設定がUTF-8になっており，作成したファイルもUTF-8 で記述されたファイルとして保存されます．
エディタがShift_JIS設定になっている人は，エディタの設定をUTF-8にするか，charset属性の設定をShift_JISにしてください．

ブラウザは，メタ要素の情報によって文字エンコードするので，設定の乖離があると文字化けします．

X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">

このメタ情報は，IE(Internet Explorer)でサイトが開かれたとき，どのIEのバージョンで表示させるか設定します．

特定のIEのバージョンじゃなければ，表示が崩れてしまうような場合に設定します．
content="IE=edge"は「IEの最新版で表示してね」という設定です．

IEはサポートが終了すること，IEの最新版で表示させることがスタンダードになっている昨今では，上記の設定で十分かもしれません．
そもそも「IEで表示されることは，想定しないので設定しない」といった選択肢もあるため，そういう場合は消してしまってもいいです．

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

name属性"の属性値(今回だとviewport)で，どのメタ情報を設定するのか指定します．

viewportとは、PCやモバイル（スマホ、タブレット）といったデバイスごとにコンテンツの表示領域を設定するためのHTML属性値のことです。
https://seolaboratory.jp/48581/

それぞれのデバイスで，画面の幅は違います．

content属性の属性値でwidth(幅)をdevice-width(デバイスの幅)にし，initial-scale(初期サイズ比)を1.0つまり，デバイスの幅にします．

今回の設定は，Googleが推奨している基本の設定です．
レスポンシブルなサイトを作成するためには必須な設定です．

より詳しく知りたい人は，この記事を読みましょう．

viewportとは？設定方法やスマホで効かない原因など徹底解説！

title要素

<title>Document</title>

title要素はこのサイトのタイトルを記述します．
例えば，Qiitaというエンジニア向け情報共有サイトのホーム画面だと，その値はQiitaになっており，タブ部分に表示されます．

titleタグ内の内容は，自分のサイトにあったもの，そのページあったものに書き換えましょう！

以上がHTMLのひな型(VSCode)となります！

いろんなタグを使ってみよう！

先ほど作成した，prac.htmlの body要素 に追記しながら，よく使うタグを試していきましょう！
ただし，最初だけは head要素 を書き換えます．

この記事では，主にCodePenというサイトによるデモを載せています．
タグの解説は，お渡ししたスライドに書いています．

とにかく手を動かしていきましょう！

紹介するタグ

title	h1~h6	p	a
br	em	strong	i
b	ul	ol	li
dl	dt	dd	img
table	tr	th	td
form	input	label	select
option	button	div	span

titleタグ

ページのタイトルを表す
ブラウザのタブ部分に反映

<!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要素
</body>
</html>

h1~h6タグ

見出し要素
h1がトップレベル
文字を大きくする目的では使わない
- ブラウザに「ここが見出しだよ！」と伝えるために使う
- 文字を大きくしたいときはCSSを使う

pタグ

段落要素
タグ内が1つの段落であると解釈

aタグ

ハイパーリンクを持たせられる
href属性の属性値にURLを持たせる
- サーバー内部のHTMLファイルへのリンク
- サーバー外部のHTMLファイルへのリンク
target属性の属性値を_brankと指定すると，別タブで開ける．

まずは外部へのリンク方法．

次に内部へのリンク方法．
prac.htmlと同じディレクトリに，another.htmlみたいに適当なHTMLファイルを作成してください．
別名にした場合は各自で読み替えてください．
ファイルの作り方(VSCode)は，GitHub Pagesの準備で説明した通りです．

そしてそれぞれのファイルに，以下のように記述ましょう．

<!-- prac.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>
</head>
<body>
  <!-- 中略 -->
  <h1>ホームページ</h1>
  <a href="./another.html">内部リンクへ&ldca;</a>
</body>
</html>

<!-- another.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anther Document</title>
</head>
<body>
  <h1>内部リンクページ</h1>
  <a href="./prac.html">Homeへ戻る&ldca;</a>
</body>
</html>

相対パスで内部ファイルまでのリンクを記述します．
./はなくてもいいのですが，相対リンクを意識するためにあえて書きました．

リンクをクリックしてみてください！
ページジャンプできたでしょうか？

brタグ

改行要素
HTMLファイル内の改行を入力しても，半角スペース１つになる
余白などのレイアウト目的で使わないこと
- あくまで文章を途中で改行したいとき
- レイアウトはCSSでやる

強調・重要要素

テキスト読み上げ時に，強く読まれる
emタグ
- 強調要素
- 斜体になるが，斜体にする目的で使わない
  - 特別に意味を持たせたいときに使用
  - ただ斜体にしたいときはCSSを使う
strongタグ
- 重要要素
- 太字になるが，太字にする目的で使わない
  - 特別に意味を持たせたいときに使用
  - ただ太字にしたいときはCSSを使う

それとは別に，読みやすさのために定義されている要素

iタグ
- 慣用的なテキスト要素
- 文字をイタリック体にする
  - ただ斜体にしたいときはCSSを使う
- 何らかの理由で他のテキストと区別されるテキストの範囲を表す
  - 慣用句，技術用語，分類学上の呼称など
bタグ
- 注目付け要素
- 文字をボールド体にする
  - ただ太字にしたいときはCSSを使う
- CSSのfont-weightプロパティを使うことが推奨されている
  - HTMLで極力スタイルは扱わないのが原則

箇条書きリスト

ulタグ
- 順序なしリストを表す
olタグ
- 順序ありリストを表す
liタグ
- リストの項目を表す
- ul，ol要素内にのみマークアップ可能

これ，一つ一つ<li></li>を入力していくのめんどくさいですよね．
3つならまだしも，10や20と増えていったときや，liの中をさらにネストしたいときなど…

ここでEmmetの便利機能を紹介！
(※VSCodeじゃないエディタはよくわかりません)

エディタ上で，ul>li*3と入力していくと，Emmetから以下のような補完が提示される．

Enterを押すと，簡単に入力の手間を省ける．

意味としてはul(の)>(中に)li(を)*3(3つ)となります．

さらに，中に段落要素を書きたいとき，これもコピペや手打ちするのは面倒なので，Emmetでさぼりましょう．
かっこの中は一つの塊として認識され，それを ×3 しています．

さらにさらに，p(段落)だけでなくh2(中見出し)も入れたい場合+記号を使います．

こんなこともできます！

以上便利機能でした．

用語説明リスト

dlタグ
- 説明リスト
dtタグ
- 用語を表す
- dl要素内にのみマークアップ可能
ddタグ
- 用語の説明
- dl要素内にのみマークアップ可能
自動でインデントが付く
- インデントがいらない時やインデントサイズを変えたいときは，CSSで指定

imgタグ

画像要素
src属性の属性値に画像までの相対パスを指定
alt属性は代替えテキストを指定
- 画像が取得できなかったとき
- 目の見えない人が読み上げを使ったとき
- 適切に指定することを心がけること
width, height属性は縦横の長さを指定
- 何も指定しなければ画像サイズのまま表示される
- 縦横比を維持したい場合は，片方の長さを指定すればいい
- 両方指定して，縦横比が違う場合間延びしたようになる

prac.htmlと同じディレクトリにimageというディレクトリを作成してください．
その中に，好きな画像をコピーしてください．

ない人は以下2枚を右クリックでダウンロードしてください．


936 x 662	616 x 616

こんな感じ．

body要素を以下のように書きかえます．

<body>
  <!-- 中略 -->
  <p>
    <img src="image/fugu.png">
  </p>
  <p>
    <img src="image/dance.png" width="200px" height="200px">
    <img src="image/dance.png" height="200px">
    <img src="image/dance.png" width="200px" alt="動物が踊っている">
    <img src="image/danse.png" width="200px" alt="動物が踊っている">
  </p>
</body>

外部の画像を参照することもできます．
(ただし，著作権や商標権には注意すること．)

以下をコピペします．

<body>
  <img src="https://i.imgur.com/ivvctxO.png" height="200px" alt="動物が踊っている">
  <img src="https://i.imgur.com/uU8aO1k.png" height="200px" alt="フグが水を吐いている">
</body>

表(テーブル)を表す要素

レイアウトを組む用途で用いないこと！
- かつてはtebleでレイアウトを組む時代もあった
- レイアウトはCSSの領分！
- 表を作成する用途以外で用いない！
tableタグ
- 表の範囲を示す
- border属性を指定すると，境界線を表示
  - このtableがレイアウト目的でないことをブラウザに対して明示
trタグ
- 表の行を示す
thタグ
- 表の見出しセル
tdタグ
- セルの内容

以下のコマンドで一気にテーブルを作りましょう！

table>(tr>th*2)+(tr>td*2)*3
<!-- 
意味：
teble(表の構成)は
「th(見出しセル)を２つ持つtr(行)」と
「td(内容セル)を2つもつtr(行)を3つ」
-->

内容は以下の通り．

言語への愛着を表すテーブル
th
- 言語
- 愛着
td
- C/C++|星4つ
- Python|星2つ
- TypeScript|星3つ

以下は，レイアウト目的で使ってしまったダメな例

ページのレイアウトは，CSSでやります．
このテーブルがレイアウト目的でないことを，ブラウザに対して明示する目的で，border属性の属性値に1や空の値を指定しているということが分かってもらえればと思います．

フォームの作成

formタグ
- フォームの範囲を示す
- action属性：フォーム内容の送信先URL
- method属性：フォーム送信時にブラウザが使用するHTTPメソッド
  - GET, POSTなど
inputタグ
- 入力欄
- type属性：入力欄の種類を指定
  - text，password，radio，checkbox，submitなどたくさん種類がある
- name属性：入力欄の名前，JavaScriptなどで，どの入力欄からの値かを識別するため
- value属性：入力欄の値・入力欄の初期値
- placeholder属性：入力欄のプレースホルダーの値
- required属性：入力や選択を必須とするための属性

labelタグ

フォームのラベルを表す
for属性：同値のidを持つフォームと紐づく

先ほどの記述では，「男性」や「HTML」といった文字部分をクリックしても，チェックはできませんでした．
よくあるフォームなどでは，文字をクリックすると該当部分にチェックが入ったり，入力欄にフォーカスが行ったりすると思います．

先ほどと見た目の変化はないものの，文字をクリックするとフォーカスが行ったり，チェックが入ったりするようになったと思います．

選択要素・ボタン要素

selectタグ
- 選択要素
optionタグ
- 選択肢
buttonタグ
- type属性：ボタンの種類を指定
  - button，submit，reset

divタグ

div要素
- 「純粋」なコンテナーとして、本質的には何も表さない
- class や id を使用してスタイル付けしやすくする
- 文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりする
- 他に適切な意味的要素がない時にのみ使用

div要素はそれぞれ，デフォルトで縦並びになる．

<!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>
    .div1 {
      background-color: #fd4f90;
    }
    .div2 {
      background-color: #aaafd5;
    }
  </style>
</head>

<body>
  <div class="div1">
    1つ目の &lt;div&gt;&lt;/div&gt;
  </div>
  <div class="div2">
    2つ目の &lt;div&gt;&lt;/div&gt;<br>
    グループ分けをすることで，CSSの適用範囲などを制御する
  </div>
</body>

</html>

spanタグ

span要素
- 記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではない
- class や id を使用してスタイル付けしやすくする
- 文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりする
- 他に適切な意味的要素がない時にのみ使用

div要素とは違い，span要素はデフォルトで横並びになる．

次のステップ

HTML講座はここで終了です！
ここまでで，HTML の基本的なことをお伝え出来たかと思います！

次はCSS講座に進みましょう！

参考

テキスト

動画

本気で学ぶ！HTML入門講座

本

応用情報技術者 - きたみりゅうじ[著], p.549-p.550

tags: HTML

HTMLを書いてみよう

もくじ

HTMLファイルを作成

基本構成を記述

DOCTYPE宣言

html要素

head要素

body要素

ひな型の記述

ひな型

html要素

文字コード

X-UA-Compatible

Viewport

title要素

いろんなタグを使ってみよう！

紹介するタグ

titleタグ

h1~h6タグ

pタグ

aタグ

brタグ

強調・重要要素

箇条書きリスト

用語説明リスト

imgタグ

表(テーブル)を表す要素

フォームの作成

labelタグ

選択要素・ボタン要素

divタグ

spanタグ

次のステップ

参考

テキスト

動画

本

Read more

ホームページ制作 - テンプレート作成編

GitHub Pagesの準備

ホームページ制作 - Indexページ編

ホームページ制作 - Aboutページ編

tags: `HTML`