今回はHtml/CSSの初級編。
よく使うhtmlタグをJupyterNotebookを使って表示させ、使い方を学びます。

過去にPythonのWebフレームワークFlaskやbottleでWebアプリをいくつか作りましたが、書くコードの量はPythonよりHtml/CSSの方が多く、その知識も要求されます。html/Cssの学習しておりませんでしたので少しずつ覚えていこうと思います。

実行環境

Windows10
Anaconda 4.11.0
Python3.9.7
VSCode 1.63.2
Jupyter Notebook 6.4.5

※ この投稿はJupyter Notebookで書いております。

# ヴァージョン確認
!conda -V             # Anacondaのヴァージョン
!python -V            # Pythonのヴァージョン
!code --version       # VSCodeのヴァージョン
!jupyter-notebook -V  # Jupyter Notebookのヴァージョン

conda 4.11.0
Python 3.9.7
1.63.2
899d46d82c4c95423fb7e10e68eba52050e30ba3
x64
6.4.5

htmlタグの基本的な使い方

htmlファイルは拡張子「.html」のついたファイルです。メモ帳などでも作ることが出来ます。
htmlファイルをブラウザで開くと、htmlコードで書いた通りに表示されます。

htmlコードはtag（タグ） と呼ばれるもので各命令を表現してあり、主に、

<開始タグ>内容</終了タグ>

という風に、タグで前後に挟んで使います。終了タグの中には/が入っています。
改行タグ<br>やメタタグ<meta>など終了タグがないものもあります。

例)

<!DOCTYPE html>
<html lang="ja">
<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コードはVSCode上のhtmlファイルで 「!」+ tabキー を押すと自動でemmetが表示したコードです。
<head>と</head>のようにペアになっているものがいくつかあります。最初の方を開始タグ、後の方を終了タグといいます。セットになっている。

開始と終了のタグがペアになっているものは、

<html>タグ： 2行目と最終行
<head>タグ : 3行目と8行目
<title>タグ：共に7行目
<body>タグ： 9行目と11行目

で、終了タグがないものが

<!DOCTYPE html> ： 1行目
<meta>タグ： 4～6行目

タグによって開始と終了のタグがペアになっているものと、終了タグがないものとに分かれます。使っているうちに覚えると思うので素通りします。

コンテンツの中身については<body>タグの中に書き、その部分がページに表示されます。
bodyタグに入ったところ以外の部分はページに表示されない部分です。ブラウザに「この文章は文字コードuft-8のhtmlコードで書かれていますよ」とか「ページタイトルはコレコレで表示してね」とか伝えている。

htmlタグの一覧などを見てしまうと大量に列挙されており恨めしく思いますがw、よく使うタグはそれほど多くないようです。
幾つかピックアップして一つずつ見ていきます。

インデント（字下げ）

Pythonコードはインデントに五月蠅く、スペースが余分に入ってたり抜けてたりすると実行時にエラーが出ます。
一方、htmlやCSS、JavaScriptではインデントを正しく入れないと実行エラーがでるようなことは無いが、統一感がないと読みにくいので、ある程度のスタイルの決まりがあるようです。詳しいことは省略します。
そこまで神経質になる必要はないということで。tabキーを押せばどうにかなる。知らんけど。

よく使うタグX選

一般的によく使われるhtmlタグは10～20個ほどでしょうか。適当に書き出します。
なお、以下のhtmlの表示は、JupyterNotebookのセルにhtmlコードを書いて実行したものです。

Webページに表示されない部分

先にも書きましたが、htmlタグの中には、ページに表示されないが書く必要のある部分と、表示するために書く部分があります。
まずは表示されない部分のタグを見ていきます。

htmlコードのコメントアウト ``

Pythonコードでコメントアウトする場合、1行コメントアウトは行頭に「#」、複数行では前後を「"""」で囲むと出来ます。
htmlコードの場合は、1行だけも複数行も同じで、コメントをで挟む。

<!-- 1行コメント -->

<!-- 
複数行の
コメント
です
-->

<!--あ
い
うえ
お-->

JupyterNotebookのmarkdownセルに上のhtmlコードを書いて実行してみます。
↓ コメントアウトなので何も表示されないはずですが

