に投稿に更新

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について

参考

基本的なフォーム

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>
に投稿に更新

GitHubでブログを作成する(Hexo)

目次

続きを読む
に投稿に更新

テキストレイアウトについて

参考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の概要

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=""/>         :

カテゴリ

最近の記事

アーカイブ

タグ

#Hexo1
#Terminal1
Alacritty2
Android3
Android Studio3
AppleScript1
Blade1
Bluetooth1
C#2
C++6
CPU1
CSS5
Chrome1
Coc.vim1
Composer2
Cpp11
Docker8
GAS1
GCC1
GLFW1
Git39
GitHub3
HTML15
Heroku1
Hexo3
Javascript6
Kotlin3
LINE1
Laravel14
Linux8
Linuxコマンド1
M1 Mac1
MSYS2/MinGW1
MYSY21
Mac7
Make2
Markdown1
NERDTree1
Oculus Quest27
PHP30
PHPDocumenter1
PHPUnit1
Postman1
PowerShell1
SDL23
Shell4
Slack1
Studio1
Swfit1
Swift52
Terminal1
Test Runner3
Tools2
Ubuntu8
UnitTest1
Unity19
VSCode1
Vim17
VimPlugin1
Vimプラグイン1
Visual Studio1
VisualStudio4
VisualStudioCode1
WSL3
Windows5
Windows API1
XCode45
Xcode3
Zsh1
alias1
anyenv1
apt1
blog2
coc-nvim1
coc-vim1
homebrew1
iTerm22
node.js3
nvm1
prezto1
vim2
yarn1
zsh3
ゲーム2
コンパイラ1
シェルスクリプト1
シーケンス図1
テスト2
ネットワーク1
プライバシーポリシー1
文字コード1
検索1
知識4
自動化1
設定1

広告

×