参考

基本的なフォーム

form(入力・送信フォーム)タグ

• どこに、どうやって送信するかを記述するタグ
• このタグセクションの中には、何を送信するかを示す

1

<form></form>

input(入力)タグ

• formタグの「何を」送信するかを記述するためのタグ
• formタグで囲む必要があるのは、入力した値を送信したい場合
  • 必ずformタグに記述する必要はない
• type属性を指定することで、入力インターフェイスを変更できる

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
2
3

<form>
	<input type="text">
</form>

ボタンにアクションを設定する

• 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

<input type="button" value="これはボタンです">

複数のラジオボタンの連携

• name属性をつけることで、グルーピングができる

1
2
3

1<input type="radio" name="test">
2<input type="radio" name="test">
3<input type="radio" name="test">

ラジオボタンをデフォルトでチェックした状態にする

• 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
2
3
4
5
6

<select>
 <option>塩ラーメン</option>
 <option>味噌ラーメン</option>
 <option selected>醤油ラーメン</option>
 <option>豚骨ラーメン</option>
</select>

table(テーブル)を生成する方法

• <table></table>タグを使用して、テーブルセクションを作成する

  1 2 3

  <table> テーブルの内容の記述 </table>

テーブルの内容を追加する

行とデータを別々に記述する必要がある

• <tr></tr>タグで行を生成
  • tr = table row
• <td></td>タグで行内の要素指定
  • td = table data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ラーメン値段表	<!--タイトルのつもり-->
<table>
	<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>

もう少しリッチな表現を入れる

枠線をつける

• <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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

ラーメン値段表	<!--タイトルのつもり-->
<table>
	<thead>
	<tr>
		<th>ラーメン名</th>
		<th>価格</th>
	</tr>
	</thead>
	<tbody>
		<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>
	</tbody>
</table>

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>

img(画像)タグ

• 自己完結型のタグ
• 画像へのパスはホットリンクを使うこともできる
  • ホットリンク = 動的に他のウェブ上の画像をリンクする

1

<img src="画像へのパス">

サイズ変更(ピクセル数を指定)

• width="" : 幅を指定
• height="" : 高さを指定

小ネタ

• 上下でイメージを配置したい場合、<p></p>を使うといい

1
2

<p><img src="image.png" width="100" height="40"></p>
<img src="https://1.bp.blogspot.com/-QNMuJ-k-bYU/X68bIi2gjjI/AAAAAAABcUs/39kmQwXcZPM3w4s8O1vrcIswGqd2r6EWgCNcBGAsYHQ/s400/fantasy_unicorn_rainbow.png">

p(Paragraf)タグ

段落を表現するためのタグ

1
2

<p>これは１つ目の段落です</p>
<p>これは２つ目の段落です</p>

br(Line Break)タグ

改行を表現するためのタグ

1

改行したい場合<br>を入れる

使用例

コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
	<head>
		<title>タイトル</title>
	</head>
	<body>
		<p>これは１つ目の段落です。好きな食べ物はラーメンです。<br>ここには改行が入ることが望ましいです</p>
		<p>これは2つ目の段落です。嫌いな食べ物はカマキリです。</p>
		何も指定指定ない１
		何も指定指定ない2
		何も指定指定ない3
		何も指定指定ない4
		<p>あ<br>い<br>う<br>え<br>お</p>
	</body>
</html>

結果

1
2
3
4
5
6
7
8
9
10
11
12

これは１つ目の段落です。好きな食べ物はラーメンです。
ここには改行が入ることが望ましいです

これは2つ目の段落です。嫌いな食べ物はカマキリです。

何も指定指定ない１ 何も指定指定ない2 何も指定指定ない3 何も指定指定ない4

あ
い
う
え
お

ul(番号なしリスト)タグ

• ul = Unorderd List
• <ul></ul>で指定するのはリストのタイトル

li(項目)タグ

• li = List Item
• <li></li>リスト内の項目を記述する

1
2
3
4
5
6
7

<ul>曜日
	<li>月</li>
	<li>火</li>
	<li>水</li>
	<li>木</li>
	<li>金</li>