↑ 何も表示されていませんが、ちゃんと上のコメントアウトの文を数行書きました。本当です。

コメントアウトの注意点として、

コメントアウトを入れ子にしない：コメントtag自体をコメントアウトできない
コメントの内容に-を使用しない

コメント内に「-」を使うと終了タグとして扱われることがある等の理由から、上の2つは避けるが吉と。

CSSのコメントアウト

CSSは「スタイルシート」とも呼ばれ、文字の大きさや色などの装飾、様々な具材のレイアウトなどの仕方に指示を出すものです。
直接htmlファイルの中に書いたり、または拡張子「.css」で別ファイルにまとめたりして使います。

CSSファイルでのコメントアウトは、1行だけも複数行も共に/*と*/で挟みます。

/* 1行コメント */

/* 
複数行の
コメント
ですよ
*/

JavaScriptのコメントアウト

JavaScriptはCSSファイルと同様に、htmlファイル内に書いたり、または拡張子「.js」で別ファイルに保存したりして使います。
jsファイルでは、1行だけだと行頭に「//」をつけ、複数行の場合はCSSと同じく/*と*/で挟みます。

// 1行コメント

/* 複
数
行の
コメ
ント
*/

`<!DOCTYPE html>`

htmlファイルの一番先頭行に書かれ、「この文書はhtmlで書かれたもの」だと宣言するもの。

htmlタグ `<html></html>`

htmlファイルの先頭行に書いた<!DOCTYPE html>の次の行に開始タグ<html>を、終了タグ</html>はファイルの最終行に書きます。
「開始タグと終了タグの間に書かれた文字列はhtmlで書かれています」と伝えるタグ。
日本語で書かれたいろんなサイトのhtmlを見ると、開始タグは<html lang="ja">と書いてある。英語のサイトならlang="en"となっているだろう。

開始タグの中にタグ名（この場合html）以外の何か（この場合lang="ja"）が書いてある部分を「属性」という。属性についてはのちほど。

headタグ `<head></head>`

このタグで囲まれた部分に、文書全体の基本的な情報（ヘッダ情報）を定義する。この中に<meta>タグ、<title>タグ、<link>タグが入ります。

metaタグ `<meta>`

metaタグは終了タグがありません。書くとエラーになる。
<head>タグの中に書きます。
Webページのメタ情報を書く部分で、文字コードの指定や、検索エンジン用のキーワードを書き込む。

多くのページでは<meta charset="UTF-8">と書いてある。

titleタグ `<title></title>`

ブラウザのタブや、リンクを貼り付けたときや、ブックマークすると表示されるページのタイトルを書く部分。

linkタグ `<link>`

linkタグは終了タグがありません。書くとエラーになる。
別ファイルにCSSなどを書いた場合の参照先を書く部分。

いろんなサイトのhtmlを見ると、<link rel="stylesheet" href="style.css" type="text/css">などが幾つも書いてある。

以上が、ページに表示されない部分でよく使うタグでした。

Webページに表示される部分

これ以降は、ページに表示する時によく使うタグを見ていきます。

bodyタグ `<body></body>`

コンテンツを書き込む部分。この中身がページに表示されます。
このタグ以降で紹介するタグは全てこの<body>タグの中に書きます。

「顔はやばいよ、ボディにしな！」

FlaskでWebアプリを作るときは、<body>タグより前の「ページに表示されない部分」は大体どのページでも共通しているので「base.html」ファイルに書いて、その他の「index.html」などのファイルにはjinja2のテンプレート機能を使って{% extends 'base.html' %}から書き始めて「base.html」を継承させたりします。
<body>タグの部分だけ書けば済むので記述を減らせる。

headerタグ `<header></header>`

上で紹介した<head>タグとは別物です。
<body>タグの中に書きます。
html5から採用されたもので、Webサイトの中にはページの一番上に「目次」や「連絡先」などが貼ってあるものがあります。

はてなブログでもダッシュボードの設定から「ヘッダー」や「フッター」をイジれるようになっていますけど、その「ヘッダー」部分。

footerタグ `<footer></footer>`

