改行の入れ方3パターン

1. 半角空白を２つ入れて改行する

• この改行の入れ方の場合、ブロックは別れない
• HTMLで言うところの、<br>タグと同じ

  1 2 3

  1 2 3

2. 改行を１つ入れる

• ブロックが別れる
• HTMLで言うところの、<p>タグと同じ

  1 2 3 4 5

  1 2 3

3. \タグを入れる

• HTMLのタグと同じ

  1	1<br>2<br>3<br>

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の動画を埋め込む

1. youtubeで埋め込みたい動画を選択
2. 動画の再生画面から、埋め込みコードを取得
3. 埋め込みコードは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

<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:」 以下を書き換え&追記
    • 書き換え前
    • 書き換え後