</ul>

ol(番号付きリスト)タグ

• ol = Ordered List
• 基本はul(番号なしリスト)と同じだが、オプションをつけることができる

オプション

複数のオプションを同時に指定も可能

• <ol start="番号"> : 振られる番号のスタート数字を変更する
• <ol reversed> : 番号を逆順にする
• <ol type=""> : 番号の表現を変える
  • 1,A,l,a,i

li(項目)タグ

• li = List Item
• <li></li>リスト内の項目を記述する

1
2
3
4
5
6
7

<ol start="4" reversed>曜日
	<li>月</li>
	<li>火</li>
	<li>水</li>
	<li>木</li>
	<li>金</li>
</ol>

目次

• 環境
• 前準備
• 1. node.jsをインストールする
• 2. Hexoをインストールする
• 3. HexoにGit操作用ツールを追加
• 4. GitHubでブログ用のリポジトリを作成する
• 5. 作成したリポジトリをCloneして移動
• 6. Hexoでプロジェクトを作成
  • ファイル名の中身をCloneしたリポジトリに移動させる
• 7. Hexoプロジェクトの設定を書き換える
  • 書き換え対象ファイル
  • 書き換える設定
  • 「deploy:」 以下を書き換え&追記
    • 書き換え前
    • 書き換え後

参考URL

w3schools.com

strong(太文字)

• <b></b>で表現をすることもできるが、HTML5からは、<strong></strong>タグが推奨されている
  • 人が目視で確認する時に、<strong></strong>の方が読みやすいから

1

これは<strong>太文字</strong>だよ

em(イタリック)タグ

• <i></i>で表現することもできるが、HTML5からは、<em></em>タグが推奨されている
  • em = Enphasize

1

これは<em>イタリック文字</em>だよ

ins(下線)タグ

• <u></u>で表現でこともできるが、HTML5からは、<ins></ins>タグが推奨されている
  • ins = insert

1

<p>これは<ins>下線</ins>だよ</p>

sup(上付き文字)タグ

• sup = Superscript

  1	<p>これは<sup>上付き文字</sup>だよ</p>

sub(下付き文字)タグ

• sub = Subscript

  1	<p>これは<sub>下付き文字</sub>だよ</p>

del(打ち消し)タグ

• del = delete

  1	<p>これは<del>打ち消し</del>だよ</p>

hr(区切り線)タグ

• 自己完結型(</hr>がいらない)
• 勝手に改行が入る
• hr = Horizontal Rule

  1	ここから下に区切り線が入る<hr>ここから上に区切り線が入る

mark(ハイライト)タグ

• mark = marking

  1	<p>これは<mark>ハイライト</mark>だよ</p>

HTMLの特徴

全てのコードはタグで囲まれている

1
2
3

<body>
  <title>タイトル</title>
</body>

HTMLのサンプルサイト

サンプルサイト

タグ

基本

1

- <html></html>      : HTMLの内容

文章関係

1
2
3
4
5

- <body></body>      : 文章の本文
- <div></div>        : division(領域)画面上の領域を分ける
- <h~></h~>          : Header(タイトル)~部分は数字が入り、数字によってタイトルのサイズが変わる
- <p></p>            : Paragraf(段落)
- <a href="xxx"></a> : リンク

レイアウト関係

1
2
3
4
5
6
7

- <head></head>      : レイアウトの記述
- <title></title>    : ブラウザのタブに表示される名前
- <style></style>    : 文字やレイアウトの装飾を指定する部分
	- body{}           : <body></body>に対するレイアウト設定
	- div{}            : <div></div>に対するレイアウト設定
	- a:link,a:visited : リンクに対する書式設定
	- @media           : メディアクエリー（デバイスによって切り替える)レスポンシブデザインのための記述

メタ

1
2
3

- <meta charset=""/>    : 文字コードの指定
- <meta http-equiv="" content=""/>	: ページの種類の指定 
- <meta name=""content=""/>         : 

文字サイズ拡大、縮小方法

Windows

拡大 : Ctrl +

縮小 : Ctrl -

Mac

拡大 : Cmd ^

縮小 : Cmd -