【HTML】Buttonタグとinputタグのbuttonの違い
続きを読むdev(devision)要素について
dev要素は、複数のブロックに対して、レイアウトを適応させることができる\<dev\>\</dev\>で囲んだブロック全体にレイアウトが適応させる- 基本的な概念は内部CSSの
classやidと同じ
1 | |
alineとは
iframe(インラインフレーム)に並ぶテキスト位置を指定できるiframe(インラインフレーム)をフロートさせられる- フロート : 左右どちらかに寄せて、後続のテキストを回り込ませる
指定可能文字列
- left : 左に配置して、後続の内容を右側に回り込ませる
- right: 右に配置して、後続の内容を左側に回り込ませる
1
<iframe width="560" height="315" src="https://www.youtube.com/embed/DrDm7uO4Fu0" align ="right"></iframe>
ページ上に複数のページから読み込んだページを表示する
iframeタグを使用する
- iframe = Inline Frame(行内フレーム)
1
<iframe src="table.html"></iframe>
Youtubeの動画を埋め込む
- youtubeで埋め込みたい動画を選択
- 動画の再生画面から、
埋め込みコードを取得 埋め込みコードはiframeで記述してあるので、そのままコピペする
取得した埋め込みコード例1
<iframe width="560" height="315" src="https://www.youtube.com/embed/y4noU6qgJlc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
参考
form(入力・送信フォーム)タグ
- どこに、どうやって送信するかを記述するタグ
- このタグセクションの中には、何を送信するかを示す
1 | |
input(入力)タグ
- formタグの「何を」送信するかを記述するためのタグ
- formタグで囲む必要があるのは、入力した値を送信したい場合
- 必ずformタグに記述する必要はない
type属性を指定することで、入力インターフェイスを変更できる
type属性の種類
- type=”hidden”
- 画面上は表示されない隠しデータを指定する
- type=”text”
- 一行テキストボックスを作成する（初期値）
- type=”search”
- 検索テキストの入力欄を作成するHTML5から追加
- type=”tel”
- 電話番号の入力欄を作成するHTML5から追加
- type=”url”
- URLの入力欄を作成するHTML5から追加
- type=”email”
- メールアドレスの入力欄を作成するHTML5から追加
- type=”password”
- パスワード入力欄を作成する
- type=”datetime”
- UTC（協定世界時）による日時の入力欄を作成するHTML5から追加
- type=”date”
- 日付の入力欄を作成するHTML5から追加
- type=”month”
- 月の入力欄を作成するHTML5から追加
- type=”week”
- 週の入力欄を作成するHTML5から追加
- type=”time”
- 時間の入力欄を作成するHTML5から追加
- type=”datetime-local”
- UTC（協定世界時）によらないローカル日時の入力欄を作成するHTML5から追加
- type=”number”
- 数値の入力欄を作成するHTML5から追加
- type=”range”
- レンジの入力欄を作成するHTML5から追加
- type=”color”
- 色の入力欄を作成するHTML5から追加
- type=”checkbox”
- チェックボックスを作成する
- type=”radio”
- ラジオボタンを作成する
- type=”file”
- サーバーへファイルを送信する
- type=”submit”
- 送信ボタンを作成する
- type=”image”
- 画像ボタンを作成する
- type=”reset”
- リセットボタンを作成する
- type=”button”
- 汎用ボタンを作成する
1 | |
ボタンにアクションを設定する
action属性を設定することで、ボタンを押した時の挙動を指定できる
この例の場合、ボタンを押すとactionで指定しているURLを開く1
2
3<form action="http://www.google.co.jp">
<input type="submit">
</form>
テキストをデフォルトで設定しておく
- 入力された状態でデフォルト設定
valueタグを使用する1
<input type="text" value="デフォルト">
- ガイドラインとして表示する
placeholderタグを使用する1
<input type="text" placeholder="デフォルト">
チェックボックスをデフォルトでチェックした状態にする
checked属性を使う1
<input type="checkbox" checked>
ボタンの表示名を変える
value属性を設定する
1 | |
複数のラジオボタンの連携
name属性をつけることで、グルーピングができる
1 | |
ラジオボタンをデフォルトでチェックした状態にする
checked属性を使う1
<input type="checkbox" checked>
ドロップダウンを生成する
<select></select>タグを使用して、その中のセクションに<option></option>タグで項目を記述する1
2
3
4
5
6<select>
<option>塩ラーメン</option>
<option>味噌ラーメン</option>
<option>醤油ラーメン</option>
<option>豚骨ラーメン</option>
</select>
ドロップダウンのデフォルト選択項目を指定する
- デフォルトで選択させた状態にしたい
<option>タグに、selected属性を付与する
1 | |
table(テーブル)を生成する方法
<table></table>タグを使用して、テーブルセクションを作成する1
2
3<table>
テーブルの内容の記述
</table>テーブルの内容を追加する
行とデータを別々に記述する必要がある<tr></tr>タグで行を生成- tr = table row
<td></td>タグで行内の要素指定- td = table data
1 | |
もう少しリッチな表現を入れる
枠線をつける
<table>タグにborder属性を記述する1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19ラーメン値段表 <!--タイトルのつもり-->
<table border>
<tr>
<td>塩ラーメン</td>
<td>299</td>
</tr>
<tr>
<td>豚骨ラーメン</td>
<td>399</td>
</tr>
<tr>
<td>醤油ラーメン</td>
<td>499</td>
</tr>
<tr>
<td>味噌ラーメン</td>
<td>599</td>
</tr>
</table>見出しをつける
<thead></thead>タグでヘッダーセクションを生成する- thead = table head
<tr></tr>タグで行セクションを生成する<th></th>タグでヘッダー情報を記述する- ヘッダーと本文を区別するために本文部分は
<tbody></tbody>セクションで囲む
1 | |
a hrefを使用してリンクする
- a = Anker
- href = hiper reference
- hrefにURL or パス
リンクの種類
href属性にURLを指定する
- 絶対リンク
- 相対リンク
タグを使うことでリンクさせる
- アンカーリンク
絶対リンク
ホームディレクトリからのパスorhttp://xxxに移動する1
<a href="http://www.wikipedia.org">
相対リンク
- 今のディレクトリからの相対的なリンクに移動する
1
<a href="table.html">table.htmlへのリンク</a>
アンカーリンク
- ページ内で移動する(スクロール位置を移動する)
aタグのhrefに任意の識別子を指定pタグのid属性にaタグで指定した識別子と同じ識別子を指定1
2
3
4
5
6
7
8
9
10<p id="top"><a href="http://www.google.com">google検索</a></p>
<p><a href="table.html">テーブル.htmlへのリンク</a></p>
<p>スペース</p>
<p>スペース</p>
<p>スペース</p>
<p>スペース</p>
<p>スペース</p>
<p>スペース</p>
<p>スペース</p>
<p><a href="#top">トップへ戻る</a></p>
画像にリンクを設置する
imgタグを<a href="">で囲む1
2
3<a href="http://www.google.com">
<img src="image.png">
</a>