<body>タグの中に書きます。
これも上の「ヘッダー」同様、html5から採用されたもので、Webページの一番下に「著作権」「お問い合わせ先」などが貼ってある所がその部分。

hタグ（見出し） `<h1></h1>`～`<h6></h6>`

markdownの見出しの書き方を先に見ます。見出しを作るときは行頭に「#」を付ければ良かった。その個数で見出しの大きさが変わります。

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

※ 見出し7以降はありません（見出しとして表示されない）

htmlの見出しの書き方もタグで書く以外はmarkdownと同じもので、<h1>見出し1</h1>～<h6>見出し6</h6>を使います。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

markdownセルでの実行は、この投稿記事の目次に反映されてしまうために省略。

pタグ（パラグラフ） `<p></p>`

<p>タグで囲んだ部分が1つの段落（パラグラフ）になります。文章の最後に自動で改行が入ります。
同じ文章を3パターン用意しました。違いを見てみます。

<!-- 元の文 -->
<p>昔々あるところに、おじいさんとおばあさんが住んでいました。ある日おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。</p>

<!-- パラグラフを別けた文 -->
<p>昔々あるところに、おじいさんとおばあさんが住んでいました。</p><p>ある日おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。</p>

<!-- 1パラグラフを改行させた文 -->
<p>昔々あるところに、おじいさんとおばあさんが住んでいました。<br>ある日おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。</p>

同じ文章ですが、下の文章は途中にタグを入れてパラグラフを分けています。

markdownセルで実行してみます。

昔々あるところに、おじいさんとおばあさんが住んでいました。ある日おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。

昔々あるところに、おじいさんとおばあさんが住んでいました。

ある日おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。

昔々あるところに、おじいさんとおばあさんが住んでいました。
ある日おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。

brタグ（改行）`<br>`

これは終了タグがありません。
上のpタグの文章中の3つ目で使っていますが、改行したい所にこのタグを書きます。
パラグラフを別けた場合と改行を入れた場合とでは、表示が異なっているのがわかります。

spanタブ（文字の装飾） `<span></span>`

文字列に色や大きさ、背景色など装飾を施したい場合に使います。<span>タグで囲った部分に対してCSSで装飾をあてる。
fontタグはhtml5から廃止されたそうなので、これを使います。

タグの属性で直接スタイルを書くと、

<!-- 「おじいさん」の背景色を黄色に変える -->
<p>昔々あるところに、<span style="background-color:yellow;">おじいさん</span>とおばあさんが住んでいました。</p>

markdownセルに書いて実行

昔々あるところに、おじいさんとおばあさんが住んでいました。

aタグ（リンク）`<a></a>`

これはブログを書いたりするときにしばしば使う。

はてなの公式ページをリンク貼り付け

<a href="https://www.hatena.ne.jp/">はてな公式</a>

開始タグの属性hrefでリンク先のURLを指定し、タグで囲んだ部分に表示したい文字列を書きます。

markdownセルに書いて実行

はてな公式

imgタグ `<img>`

終了タグはありません。

Pythonのロゴマーク画像を貼ってみる

<img src="https://www.python.jp/pages/python_logo2.png" alt="Python公式ページのロゴマーク">

src属性でパスを指定します。ローカルのファイルなどでも<img src="./picture1.jpg" alt="">のようにできます。
alt属性はブラウザの読み上げ機能が読み上げる文字を書くところだそうです。

markdownセルに書いて実行

Pythonのロゴマーク

サイズが大きいですね。変えたい場合はCSSで変更します。

ulタグとliタグ（箇条書きリスト）`<ul><li></li><ul>`

ul（ユー・エル）タグはUnorderd Listの略で、li（エル・アイ）はList Itemの略だそうです。
番号のついてない箇条書き。

markdownだと次のように書ける箇条書き

- 箇条書き1
- 箇条書き2
- 箇条書き3

markdownセルに書いて実行すると
↓
箇条書き1
箇条書き2
箇条書き3

のように表示されます。

これをhtmlで書くと次のようになります。

<ul>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
    <li>箇条書き3</li>
</ul>

markdownセルにhtmlで書いて実行

箇条書き1
箇条書き2
箇条書き3

