HTML5 まとめ（１）
HTML5の説明で正しいものはどれか
1. これまでのHTMLを大幅に改定したHTML第5改訂版
2. HTMLやXHTMLの文書作成機能を改良し、より構造化しやすいタグが利用できる
3. 次世代のWeb環境に合うように仕様を作成
4. W3C(World Wide Web Consortium）の管理下で仕様を策定
5. 1から4全て
headerタグの正しい説明はどれか
1. 文書またはセクションのナビゲーション領域を定義するタグ
2. セクションのヘッダー領域を定義するタグ
3. セクションと関連するコンテンツ領域を定義するタグ
4. HTML文書内のコンテンツ領域を定義するタグ
HTML5のDOCTYPE宣言はどれか
1. !doctype html
2. !DOCTYPE HTML5
3. !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML5//EN"
4. !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML5//EN" "http://www.w3.org/TR/html5/strict.dtd"
空要素の終了タグ代わりの/が不要なタグはどれか
1. input
2. br
3. meta
4. link
5. 1から4全て
終了タグを省略できないタグはどれか
1. p
2. table
3. tr
4. option
ナビゲーション領域を定義するタグはどれか
1. sectionタグ
2. asideタグ
3. articleタグ
4. navタグ
articleタグの正しい説明はどれか
1. セクションと関連するコンテンツ領域を定義するタグ
2. HTML文書内のコンテンツ領域を定義するタグ
3. ニュースやブログなどの独立したコンテンツ領域を定義するタグ
4. 文書またはセクションのナビゲーション領域を定義するタグ
HTML5の仕様に含まれていないものはどれか
1. Canvas機能
2. マルチメディア要素
3. 構造化要素
4. セキュリティ機能
HTML5のmetaタグで文字エンコーディングの記述はどれか
1. meta charset="utf-8"
2. meta content="text/html; charset=utf-8"
3. meta http-equiv="Content-Type" charset=utf-8
4. meta http-equiv="Content-Type" content="text/html; charset=utf-8"
addressタグはどんな目的で使用すべきか
1. サイト運営者の連絡先情報や記事の連絡先情報をマークアップするため
2. ルビになる文字列を指定するため
3. 見出しタグのh1、h2・・・h6を使用するときにグルーピングするため
4. コンテンツから参照される画像やイラスト、ソースコード、動画などを定義するため
サイトの運営者に関する情報を配置するタグはどれか
1. navタグ
2. secitonタグ
3. footerタグ
4. headerタグ
Webページの文章をハイライトにする要素はどれか
1. highlightタグ
2. h1タグ
3. strongタグ
4. markタグ
type属性にcolorを設定するとどうなるか
1. カラーピッカー表示
2. カラーコード選択リスト表示
3. 指定した色の文字表示
4. カラーチェック
追加されたフォームのtype属性に含まれないものはどれか
1. tel
2. address
3. url
4. email
type属性でnumberと併せて設定できる属性はどれか
1. time属性
2. step属性
3. round属性
4. range属性
numberとstepはセットで使う
novalidate属性は何のための設定か
1. 入力欄の形式チェックをしない 2. 日付チェック
3. 数値チェック
4. 必須チェック
placeholder属性は、何を設定する属性か
1. 入力欄に入力例
2. 数値や日付の最大値
3. 数値や日付の入力幅
4. オートコンプリート機能
日付の入力欄を作成するにはtype属性に何を設定すればよいか
1. week
2. calendar
3. day
4. date
1. Web Workers
2. Web Network
3. Web Socket
4. Web Storage
追加された入力サポート属性に含まれないものはどれか
1. placeholder
2. autosupport
3. autocomplete
4. list
HTML5のキャンバス機能の説明で正しいものはどれか
1. Webページ内で要素を移動したり、ファイルをアップロードすることができる機能
2. オフラインでWebページを閲覧したり、Webアプリケーションを動作するための機能
3. 異なるウィンドウ(フレーム)間でメッセージの送受信できる機能
4. グラフィックス描画をするための領域を定義し、JavaScriptで描画する機能
progressタグは何を表示するタグか
1. 計算結果を定義するタグ
2. 詳細情報を定義するタグ
3. 処理の進捗を表示するタグ
4. 規定範囲の測定結果を表示するタグ
required属性は何のための設定か
1. 必須チェック
2. 日付チェック
3. 指定したパターンチェック
4. 入力欄の形式チェックをしない
HTML5で追加された入力チェックの属性はどれか
1. alphanumber
2. pattern
3. autocheck
4. alphabet
1つの入力欄に複数の入力を可能にする属性はどれか
1. several
2. plural
3. multiple
4. many
CSS3の代表的な機能でないものはどれか
1. フォント機能
2. アニメーション
3. 拡張されたセレクタ機能
4. 入力チェック機能
HTML5 placeholder属性
・テキストボックス等にあらかじめ入力サンプル文字を表示させることができます
・この設定をしておくことで、ユーザーはどのような文字列を入れたら良いのか理解する手助けとなります
・placeholder属性を設定できるのは、input要素とtextarea要素のみ、値はテキストのみです
・プレスフォルダーに設定した文字は入力を開始すると消えます
<th>お名前</th> <td> <label for="last_name">姓</label> <input type="text" name="last_name" id="last_name" placeholder="山田"> <label for="first_name">名</label> <input type="text" name="first_name" id="first_name" placeholder="太郎"></td>
PHP 入力されたIDを次回アクセス時まで覚える（Cookie）
【input.php】
<?php
if( isset( $_COOKIE[ 'my_id' ] ) ){
$myId = $_COOKIE[ 'my_id' ];
} else {
$myId = '';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入力されたIDを次回アクセス時まで覚える（Cookie）</title>
<style>
h1 {
font-size: 20px;
}
dt {
margin-bottom: 10px;
}
dd {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>入力されたIDを次回アクセス時まで覚える（Cookie）</h1>
<form action="cookie.php" method="post">
<dl>
<dt>ID</dt>
<dd><input type="text" name="my_id" id="my_id" value=" <?php print $myId; ?> "></dd>
<dt>パスワード</dt>
<dd><input type="password" name="password" id="password"></dd>
<dt>IDの保存</dt>
</dl>
<p><input type="checkbox" name="save" id="save" value="on">
<label for="save">IDを保存する</label></p>
<input type="submit" value="送信する">
</form>
</body>
</html>
<?php
$myId = $_POST['my_id'];
$password = $_POST['password'];
$save = $_POST['save'];
//Cookieに保存
if( $save == 'on' ){
setcookie( 'my_id',$myId,time() + 60 * 60 * 24 * 14 );
$message = 'ログイン情報を記録しました';
} else {
setcookie( 'my_id' );
$message = '記録しませんでした';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入力されたIDを次回アクセス時まで覚える (Cookie)</title>
<style>
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<h1>入力されたIDを次回アクセス時まで覚える (Cookie)</h1>
<p><?php print $message; ?></p>
<p><a href="./input.php">戻る</p>
</body>
</html>
||<[f:id:takuya0805:20131023134338p:image]
*1382493605*HTML5 type="email"
・HTML5ではメールアドレスの入力を想定したinput要素のtype属性として「type="email"」が用意されています
・「type="email"」とした場合、「xxxx@ドメイン名」といったメールアドレス用の書式しか入力できなくなります
・正しくない書式のデータが入力された場合はには、送信時にチェックされ「メールアドレスを入力してください。」というメッセージが表示されます
>||
<th>メールアドレス</th>
<td><input name="mail" type="email" placeholder="yamada@example.co.jp" required>
<span class="note">（半角）</span></td>
||<[f:id:takuya0805:20131023134338p:image:w640]
*1382492665*HTML5 autofocus属性
・autofocus属性を使うことで、<span class="deco" style="color:#FF0033;">ページを開いたときに自動的に指定した項目にフォーカス</span>させることができるようになります
・この設定をしておくことで、ユーザーはすぐに入力を始めることができるようになります
・autofocus属性を指定できるのは、ページ内で１箇所のみです
>||
<th>お名前</th>
<td>
<label for="last_name">姓</label>
<input type="text" name="last_name" id="last_name" placeholder="山田" autofocus>
<label for="first_name">名</label>
<input type="text" name="first_name" td="first_name" cplaceholder="太郎"></td>
HTML5 を使った、宿泊予約フォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>宿泊予約</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
body {
margin-left: 80px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
h1, p {
margin-left: 40px;
font-weight: 600;
}
th {
text-align: right;
line-height: 1.8;
}
span.red {
color: red;
}
meter {
width: 150px;
height: 20px;
}
</style>
</head>
<body>
<h1>宿泊予約</h1>
<p><span class="red">※</span>全て必須項目です。</p>
<form method="POST" action="#">
<table>
<tr>
<th><span class="red">※</span>ID：</th>
<td>
<input type="text" name="ID" id="id" autofocus required>
</td>
</tr>
<tr>
<th><span class="red">※</span>料理：</th>
<td><input type="text" name="food" id="food" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約日：</th>
<td><input type="date" name="date" id="date" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約時間：</th>
<td><input type="time" name="time" id="time" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約人数：</th>
<td><input type="number" name="people" id="people" min="1" max="20" required>(1-20人)</td>
</tr>
<tr>
<th><span class="red">※</span>部屋の色：</th>
<td><input type="color" name="color" id="color" required</td>
</tr>
<tr>
<th><span class="red">※</span>メール：</th>
<td><input type="email" name="email" id="email" required></td>
</tr>
<tr>
<th>電話番号：</th>
<td><input type="tel" name="tel" name="tel"></td>
</tr>
<tr>
<th>空き室状況：</th>
<td><meter max="10" min="0" value="8"></meter></td>
</tr>
</table>
<input type="submit" value="送信">
</form>
</body>
</html>
PHP まとめ ( 9 ) 問題と解答
クッキー（1）
* クッキー情報をクライアント側に保存してもらうために使用する関数はどれか
1. isset関数
2. getcookie関数
3. setcookie関数
4. unset関数
クッキー（2）
* クッキーが保存されているディレクトリとして正しいものはどれか
1. C:\Program Files\ユーザアカウント名\Cookies
2. C:\Program Data\ユーザアカウント名\Cookies
3. C:\temp\ユーザアカウント名\Cookies
4. C:\Documents and Settings\ユーザアカウント名\Cookies
クッキー（3）
* 多くのブラウザにおいて、概ね1サイトにつき何個までのクッキーが保存できるか
1. 20個
2. 50個
3. 100個
4. 10個
クッキー（4）
* クッキー情報を取得するための書式として正しいものはどれか
1. $変数 = $_COOKIE[ 有効期限 ];
2. $変数 = $_COOKIE[ クッキーの名前 ];
3. $変数 = $_COOKIE;
4. $変数 = $_COOKIE[ クッキーの値 ];
クッキー（5）
* setcookie関数において、クッキーの有効期限を省略、またはゼロを指定するとどうなるか
1. クッキーはブラウザに保存されない
2. クッキーはブラウザが終了すると自動的に破棄される
3. クッキーは永続的に保存され続ける
4. クッキーはPC再起動時に破棄される
セッション（1）
* セッション管理を開始すると、サーバからWebブラウザにセッションを特定するために渡されるものはどれか
1. セッションID
2. リクエスト
3. レスポンス
4. ユーザID
セッション（2）
* セッションにデータを保持するためのグローバル変数である「$_SESSION」のデータ構造はどれか
1. 連想配列
2. オブジェクト
3. 配列
4. クラス
セッション（3）
* セッションに格納した値を取得するための記述として正しいものはどれか
1. $_SESSION[セッションID]
2. $_SESSION[セッションの名前]
3. $_SESSION[セッションID] = セッションから取得したい値;
4. $_SESSION[セッションの名前] = セッションから取得したい値;
セッション（4）
* 指定したセッション情報を削除したい場合の記述として正しいものはどれか
1. unset($_SESSION[セッションID]);
2. $_SESSION = array();
3. $_SESSION[セッションの名前] = array();
4. unset($_SESSION[セッションの名前]);
データベース（1）
* データベースからデータを取得するために使用する関数はどれか
1. mysql_query関数
2. mysql_connect関数
3. mysql_select_db関数
4. mysql_close関数
データベース（2）
* mysql_connect関数の書式として正しいものはどれか
1. MySQLの接続ID = mysql_connect( ユーザ名, サーバ名, パスワード );
2. MySQLの接続ID = mysql_connect( パスワード, サーバ名, ユーザ名 );
3. MySQLの接続ID = mysql_connect( パスワード, ユーザ名, サーバ名 );
4. MySQLの接続ID = mysql_connect( サーバ名, ユーザ名, パスワード );
データベース（３）
* データベースとの接続を切断するための関数はどれか
1. mysql_close関数
2. mysql_query関数
3. mysql_select_db関数
4. mysql_connect関数
データベース（4）
* mysql_close関数の書式として正しいものはどれか
1. mysql_close( ユーザ名 );
2. mysql_close( MySQLの接続ID );
3. mysql_close( サーバ名 );
4. mysql_close( データベース名 );
データベース（5）
* mysql_query関数の説明として正しくないものはどれか
1. データベースから接続を切断するときに使用する
2. データベースにデータを登録するときに使用する
3. データベースからデータを取得するときに使用する
4. データベースからデータを削除するときに使用する
データベース（6）
* mysql_fetch_array関数において設定できるオプション「MYSQL_ASSOC」の説明として正しいものはどれか
1. 結果セットから各レコードデータを連想配列形式で返却するためのオプションである
2. 結果セットから各レコードデータをオブジェクト形式で返却するためのオプションである
3. 結果セットから各レコードデータを連想添字と数値添字の両方を持つ配列で返却するためのオプションである
4. 結果セットから各レコードデータを配列形式で返却するためのオプションである
データベース（7）
* mysql_select_db関数の書式として正しくないものはどれか
1. 結果（ TRUE / FALSE ） = mysql_select_db( データベース名, MySQLの接続ID);
2. 結果（ TRUE / FALSE ） = mysql_select_db( データベース名);
3. 結果（ TRUE / FALSE ） = mysql_select_db( MySQLの接続ID, データベース名);
4. 全て正しい
データベース（8）
* データベースの選択を行うための関数はどれか
1. mysql_close関数
2. mysql_connect関数
3. mysql_query関数
4. mysql_select_db関数
データベース（9）
* mysql_connect関数にてMYSQL接続に失敗した場合の戻り値(MYSQLの接続ID)はどうなるか
1. TRUEになる
2. ""(空文字)になる
3. FALSEになる
4. 0になる
PHP まとめ ( 9 ) 問題と解答
クッキー（1）
* クッキー情報をクライアント側に保存してもらうために使用する関数はどれか
1. isset関数
2. getcookie関数
3. setcookie関数
4. unset関数
クッキー（2）
* クッキーが保存されているディレクトリとして正しいものはどれか
1. C:\Program Files\ユーザアカウント名\Cookies
2. C:\Program Data\ユーザアカウント名\Cookies
3. C:\temp\ユーザアカウント名\Cookies
4. C:\Documents and Settings\ユーザアカウント名\Cookies
クッキー（3）
* 多くのブラウザにおいて、概ね1サイトにつき何個までのクッキーが保存できるか
1. 20個
2. 50個
3. 100個
4. 10個
クッキー（4）
* クッキー情報を取得するための書式として正しいものはどれか
1. $変数 = $_COOKIE[ 有効期限 ];
2. $変数 = $_COOKIE[ クッキーの名前 ];
3. $変数 = $_COOKIE;
4. $変数 = $_COOKIE[ クッキーの値 ];
クッキー（5）
* setcookie関数において、クッキーの有効期限を省略、またはゼロを指定するとどうなるか
1. クッキーはブラウザに保存されない
2. クッキーはブラウザが終了すると自動的に破棄される
3. クッキーは永続的に保存され続ける
4. クッキーはPC再起動時に破棄される
セッション（1）
* セッション管理を開始すると、サーバからWebブラウザにセッションを特定するために渡されるものはどれか
1. セッションID
2. リクエスト
3. レスポンス
4. ユーザID
セッション（2）
* セッションにデータを保持するためのグローバル変数である「$_SESSION」のデータ構造はどれか
1. 連想配列
2. オブジェクト
3. 配列
4. クラス
セッション（3）
* セッションに格納した値を取得するための記述として正しいものはどれか
1. $_SESSION[セッションID]
2. $_SESSION[セッションの名前]
3. $_SESSION[セッションID] = セッションから取得したい値;
4. $_SESSION[セッションの名前] = セッションから取得したい値;
セッション（4）
* 指定したセッション情報を削除したい場合の記述として正しいものはどれか
1. unset($_SESSION[セッションID]);
2. $_SESSION = array();
3. $_SESSION[セッションの名前] = array();
4. unset($_SESSION[セッションの名前]);
データベース（1）
* データベースからデータを取得するために使用する関数はどれか
1. mysql_query関数
2. mysql_connect関数
3. mysql_select_db関数
4. mysql_close関数
データベース（2）
* mysql_connect関数の書式として正しいものはどれか
1. MySQLの接続ID = mysql_connect( ユーザ名, サーバ名, パスワード );
2. MySQLの接続ID = mysql_connect( パスワード, サーバ名, ユーザ名 );
3. MySQLの接続ID = mysql_connect( パスワード, ユーザ名, サーバ名 );
4. MySQLの接続ID = mysql_connect( サーバ名, ユーザ名, パスワード );
データベース（３）
* データベースとの接続を切断するための関数はどれか
1. mysql_close関数
2. mysql_query関数
3. mysql_select_db関数
4. mysql_connect関数
データベース（4）
* mysql_close関数の書式として正しいものはどれか
1. mysql_close( ユーザ名 );
2. mysql_close( MySQLの接続ID );
3. mysql_close( サーバ名 );
4. mysql_close( データベース名 );
データベース（5）
* mysql_query関数の説明として正しくないものはどれか
1. データベースから接続を切断するときに使用する
2. データベースにデータを登録するときに使用する
3. データベースからデータを取得するときに使用する
4. データベースからデータを削除するときに使用する
データベース（6）
* mysql_fetch_array関数において設定できるオプション「MYSQL_ASSOC」の説明として正しいものはどれか
1. 結果セットから各レコードデータを連想配列形式で返却するためのオプションである
2. 結果セットから各レコードデータをオブジェクト形式で返却するためのオプションである
3. 結果セットから各レコードデータを連想添字と数値添字の両方を持つ配列で返却するためのオプションである
4. 結果セットから各レコードデータを配列形式で返却するためのオプションである
データベース（7）
* mysql_select_db関数の書式として正しくないものはどれか
1. 結果（ TRUE / FALSE ） = mysql_select_db( データベース名, MySQLの接続ID);
2. 結果（ TRUE / FALSE ） = mysql_select_db( データベース名);
3. 結果（ TRUE / FALSE ） = mysql_select_db( MySQLの接続ID, データベース名);
4. 全て正しい
データベース（8）
* データベースの選択を行うための関数はどれか
1. mysql_close関数
2. mysql_connect関数
3. mysql_query関数
4. mysql_select_db関数
データベース（9）
* mysql_connect関数にてMYSQL接続に失敗した場合の戻り値(MYSQLの接続ID)はどうなるか
1. TRUEになる
2. ""(空文字)になる
3. FALSEになる
4. 0になる
HTML5 を使った、宿泊予約フォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>宿泊予約</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
body {
margin-left: 80px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
h1, p {
margin-left: 40px;
font-weight: 600;
}
th {
text-align: right;
line-height: 1.8;
}
span.red {
color: red;
}
meter {
width: 150px;
height: 20px;
}
</style>
</head>
<body>
<h1>宿泊予約</h1>
<p><span class="red">※</span>全て必須項目です。</p>
<form method="POST" action="#">
<table>
<tr>
<th><span class="red">※</span>ID：</th>
<td>
<input type="text" name="ID" id="id" autofocus required>
</td>
</tr>
<tr>
<th><span class="red">※</span>料理：</th>
<td><input type="text" name="food" id="food" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約日：</th>
<td><input type="date" name="date" id="date" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約時間：</th>
<td><input type="time" name="time" id="time" required></td>
</tr>
<tr>
<th><span class="red">※</span>予約人数：</th>
<td><input type="number" name="people" id="people" min="1" max="20" required>(1-20人)</td>
</tr>
<tr>
<th><span class="red">※</span>部屋の色：</th>
<td><input type="color" name="color" id="color" required</td>
</tr>
<tr>
<th><span class="red">※</span>メール：</th>
<td><input type="email" name="email" id="email" required></td>
</tr>
<tr>
<th>電話番号：</th>
<td><input type="tel" name="tel" name="tel"></td>
</tr>
<tr>
<th>空き室状況：</th>
<td><meter max="10" min="0" value="8"></meter></td>
</tr>
</table>
<input type="submit" value="送信">
</form>
</body>
</html>
PHP 入力されたIDを次回アクセス時まで覚える（Cookie）
【input.php】
<?php
if( isset( $_COOKIE[ 'my_id' ] ) ){
$myId = $_COOKIE[ 'my_id' ];
} else {
$myId = '';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入力されたIDを次回アクセス時まで覚える（Cookie）</title>
<style>
h1 {
font-size: 20px;
}
dt {
margin-bottom: 10px;
}
dd {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>入力されたIDを次回アクセス時まで覚える（Cookie）</h1>
<form action="cookie.php" method="post">
<dl>
<dt>ID</dt>
<dd><input type="text" name="my_id" id="my_id" value=" <?php print $myId; ?> "></dd>
<dt>パスワード</dt>
<dd><input type="password" name="password" id="password"></dd>
<dt>IDの保存</dt>
</dl>
<p><input type="checkbox" name="save" id="save" value="on">
<label for="save">IDを保存する</label></p>
<input type="submit" value="送信する">
</form>
</body>
</html>
<?php
$myId = $_POST['my_id'];
$password = $_POST['password'];
$save = $_POST['save'];
//Cookieに保存
if( $save == 'on' ){
setcookie( 'my_id',$myId,time() + 60 * 60 * 24 * 14 );
$message = 'ログイン情報を記録しました';
} else {
setcookie( 'my_id' );
$message = '記録しませんでした';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入力されたIDを次回アクセス時まで覚える (Cookie)</title>
<style>
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<h1>入力されたIDを次回アクセス時まで覚える (Cookie)</h1>
<p><?php print $message; ?></p>
<p><a href="./input.php">戻る</p>
</body>
</html>
||<[f:id:takuya0805:20131023134338p:image]
*1382493605*HTML5 type="email"
・HTML5ではメールアドレスの入力を想定したinput要素のtype属性として「type="email"」が用意されています
・「type="email"」とした場合、「xxxx@ドメイン名」といったメールアドレス用の書式しか入力できなくなります
・正しくない書式のデータが入力された場合はには、送信時にチェックされ「メールアドレスを入力してください。」というメッセージが表示されます
>||
<th>メールアドレス</th>
<td><input name="mail" type="email" placeholder="yamada@example.co.jp" required>
<span class="note">（半角）</span></td>
||<[f:id:takuya0805:20131023134338p:image:w640]
*1382492665*HTML5 autofocus属性
・autofocus属性を使うことで、<span class="deco" style="color:#FF0033;">ページを開いたときに自動的に指定した項目にフォーカス</span>させることができるようになります
・この設定をしておくことで、ユーザーはすぐに入力を始めることができるようになります
・autofocus属性を指定できるのは、ページ内で１箇所のみです
>||
<th>お名前</th>
<td>
<label for="last_name">姓</label>
<input type="text" name="last_name" id="last_name" placeholder="山田" autofocus>
<label for="first_name">名</label>
<input type="text" name="first_name" td="first_name" cplaceholder="太郎"></td>
HTML5 placeholder属性
・テキストボックス等にあらかじめ入力サンプル文字を表示させることができます
・この設定をしておくことで、ユーザーはどのような文字列を入れたら良いのか理解する手助けとなります
・placeholder属性を設定できるのは、input要素とtextarea要素のみ、値はテキストのみです
・プレスフォルダーに設定した文字は入力を開始すると消えます
<th>お名前</th> <td> <label for="last_name">姓</label> <input type="text" name="last_name" id="last_name" placeholder="山田"> <label for="first_name">名</label> <input type="text" name="first_name" id="first_name" placeholder="太郎"></td>
HTML5 まとめ（１）
HTML5の説明で正しいものはどれか
1. これまでのHTMLを大幅に改定したHTML第5改訂版
2. HTMLやXHTMLの文書作成機能を改良し、より構造化しやすいタグが利用できる
3. 次世代のWeb環境に合うように仕様を作成
4. W3C(World Wide Web Consortium）の管理下で仕様を策定
5. 1から4全て
headerタグの正しい説明はどれか
1. 文書またはセクションのナビゲーション領域を定義するタグ
2. セクションのヘッダー領域を定義するタグ
3. セクションと関連するコンテンツ領域を定義するタグ
4. HTML文書内のコンテンツ領域を定義するタグ
HTML5のDOCTYPE宣言はどれか
1. !doctype html
2. !DOCTYPE HTML5
3. !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML5//EN"
4. !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML5//EN" "http://www.w3.org/TR/html5/strict.dtd"
空要素の終了タグ代わりの/が不要なタグはどれか
1. input
2. br
3. meta
4. link
5. 1から4全て
終了タグを省略できないタグはどれか
1. p
2. table
3. tr
4. option
ナビゲーション領域を定義するタグはどれか
1. sectionタグ
2. asideタグ
3. articleタグ
4. navタグ
articleタグの正しい説明はどれか
1. セクションと関連するコンテンツ領域を定義するタグ
2. HTML文書内のコンテンツ領域を定義するタグ
3. ニュースやブログなどの独立したコンテンツ領域を定義するタグ
4. 文書またはセクションのナビゲーション領域を定義するタグ
HTML5の仕様に含まれていないものはどれか
1. Canvas機能
2. マルチメディア要素
3. 構造化要素
4. セキュリティ機能
HTML5のmetaタグで文字エンコーディングの記述はどれか
1. meta charset="utf-8"
2. meta content="text/html; charset=utf-8"
3. meta http-equiv="Content-Type" charset=utf-8
4. meta http-equiv="Content-Type" content="text/html; charset=utf-8"
addressタグはどんな目的で使用すべきか
1. サイト運営者の連絡先情報や記事の連絡先情報をマークアップするため
2. ルビになる文字列を指定するため
3. 見出しタグのh1、h2・・・h6を使用するときにグルーピングするため
4. コンテンツから参照される画像やイラスト、ソースコード、動画などを定義するため
サイトの運営者に関する情報を配置するタグはどれか
1. navタグ
2. secitonタグ
3. footerタグ
4. headerタグ
Webページの文章をハイライトにする要素はどれか
1. highlightタグ
2. h1タグ
3. strongタグ
4. markタグ
type属性にcolorを設定するとどうなるか
1. カラーピッカー表示
2. カラーコード選択リスト表示
3. 指定した色の文字表示
4. カラーチェック
追加されたフォームのtype属性に含まれないものはどれか
1. tel
2. address
3. url
4. email
type属性でnumberと併せて設定できる属性はどれか
1. time属性
2. step属性
3. round属性
4. range属性
numberとstepはセットで使う
novalidate属性は何のための設定か
1. 入力欄の形式チェックをしない 2. 日付チェック
3. 数値チェック
4. 必須チェック
placeholder属性は、何を設定する属性か
1. 入力欄に入力例
2. 数値や日付の最大値
3. 数値や日付の入力幅
4. オートコンプリート機能
日付の入力欄を作成するにはtype属性に何を設定すればよいか
1. week
2. calendar
3. day
4. date
1. Web Workers
2. Web Network
3. Web Socket
4. Web Storage
追加された入力サポート属性に含まれないものはどれか
1. placeholder
2. autosupport
3. autocomplete
4. list
HTML5のキャンバス機能の説明で正しいものはどれか
1. Webページ内で要素を移動したり、ファイルをアップロードすることができる機能
2. オフラインでWebページを閲覧したり、Webアプリケーションを動作するための機能
3. 異なるウィンドウ(フレーム)間でメッセージの送受信できる機能
4. グラフィックス描画をするための領域を定義し、JavaScriptで描画する機能
progressタグは何を表示するタグか
1. 計算結果を定義するタグ
2. 詳細情報を定義するタグ
3. 処理の進捗を表示するタグ
4. 規定範囲の測定結果を表示するタグ
required属性は何のための設定か
1. 必須チェック
2. 日付チェック
3. 指定したパターンチェック
4. 入力欄の形式チェックをしない
HTML5で追加された入力チェックの属性はどれか
1. alphanumber
2. pattern
3. autocheck
4. alphabet
1つの入力欄に複数の入力を可能にする属性はどれか
1. several
2. plural
3. multiple
4. many
CSS3の代表的な機能でないものはどれか
1. フォント機能
2. アニメーション
3. 拡張されたセレクタ機能
4. 入力チェック機能
