Appendix Tips 実 用 的 な 01 入 力 チェックを 行 なう 難 易 度 フォームの 入 力 チェック 方 法 は 第 9 章 のリスト9.5(222ページ)で 紹 介 し ました しかし エラーメッセージをダイアログボックスで 表 示 する 方 法 はあ まり 実 用 的 とは

Size: px
Start display at page:

Download "Appendix Tips 実 用 的 な 01 入 力 チェックを 行 なう 難 易 度 フォームの 入 力 チェック 方 法 は 第 9 章 のリスト9.5(222ページ)で 紹 介 し ました しかし エラーメッセージをダイアログボックスで 表 示 する 方 法 はあ まり 実 用 的 とは "

Transcription

1 A ppendix JavaScript の サンプル 集 すぐに 使 える 便 利 なサンプル 集 です 01 実 用 的 な 入 力 チェックを 行 なう 02 パスワードの 入 力 チェックを 即 時 実 行 する 03 サムネイル 画 像 のサイズを 切 り 替 える 04 JavaScriptが 有 効 かどうかをチェックする 05 テーブルの 特 定 行 を 強 調 する 06 入 力 中 のテキストボックスの 背 景 色 を 変 える 07 ローディング 画 面 を 表 示 する 08 長 い 文 章 を 省 略 し 続 きを 読 む リンクを 表 示 する 09 金 額 をカンマ 区 切 りで 表 示 する 10 開 閉 式 のメニューを 作 る 11 自 動 的 に 隠 れるナビゲーションメニューを 作 る 12 ページトップへ 戻 るボタンを 表 示 する 13 スクロールで 画 像 がめくれる 動 きを 表 現 する 14 ドアが 開 くようなアニメーションを 表 現 する 15 アバター 機 能 を 作 る 16 タブメニューを 作 る 17 サムネイル 画 像 付 きのスライドショーを 作 る 18 ループするスライドショーを 作 る 19 一 定 時 間 おきに 自 動 で 動 くスライドショーを 作 る

2 Appendix Tips 実 用 的 な 01 入 力 チェックを 行 なう 難 易 度 フォームの 入 力 チェック 方 法 は 第 9 章 のリスト9.5(222ページ)で 紹 介 し ました しかし エラーメッセージをダイアログボックスで 表 示 する 方 法 はあ まり 実 用 的 とは 言 えませんので ここではエラーメッセージをページ 上 に 表 示 する 方 法 を 紹 介 します また スクリプトは jqueryを 利 用 して 記 述 します 実 行 結 果 HTML 01.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main01.js"></script> </head> <body> <!-- --> <div id="errorarea"></div> 2