olタグとliタグ（番号付き箇条書き）`<ol><li></li></ol>`

こちらは番号付きの箇条書きです。olタグはOrderd Listの略。

markdownだと次のように書けるもの。

1. 箇条書き1
1. 箇条書き2
1. 箇条書き3

これをmarkdownセルで実行する

先頭の「1. 」は自動で番号が割り振られて置き換わります。

箇条書き1
箇条書き2
箇条書き3

上をhtmlで書くと

<ol>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
    <li>箇条書き3</li>
</ol>

htmlをmarkdownセルで実行

箇条書き1
箇条書き2
箇条書き3

先頭を数字以外のものに置き換えることもできる。
開始タグのtype属性で指定する。（↑の数字表記はtype="1"の属性の省略形）

<!-- 小文字アルファベットで表示 -->
<ol type="a">
    <li>箇条書き1</li>
    <li>箇条書き2</li>
    <li>箇条書き3</li>
</ol>

<!-- 大文字アルファベットで表示 -->
<ol type="A">
    <li>箇条書き1</li>
    <li>箇条書き2</li>
    <li>箇条書き3</li>
</ol>

<!-- ローマ数字 ⅰ, ⅱ, ⅲ… で表示 -->
<ol type="i">
    <li>箇条書き1</li>
    <li>箇条書き2</li>
    <li>箇条書き3</li>
</ol>

<!-- ローマ数字 Ⅰ, Ⅱ, Ⅲ… で表示 -->
<ol type="I">
    <li>箇条書き1</li>
    <li>箇条書き2</li>
    <li>箇条書き3</li>
</ol>

表示は省略します。

tableタグ（表） `<table></table>`と`<tr></tr>`と`<td></td>`と`<th></th>`

markdownでテーブルを書くと次のように書けます。

|番号|姓|名|
|:--|:--|:--|
|1|鈴木|一郎|
|2|冠|二郎|
|3|城山|三郎|

markdownで実行

番号	姓	名
1	鈴木	一郎
2	冠	二郎
3	城山	三郎

↑のをhtmlで書くと次のようになる

<table border="1">
    <tr>
        <th>番号</th>
        <th>姓</th>
        <th>名</th>
    </tr>
    <tr>
        <th>1</th>
        <th>鈴木</th>
        <th>一郎</th>
    </tr>
    <tr>
        <th>2</th>
        <th>冠</th>
        <th>二郎</th>
    </tr>
    <tr>
        <th>3</th>
        <th>城山</th>
        <th>三郎</th>
    </tr>
</table>

htmlをmarkdownセルで実行

番号	姓	名
1	鈴木	一郎
2	冠	二郎
3	城山	三郎

<table>タグの開始タグにborderという属性を書いています。枠線の太さが変わります。border="0"だと枠無し。border="1"で2重枠線。
その他の属性でstyle="なんとか"を指定すれば色などの変更もできます。
ちなみにJupyterNotebookではborder属性を指定しても枠線の太さが変わりませんでした。設定をイジる必要があるようです。

テーブルのmarkdown表記では見た目通りなので分かりやすいのに対して、
htmlのテーブルは

<table> : 表全体を挟む
- <tr> : table row。行ごとをタグで挟む
  - <th> : table header。テーブルのヘッダー行（カラム名の行）をタグで挟む
  - <td> : table data。テーブルのデータを行ごとにタグで挟む

という風に入れ子で書くうえ、表の完成図と見た目が違うので分かりにくいですね。
次のように書けば、なんとか分かるかなと・・・

<table border="1">
    <tr>
        <th>番号</th><th>姓</th><th>名</th>
    </tr>
    <tr>
        <th>1</th><th>鈴木</th><th>一郎</th>
    </tr>
    <tr>
        <th>2</th><th>冠</th><th>二郎</th>
    </tr>
    <tr>
        <th>3</th><th>城山</th><th>三郎</th>
    </tr>
</table>

いずれにしても文字数多いし面倒ですね。

Pandasで同じ表を作ってみます

import pandas as pd

