###### tags: `HTML` # HTMLを書いてみよう エディタは **VSCode** ，ブラウザは **Google Chrome** になります． 違うエディタ・ブラウザをご使用の方は，当てはまらない部分や自身で読み替えなければいけない場合がありますが，ご了承ください． ## もくじ - [HTMLファイルを作成](#HTMLファイルを作成) - [基本構成を記述](#基本構成を記述) - [ひな型の記述](#ひな型の記述) - [いろんなタグを使ってみよう！](#いろんなタグを使ってみよう！) - [次のステップ](#次のステップ) - [参考](#参考) ## HTMLファイルを作成 お使いのエディタを開いて，`prac.html`というファイルを作成してください． ディレクトリは，クローンしたGitHub Pagesのディレクトリ内**以外**であればどこでもいいです． ![new html file](https://i.imgur.com/wbR7OKd.png) 作成し終えたら，お好きなブラウザで開きましょう． 開き方は，[GitHub Pagesの準備](https://hackmd.io/@kit-web-team/github-pre#indexhtml%E3%82%92%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E8%A1%A8%E7%A4%BA) でやった通りです！ ## 基本構成を記述 作成したHTMLファイルを開いて，HTML文書の基本構成を記述していきます． 以下を記述しましょう． ```htmlembedded <!DOCTYPE html> <html lang="ja"> <head> </head> <body> </body> </html> ``` ### DOCTYPE宣言 ```htmlembedded <!DOCTYPE html> ``` まず，一行目は`DOCTYPE宣言`です． このHTMLファイルがHTML5の構文で書かれていることを明示します． ### html要素 ```htmlembedded <html lang="ja"> <!-- この中はHTMLです --> </html> ``` 次に`html要素`です． この要素内に記述されたものが，HTMLであると解釈されます． そして，`lang属性`は`html要素`の属性として記述されます. こうすることで，html要素内の文書がすべて，**指定した言語(ja: 日本語)** であると設定できます． ### head要素 ```htmlembedded <html lang="ja"> <head> <!-- head要素内に記述していく --> </head> ... </html> ``` `head要素`内にはこのHTML文書のメタ情報を記述する`meta要素`やCSSファイル，JavaScriptファイルといった外部ファイルの参照，CDNなどの参照を記述します． ### body要素 ```htmlembedded <html lang="ja"> ... <body> <!-- body要素内に記述していく --> </body> </html> ``` `body要素`では，HTMLの本文を記述します． 以上が，HTMLの基本構成となっています． `head`，`body`要素内にマークアップしていくのが，基本的なコーディングになっていきます． ## ひな型の記述 ### ひな型 VSCodeなどのエディタでは，Emmetという機能が標準搭載されており，要素名を入力していくと自動で補完候補を提示，Enterを押して確定・自動で記述，といった風にコーディングを効率化することができます． その中に，HTML5のひな型の補完があります． `prac.html`を一度まっさらにして，`html`と入力してみてください． ![](https://i.imgur.com/MtinOAw.png) `html:5`に選択を合わせて，Enterを押してください． ![](https://i.imgur.com/DLPnEWB.png) このように補完されれば，Emmetの体感できました． ```htmlembedded <!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要素 ```htmlembedded <html lang="en"> ``` まずは，`lang属性`が`en`になっています． 日本向けの日本語ページを作るなら，ここを`ja`に書き換えましょう． ### 文字コード ```htmlembedded <meta charset="UTF-8"> ``` `meta`要素には，HTMLファイルのメタ情報の設定が記述されます． この要素は，タグ内に属性を記述することで，メタ情報を付与します． `charset属性`は，この**HTMLファイルがどの文字コード**で保存されているかを記述します． ひな型では，`UTF-8`が指定されています． 他にも，`Shift_JIS`等がありますが，HTML5では`UTF-8`が推奨されています． ![](https://i.imgur.com/hwoDouL.png) VSCodeでは，デフォルトのエンコード設定が`UTF-8`になっており，作成したファイルも`UTF-8 `で記述されたファイルとして保存されます． エディタが`Shift_JIS`設定になっている人は，エディタの設定を`UTF-8`にするか，`charset属性`の設定を`Shift_JIS`にしてください． ブラウザは，メタ要素の情報によって文字エンコードするので，設定の乖離があると文字化けします． ### X-UA-Compatible ```htmlembedded <meta http-equiv="X-UA-Compatible" content="IE=edge"> ``` このメタ情報は，IE(Internet Explorer)でサイトが開かれたとき，どのIEのバージョンで表示させるか設定します． 特定のIEのバージョンじゃなければ，表示が崩れてしまうような場合に設定します． `content="IE=edge"`は「<font color="#eeaaaa">IEの最新版で表示してね</font>」という設定です． IEはサポートが終了すること，IEの最新版で表示させることがスタンダードになっている昨今では，上記の設定で十分かもしれません． そもそも「IEで表示されることは，想定しないので設定しない」といった選択肢もあるため，そういう場合は消してしまってもいいです． ### Viewport ```htmlembedded <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` `name属性"`の`属性値(今回だとviewport)`で，どのメタ情報を設定するのか指定します． > viewportとは、PCやモバイル（スマホ、タブレット）といったデバイスごとにコンテンツの表示領域を設定するためのHTML属性値のことです。 > https://seolaboratory.jp/48581/ それぞれのデバイスで，画面の幅は違います． ![](https://i.imgur.com/dYufm0Z.png) `content属性`の属性値で`width(幅)`を`device-width(デバイスの幅)`にし，`initial-scale(初期サイズ比)`を`1.0`つまり，デバイスの幅にします． 今回の設定は，Googleが推奨している基本の設定です． レスポンシブルなサイトを作成するためには必須な設定です． より詳しく知りたい人は，この記事を読みましょう． [viewportとは？設定方法やスマホで効かない原因など徹底解説！](https://seolaboratory.jp/48581/) ### title要素 ```htmlembedded <title>Document</title> ``` `title要素`はこのサイトのタイトルを記述します． 例えば，Qiitaというエンジニア向け情報共有サイトのホーム画面だと，その値は`Qiita`になっており，タブ部分に表示されます． ![](https://i.imgur.com/occHs5r.png) ![](https://i.imgur.com/xTNqbTu.png) titleタグ内の内容は，自分のサイトにあったもの，そのページあったものに書き換えましょう！ 以上がHTMLのひな型(VSCode)となります！ ## いろんなタグを使ってみよう！ 先ほど作成した，prac.htmlの **`body要素`** に追記しながら，よく使うタグを試していきましょう！ ただし，最初だけは **`head要素`** を書き換えます． この記事では，主に[CodePenというサイト](https://codepen.io/)によるデモを載せています． タグの解説は，お渡ししたスライドに書いています． とにかく手を動かしていきましょう！ ### 紹介するタグ |[title](#titleタグ)|[h1~h6](#h1h6タグ)|[p](#pタグ)|[a](#aタグ)| |:-:|:-:|:-:|:-:| |**[br](#brタグ)**|**[em](#強調・重要要素)**|**[strong](#強調・重要要素)**|**[i](#強調・重要要素)**| |**[b](#強調・重要要素)**|**[ul](#箇条書きリスト)**|**[ol](#箇条書きリスト)**|**[li](#箇条書きリスト)**| |**[dl](#用語説明リスト)**|**[dt](#用語説明リスト)**|**[dd](#用語説明リスト)**|**[img](#imgタグ)**| |**[table](#表テーブルを表す要素)**|**[tr](#表テーブルを表す要素)**|**[th](#表テーブルを表す要素)**|**[td](#表テーブルを表す要素)**| |**[form](#フォームの作成)**|**[input](#フォームの作成)**|**[label](#labelタグ)**|**[select](#選択要素ボタン要素)**| |**[option](#選択要素ボタン要素)**|**[button](#選択要素ボタン要素)**|**[div](#divタグ)**|**[span](#spanタグ)**| ### titleタグ - ページのタイトルを表す - ブラウザのタブ部分に反映 ```htmlembedded <!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> ``` ![](https://i.imgur.com/hd0w80p.png) ### h1~h6タグ - 見出し要素 - h1がトップレベル - 文字を大きくする目的では使わない - ブラウザに「ここが見出しだよ！」と伝えるために使う - 文字を大きくしたいときは`CSS`を使う <iframe height="390" style="width: 100%;" scrolling="no" title="h1_h6" src="https://codepen.io/yosse95ai-the-decoder/embed/NWyyvzw?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/NWyyvzw"> h1_h6</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### pタグ - 段落要素 - タグ内が1つの段落であると解釈 <iframe height="195" style="width: 100%;" scrolling="no" title="p" src="https://codepen.io/yosse95ai-the-decoder/embed/GRQQvXr?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/GRQQvXr"> p</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### aタグ - ハイパーリンクを持たせられる - `href属性`の属性値にURLを持たせる - サーバー内部のHTMLファイルへのリンク - サーバー外部のHTMLファイルへのリンク - `target属性`の属性値を`_brank`と指定すると，別タブで開ける． まずは外部へのリンク方法． <iframe height="330" style="width: 100%;margin-bottom:10px;" scrolling="no" title="a" src="https://codepen.io/yosse95ai-the-decoder/embed/vYddWjP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/vYddWjP"> a</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 次に内部へのリンク方法． prac.htmlと同じディレクトリに，`another.html`みたいに適当なHTMLファイルを作成してください． 別名にした場合は各自で読み替えてください． ファイルの作り方(VSCode)は，[GitHub Pagesの準備](https://hackmd.io/@kit-web-team/github-pre#indexhtml%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90) で説明した通りです． ![](https://i.imgur.com/jQss7qu.png) そしてそれぞれのファイルに，以下のように記述ましょう． ```htmlembedded <!-- 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> ``` ```htmlembedded <!-- 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> ``` 相対パスで内部ファイルまでのリンクを記述します． `./`はなくてもいいのですが，相対リンクを意識するためにあえて書きました． リンクをクリックしてみてください！ ページジャンプできたでしょうか？ |![](https://i.imgur.com/hKMlPJt.png)|![](https://i.imgur.com/zvB7KZH.png)| |-|-| ### brタグ - 改行要素 - HTMLファイル内の改行を入力しても，半角スペース１つになる - <font color="#ff6666">余白などのレイアウト目的で使わないこと</font> - あくまで文章を途中で改行したいとき - レイアウトは`CSS`でやる <iframe height="300" style="width: 100%;" scrolling="no" title="br" src="https://codepen.io/yosse95ai-the-decoder/embed/oNEEeRb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/oNEEeRb"> br</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### 強調・重要要素 - テキスト読み上げ時に，強く読まれる - emタグ - 強調要素 - 斜体になるが，斜体にする目的で使わない - 特別に意味を持たせたいときに使用 - ただ斜体にしたいときは`CSS`を使う - strongタグ - 重要要素 - 太字になるが，太字にする目的で使わない - 特別に意味を持たせたいときに使用 - ただ太字にしたいときは`CSS`を使う それとは別に，読みやすさのために定義されている要素 - iタグ - 慣用的なテキスト要素 - 文字をイタリック体にする - ただ斜体にしたいときは`CSS`を使う - 何らかの理由で他のテキストと区別されるテキストの範囲を表す - 慣用句，技術用語，分類学上の呼称など - bタグ - 注目付け要素 - 文字をボールド体にする - ただ太字にしたいときは`CSS`を使う - CSSの`font-weight`プロパティを使うことが推奨されている - HTMLで極力スタイルは扱わないのが原則 <iframe height="300" style="width: 100%;" scrolling="no" title="em_strong" src="https://codepen.io/yosse95ai-the-decoder/embed/BaYYwgb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/BaYYwgb"> em_strong</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### 箇条書きリスト - ulタグ - 順序<font color="#aaaaff">なし</font>リストを表す - olタグ - 順序<font color="#ffaaaa">あり</font>リストを表す - liタグ - リストの項目を表す - ul，ol要素内にのみマークアップ可能 <iframe height="287" style="width: 100%;margin-bottom:10px;" scrolling="no" title="list" src="https://codepen.io/yosse95ai-the-decoder/embed/MWQQOej?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/MWQQOej"> list</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> これ，一つ一つ`<li></li>`を入力していくのめんどくさいですよね． 3つならまだしも，10や20と増えていったときや，liの中をさらにネストしたいときなど… ここでEmmetの便利機能を紹介！ (※VSCodeじゃないエディタはよくわかりません) エディタ上で，`ul>li*3`と入力していくと，Emmetから以下のような補完が提示される． ![](https://i.imgur.com/9IgTsQV.png) Enterを押すと，簡単に入力の手間を省ける． ![](https://i.imgur.com/ITMllF3.png) 意味としては`ul(の)>(中に)li(を)*3(3つ)`となります． さらに，中に段落要素を書きたいとき，これもコピペや手打ちするのは面倒なので，Emmetでさぼりましょう． かっこの中は一つの塊として認識され，それを ×3 しています． ![](https://i.imgur.com/oFmkAHB.png) さらにさらに，p(段落)だけでなくh2(中見出し)も入れたい場合`+`記号を使います． ![](https://i.imgur.com/AzDDdHk.png) こんなこともできます！ ![](https://i.imgur.com/a8WK6DU.png) 以上便利機能でした． ### 用語説明リスト - dlタグ - 説明リスト - dtタグ - 用語を表す - dl要素内にのみマークアップ可能 - ddタグ - 用語の説明 - dl要素内にのみマークアップ可能 - 自動でインデントが付く - インデントがいらない時やインデントサイズを変えたいときは，`CSS`で指定 <iframe height="307" style="width: 100%;" scrolling="no" title="dl" src="https://codepen.io/yosse95ai-the-decoder/embed/wvyyPpB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/wvyyPpB"> dl</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### imgタグ - 画像要素 - `src属性`の属性値に画像までの`相対パス`を指定 - `alt属性`は`代替えテキスト`を指定 - 画像が取得できなかったとき - 目の見えない人が読み上げを使ったとき - 適切に指定することを心がけること - `width, height属性`は`縦横の長さ`を指定 - 何も指定しなければ画像サイズのまま表示される - 縦横比を維持したい場合は，片方の長さを指定すればいい - 両方指定して，縦横比が違う場合間延びしたようになる prac.htmlと同じディレクトリに`image`というディレクトリを作成してください． その中に，好きな画像をコピーしてください． ない人は以下2枚を**右クリック**でダウンロードしてください． |![](https://i.imgur.com/ivvctxO.png)|![](https://i.imgur.com/uU8aO1k.png)| |:-:|:-:| |936 x 662|616 x 616| こんな感じ． ![](https://i.imgur.com/6J6OHJ8.png) body要素を以下のように書きかえます． ```htmlembedded <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> ``` ![](https://i.imgur.com/ZJcccuB.png) 外部の画像を参照することもできます． (ただし，著作権や商標権には注意すること．) 以下をコピペします． ```htmlembedded <body> <img src="https://i.imgur.com/ivvctxO.png" height="200px" alt="動物が踊っている"> <img src="https://i.imgur.com/uU8aO1k.png" height="200px" alt="フグが水を吐いている"> </body> ``` ![](https://i.imgur.com/6Exang4.png) ### 表(テーブル)を表す要素 - <font color="#ff6666">レイアウトを組む用途で用いないこと！</font> - かつてはtebleでレイアウトを組む時代もあった - レイアウトはCSSの領分！ - 表を作成する用途以外で用いない！ - tableタグ - 表の範囲を示す - `border属性`を指定すると，境界線を表示 - このtableがレイアウト目的でないことをブラウザに対して明示 - trタグ - 表の行を示す - thタグ - 表の見出しセル - tdタグ - セルの内容 以下のコマンドで一気にテーブルを作りましょう！ ```htmlembedded table>(tr>th*2)+(tr>td*2)*3 <!-- 意味： teble(表の構成)は 「th(見出しセル)を２つ持つtr(行)」と 「td(内容セル)を2つもつtr(行)を3つ」 --> ``` 内容は以下の通り． - 言語への愛着を表すテーブル - th - 言語 - 愛着 - td - C/C++|星4つ - Python|星2つ - TypeScript|星3つ <iframe height="500" style="width: 100%;margin-bottom:10px" scrolling="no" title="table" src="https://codepen.io/yosse95ai-the-decoder/embed/mdXXxJz?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/mdXXxJz"> table</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 以下は，<font color="#ff6666">レイアウト目的で使ってしまったダメな例</font> <iframe height="420" style="width: 100%;margin-bottom:10px" scrolling="no" title="table_bad" src="https://codepen.io/yosse95ai-the-decoder/embed/ZErrxLB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/ZErrxLB"> table_bad</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ページのレイアウトは，`CSS`でやります． このテーブルがレイアウト目的でないことを，ブラウザに対して明示する目的で，`border属性`の属性値に`1`や`空の値`を指定しているということが分かってもらえればと思います． ### フォームの作成 - formタグ - フォームの範囲を示す - `action属性`：フォーム内容の送信先URL - `method属性`：フォーム送信時にブラウザが使用するHTTPメソッド - `GET`, `POST`など - inputタグ - 入力欄 - `type属性`：入力欄の種類を指定 - `text`，`password`，`radio`，`checkbox`，`submit`などたくさん種類がある - `name属性`：入力欄の名前，JavaScriptなどで，どの入力欄からの値かを識別するため - `value属性`：入力欄の値・入力欄の初期値 - `placeholder属性`：入力欄のプレースホルダーの値 - `required属性`：入力や選択を必須とするための属性 <iframe height="380" style="width: 100%;" scrolling="no" title="form" src="https://codepen.io/yosse95ai-the-decoder/embed/NWyyMeX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/NWyyMeX"> form</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### labelタグ - フォームのラベルを表す - `for属性`：同値のidを持つフォームと紐づく 先ほどの記述では，「男性」や「HTML」といった文字部分をクリックしても，チェックはできませんでした． よくあるフォームなどでは，文字をクリックすると該当部分にチェックが入ったり，入力欄にフォーカスが行ったりすると思います． <iframe height="380" style="width: 100%;margin-bottom:10px" scrolling="no" title="form_label" src="https://codepen.io/yosse95ai-the-decoder/embed/ExQQRJN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/ExQQRJN"> form_label</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 先ほどと見た目の変化はないものの，文字をクリックするとフォーカスが行ったり，チェックが入ったりするようになったと思います． ### 選択要素・ボタン要素 - selectタグ - 選択要素 - optionタグ - 選択肢 - buttonタグ - `type属性`：ボタンの種類を指定 - `button`，`submit`，`reset` <iframe height="280" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/yosse95ai-the-decoder/embed/qBxxyZp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/qBxxyZp"> Untitled</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### divタグ - div要素 - 「純粋」なコンテナーとして、本質的には何も表さない - class や id を使用してスタイル付けしやすくする - 文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりする - 他に適切な意味的要素がない時にのみ使用 div要素はそれぞれ，デフォルトで縦並びになる． ```htmlembedded <!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> ``` <iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/yosse95ai-the-decoder/embed/RwQyzrL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/RwQyzrL"> Untitled</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### spanタグ - span要素 - 記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではない - class や id を使用してスタイル付けしやすくする - 文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりする - 他に適切な意味的要素がない時にのみ使用 div要素とは違い，span要素はデフォルトで横並びになる． <iframe height="300" style="width: 100%;" scrolling="no" title="sapn" src="https://codepen.io/yosse95ai-the-decoder/embed/abqGgqB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/abqGgqB"> sapn</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## 次のステップ HTML講座はここで終了です！ ここまでで，HTML の基本的なことをお伝え出来たかと思います！ 次はCSS講座に進みましょう！ ## 参考 ### テキスト - [viewportとは？設定方法やスマホで効かない原因など徹底解説！](viewportとは？設定方法やスマホで効かない原因など徹底解説！) - [HTML を始めよう](https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started) - [\<div>: コンテンツ区分要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/div) - [\<span>](https://developer.mozilla.org/ja/docs/Web/HTML/Element/span) - [\<input>: 入力欄 (フォーム入力) 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/span) ### 動画 - [本気で学ぶ！HTML入門講座](https://www.youtube.com/playlist?list=PLxmhLTDswFUwaX8i9hAf1Pspo--GswmD1) ### 本 - 応用情報技術者 - きたみりゅうじ[著], p.549-p.550