3 Tips01 実 用 的 な 入 力 チェックを 行 なう <form name="frm1" action="xxx"> <fieldset> <legend> </legend> <label> <input type="text" name="lastname"> </label> <label> <input type="text" name="firstname"> </label> </fieldset> <fieldset> <legend> </legend> <label> <input type="radio" name="gender" value="m"> </label> <label> <input type="radio" name="gender" value="f"> </label> </fieldset> <input type="button" id="sendbtn" value=" "> </form> </body> </html> JavaScript main01.js 01: $(function(){ 02: $("#sendbtn").on("click", inputcheck); 03: ); 04: function inputcheck(){ 05: var errors = []; 06: 07: if(!$("input[name='lastname']").val()) { 08: errors.push(" "); 09: 10: if (!$("input[name='firstname']").val()) { 11: errors.push(" "); 12: 13: if (!$("input[name='gender']:checked").val()) { 14: errors.push(" "); 15: 16: 17: if(errors.length > 0) { 18: $("#errorarea").html(errors.join("<br>")); 19: else { 20: $("form[name='frm1']").submit(); 21: 22: 3

4 Appendix [ 送 信 ]ボタンがクリックされると inputcheck 関 数 が 実 行 されます まず 5 行 目 でerrorsに 空 の 配 列 を 代 入 しています errorsはエラーメッセージを 保 持 する 配 列 です 発 生 したエラーの 件 数 分 配 列 の 要 素 が 追 加 されます 7 行 目 から9 行 目 にかけて 姓 が 入 力 されているかどうかをチェックしていま す テキストボックスが 未 入 力 の 場 合 valメソッドは 空 文 字 ("")を 返 します JavaScriptでは 空 文 字 はfalseとして 判 定 されます 条 件 式 の 先 頭 に! 演 算 子 が 付 いているので 姓 が 未 入 力 の 場 合 にifブロック 内 が 実 行 され 配 列 errors にエラーメッセージが 追 加 されます 姓 が 未 入 力 の 場 合 if(!$("input[name='lastname']").val()) { テキストボックスに 入 力 された 文 字 列 を 取 得 if(!"") { 空 文 字 はfalse として 解 釈 される if(!false) { 論 理 値 を 反 転 if(true) { 10 行 目 から12 行 目 も 前 述 の 処 理 と 同 様 のチェックを 行 なっています 13 行 目 では オプションボタン(ラジオボタン)がチェックされているか どうかを 調 べています チェックされているオプションボタンが 存 在 しない 場 合 セレクタに 該 当 する 要 素 は 存 在 しません よってvalメソッドを 実 行 して も undefined が 返 却 されます undefinedも 空 文 字 と 同 様 falseとして 扱 わ れます 17 行 目 から21 行 目 では 3つのチェック 項 目 でエラーが 発 生 したかどうかを 調 べています エラーが 発 生 しているときは 配 列 errorsに1 件 以 上 のエラー メッセージが 追 加 されています その 場 合 複 数 のエラーメッセージ 群 を<br> で 区 切 って1つの 文 字 列 として 連 結 し エラー 表 示 エリアに 挿 入 しています 4

5 Tips02 パスワードの 入 力 チェックを 即 時 実 行 する Tips パスワードの 入 力 02 チェックを 即 時 実 行 する 難 易 度 先 のサンプルのようにボタンを 押 したタイミングではなく テキストボック スに 文 字 列 を 入 力 すると 即 座 にチェックする 方 法 を 紹 介 します 例 として パ スワードの 文 字 列 長 文 字 種 強 度 をチェックします 実 行 結 果 HTML 02.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main02.js"></script> </head> <body> <input type="text" id="password"> <p id="message"></p> </body> </html> 5

6 Appendix JavaScript main02.js 01: $(function() { 02: $("#password").on("keyup", inputcheck); 03: ); 04: function inputcheck() { 05: var errors = []; 06: var password = $("#password").val(); 07: 08: if(password.length < 8 password.length > 12) { 09: errors.push(" 8 12 "); 10: 11: if(password.match(/[^0-9a-za-z]/)) { 12: errors.push(" "); 13: 14: if(!(password.match(/[0-9]/) && password. match(/[a-z]/) && password.match(/[a-z]/))) { 15: errors.push(" "); 16: 17: 18: $("#message").html(errors.join("<br>")); 19: テキストボックス 上 で 文 字 列 が 入 力 されたタイミングで 処 理 を 実 行 するに は keyupイベントを 使 います keyupは キーボードから1 文 字 分 の 入 力 が 行 なわれた 際 に 実 行 されるイベントです 8 行 目 では 文 字 列 長 をチェックしています lengthプロパティは 配 列 の 場 合 は 要 素 数 でしたが 文 字 列 の 場 合 は 文 字 列 の 長 さを 表 わします 11 行 目 では 文 字 種 をチェックしています 以 下 の 正 規 表 現 は 半 角 英 数 字 以 外 の 文 字 にマッチするかどうかを 調 べています [ ] の 先 頭 に ^ を 付 けると 以 降 のパターンと 一 致 しない 文 字 にマッチします password.match(/[^0-9a-za-z]/) 0-9 a-z A-Z 以 外 の 文 字 が 含 まれているかどうか 14 行 目 では パスワードの 強 度 をチェックしています 本 来 強 度 チェック では 1234 などの 単 純 な 文 字 列 もはじかなければなりませんが 今 回 は 簡 易 6

7 Tips02 パスワードの 入 力 チェックを 即 時 実 行 する 版 として 大 文 字 小 文 字 数 字 の3 種 類 がすべて 含 まれていることのみを 条 件 としています 以 下 のif 文 は 3 種 の 文 字 すべてが 含 まれている という 条 件 を 否 定 しています if(!(password.match(/[0-9]/) && password.match(/[a-z]/) && password.match(/[a-z]/))) { 数 字 が 含 まれる 小 文 字 が 含 まれる 大 文 字 が 含 まれる どれか1つでも 満 たさなければfalse 全 体 が! 演 算 子 で 囲 まれているので 論 理 値 が 反 転 され true となる 7

8 Appendix す Tips サムネイル 画 像 の 03 サイズを 切 り 替 える 難 易 度 オプションボタンで 選 択 されたサイズに 応 じて 画 像 の 拡 大 率 を 変 更 しま 実 行 結 果 8

9 Tips03 サムネイル 画 像 のサイズを 切 り 替 える HTML 03.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main03.js"></script> <link rel="stylesheet" type="text/css" href="style03.css"> </head> <body> <div> <input type="radio" name="size" value="small" checked> <input type="radio" name="size" value="medium"> <input type="radio" name="size" value="large"> </div> <div id="photo"> <img src="images/frog1.jpg" class="small"> <img src="images/frog2.jpg" class="small"> <img src="images/frog3.jpg" class="small"> </div> </body> </html> CSS style03.css.small { width: 50px;.medium { width: 100px;.large { width: 150px; JavaScript main03.js 01: $(function() { 02: $("input[name='size']").on("change", changesize); 03: ); 04: function changesize() { 05: $("#photo > img").removeclass(); 06: $("#photo > img").addclass($("input[name='size']: checked").val()); 07: 9

10 Appendix オプションボタンの 選 択 状 態 が 変 更 されると changesize 関 数 が 実 行 されま す まず 5 行 目 で 全 画 像 から 現 在 設 定 されているCSSクラスを 削 除 し 初 期 化 しています 次 に6 行 目 で 3 つあるオプションボタンのうち 現 在 選 択 中 のオプションボタン の value 属 性 値 を 取 得 し 全 画 像 に 対 し 同 名 のCSSクラスを 適 用 しています 例 ラジオボタンで 大 を 選 択 している 場 合 1 大 のvalue 属 性 値 である "large" が 取 得 される $("#photo > img").addclass($("input[name='size']:checked").val()); 2 画 像 に 対 してCSSクラス "large" が 適 用 される "large" $("#photo > img").addclass("large"); 10

11 Tips04 JavaScript が 有 効 かどうかをチェックする Tips JavaScriptが 有 効 か 04 どうかをチェックする 難 易 度 JavaScriptはブラウザの 設 定 で 無 効 にすることが 可 能 です 必 ずJavaScript を 動 作 させたいページでは ユーザーにスクリプトの 有 効 化 を 促 すメッセージ を 表 示 すると 良 いでしょう 実 行 結 果 JavaScriptが 有 効 な 場 合 JavaScriptが 無 効 な 場 合 11

12 Appendix HTML 04.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script> alert(" "); </script> </head> <body> <noscript>javascript </noscript> </body> </html> <noscript>タグは スクリプトが 動 作 しない 場 合 に 表 示 する 内 容 を 定 義 する タグです スクリプトが 有 効 になっている 場 合 <noscript>タグは 無 視 されま す 12

13 Tips05 テーブルの 特 定 行 を 強 調 する Tips テーブルの 特 定 行 を 05 強 調 する 難 易 度 テーブルの 各 行 のうち 特 定 の 文 字 列 を 含 む 行 を 強 調 表 示 します 例 とし て 会 員 名 簿 の 中 でゴールド 会 員 の 行 を 強 調 します 実 行 結 果 HTML 05.html <!DOCTYPE html> <html lang="ja"> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main05.js"></script> <link rel="stylesheet" type="text/css" href="style05.css"> </head> <body> <h1> </h1> <table id="userlist"> 13

14 Appendix <tr> <th>no</th> <th> </th> <th> </th> </tr> <tr> <td>1</td> <td> </td> <td> </td> </tr> <tr> <td>2</td> <td> </td> <td> </td> </tr> <tr> <td>3</td> <td> </td> <td> </td> </tr> <tr> <td>4</td> <td> </td> <td> </td> </tr> <tr> <td>5</td> <td> </td> <td> </td> </tr> </table> </body> </html> CSS style05.css table, th, td { padding: 0px 10px; border-collapse: collapse; /* */ border: solid 1px black; /* 1px */.highlight { background-color: blue; color: white; 14

15 Tips05 テーブルの 特 定 行 を 強 調 する JavaScript main05.js 01: $(function(){ 02: $("#userlist tr:contains(' ')").addclass("highlight"); 03: ); テーブルの 各 行 のうち "ゴールド"という 文 字 列 を 含 む 行 のみ 抽 出 し 強 調 表 示 用 のCSSクラス"highlight"を 適 用 しています 15

16 Appendix Tips 入 力 中 のテキストボックス 06 の 背 景 色 を 変 える 難 易 度 現 在 カーソルが 当 たっている 要 素 がどれであるかわかりやすく 見 せるため に 入 力 中 のテキストボックスの 背 景 色 を 変 えて 強 調 表 示 します 実 行 結 果 HTML 06.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main06.js"></script> </head> <body> <input type="text" name="text1"> <input type="text" name="text2"> <input type="text" name="text3"> </body> </html> 16

17 Tips06 入 力 中 のテキストボックスの 背 景 色 を 変 える JavaScript main06.js 01: $(function() { 02: $("input[type='text']").on("focus", function() { 03: $(this).css("background-color", "pink"); 04: ); 05: $("input[type='text']").on("blur", function() { 06: $(this).css("background-color", "white"); 07: ); 08: ); 各 テキストボックスにカーソルが 当 たったタイミングで 実 行 されるfocusイ ベントで 背 景 色 にピンクを 設 定 し カーソルが 外 れたタイミングで 実 行 される blurイベントで 背 景 色 を 白 に 戻 しています $(this)で 取 得 した 要 素 に 対 してス タイルを 適 用 しているので イベントの 発 生 元 であるテキストボックスにのみ 背 景 色 が 設 定 されます 17

18 Appendix Tips ローディング 画 面 を 07 表 示 する 難 易 度 Ajaxによるデータの 取 得 など ページの 表 示 までに 時 間 がかかる 処 理 を 実 行 する 場 合 に 読 込 中 であることを 表 わすローディング 画 面 を 表 示 します 第 13 章 で 紹 介 したリスト13.3(331ページ)のツイッター APIを 利 用 するサンプルに データの 取 得 中 はローディング 画 面 を 表 示 する 処 理 を 追 加 します 使 用 する 画 像 ローディング 画 像 (loading.png) 実 行 結 果 データ 取 得 中 データ 取 得 完 了 後 18

19 Tips07 ローディング 画 面 を 表 示 する HTML 07.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main07.js"></script> <link rel="stylesheet" type="text/css" href="style07.css"> </head> <body> <!-- --> <div id="wall"><img src="images/loading.png" class="loading"></div> <table> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> </table> </body> </html> CSS style07.css * { margin: 0; padding: 0; /* */ #wall { /* */ position: fixed; width: 100%; height: 100%; background-color: gray; /* */.loading { /* */ position: absolute; width: 160px; 19

20 Appendix height: 150px; top: 50%; left: 50%; margin-top: -75px; margin-left: -80px; JavaScript main07.js 01: $(function() { 02: $("#wall").show(); 03: var q = encodeuricomponent(" "); 04: $.getjson("http://search.twitter.com/search. json?callback=?&q=" + q, 05: function(data) { 06: for(var i=0; i<data.results.length; i++) { 07: $("table").append( 08: "<tr>" + 09: "<td><img src='" + data.results[i]. profile_image_url + "'></td>" + 10: + data.results[i].from_user + "</td>" + 11: "<td>" + data.results[i].from_user_name + "</td>" + 12: "<td>" + data.results[i].text + "</td>" + 13: "</tr>" 14: ); 15: // for 16: $("#wall").hide(); 17: // 18: ); 19: 20: ); Ajax 通 信 の 実 行 前 にローディング 画 面 を 表 示 し データの 取 得 が 完 了 したら ローディング 画 面 を 非 表 示 にする 処 理 を 行 なっています 取 得 完 了 後 のタイミ ングで 非 表 示 処 理 を 行 なうには getjson 関 数 の 引 数 であるコールバック 関 数 の 中 に 処 理 を 記 述 します ローディング 画 像 が 回 転 したりするアニメーションを 付 けたい 場 合 は 画 像 をGIFアニメーション( 複 数 のGIFファイルをつなぎ 合 わせた 形 式 )にしてお きます 20

21 Tips08 長 い 文 章 を 省 略 し 続 きを 読 む リンクを 表 示 する Tips 長 い 文 章 を 省 略 し 続 き 08 を 読 む リンクを 表 示 する 難 易 度 最 初 は 記 事 の 一 部 のみを 表 示 しておき リンクをクリックすることで 全 文 が 表 示 される ブログなどでよく 見 られる 機 能 を 作 成 します 実 行 結 果 初 期 表 示 続 きを 読 む をクリック 後 HTML 08.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> 21

22 Appendix <script src="main08.js"></script> </head> <body> <p id="content"> </p> <!-- --> <p id="omittext"></p> <a href="javascript:void(0)" rel="all"> </a> </body> </html> JavaScript main08.js 01: $(function() { 02: // 03: $("#content").hide(); 04: // 20 05: var omit = $("#content").text().slice(0, 20); 06: // 07: $("#omittext").text(omit); 08: $("a[rel='all']").on("click", showall); 09: ); 10: function showall() { 11: // 12: $(this).hide(); 13: // 14: $("#omittext").hide(); 15: // 16: $("#content").show(); 17: HTML 文 書 にはあらかじめ 記 事 全 文 を 記 述 しておき 初 期 表 示 時 に 全 文 の 非 表 示 化 と 省 略 記 事 の 抽 出 / 表 示 処 理 を 行 ないます 5 行 目 で 記 事 の 先 頭 から 20 文 字 分 の 文 字 列 を 抽 出 しています textメソッドはhtmlメソッドと 同 様 に 要 素 の 内 容 を 取 得 しますが 内 容 に 含 まれるタグは 除 外 されます 続 きを 読 む リンククリック 時 の 処 理 は showall 関 数 で 行 なっています リンクと 省 略 記 事 を 隠 し 記 事 全 文 を 表 示 して 初 期 表 示 時 と 逆 の 表 示 状 態 に しています 22

23 Tips08 長 い 文 章 を 省 略 し 続 きを 読 む リンクを 表 示 する なお 続 きを 読 む リンクのHTMLは 以 下 のように 定 義 されています <a href="javascript:void(0)" rel="all"> </a> <a>タグのhref 属 性 に"javascript:void(0)"を 指 定 すると <a>タグのリンク 機 能 が 無 効 化 されます リンククリック 時 にリンク 先 ページの 表 示 ではなく JavaScriptによる 処 理 を 実 行 したい 場 合 は href 属 性 にこの 記 述 を 入 れておく 必 要 があります 23

24 Appendix Tips 金 額 をカンマ 区 切 りで 09 表 示 する 難 易 度 数 字 のみで 入 力 された 金 額 を 3 桁 ごとにカンマで 区 切 って 表 示 します カ ンマ 表 記 への 変 換 は 正 規 表 現 を 使 って 行 ないます 実 行 結 果 24 HTML 09.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main09.js"></script> </head> <body> <input type="text" id="price"> <input type="button" id="btn" value=" "> </body> </html>

25 Tips09 金 額 をカンマ 区 切 りで 表 示 する JavaScript main09.js 01: $(function(){ 02: $("#btn").on("click", convert); 03: ); 04: function convert(){ 05: var price = $("#price").val(); 06: while (price.match(/([0-9]+)([0-9]{3)/)) { 07: price = price.replace(/([0-9]+)([0-9]{3)/, "$1,$2"); 08: 09: $("#price").val(price); 10: [ 変 換 ]ボタンがクリックされると convert 関 数 が 実 行 されます 5 行 目 で 入 力 された 金 額 を 取 得 し 変 数 priceに 代 入 しています テキストボックスの 入 力 値 は 必 ず 文 字 列 型 として 取 得 されます 6 行 目 から8 行 目 が カンマ 表 記 への 変 換 を 行 なっている 箇 所 です 6 行 目 のwhile 文 の 継 続 条 件 式 は priceの 値 が 正 規 表 現 にマッチしている 間 繰 り 返 しを 続 けるという 意 味 です この 正 規 表 現 のパターンは 1 文 字 以 上 の 数 字 列 と 3 文 字 の 数 字 列 が 隣 接 している ということを 表 わしています price.match(/[0-9]+[0-9]{3/) 1 文 字 以 上 の 数 字 列 3 文 字 の 数 字 列 続 いて7 行 目 では 金 額 にカンマを 挿 入 しています replaceメソッドでは 正 規 表 現 の 後 方 参 照 という 機 能 を 利 用 できます 後 方 参 照 とは パターン 文 字 列 のうち 丸 かっこ()で 囲 んだ 部 分 を 置 換 文 字 列 として 利 用 できる 機 能 で す price.replace(/([0-9]+)([0-9]{3)/, "$1,$2") という 数 字 列 が 入 力 された 場 合 を 例 とすると 最 初 の 繰 り 返 しで は 1234と567 がパターンにマッチし 1234,567 に 置 き 換 えられます 25

26 Appendix price.replace(/([0-9]+)([0-9]{3)/, "$1,$2") 1234, ,567 全 体 がマッチ 2 回 目 の 繰 り 返 しでは priceの 値 は 1234,567 になっているので パター ンにマッチするのは 1と234 で マッチした 箇 所 が 1,234 に 置 き 換 えられ ます price.replace(/([0-9]+)([0-9]{3)/, "$1,$2") 1234, , がマッチ これを 繰 り 返 していくことで 最 終 的 にパターンにマッチする 箇 所 がなくなり 3 桁 おきにカンマが 挿 入 された 文 字 列 が 完 成 する 仕 組 みとなっています 26

27 Tips10 開 閉 式 のメニューを 作 る Tips 10 開 閉 式 のメニューを 作 る 難 易 度 開 閉 ボタンをクリックするたびに メニューを 展 開 / 折 り 畳 みします 使 用 する 画 像 開 くボタン 閉 じるボタン (open.png)(close.png) 実 行 結 果 初 期 表 示 フードメニューを 開 く ドリンクメニューを 開 く 27

28 Appendix HTML 10.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main10.js"></script> </head> <body> <div class="menu"> <img src="images/open.png" name="open"> <img src="images/close.png" name="close"> <ul> <li> </li> <li> </li> <li> </li> </ul> </div> <div class="menu"> <img src="images/open.png" name="open"> <img src="images/close.png" name="close"> <ul> <li> </li> <li> </li> <li> </li> </ul> </div> </body> </html> 28 JavaScript main10.js 01: $(function() { 02: // 03: $(".menu ul").hide(); 04: // 05: $(".menu img[name='close']").hide(); 06: $(".menu img").on("click", visiblechange); 07: ); 08: function visiblechange() { 09: // 10: $(this).parent().children().toggle(); 11:

29 Tips10 開 閉 式 のメニューを 作 る まず 初 期 表 示 時 にメニューと 閉 じるボタンを 隠 します フードとドリンク の2つのメニューがあるので 両 方 の 要 素 をセレクタで 取 得 し 一 括 で 非 表 示 化 を 行 なう 処 理 を2 5 行 目 で 行 なっています ボタンがクリックされたときは visiblechange 関 数 が 実 行 されます 10 行 目 の 処 理 は メニュー 一 覧 および 開 閉 ボタンの 表 示 状 態 を 切 り 替 える 処 理 で す parent()は 対 象 要 素 の 親 要 素 を 取 得 します また children()は 要 素 が 持 つ 子 要 素 をすべて 取 得 します 10: $(this).parent().children().toggle(); イベントの 発 生 元 ( 開 閉 ボタン) 開 閉 ボタンの 親 <div> の 子 要 素 要 素 (<div>) (<img> 2 <ul>) 表 示 / 非 表 示 の 切 り 替 え 初 期 表 示 時 の 状 態 ( 濃 い 網 掛 けの 要 素 は 非 表 示 ) <div class="menu"> <img src="images/open.png" name="open"> <img src="images/close.png" name="close"> <ul> <li> </li> <li> </li> <li> </li> </ul> </div> <div class="menu"> <img src="images/open.png" name="open"> <img src="images/close.png" name="close"> <ul> <li> </li> <li> </li> <li> </li> </ul> </div> 29

30 Appendix フードメニュー の 開 くボタンがクリックされた 場 合 の 実 行 順 序 <div class="menu"> 1 $(this) <img src="images/open.png" name="open"> 2 parent() <img src="images/close.png" name="close"> 3 children() <ul> <li> </li> <li> </li> 4 3 つの 要 素 に <li> </li> 対 して toggle() </ul> を 実 行 </div> フードメニュー の 開 くボタンクリック 後 の 状 態 ( 濃 い 網 掛 けの 要 素 は 非 表 示 ) <div class="menu"> <img src="images/open.png" name="open"> <img src="images/close.png" name="close"> <ul> <li> </li> <li> </li> <li> </li> </ul> </div> <div class="menu"> <img src="images/open.png" name="open"> <img src="images/close.png" name="close"> <ul> <li> </li> <li> </li> <li> </li> </ul> </div> 30

31 Tips11 自 動 的 に 隠 れるナビゲーションメニューを 作 る Tips 自 動 的 に 隠 れるナビゲー 11 ションメニューを 作 る 難 易 度 マウスポインタの 位 置 に 応 じて ウィンドウ 上 部 に 表 示 されるナビゲーショ ンメニューの 表 示 状 態 を 切 り 替 えます 実 行 結 果 ウィンドウ 上 部 から30px 未 満 にマウスポインタがある 場 合 ウィンドウ 上 部 から30px 以 降 にマウスポインタがある 場 合 HTML 11.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> 31

32 Appendix <script src="main11.js"></script> <link rel="stylesheet" type="text/css" href="style11.css"> </head> <body> <div id="nav"> <ul> <li>top</li> <li>news</li> <li>gallery</li> <li>contact</li> </ul> </div> </body> </html> CSS style11.css * { margin: 0; padding: 0; #nav { position: fixed; /* */ width: 100%; height: 30px; background-color: blue; color: white; #nav ul{ list-style-type: none; /* */ #nav li { float: left; /* */ padding: 5px 20px; JavaScript main11.js 01: $(function() { 02: $("#nav").hide(); 03: $(window).on("mousemove", shownaviarea); 04: ); 05: function shownaviarea(e) { 06: if($("#nav").is(':hidden') && e.clienty < 30) { 07: $("#nav").slidedown(500); 08: else if($("#nav").is(':visible') && e.clienty >= 30){ 09: $("#nav").slideup(500); 10: 11: 32

33 Tips11 自 動 的 に 隠 れるナビゲーションメニューを 作 る マウスが 動 いたときに 処 理 を 行 なうには mousemoveイベントを 利 用 しま す 3 行 目 で ウィンドウ 上 でマウスポインタが 動 かされたときのイベントを 設 定 しています $(window).on("mousemove", shownaviarea); ウィンドウ 全 体 を 表 わす イベントが 発 生 すると shownaviarea 関 数 が 実 行 されます mousemove イベント 発 生 時 の 処 理 は 引 数 としてマウスポインタの 座 標 情 報 を 受 け 取 りま す 横 方 向 の 座 標 はclientXプロパティ 縦 方 向 の 座 標 はclientYプロパティに 入 っています 6 7 行 目 で ナビゲーションメニューをアニメーション 付 きで 表 示 する 処 理 を 行 なっています 表 示 条 件 は ナビゲーションメニューが 非 表 示 の 状 態 でか つ 縦 方 向 の 座 標 が 30px 未 満 の 場 合 です isメソッドは 対 象 の 要 素 がセレク タ 書 式 で 記 述 した 条 件 に 一 致 する 場 合 にtrueを 返 します 6: if($("#nav").is(':hidden') && e.clienty < 30) { ナビゲーションメニューが 非 表 示 状 態 かどうか マウスポインタの 縦 位 置 が 上 から 30px 未 満 かどうか 8 9 行 目 は ナビゲーションメニューが 表 示 状 態 でかつ 縦 方 向 の 座 標 が 30px 以 上 の 場 合 にナビゲーションメニューを 隠 す 処 理 です 8: else if($("#nav").is(':visible') && e.clienty >= 30){ ナビゲーションメニューが 表 示 状 態 かどうか マウスポインタの 縦 位 置 が 上 から 30px 以 降 かどうか 33

34 Appendix Tips ページトップへ 戻 る 12 ボタンを 表 示 する 難 易 度 ウィンドウを 下 にスクロールしたときに ページの 先 頭 へ 戻 るための 画 像 ボ タンを 表 示 します スクロールしていない 状 態 ではボタンは 表 示 しません 使 用 する 画 像 ページの 背 景 画 像 (fish.jpg) 戻 るボタン(top.png) 実 行 結 果 34 ページトップ スクロールした 状 態

35 Tips12 ページトップへ 戻 るボタンを 表 示 する HTML 12.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main12.js"></script> <link rel="stylesheet" type="text/css" href="style12.css"> </head> <body> <img src="images/top.png" id="topbtn"> </body> </html> CSS style12.css body { height: 500px; background-image: url("images/fish.jpg"); /* */ #topbtn { /* */ position: fixed; right: 10px; bottom: 10px; JavaScript main12.js 01: $(function(){ 02: $("#topbtn").hide(); 03: $("#topbtn").on("click", gototop); 04: $(window).on("scroll", showtopbtn); 05: ); 06: function showtopbtn() { 07: if($(window).scrolltop() > 0) { 08: $("#topbtn").show(); 09: else { 10: $("#topbtn").hide(); 11: 12: 13: function gototop() { 14: $("html,body").animate({ "scrolltop" : "0", 300); 15: $("#topbtn").hide(); 16: 35

36 Appendix まず 初 期 表 示 時 に 実 行 される 処 理 から 見 てみましょう 01: $(function(){ 02: $("#topbtn").hide(); 03: $("#topbtn").on("click", gototop); 04: $(window).on("scroll", showtopbtn); 05: ); 初 期 状 態 では 戻 るボタンは 表 示 しないので 2 行 目 で 非 表 示 処 理 を 行 なって います 3 行 目 と4 行 目 では 戻 るボタンクリック 時 のイベントとウィンドウス クロール 時 のイベントを 登 録 しています スクロールイベントは <window> 要 素 に 対 して 設 定 します 続 いて ウィンドウスクロール 時 に 実 行 されるshowTopbtn 関 数 です 06: function showtopbtn() { 07: if($(window).scrolltop() > 0) { 08: $("#topbtn").show(); 09: else { 10: $("#topbtn").hide(); 11: 12: showtopbtn 関 数 は 戻 るボタンの 表 示 状 態 を 制 御 します <window> 要 素 のscrollTopメソッドは 現 在 のスクロール 位 置 をピクセル 値 で 表 わします ページの 先 頭 を 表 示 している 場 合 scrolltop()が 返 す 値 は0となります この 関 数 では ウィンドウが 下 にスクロールされていれば 戻 るボタンを 表 示 し 未 スクロールの 状 態 では 戻 るボタンを 非 表 示 にする 処 理 を 行 なっています 最 後 に 戻 るボタンクリック 時 に 実 行 されるgotoTop 関 数 です 13: function gototop() { 14: $("html,body").animate({ "scrolltop" : "0", 300); 15: $("#topbtn").hide(); 16: 36

37 Tips12 ページトップへ 戻 るボタンを 表 示 する gototop 関 数 は 現 在 の 位 置 からページの 先 頭 までアニメーション 付 きで 移 動 する 処 理 を 行 ないます animateメソッドでscrolltopの 値 を 操 作 する 場 合 は <html> 要 素 と<body> 要 素 に 対 して 処 理 を 実 行 します <window> 要 素 に 対 してアニメーションを 実 行 してもうまく 動 作 しないので 気 をつけましょう 37

38 Appendix Tips スクロールで 画 像 が 13 めくれる 動 きを 表 現 する 難 易 度 あらかじめ 画 像 を2 枚 重 ねて 配 置 しておき ウィンドウを 下 にスクロールし たときに 前 面 の 画 像 がめくれて 背 面 の 画 像 が 見 えるような 動 作 を 実 現 しま す 使 用 する 画 像 高 さは 300px 前 面 の 画 像 (frog1.jpg) 背 面 の 画 像 (frog2.jpg) 画 像 の 配 置 イメージ 実 行 結 果 ページトップ 途 中 までスクロールした 状 態 下 までスクロールした 状 態 38

39 Tips13 スクロールで 画 像 がめくれる 動 きを 表 現 する HTML 13.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main13.js"></script> <link rel="stylesheet" type="text/css" href="style13.css"> </head> <body> <div id="over"><img src="images/frog1.jpg"></div> <div id="under"><img src="images/frog2.jpg"></div> </body> </html> CSS style13.css body { height: 2000px; /* */ div { /* */ position: fixed; left: 0px; top: 0px; height: 300px; /* */ /* frog2.jpg <div> */ #under { z-index: 1; /* */ /* frog1.jpg <div> */ #over { z-index: 2; /* */ overflow: hidden; 39

40 Appendix JavaScript main13.js 01: $(function(){ 02: $(window).on("scroll", peeloff); 03: ); 04: function peeloff() { 05: var scroll = $(window).scrolltop(); 06: var height = $("#over img").height(); 07: $("#over").css("height", height-scroll); 08: 2つの 画 像 はそれぞれ<div>タグで 囲 まれていて 前 面 の 画 像 を 囲 む<div> 要 素 には"over" 背 面 の 画 像 を 囲 む<div> 要 素 には"under"というIDが 付 けら れています <div> 要 素 は 左 上 に 固 定 表 示 するようにCSSで 設 定 しているため 2つの 画 像 はどちらも 同 じ 座 標 上 に 配 置 されていることになります div { /* */ position: fixed; left: 0px; top: 0px; height: 300px; /* */ 各 <div> 要 素 には それぞれz-indexを 指 定 しています z-indexは 重 なり 順 を 設 定 するプロパティです 数 値 が 大 きいほど 前 面 に 数 値 が 小 さいほど 背 面 に 表 示 されます また 前 面 の 画 像 を 囲 む<div> 要 素 にはoverflow: hidden; が 設 定 されている ため <div> 要 素 の 枠 からはみ 出 た 部 分 は 非 表 示 となります #under { z-index: 1; /* */ #over { 40

41 Tips13 スクロールで 画 像 がめくれる 動 きを 表 現 する z-index: 2; /* */ overflow: hidden; スクリプトの 内 容 は 単 純 です ウィンドウがスクロールされると peeloff 関 数 が 実 行 されます peeloff 関 数 では 前 面 の 画 像 を 囲 む<div> 要 素 の 高 さを 変 化 させる 処 理 を 行 なっています <div> 要 素 の 高 さは 画 像 の 高 さ スク ロール 量 で 求 めることができます なお 6 行 目 のheightメソッドは 要 素 の 高 さを 数 値 型 で 取 得 するメソッドです 05: var scroll = $(window).scrolltop(); 06: var height = $("#over img").height(); 07: $("#over").css("height", height-scroll); <div> 要 素 の 高 さは 画 像 と 同 じ 300px 140px 分 スクロールした 場 合 300px 140px=160px を <div> 要 素 の 高 さとして 設 定 する 前 面 の <div> 要 素 の 高 さが 減 った 分 背 面 の 画 像 が 見 えるようになる 41

42 Appendix Tips ドアが 開 くような 14 アニメーションを 表 現 する 難 易 度 ある 画 像 の 前 面 に2 枚 の 扉 画 像 を 重 ねて 配 置 しておき どちらかの 扉 画 像 を クリックするとドアが 左 右 に 開 いていくように 見 える 動 作 を 実 現 します 使 用 する 画 像 幅 は400px 背 面 の 画 像 (frog1.jpg) 幅 は 200px 前 面 の 画 像 (left.png と right.png) 画 像 の 配 置 イメージ 実 行 結 果 初 期 表 示 42

43 Tips14 ドアが 開 くようなアニメーションを 表 現 する 扉 画 像 をクリックするとドアが 開 くような 動 作 をする HTML 14.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main14.js"></script> <link rel="stylesheet" type="text/css" href="style14.css"> </head> <body> <div class="door"> <img src="images/frog1.jpg" id="photo"> <img src="images/left.png" id="left"> <img src="images/right.png" id="right"> </div> </body> </html> 43

44 Appendix CSS style14.css body { padding: 20px; /* 3 */.door { position: relative; width: 400px; left: 200px;.door img { /* <div> */ position: absolute; top: 0px; #photo { z-index: 1; /* */ left: 0px; #left { z-index: 2; /* */ left: 0px; /* */ #right { z-index: 2; /* */ left: 200px; /* */ JavaScript main14.js 01: $(function(){ 02: $("#left,#right").on("click", opendoor); 03: ); 04: function opendoor() { 05: $("#left").animate({"left" : "-200px", 400); 06: $("#right").animate({"left" : "400px", 400); 07: 写 真 の 前 面 に 左 右 の 扉 画 像 が2 枚 配 置 されています 扉 画 像 はそれぞれ 親 の<div> 要 素 の 左 上 を 基 準 とした 相 対 位 置 に 配 置 されています 44

45 Tips14 ドアが 開 くようなアニメーションを 表 現 する 色 付 き 枠 部 分 が 親 の <div> 要 素 0px 200px 扉 画 像 のどちらかがクリックされると 左 の 扉 画 像 は 親 の<div> 要 素 の 左 端 から-200pxの 位 置 へ 右 の 扉 画 像 は 親 の<div> 要 素 の 左 端 から400pxの 位 置 へ 移 動 します 色 付 き 枠 部 分 が 親 の <div> 要 素 -200px 0px 400px 45

46 Appendix Tips 15 アバター 機 能 を 作 る 難 易 度 アバター 画 像 に 対 して ユーザーが 選 択 した 服 を 着 せる 機 能 を 実 装 します アバター 画 像 の 前 面 に 同 じ 大 きさの 着 替 え 画 像 を 重 ねることで 服 を 着 ている ように 見 せることができます 使 用 する 画 像 160px 140px アバター 画 像 (human.png) 着 替 え 画 像 (plain.png / star.png / heart.png) 大 きさはアバター 画 像 と 同 じ 服 の 周 りの 余 白 は 透 過 色 アバター 画 像 着 替 え 画 像 ともに 実 際 の 画 像 には 枠 は 付 いていません 画 像 の 配 置 イメージ 46

47 Tips15 アバター 機 能 を 作 る 実 行 結 果 選 択 した 服 に 着 せ 替 える 初 期 表 示 着 替 え 画 像 をクリック HTML 15.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main15.js"></script> <link rel="stylesheet" type="text/css" href="style15.css"> </head> <body> <!-- --> <div id="avatar"> <img src="images/human.png" id="human"> </div> <!-- --> <div id="clothes"> <img src="images/plain.png"> <img src="images/star.png"> <img src="images/heart.png"> </div> </body> </html> 47

48 Appendix CSS style15.css /* */ #avatar { position: relative; width: 140px; height: 160px; margin: 10px auto; /* */ #avatar img { position: absolute; top: 0px; left: 0px; /* */ #clothes { white-space: nowrap; /* */ #clothes img { width: 100px; /* */ border: solid 1px black; JavaScript main15.js 01: $(function() { 02: $("#clothes img").on("click", changeclothes); 03: ); 04: function changeclothes() { 05: $("#avatar img:not(#human)").remove(); 06: $("#avatar").append($(this).clone()); 07: 着 せ 替 え 画 像 一 覧 のうちいずれかをクリックすると changeclothes 関 数 が 実 行 されます まず アバター 画 像 を 初 期 化 する 処 理 を 行 ないます 5 行 目 で は アバター 表 示 エリアから アバター 画 像 以 外 の 画 像 をすべて 削 除 していま す remove()は 対 象 の 要 素 を 削 除 するメソッドです これにより すでにアバ ターに 服 が 着 せられている 場 合 も 裸 の 状 態 に 戻 ります 48

49 Tips15 アバター 機 能 を 作 る 05: $("#avatar img:not(#human)").remove(); 1 アバター 表 示 エリアのうち IDが"human" の 画 像 以 外 を 取 得 2 取 得 した 画 像 を 削 除 続 いて 6 行 目 で 選 択 された 画 像 を 複 製 し アバター 表 示 エリアに 追 加 して います clone()は 対 象 の 要 素 のコピーを 生 成 するメソッドです 06: $("#avatar").append($(this).clone()); 3 アバター 表 示 エリアの 末 尾 に 追 加 1 クリックされ た 画 像 を 取 得 2 画 像 を 複 製 複 数 の 要 素 が 同 じ 座 標 に 配 置 される 場 合 後 ろに 挿 入 された 要 素 ほど 前 面 に 表 示 されます よってこのサンプルではz-indexで 重 ね 順 を 指 定 する 必 要 はあ りません 49

50 Appendix Tips 16 タブメニューを 作 る 難 易 度 タブメニューのクリックにより 対 応 するコンテンツを 表 示 します 同 時 に 現 在 アクティブなタブが 最 前 面 に 表 示 されているような 視 覚 効 果 を 表 現 しま す 実 行 結 果 50

51 Tips16 タブメニューを 作 る HTML 16.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main16.js"></script> <link rel="stylesheet" type="text/css" href="style16.css"> </head> <body> <div id="tabarea"> <div id="top" class="tab active"> <span>top</span> </div> <div id="about" class="tab"> <span>about</span> </div> <div id="access" class="tab"> <span>access</span> </div> </div> <!-- --> <div id="content"> <div id="content-top"> Web </div> <div id="content-about" class="hidden"> </div> <div id="content-access" class="hidden"> 10 </div> </div> </body> </html> CSS style16.css #content { width: 400px; height: 100px; padding: 20px; margin-top: 1px; /* 1px */ border: solid 1px black; z-index: 1; /* */ #tabarea { 51

52 Appendix height: 30px; white-space: nowrap; z-index: 2; /* */.tab { width: 80px; height: 30px; padding-left: 10px; display: inline-block; /* */ border: solid 1px black; border-radius: 5px 5px 0 0; /* */ background-color: white; cursor: pointer; /* */.active { border-bottom: solid 1px white; /* */.tab span { line-height: 30px; /* 1 */.hidden { display: none; JavaScript main16.js 01: $(function() { 02: $("#tabarea.tab").on("click", tabchange); 03: ); 04: function tabchange() { 05: // 06: $("#tabarea.tab").removeclass("active"); 07: $("#content div").hide(); 08: 09: // 10: $(this).addclass("active"); 11: var id = $(this).attr("id"); 12: $("#content-" + id).show(); 13: タブは <div> 要 素 のまわりにCSS で 線 を 引 いて 作 成 します 52

53 Tips16 タブメニューを 作 る.tab { width: 80px; height: 30px; padding-left: 10px; display: inline-block; /* */ border: solid 1px black; border-radius: 5px 5px 0 0; /* */ background-color: white; cursor: pointer; /* */ <div> 要 素 に "tab" クラスを 適 用 した 状 態 現 在 選 択 中 のアクティブなタブは 下 線 のみ 白 で 描 画 します.active { border-bottom: solid 1px white; /* */ <div> 要 素 に "tab" クラスと "active" クラスを 適 用 した 状 態 同 様 に コンテンツ 表 示 エリアも<div> 要 素 のまわりに 線 を 引 いて 作 成 しま す 線 は 要 素 の 外 側 に 描 画 されるため <div> 要 素 が 隣 接 している 場 合 は 線 が 重 なり 合 って 表 示 されます この 微 妙 なズレを 調 整 するために コンテンツ 表 示 エリアの 上 に 余 白 をとっ て 1px 分 下 にずらします 53

54 Appendix さらに z-indexプロパティでタブをコンテンツ 表 示 エリアの 前 面 に 重 なる ように 指 定 します タブに"active"クラスが 指 定 されている 場 合 は 下 線 が 白 で 表 示 されるため タブとコンテンツ 表 示 エリアを 区 切 る 線 が 隠 れ 1 枚 のつな がった 紙 のように 見 えます #content { width: 400px; height: 100px; padding: 20px; margin-top: 1px; /* 1px */ border: solid 1px black; z-index: 1; /* */ #tabarea { height: 30px; white-space: nowrap; z-index: 2; /* */ 各 タブがクリックされると tabchange 関 数 が 実 行 されます まず 6 行 目 と7 行 目 では 全 タブから"active"クラスを 削 除 し 各 コンテンツを 非 表 示 にする 初 期 化 処 理 を 行 なっています 10 行 目 では イベントの 発 生 元 であるタブに 対 して"active"クラスを 適 用 し ています 11 行 目 12 行 目 ではイベント 発 生 元 のタブが 持 つID 値 を 取 得 し タブに 対 応 するコンテンツを 表 示 しています 54

55 Tips16 タブメニューを 作 る about タブがクリックされた 場 合 <div id="tabarea"> <div id="top" class="tab active"> <span>top</span> </div> <div id="about" class="tab"> <span>about</span> </div> <div id="access" class="tab"> <span>access</span> </div> </div> <!-- --> <div id="content"> イベントの 発 生 元 "content-" + タブの ID が 対 応 するコンテンツ <div id="content-top"> Web </div> <div id="content-about" class="hidden"> </div> <div id="content-access" class="hidden"> 10 </div> </div> 55

56 Appendix Tips サムネイル 画 像 付 きの 17 スライドショーを 作 る 難 易 度 第 14 章 のリスト14.8(355ページ)で 作 成 したスライドショーを 改 造 して サムネイル 一 覧 の 中 から 選 択 した 画 像 まで 一 気 に 移 動 する 機 能 を 作 成 します 実 行 結 果 選 択 した 画 像 に スライドする HTML 17.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main17.js"></script> <link rel="stylesheet" type="text/css" href="style17.css"> </head> 56

57 Tips17 サムネイル 画 像 付 きのスライドショーを 作 る <body> <!-- --> <div id="photoframe"> <div id="imagearea"></div> </div> <!-- --> <div id="naviarea"></div> </body> </html> CSS style17.css * { margin: 0; padding: 0; #photoframe { position: relative; width: 200px; height: 150px; left: 50%; margin: 30px 0px 30px -100px; /* */ overflow: hidden; /* */ #imagearea { position: absolute; left: 0px; width: 1000px; height: 150px; white-space: nowrap; #imagearea img { width: 200px; height: 150px; /* */ #naviarea { position: relative; width: 400px; left: 50%; margin-left: -200px; /* */ white-space: nowrap; #naviarea img{ width: 80px; 57

58 Appendix JavaScript main17.js 01: $(function() { 02: var imagearea = $("#imagearea"); // 03: var naviarea = $("#naviarea"); // 04: 05: // 06: for(var i=1; i<=5; i++) { 07: imagearea.append("<img src='images/flower" + i + ".jpg'>"); 08: naviarea.append("<img src='images/flower" + i + ".jpg'>"); 09: 10: 11: // 12: $("#naviarea img").on("click", moveimagearea); 13: ); 14: function moveimagearea() { 15: var imagearea = $("#imagearea"); 16: // 17: var src = $(this).attr("src"); 18: // 19: var targetposition = imagearea.find( "img[src='" + src + "']").position().left * -1; 20: // 21: imagearea.animate({"left" : targetposition, 500); 22: まず 6 9 行 目 で スライドショー 表 示 エリアとサムネイル 画 像 表 示 エリア の 両 方 にまったく 同 じ 画 像 を5 件 挿 入 しています サムネイル 画 像 表 示 エリアのいずれかの 画 像 がクリックされると move ImageArea 関 数 が 実 行 されます 17 行 目 では 選 択 されたサムネイル 画 像 のsrc 属 性 を 取 得 しています 19 行 目 で 同 じsrc 属 性 が 設 定 されている 画 像 をスライドショー 表 示 エリアの 中 から 検 索 し 画 像 の 左 位 置 を 取 得 しています リスト14.8では 左 位 置 をcss メソッドで 取 得 していましたが 今 回 その 方 法 は 使 えません cssメソッド は CSSで 明 示 的 にプロパティを 指 定 している 場 合 にのみ 有 効 です スライド ショー 表 示 エリアにはleftプロパティが 設 定 されていますが その 中 の<img> 要 素 1つ1つには 設 定 していないので cssメソッドでleftプロパティを 取 得 す ると 返 却 される 値 は"auto"になります このような 場 合 positionというメソッ ドを 利 用 します position()は 親 要 素 に 対 する 要 素 の 相 対 位 置 を 取 得 します 58

59 Tips17 サムネイル 画 像 付 きのスライドショーを 作 る プロパティとして top と left があり 位 置 情 報 を 数 値 型 で 保 持 しています flower3.pngが 選 択 された 場 合 を 例 として 解 説 します imagearea.find("img[src='" + src + "']").position().left * -1; クリックされたサムネイル 画 像 の src 属 性 値 imagearea.find("img[src='images/flower3.png']").position().left * -1; スライドショー 表 示 エリアの 中 から flower3.png を 表 示 している img 要 素 を 取 得 最 後 にposition().leftで 取 得 した 左 位 置 に 対 して-1を 掛 けています これはスラ イドショー 表 示 エリアのleftプロパティとして 設 定 すべき 値 を 算 出 する 処 理 です 初 期 表 示 時 imageareaのleftは0pxに 設 定 されています flower3.pngを 表 示 領 域 であるphotoFrame 内 に 配 置 するには flower3.png のleftを0pxの 位 置 に 移 動 しなければなりません そのためには スライド ショー 表 示 エリアのleftを-400pxに 設 定 する 必 要 があるのです このようにして 算 出 した 位 置 までスライドショー 表 示 エリアをanimateメ ソッドで 移 動 させることで 指 定 画 像 まで 一 気 にスライドさせる 処 理 を 実 現 し ています 59

60 Appendix Tips ループする 18 スライドショーを 作 る 難 易 度 第 14 章 のリスト14.8(355ページ)で 作 成 したスライドショーを 画 像 がルー プして 表 示 されるように 改 造 します 実 行 結 果 flower5.jpg flower1.jpg 次 へ 前 へ HTML 18.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main18.js"></script> <link rel="stylesheet" type="text/css" href="style18.css"> </head> <body> <div id="photoframe"> 60

61 Tips18 ループするスライドショーを 作 る <div id="imagearea0" class="imagearea"></div> <div id="imagearea1" class="imagearea"></div> </div> <div> <button id="prev"> </button> <button id="next"> </button> </div> </body> </html> CSS style18.css * { margin: 0; padding: 0; body { padding: 30px; #photoframe { position: relative; width: 200px; height: 150px; overflow: hidden;.imagearea { position: absolute; width: 1000px; height: 150px; white-space: nowrap; #imagearea0 { left: -1000px; #imagearea1 { left: 0px; img { width: 200px; height: 150px; 61

62 Appendix JavaScript main18.js 01: var currentindex = 1; 02: 03: $(function() { 04: var photoframe = $("#photoframe"); 05: for(var i=1; i<=5; i++) { 06: photoframe.find(".imagearea").append( "<img src='images/flower" + i + ".jpg'>"); 07: 08: 09: $("#next").on("click", function() { 10: todisabled(); 11: photoframe.find(".imagearea").animate( 12: {"left" : "-=200px", "fast", "linear", next); 13: ); 14: 15: $("#prev").on("click", function() { 16: todisabled(); 17: photoframe.find(".imagearea").animate( 18: {"left" : "+=200px", "fast", "linear", prev); 19: ); 20: ); 21: 22: function next() { 23: // imagearea 24: var otherindex = 1 - currentindex; 25: if(parseint($("#imagearea" + currentindex). css("left")) == -800) { 26: // 27: // imagearea left photoframe 28: $("#imagearea" + otherindex).css("left", "200px"); 29: 30: else if(parseint($("#imagearea" + currentindex). css("left")) == -1000) { 31: // imagearea 32: currentindex = otherindex; 33: 34: toenabled(); 35: 36: 37: function prev() { 38: // imagearea 39: var otherindex = 1 - currentindex; 40: if(parseint($("#imagearea" + currentindex). css("left")) == 0) { 41: // 42: // imagearea left photoframe 43: $("#imagearea" + otherindex).css("left", "-1000px"); 44: 62

63 Tips18 ループするスライドショーを 作 る 45: else if(parseint($("#imagearea" + currentindex). css("left")) == 200) { 46: // imagearea 47: currentindex = otherindex; 48: 49: toenabled(); 50: 51: 52: function todisabled() { 53: $("#prev, #next").attr("disabled", "disabled"); 54: 55: 56: function toenabled() { 57: $("#prev, #next").removeattr("disabled"); 58: スライドショーのループを 実 現 するには imagearea(5 件 分 の 画 像 を 囲 む <div> 要 素 )を2つ 用 意 します 末 尾 の 画 像 あるいは 先 頭 の 画 像 を 表 示 した タイミングで 隠 れているほうのimageAreaのleftプロパティを 操 作 し 左 右 のどちらかに 移 動 します 以 下 のような 実 行 イメージになります [ 次 へ]ボタンがクリックされて 末 尾 の 画 像 が 表 示 されたとき 63

64 Appendix [ 前 へ]ボタンがクリックされて 先 頭 の 画 像 が 表 示 されたとき まず あらかじめHTML 文 書 にimageAreaを2 つ 用 意 しておきます IDは それぞれimageArea0とimageArea1としています 末 尾 の0と1は それぞれ を 識 別 するためのインデックスとして 利 用 します また 両 方 に 同 じクラス 名 を 設 定 しているので 2つまとめて 操 作 することもできます <div id="photoframe"> <div id="imagearea0" class="imagearea"></div> <div id="imagearea1" class="imagearea"></div> </div> CSSでは 各 imageareaのleftプロパティに 初 期 位 置 を 設 定 しています 最 初 はimageArea0をphotoFrame( 可 視 領 域 )の 左 側 に 隠 し imagearea1の 1 番 目 の 画 像 が 表 示 されるように 配 置 します #imagearea0 { left: -1000px; #imagearea1 { left: 0px; 64

65 Tips18 ループするスライドショーを 作 る 各 imageareaの 初 期 位 置 以 降 現 在 表 示 されているほうのimageAreaのことを カレントimage Area と 表 現 します カレントとは 現 在 の という 意 味 です それでは JavaScriptのコードを 順 に 追 っていきましょう まず 1 行 目 ではグローバル 変 数 currentindexを 宣 言 し 初 期 値 としてカレ ントimageAreaのインデックスを 代 入 しています 01: var currentindex = 1; 4 7 行 目 でimageAreaの 親 要 素 であるphotoFrameを 取 得 し 子 要 素 の imageareaに 画 像 をロードしています imageareaは2つあるので 両 方 に まったく 同 じ5 件 分 の<img> 要 素 が 挿 入 されます 03: $(function() { 04: var photoframe = $("#photoframe"); 05: for(var i=1; i<=5; i++) { 06: photoframe.find(".imagearea").append( "<img src='images/flower" + i + ".jpg'>"); 07: 9 ~ 13 行 目 は [ 次 へ]ボタンクリック 時 の 処 理 です アニメーション 完 了 後 にnext 関 数 を 実 行 します 15 ~ 19 行 目 は [ 前 へ]ボタンクリック 時 の 処 理 で こちらはアニメーショ ン 完 了 後 にprev 関 数 を 実 行 します 続 いて このサンプルの 胆 の 部 分 であるimageAreaの 移 動 処 理 を 行 なう next 関 数 を 見 ていきましょう 65

66 Appendix 22: function next() { 23: // imagearea 24: var otherindex = 1 - currentindex; まず 24 行 目 で 隠 れているほうの imagearea のインデックスを 取 得 していま す インデックスは 以 下 の 計 算 式 によって 算 出 することが 可 能 です 隠 れているほうの imagearea のインデックスを 求 める 計 算 式 1 - imagearea Hint 計 算 式 の 考 え 方 カレントのインデックスが1の 場 合 隠 れているほうのインデックスは 0 カレントのインデックスが0の 場 合 隠 れているほうのインデックスは 1 カレントのインデックスを 反 転 させれば もう 一 方 のインデックスを 得 ることが できる 実 際 にimageAreaを 移 動 する 処 理 は 25 ~ 29 行 目 のifブロック 内 で 行 なっ ています 25: if(parseint($("#imagearea" + currentindex). css("left")) == -800) { 26: // 27: // imagearea left photoframe 28: $("#imagearea" + otherindex).css("left", "200px"); 29: if 文 の 条 件 式 では カレントimageAreaの 末 尾 の 画 像 を 表 示 しているかどう かを 判 定 しています 次 のように 変 数 を 使 って 記 述 することで 動 的 にセレク タを 生 成 できます 66

67 Tips18 ループするスライドショーを 作 る カレントimageArea のインデックスが 1 の 場 合 $("#imagearea" + currentindex) 1 $("#imagearea1") 末 尾 の 画 像 を 表 示 している 場 合 カレントimageAreaのleftは-800pxです このときに 隠 れているほうのimageAreaを 右 側 に 移 動 します photoframe ( 可 視 領 域 )の 右 側 に 配 置 するためには leftに200pxを 設 定 します 末 尾 の 画 像 を 表 示 しているときの 配 置 隠 れているほうのimageArea を 移 動 した 後 の 配 置 画 像 が 末 尾 に 達 するたびにこの 処 理 を 繰 り 返 すことにより あたかも 画 像 が 延 々とつながっているかのように 見 せることができるのです また next 関 数 ではcurrentIndexの 値 を 変 更 する 処 理 も 行 なっています 30: else if(parseint($("#imagearea" + currentindex). css("left")) == -1000) { 31: // imagearea 32: currentindex = otherindex; 33: 30 ~ 33 行 目 のelse if 文 では カレントimageAreaがphotoFrame( 可 視 領 域 ) から 外 れたタイミングで 今 まで 隠 れていたほうをカレントに 設 定 し 直 しています 67

68 Appendix カレントimageArea が photoframe から 外 れたときの 配 置 [ 前 へ]ボタンをクリックしたときのprev 関 数 もほぼ 同 じことを 行 なってい ます 相 違 点 は leftプロパティの 設 定 値 のみです 37: function prev() { 38: // imagearea 39: var otherindex = 1 - currentindex; 40: if(parseint($("#imagearea" + currentindex). css("left")) == 0) { 41: // 42: // imagearea left photoframe 43: $("#imagearea" + otherindex).css("left", "-1000px"); 44: 45: else if(parseint($("#imagearea" + currentindex). css("left")) == 200) { 46: // imagearea 47: currentindex = otherindex; 48: 49: toenabled(); 50: Hint より 良 いコードの 記 述 方 法 next 関 数 とprev 関 数 は leftプロパティの 設 定 値 が 異 なるだけで まったく 同 じ 処 理 を 行 なっています 見 た 目 にはわかりやすいのですが 実 はこのような 冗 長 なスクリプトはあまり 好 ましくありません なんらかの 変 更 を 加 えようとしたとき に 両 方 の 関 数 を 修 正 しなければならなくなるため メンテナンス 性 が 劣 るのです 改 善 例 としては まず 関 数 を1つにまとめ 引 数 で 次 へ 前 へ のどちらの 処 理 なのかを 示 す 値 を 受 け 取 ります leftプロパティの 設 定 値 群 は あらかじめ 変 数 や 配 列 に 保 持 しておき 引 数 に 応 じて 適 切 なほうを 選 択 します 画 像 の 数 を 増 やしても 動 作 するように 画 像 のwidthプロパティを 元 にしてleftプロパティ の 設 定 値 を 動 的 に 算 出 できれば さらに 良 いスクリプトになるでしょう なお animateメソッドのコールバック 関 数 は 関 数 名 または 関 数 式 の 形 式 でな ければ 記 述 できないため 引 数 を 渡 す 場 合 は 関 数 呼 び 出 しを 匿 名 関 数 で 内 包 する 必 要 があります 詳 しくは 第 10 章 の 引 数 のある 関 数 をイベントハンドラに 設 定 する (246ページ)を 参 考 にしてください 68

69 Tips19 一 定 時 間 おきに 自 動 で 動 くスライドショーを 作 る Tips 一 定 時 間 おきに 自 動 で 19 動 くスライドショーを 作 る 難 易 度 Tips18のループするスライドショーのサンプルを ボタンクリックではな く5 秒 おきに 自 動 で 画 像 が 流 れるように 改 造 します 実 行 結 果 flower1.jpg flower2.jpg 5 秒 後 HTML 19.html [ 前 へ][ 次 へ]ボタンを 削 除 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript </title> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.9.1/jquery.min.js"></script> <script src="main19.js"></script> <link rel="stylesheet" type="text/css" href="style18.css"> </head> <body> <div id="photoframe"> 69

70 Appendix <div id="imagearea0" class="imagearea"></div> <div id="imagearea1" class="imagearea"></div> </div> <div> <button id="prev"> </button> <button id="next"> </button> </div> </body> </html> CSS style18.css 変 更 なし 70 JavaScript main19.js 網 掛 けの 箇 所 が 変 更 点 01: $(function() { 02: var photoframe = $("#photoframe"); 03: for(var i=1; i<=5; i++) { 04: photoframe.find(".imagearea").append( "<img src='images/flower" + i + ".jpg'>"); 05: 06: 07: // 5 08: setinterval(slide, 5000); 09: // 10: ); 11: 12: function slide() { 13: $("#photoframe").find(".imagearea").animate( 14: {"left" : "-=200px", "fast", "linear", next); 15: 16: 17: currentindex = 1; 18: 19: function next() { 20: // imagearea 21: var otherindex = 1 - currentindex; 22: if(parseint($("#imagearea" + currentindex). css("left")) == -800) { 23: // 24: // imagearea left photoframe 25: $("#imagearea" + otherindex).css("left", "200px"); 26: 27: else if(parseint($("#imagearea" + currentindex). css("left")) == -1000) { 28: // imagearea 29: currentindex = otherindex; 30: 31: // toenabled(); 32: 33: //

71 Tips19 一 定 時 間 おきに 自 動 で 動 くスライドショーを 作 る 前 述 のサンプルとの 相 違 点 は 次 へ ボタンクリック 時 の 処 理 をsetInterval メソッドで 定 期 実 行 している 点 です これにより ユーザーが 何 も 操 作 しなく ても 一 定 間 隔 で 画 像 がスライドしていきます 71

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html

More information

■新聞記事

■新聞記事 情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

html_text

html_text HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

WORD 98 入力の手引き

WORD 98 入力の手引き コンピュータ 基 礎 実 習 ( 上 級 ) 第 13 週 スタイルシートの 基 礎 今 回 の 授 業 は スタイルシート(CSS)の 使 い 方 を 解 説 します 1. CSS の 基 本 1.1. CSS とは CSS は Cascading Style Sheets の 略 で ウェブページの 見 栄 えを 設 定 するための 言 語 です CSS は 最 近 多 くのサイトで 使 用 され

More information

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

Microsoft PowerPoint - A07回目②.pptx

Microsoft PowerPoint - A07回目②.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 7 回 目 2 11/14 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I. JavaScript( 画 像 関 係 ) II. 課 題 3 I.JavaScript 1.JavaScriptを 使 用 するためのお 約 束 4 の 間 に

More information

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 では タグの 省 略 は 一 切 認 められていない 第 2 問 インターネット 上 のすべてのコンピュータは イーサネットで 繋 がっている 第 3 問 新 規 にウェブサイトを 公 開 する 際 は HTML ドキュメントをアップロードした 後 に

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web 1 Web Web 1 Web HTML 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML HTML5 takahagi

More information

(1) ,,,,, <> ( ) (/ ) (2) HTML5 (3) HTML (4) html (ja) (5) JavaScript CSS (6)

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript

More information

クリック クリック リンクを 張 るためのタグ タグ ~ リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522

More information

textbook.indd

textbook.indd 02 XHTML+CSS part2 CSS Topics 前 回 習 得 した 基 礎 CSS を 元 に ボックス CLASS ID の 概 念 を 習 得 ボックスレイアウトを 用 いた 2 カラムのサイト 構 築 をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

Microsoft Word - メディア技術基礎.docx

Microsoft Word - メディア技術基礎.docx メディア 技 術 基 礎 (Web) 脇 田 玲 先 生 (2010) 田 中 浩 也 (2011) HTML の 基 本 的 な 書 き 方 テキストエディタで index.html を 作 成 して 以 下 のサンプルを 入 力 してみましょう 始 めの 2 行 は HTML を 書 く 前 のおまじないの 様 なものです ここで 登 場 する HTML タグについての 説 明 は 以 下 の

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互

More information

第9回

第9回 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利

More information

JavaScriptプログラミング入門

JavaScriptプログラミング入門 JavaScript 2015 8 15 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................

More information

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます " 出 し"の 部 分 をクリックすると"コンテンツですよ "の 字 が 表 されます もう 度 " 出 し"をクリックすると"コンテンツですよ "の 字 が 非 表 になります 折 りたたみパネルの 基

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます  出 しの 部 分 をクリックするとコンテンツですよ の 字 が 表 されます もう 度  出 しをクリックするとコンテンツですよ の 字 が 非 表 になります 折 りたたみパネルの 基 / 0/0/ : [CSS] 折 りたたみ 可 能 なパネルの 作 成 - CSSのみを 利 した 折 りたたみ 領 域 / アコー ディオンパネル このページのタグ:[CSS] [アコーディオンパネル] 新 着 記 事 覧 タグ 覧 トップページ ipentec.com CSSのみを 利 した 折 りたたみ 可 能 なパネル( 折 りたたみ 可 能 領 域 )を 実 現 するコードを 紹 介 します

More information

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます JavaScript サンプル function write(str) { document.write(str); } write('hello World!'); 上 例 のように

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます <TITLE>JavaScript サンプル</TITLE> function write(str) { document.write(str); } write('hello World!'); 上 例 のように 情 報 メディアとインターネット 授 業 資 料 (2011.7.4) 1.HTML の 基 本 HTML ファイルというのは 例 えば 以 下 のような 内 容 のテキストファイルです 拡 張 子 を.html また は.htm とするのが 普 通 で Web ブラウザで 読 み 込 まれて 中 身 の 表 示 が 行 われます Simple HTML File Hello

More information

(Microsoft Word - \203X\203\215\203b\203g\203}\203V\203\223.doc)

(Microsoft Word - \203X\203\215\203b\203g\203}\203V\203\223.doc) JavaScript (スロットマシン) ここでは JavaScript を 使 ってスロットマシンを 作 ります スロットマシンを 作 る と 言 っても そう 難 しいものではありません 3 枚 のボードの 数 字 を0から9まで 順 番 に 表 示 して ボタンをクリックすると それぞ れの 札 の 動 きが 止 まり その 結 果 によってメッセージが 異 なる このようなものを 作 りましょう

More information

1/2

1/2 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト (2) 1 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト HTMLの 基 礎 知 識 (2) 1 画 像 の 表 示 HPに 画 像 を 表 示 させてみる まず HTML 文 書 と 同 じフォルダ 内 にJPEGファイル( 拡 張 子.jpg )を1 個 準 備 する ( 画

More information

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と ウェブデザイン 技 能 検 定 3 級 実 技 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

More information

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

to-r

to-r to-r We re targeting a 1.0 release within the next few weeks. 1.0 IE6 jquery Mobile Sample

More information

jQuery_004_012_mkj(02).indd

jQuery_004_012_mkj(02).indd はじめに Flash Flash JavaScript jquery JavaScript jquery Web プログラム 経 験 の 少 ないデザイナーでも 容 易 に 理 解 できる 構 成 jquery jquery jquery 1 Web jquery Web SB 23 11 3 Contents コードの 解 説 39 サンプルコードを 書 き 替 えてみよう! 40 Column

More information

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

第 10 問 HTML5 の h1 h6 要 素 は 単 なる 見 出 し ではなく セクションの 見 出 し を 表 す 第 11 問 ウェブページの 表 示 方 法 は CSS で 指 定 されるものであるため 記 述 する HTML の 文 法 に 誤 りがあったとしても 表 示 に 影 響

第 10 問 HTML5 の h1 h6 要 素 は 単 なる 見 出 し ではなく セクションの 見 出 し を 表 す 第 11 問 ウェブページの 表 示 方 法 は CSS で 指 定 されるものであるため 記 述 する HTML の 文 法 に 誤 りがあったとしても 表 示 に 影 響 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 において header 要 素 はセクショニングコンテンツに 属 さない 第 2 問 jquery などの JavaScript フレームワークの 利 用 には 各 ユーザエージェントのプラグインが 必 須 である 第 3 問 不 正 アクセスや 不 正

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

スライド 1

スライド 1 株 式 会 社 アジタス コーディングレギュレーション 改 訂 履 歴 初 版 2009/10/01 一 部 修 正 2010/12/06 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2011/05/02 対 応 ブラウザ 修 正 2013/04/12 文 言 内 容 一 部 修 正 2014/02/25 対 応 メーラーの 追 加 2014/04/08 メールアドレスの

More information

スライド 1

スライド 1 第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの

More information

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ 株 式 会 社 クロノドライブ コーディングガイドライン 改 訂 履 歴 2009/10/01 初 版 2010/12/06 一 部 修 正 2011/05/02 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2013/04/12 対 応 ブラウザ 修 正 2014/02/25 文 言 内 容 一 部 修 正 2014/04/08 対 応 メーラーの 追 加 2014/06/05

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

Adobe® Corporate Template 2005

Adobe®  Corporate Template 2005 Dreamweaver CS3 による CSS デザイン 入 門 小 松 学 史 アドビ 認 定 インストラクター(ACI) 1 Who is this guy? 小 松 学 史 アクティブファクター Dreamweaverおよび Flash アドビ 認 定 インストラク ター(ACI) 2000 年 よりフリーランスとして マルチメディアコン テンツ Web サイト 制 作 に 携 わる 現 在

More information

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に GC スクリプト 利 用 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に 追 加 してみよう...

More information

方程式を解いてみよう! C++ から PHP + JavaScriptへ

方程式を解いてみよう! C++ から PHP + JavaScriptへ 方 程 式 を 解 いてみよう! C++ から PHP + HTML + JavaScriptへ 静 岡 理 工 科 大 学 総 合 情 報 学 部 コンピュータシステム 学 科 幸 谷 智 紀 (こうや とものり) http://na-inet.jp/ 今 日 のメニュー 1. コンピュータ 環 境 と 本 日 のゴールの 確 認 2. PHPプログラムを 実 行 してみる 3. HTMLで 自

More information

目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS

目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文 字 実 体 参 照... 9 CSS Web クリエイター 能 力 認 定 試 験 スタンダード エキスパート 共 通 XHTML 1.0 対 応 受 験 者 用 リファレンス 目 次 XHTML 編... 1 共 通 属 性... 1 文 書 構 造... 1 文 書... 2 リスト... 3 テーブル( 表 )... 3 リンク... 6 オブジェクト... 7 スタイルシート... 7 装 飾... 7 フォーム... 7 文

More information

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

More information

第 11 問 HTML5 において s 要 素 は 正 確 ではなくなった 部 分 や 関 係 なくなった 部 分 を 示 す 第 12 問 HTML で 文 字 コード(テキストエンコーディング)を 示 すための 文 字 列 は 大 文 字 小 文 字 のいずれで 記 述 して もよい 第 13

第 11 問 HTML5 において s 要 素 は 正 確 ではなくなった 部 分 や 関 係 なくなった 部 分 を 示 す 第 12 問 HTML で 文 字 コード(テキストエンコーディング)を 示 すための 文 字 列 は 大 文 字 小 文 字 のいずれで 記 述 して もよい 第 13 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 ウェブブラウザは ユーザエージェントの 一 つである 第 2 問 Apache などのウェブサーバが 動 作 しているかどうかは ping で 確 認 できる 第 3 問 労 働 基 準 法 では 使 用 者 は 労 働 時 間 が 6 時 間 を 超 える 場 合

More information

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

InfoPros13_digest.key

InfoPros13_digest.key ! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

pixiv 63 はじめまして ピクシブ 株 式 会 社 でエンジニアをやってい ます 金 子 と 申 します 本 書 を 手 にとってくださり あり がとうございます この 本 では 画 像 投 稿 掲 示 板 を 作 ってみる という シン プルな 作 業 を 通 して プログラミングの 基 礎 を 学 んで 頂 き たいと 思 っています 本 書 は エンジニアでない 人 のためのプログラミング

More information

第7章 Webページによる情報の発信

第7章 Webページによる情報の発信 筑 波 大 学 情 報 処 理 実 習 Webページによる 情 報 の 発 信 情 報 処 理 実 習 用 手 引 き P.197~226 World Wide Web (WWW) インターネット 上 のハイパーテキストシステム 1989 年 にCERNの 物 理 学 者 Tim Berners-Leeが 発 明 WWWはインターネットとも 呼 ばれるが, 両 者 は 同 義 語 ではない WebページのアドレスURL

More information

8 顧 問 料 管 理 支 援 ソフト 報 酬 名 人 操 作 マニュアル 第 1 版 報 酬 名 人 操 作 の 流 れ 報 酬 名 人 では 煩 雑 になりがちな 顧 問 料 の 請 求 処 理 入 金 処 理 を 一 括 管 理 顧 問 先 の 様 々な 請 求 形 態 ( 毎 月 請 求 各 月 請 求 等 )にも 対 応 しています 請 求 書 領 収 書 はもちろん 支 払 調 書 や 所

More information

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き Ver.2 ユーザマニュアル スタートガイド 第 2 版 最 終 更 新 日 2011/7/12 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き

More information

ホームページの作成

ホームページの作成 HTML5,CSS 資 料 HTML5 HTML の 文 法 HTML(Hyper Text Markup Language)は, 文 章 の 部 分 を Tag(タグ)と 呼 ばれ る 命 令 で 挟 んでいく タグは ... 開 始 終 了 のように 開 始 タグと 終 了 タグ 一 対 のペアになっている. タグは, 挟 まれた 部 分 がどのような 情 報 であるかを

More information

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方 Ver.2 ユーザマニュアル スタートガイド 第 5 版 最 終 更 新 日 2012/7/11 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方...

More information

1

1 目 次 はじめに... 2 音 声 ブラウザの 読 み 上 げ 手 順... 2 音 声 ブラウザへの 具 体 的 な 対 応 方 法... 3 1. 基 本 言 語 3 2.スペースの 挿 入 と 改 行 (タグ)の 挿 入 3 3. 取 り 消 し 線 4 4. 記 号 などの 表 記 4 5. 英 単 語 5 6. 数 字 5 7.イメージマップ 6 8. 表 組 み 6 9.PDF

More information

Microsoft Word - chap2.doc

Microsoft Word - chap2.doc 第 2 章 ホームページとHTML(タグ) ここでは HTML タグについて 今 まで 使 う 機 会 が 無 かった 学 生 を 対 象 に 説 明 する 既 に HTML タグを 使 ったことのある 学 生 にとっては 知 っている 話 になると 思 うので ざっと 目 を 通 すだけでよいだろう 初 めての 学 生 は 演 習 等 を 通 じて 使 い 慣 れて 欲 しい [1] HTML 通

More information

Microsoft PowerPoint - css.ppt [互換モード]

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

More information

2. 画 面 の 分 割 タグを 使 用 することにより 1 つの 画 面 を 縦 横 複 数 に 分 割 することがでる 分 割 されたそれぞれ の 画 面 をフレームと 呼 ぶ 例 えば 目 次 を 常 に 画 面 上 の 決 まったフレームに 固 定 して 表 示 し 目 次 項

2. 画 面 の 分 割 <frame>タグを 使 用 することにより 1 つの 画 面 を 縦 横 複 数 に 分 割 することがでる 分 割 されたそれぞれ の 画 面 をフレームと 呼 ぶ 例 えば 目 次 を 常 に 画 面 上 の 決 まったフレームに 固 定 して 表 示 し 目 次 項 Web ページ 画 面 構 成 の 技 法 1. 配 置 の 制 御 基 本 的 なタグの 使 い 方 については はじめての HTML などを 通 して 学 習 した ここでは もう 少 し 凝 っ た 画 面 構 成 を 行 うための 基 礎 技 法 について 解 説 する 文 字 や 図 などを 画 面 上 の 任 意 の 位 置 に 配 置 するため には タグを 用 いた 表

More information

第 11 問 XML は Extensible Markup Language の 略 である 第 12 問 IPv6 で 定 義 可 能 な IP アドレスの 数 の 理 論 値 は 2 の 32 乗 である 第 13 問 Document Object Model (DOM) の 仕 様 は J

第 11 問 XML は Extensible Markup Language の 略 である 第 12 問 IPv6 で 定 義 可 能 な IP アドレスの 数 の 理 論 値 は 2 の 32 乗 である 第 13 問 Document Object Model (DOM) の 仕 様 は J 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 GIF 形 式 などで 用 いられるディザリングとは 限 られた 色 数 でより 多 くの 色 を 擬 似 的 に 表 現 する 手 法 である 第 2 問 HTML5 文 書 の 内 部 には SVG 要 素 を 直 接 書 き 込 むことができる 第 3 問 cookie

More information