df = pd.DataFrame(
    data = [[1, '鈴木', '一郎'],
            [2, '冠', '二郎'],
            [3, '城山', '三郎']
           ],
    columns = ['番号', '姓', '名']
)

# インデックス列を置き換える
df.set_index('番号', inplace=True)

# テーブル表示
df

	姓	名
番号
1	鈴木	一郎
2	冠	二郎
3	城山	三郎

## テーブルをhtmlコードで取得
print(df.to_html())

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>姓</th>
      <th>名</th>
    </tr>
    <tr>
      <th>番号</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>鈴木</td>
      <td>一郎</td>
    </tr>
    <tr>
      <th>2</th>
      <td>冠</td>
      <td>二郎</td>
    </tr>
    <tr>
      <th>3</th>
      <td>城山</td>
      <td>三郎</td>
    </tr>
  </tbody>
</table>

表記が少し違いますね。

divタグ（ブロック） `<div></div>`

<div>タグによって挟まれた部分はブロック要素としてひと塊になります。
ひとかたまりにしてCSSで高さや幅を調節したり、ブロックを横に並べるなどレイアウトを自在に変更できるようになる。
表示は省略。

blockquoteタグ（引用）`<blockquote></blockquote>`

このタグで挟まれた部分は引用として表示される。markdownで書くと>です。

>引用しました

引用しました

↑のをhtmlで書くと

<blockquote>
    引用しました
</blockquote>

引用しました

rubyタグ（ルビを振る）`<ruby><rt></rt></ruby>`

漢字の読み仮名の上にルビをつけたい場合に使います。<rt>タグに挟んだ部分がルビになります。

<ruby>
Python入門
    <rt>
        ぱいそんにゅうもん
    </rt>
</ruby>

markdownセルだと上手く表示されませんでしたので、Pythonセルにhtmlを書いて実行します。

%%html

<ruby>
Python入門
    <rt>
        ぱいそんにゅうもん
    </rt>
</ruby>

Python入門ぱいそんにゅうもん

strongタグ（太字）`<strong></strong>`

markdownなら**太字**と書けば太字になる。htmlで書くと

<strong>太字</strong>

太字

iタグ（イタリック体、斜め文字）`<i>イタリック体</i>`

markdownなら*イタリック体*と書く。htmlなら

<i>イタリック体</i>

イタリック体

%%html

<i>イタリック体</i>

イタリック体

※ JupyterNotebookでは斜めに表示されませんでした。

scriptタグ（JavaScript）`<script></script>`

JavaScriptファイルを呼び出すときに<head>タグや<body>タグの中に書く。

<script src="script.js"></script>

実行省略。

文字などを表示させ単独で機能する系のよく使うタグは大体このぐらいのようです。

CGIとやり取りする時に使うタグ

ここからは、入力欄を設置したり、送信ボタンを押してCGIとやり取りすることで機能する系のタグをいくつか見ていきます。
設置しただけでは動きません。

formタグ `<form></form>`

<form>タグは、次に見ていく<input>タグ、<select>タグ、<textarea>タグ、<label>タグなどを挟んで使います。

inputタグ（テキストボックス属性）`<input type="text" />`

<input>タグは終了タグはありません。
終了タグの無いタグはタグを閉じる>前に/をつける決まりがあるようです。しかし無くても動く。

1行の入力欄を設置します。

<form>
    <input type="text" value="デフォルト表示文字列" />
</form>

%%html

<form>
    <input type="text" placeholder="お名前" />
</form>

%%html

# または
<form>
    <input type="text" value="お名前" />
</form>

または

<input>タグのplaceholder属性か、value属性かで、入力欄に表示される初期値の質が変わるね。

inputタグ（チェックボックス属性）`<input type="checkbox" />表示文字列`

<input>タグは終了タグはありません。
選択肢から複数を選べるチェックボックスを設置します。

<form>
    <input type="checkbox" />卵
    <input type="checkbox" />牛乳
    <input type="checkbox" />みかん
    <input type="checkbox" />海苔
</form>

%%html

<form>
    <input type="checkbox" />卵
    <input type="checkbox" />牛乳
    <input type="checkbox" />みかん
    <input type="checkbox" />海苔
</form>

