区切り線
<hr> : horizontal rule
リスト
<ul> : unordered list
<ol> : ordered list
- 朝ご飯候補
- パン
- ご飯
- 惣菜ランキング
- 唐揚げ
- ハンバーグ
- とんかつ
<li>朝ご飯候補</li>
<ul>
<li>パン</li>
<li>ご飯</li>
</ul>
<li>惣菜ランキング</li>
<ol>
<li>唐揚げ</li>
<li>ハンバーグ</li>
<li>とんかつ</li>
</ol>
</ul>
説明リスト
<dl> : description list 最初と最後
<dt> : description term 名目
<dd> : description definition 説明
- HTML
- マークアップ言語であって、プログラミング言語ではない。
- CSS
- Webページのスタイルを指定すること"も"できる byペンギン愛好家先輩
<dl>
- <dt>HTML</dt>
- <dd>マークアップ言語であって、プログラミング言語ではない。</dd>
- <dt>CSS</dt>
- <dd>Webページのスタイルを指定すること"も"できる byペンギン愛好家先輩</dd>
</dl>
画像の表示
<img src= "path or url" alt= "画像の説明">
<img src="firefox.jpg" alt="firefox" width="400" height="266">
ハイパーリンク
<a> : anchor
※href = hypertext
reference
<a href="path or url">テキスト</a>
ヒグチ技研<a href="https://higuchi-learn.github.io/higuchi-site/index.html">ヒグチ技研</a>
強調
<strong>このタグを太字にする目的で使うな
このタグを<strong>太字</strong>にする目的で使うな
グループ化
文の一部にだけスタイル
ここだけ色を変えたい<span>ここだけ</span>色を変えたい
※<head>内にて、<style> span { color: orange; } </style>
テーブル
<table>
<caption> : テーブルのタイトル
<th> : table header
<tr> : table row
<td> : table data cell
- スタイルを当てやすくするためにグループ化
<thead> : 一行目
<tbody> : 間
<tfoot> : 最終行
| １列目 | ２列目 | ３列目 |
|---|---|---|
| 00 | 01 | 02 |
| 10 | 11 | 12 |
テーブルの結合
<th colspan="int"> : 列の結合(横に長く)
<td colspan="int"> : 列の結合(横に長く)
<td rowspan="int"> : 行の結合
| X | 結合 | |||
|---|---|---|---|---|
| 結合 | １列目 | ２列目 | ３列目 | |
| A | B | |||
| 00 | 01 | |||
| 10 | 11 | 12 | ||
フォーム
<form action="データの送信先(ダミーは#)" method="post">
<input
type="text,password"
name="受信側が判別するための名前(今後、固有のkeyと表記)"
placeholder="入力欄にあらかじめ表示させる文字">
<input
type="radio"
name="ラジオボタン固有のkey"
value="選択肢固有のkey"
checked
←最初から選択させておきたい選択肢がある場合に使用
>選択肢
<input type="checkbox" name="固有のkey" value="1">
<input type="submit" value="ボタン内に表示する文字">
<label for="リンクさせたい要素と同じid">
※書いていないがそれぞれのタグの前に記述して、各タブにidを設定している。
こうすると、文字をクリックしても回答欄をクリックしたことと同じになる。
<form action="#" method="post">
<input type="text" name="username"
placeholder="ユーザー名を設定">
<input type="password" name="password"
placeholder="パスワードを設定">
<input type="radio" name="gender" value="boy" checked>男性
<input type="radio" name="gender" value="girl">女性
<input type="radio" name="gender"
value="another">回答したくない
<input type="submit" value="登録">
</form>
フォームその２（制限をかける）
<form 省略>
<input 省略
required ←入力必須
minlength ←文字数制限
>
他にも色々ある
※セキュリティ対策として使うのは一切意味がない
プルダウンリスト
<select name="受信側が判別するための名前">
<option value="" selected>未選択</option>←最初に必ず
<option value="固有のkey"> 選択肢１</option>
<option value="固有のkey"> 選択肢２</option>
</select>
<select name="area">
<option value="">選択してください</option>
<option value="aiti">愛知県</option>
<option value="gifu">岐阜県</option>
<option value="mie">三重県</option>
</select>
テキストエリア
<textarea name="固有のkey"> </textarea>
<textarea name="contents"> </textarea>
CSS基本へ進む