inputタグ（ラジオボタン属性）`<input type="radio" name="グループ" value="値" />表示文字列`

<input>タグは終了タグはありません。
選択肢から1つだけを選べるラジオボタンを設置します。

複数のラジオボタンを設置する場合、

name属性 ：同じものに指定することでグループ化して、その中から1つだけを選択できるようになります。
value属性 : それぞれ異なる値にすることで、選択されたその値をCGIに送信します。

<form>
    <input type="radio" name="item1" value="0" />卵
    <input type="radio" name="item1" value="1"/>牛乳
    <input type="radio" name="item1" value="2"/>みかん
    <input type="radio" name="item1" value="3"/>海苔
</form>

%%html

<form>
    <input type="radio" name="item1" value="0"/>卵
    <input type="radio" name="item1" value="1"/>牛乳
    <input type="radio" name="item1" value="2"/>みかん
    <input type="radio" name="item1" value="3"/>海苔
</form>

selectタグとoptionタグ（ドロップダウンメニュー）`<select><option></option></select>`

<select>タグでドロップダウンメニューを設置できます。メニューで選択できる各要素は<option>タグに書きます。

<form>
    <select>
        <option value="0">徒歩</option>
        <option value="1">自転車</option>
        <option value="2">バイク・車</option>
        <option value="3">船</option>
        <option value="4">飛行機</option>
    </select>
</form>

%%html

<form>
    <select>
        <option value="0">徒歩</option>
        <option value="1">自転車</option>
        <option value="2">バイク・車</option>
        <option value="3">船</option>
        <option value="4">飛行機</option>
    </select>
</form>

<option>タグの開始タグにvalue属性を書き、選択されたときに送信する値を設定します。
また、<option>タグに挟まれた部分に、選択肢で表示する文字列を書きます。

textareaタグ（複数行の記入欄）`<textarea></textarea>`

複数行の記入欄を設置できます。

<form>
    <textarea placeholder="デフォルト表示文字列"></textarea>
</form>

%%html

<form>
    <textarea placeholder="苦情やお気づきの点などをお書きください。"></textarea>
</form>

labelタグ（構成部品と関連付け）`<label></label>`

ラジオボタンとチェックボックスなどは要素が小さくてクリックしづらい為、ラベル（チェック内容を示す文字）をクリックしても選択できるようにしておくほうが使い勝手がよくなります。そんなときに<input>タグを<label>タグで囲むことでフォームの要素とそれらの項目名とを関連付けさせられます。

%%html

<form>
    <!-- textボックスにlabelを関連付ける -->
    <div>
        <label>
            ニックネーム
            <input type="text">
        </label>
    </div>

    
    <!-- チェックボックスにラベルを関連付ける -->
    
    <div>
        <label for="prog0">C</label>
        <input type="checkbox" id="prog0" value="C"/>
    </div>
    
    <div>
        <label for="prpg1">C++</label>
        <input type="checkbox" id="prog1" value="C++" />
    </div>
    
    <div>
        <label for="prpg2">Java</label>
        <input type="checkbox" id="prog2" value="Java" />
    </div>
    
    <div>
        <input type="checkbox" id="prog3" value="Python"/>
        <label for="prpg3">Python</label>
    </div>
    <div>
        <input type="checkbox" id="prog4" value="JavaScript />
        <label for="prpg4">JavaScript</label>
    </div>
    <div>
        <input type="checkbox" id="prog5" value="HtmlCSS />
        <label for="prpg5">HtmlCSS</label>
    </div>
    
    <div>
        <input type="checkbox" id="prog6" value="ExcelVBA" />
        <label for="prpg6">ExcelVBA</label>
    </div>
</form>

ニックネーム

<!-- チェックボックスにラベルを関連付ける -->

<div>
    <label for="prog0">C</label>
    <input type="checkbox" id="prog0" value="C"/>
</div>

<div>
    <label for="prpg1">C++</label>
    <input type="checkbox" id="prog1" value="C++" />
</div>

<div>
    <label for="prpg2">Java</label>
    <input type="checkbox" id="prog2" value="Java" />
</div>

<div>
    <input type="checkbox" id="prog3" value="Python"/>
    <label for="prpg3">Python</label>
</div>
<div>
    <input type="checkbox" id="prog4" value="JavaScript />
    <label for="prpg4">JavaScript</label>
</div>
<div>
    <input type="checkbox" id="prog5" value="HtmlCSS />
    <label for="prpg5">HtmlCSS</label>
</div>

<div>
    <input type="checkbox" id="prog6" value="ExcelVBA" />
    <label for="prpg6">ExcelVBA</label>
</div>

文字の部分をクリックしても入力欄やチェックボックスに印が入る。Jupyterではなんか動かない…

inputタグ（送信ボタンの設置）`<input type="submit" />`

<input>タグのtype属性でsubmitを設定することにより送信ボタンが設置できる。

※ 送信ボタンは<form>タグ内の要素を送信します。1ページに何個も送信ボタンをつける必要があるなら、それぞれのボタンごとに<form>タグで囲みます。

<form>
    <input type="submit" value="完了" />
</form>

%%html

<form>
    <input type="submit" value="完了"/>
</form>

inputタグ（入力のリセットボタンの設置）`<input type="reset" />`

入力欄に記入した内容をリセットするボタンの設置が出来る。

↓の入力欄に何か文字を入力したあとボタンを押すと、入力がリセットされます。

%%html

<form>
    <input type="text" placeholder="初期値" />
    <input type="reset" value="入力内容をリセットする" />
</form>

その他

htmlタグ以外のことについてチラッと。

属性

開始タグの中に文字が書いてある場合があります。リンクタグ<a>の場合はhref="https://なんとか"、<input>タグならtypeやnameやidやvalueなどと書いてある。
タグ名の右側に書いてあるものが属性というもので、「href」や「type」などを属性名といい、属性名の右に「="なんとか"」で代入してある値のことを属性値という。
表示内容や設置物、送信する値やCSSでスタイルを変える印など、属性名と属性値によって機能が異なります。

CSSとJavaScript

CSSは装飾やスタイルを変えるためのもので、JavaScriptは動き関連。
これらは<style>タグや<script>タグをhtmlファイル内に書くことができます。CSSはタグ内にstyle属性を追加して書くこともできる。

しかし、「.css」「.js」拡張子の別ファイルを用意してhtmlと切り離すのが一般的のようです。機能が違うので別けてたほうが読みやすいとかメンテナンスしやすいとか楽だとかの理由。

おわりに

ざっと流してきましたが、よく使うタグはこんなところでしょうか。CSSもJavaScriptもやるとなると覚えられる気がしません。SQLも覚えろとなればWebアプリを作る気が失せてしまうｗ
だが、諦めるしかない！実際にWebアプリを作って徐々に覚えていくのが良いですかね。ポンコツWebアプリを作り散らかしてればその内覚えるだろう。習うより慣れろ、です。

以上 (≧◇≦)

目次

実行環境

htmlタグの基本的な使い方

インデント（字下げ）

よく使うタグX選

Webページに表示されない部分

htmlコードのコメントアウト

CSSのコメントアウト

JavaScriptのコメントアウト

<!DOCTYPE html>

htmlタグ <html></html>

headタグ <head></head>

metaタグ <meta>

titleタグ <title></title>

linkタグ <link>

Webページに表示される部分

bodyタグ <body></body>

headerタグ <header></header>

footerタグ <footer></footer>

hタグ （見出し） <h1></h1>～<h6></h6>

pタグ （パラグラフ） <p></p>

brタグ （改行）<br>

spanタブ （文字の装飾） <span></span>

aタグ （リンク）<a></a>

imgタグ <img>

ulタグとliタグ （箇条書きリスト）<ul><li></li><ul>

olタグとliタグ （番号付き箇条書き）<ol><li></li></ol>

tableタグ （表） <table></table>と<tr></tr>と<td></td>と<th></th>

divタグ （ブロック） <div></div>

blockquoteタグ （引用）<blockquote></blockquote>

rubyタグ （ルビを振る）<ruby><rt></rt></ruby>

strongタグ（太字）<strong></strong>

iタグ（イタリック体、斜め文字）<i>イタリック体</i>

scriptタグ（JavaScript）<script></script>