< F2D30305F48544D4C358BB38DDE8A4A94AD955C8E8696DA8E9F2E6A7464>

Size: px
Start display at page:

Download "<5461726F2D30305F48544D4C358BB38DDE8A4A94AD955C8E8696DA8E9F2E6A7464>"

Transcription

1 ios,android,windows Webページ 教 材 開 発 テキスト 岩 手 県 立 総 合 教 育 センター

2 目 次 第 1 章 Webページで 教 材 作 り 1 Webページで 教 材 を 作 るメリット 1 2 HTML5とは 1 3 学 習 におけるICT 教 材 について 2 4 Web 教 材 の 例 3 第 2 章 Web 教 材 作 成 のためのソフト 1 エディタ 4 2 ブラウザ 4 第 3 章 Webページの 基 礎 1 Webページのファイルを 作 る 5 2 文 章 の 要 素 (タグの 基 本 ) 6 3 CSSについて 7 4 JavaScriptについて 9 第 4 章 教 材 作 りの 準 備 1 ライブラリの 利 用 14 2 jqueryについて 14 3 jquery-uiについて 15 4 jquery UI Touch Punchについて 15 5 hammer.js について 15 6 enchant.js について 15 第 5 章 教 材 作 成 例 1 英 単 語 を 表 示 16 2 英 単 語 4 択 クイズ 18 3 社 会 4 択 クイズ わたしは 誰? 20 4 英 文 並 べ 替 え 問 題 23 5 タイマーを 作 る 27 6 カメラを 使 う 29 7 テキストの 読 み 上 げ 31 8 数 式 の 表 示 34 第 6 章 参 考 となるWebページ 35 第 7 章 おわりに 35

3 第 1 章 Webページで 教 材 作 り 1 Webページで 教 材 を 作 るメリット インターネットにWebページ 教 材 を 公 開 するだけで コンピュータはもちろんのこと タブレット スマートフォンから 利 用 することができるようになります 従 来 は ソフ トやアプリをインストールする 必 要 がありましたが Webページ 教 材 であれば ブラウ ザで 表 示 しているそのページそのものを 教 材 ソフトとして 利 用 できるので 非 常 に 簡 単 で 手 間 がいりません 数 年 前 はFlashを 動 かすためにブラウザに 追 加 するFlashPlayerが 必 要 でした HTML5 というWebページの 新 しい 規 格 が 決 まってからは 追 加 ソフト 不 要 でブラウザだけで 文 字 の 装 飾 アニメーション ボタンをクリックなどユーザーの 操 作 で 反 応 を 変 えること ができるなど 様 々なことが 可 能 となりました Webページ 教 材 の 特 徴 として 次 のこ とがあげられます インターネットに 接 続 するだけで 使 える コンピュータ タブレット スマートフォンなど 多 彩 な 機 器 で 作 動 する ( 携 帯 ゲーム 機 3DS 電 子 書 籍 リーダー Amazon Kindleでも 作 動 する ) 開 発 言 語 のJavaScriptは 比 較 的 簡 単 (と 思 います 奥 が 深 いですが) 開 発 用 ソフトは0 円 インターネット 上 には 開 発 のための 情 報 がいっぱいある ダウンロードやインストール 不 要 すぐ 利 用 できる その 反 面 HTML5を 用 いたWeb 教 材 には 欠 点 もあります ブラウザ 内 でしか 作 動 しない (VisualBasic C# 等 を 用 いたソフトと 比 較 して 機 能 に 限 界 がある ) 作 動 が 若 干 遅 い 作 動 しない 機 器 もある(IEでは 動 かないソフトもある) 機 器 により 表 示 の 違 いがある(フォント 大 きさが 異 なりレイアウトが 乱 れる) 開 発 にはHTML CSS JavaScriptの3つの 機 能 を 使 わなければならない ソフト 開 発 時 にエラーの 特 定 が 難 しい 公 開 するにはサーバが 必 要 あれ? 欠 点 の 方 が 多 い と 思 われるかもしれませんが これほど 配 布 が 容 易 で 多 彩 な 機 械 で 使 うことのできるソフト 作 成 はWebページの 他 にはありません AndroidとiO S(iPad,iPhone)では 同 じアプリでも 実 行 ファイルは 異 なります Androidの 実 行 ファ イルはiOSでは 動 きません どちらでも 作 動 するアプリを 開 発 できるソフトはあります が AndroidはJavaで iosはobject-cで 作 られています(もちろんソースコードも 異 な ります) でも Webページであれば どちらでも 動 くものを 作 ることができます そ れでだけでなくWindows Mac Linuxで 動 くソフトもできてしまうのです 1 粒 で5 倍 もおいしいです 2 HTML5とは HTMLとは Hyper Text Markup Language(ハイパーテキスト マークアップ ランゲ - 1 -

4 ージ)の 頭 文 字 で Webページを 作 るための 言 語 です HTML5はこの 第 5 改 訂 版 となっており 以 前 と 比 較 して 次 の 機 能 が 強 化 されています 動 画 や 音 声 グラフィックの 描 画 が 可 能 になる カメラの 画 像 の 取 得 ができる ファイルの 読 み 込 みと 扱 いができる GPSで 位 置 を 取 得 ができる 大 量 のデータをブラウザで 保 存 できる 入 力 フォームの 機 能 が 追 加 されている 文 章 の 構 造 化 がされているため 綺 麗 なHTMLを 書 くことができる( 人 もいる) などがあげられます 3 学 習 におけるICT 教 材 について 学 習 におけるコンピュータの 利 用 には 次 のような 型 があります (1) ドリル 学 習 型 すでに 学 習 した 内 容 を 反 復 練 習 する 型 のソフトウェアです 学 習 者 の 記 憶 や 技 能 を 定 着 させるのに 効 果 的 です (2) 解 説 指 導 型 チュートリアル 方 式 とよばれていたものです 学 習 者 に 対 して 個 人 授 業 を 行 うよう に コンピュータから 解 説 を 与 えて 質 疑 応 答 し 学 習 者 の 回 答 に 応 じた 解 説 を 提 示 します 学 習 内 容 の 概 念 形 成 知 識 理 解 の 定 着 思 考 力 の 育 成 をねらいとする 場 合 に 用 いられます (3) 問 題 解 決 型 学 習 者 が 問 題 解 決 をするために 既 習 の 知 識 や 情 報 と コンピュータに 用 意 されて いるデータを 活 用 して 学 習 を 進 めます 学 習 者 に 問 題 を 明 確 に 把 握 させること 問 題 解 決 方 法 に 対 応 した 多 様 なコースウェアを 用 意 すること 解 説 指 導 型 のソフトウェア を 組 み 合 わせることが 必 要 といわれています (4) シミュレーション 型 人 間 の 感 覚 ではとらえることが 難 しいことや 学 習 者 にとって 理 解 しにくい 事 象 現 象 をシミュレーションによって わかりやすく 提 示 するものです (5) 情 報 検 索 型 学 習 者 は 情 報 を 検 索 抽 出 して 思 考 を 深 めながら 課 題 の 解 決 を 図 る 型 です 学 習 者 に 課 題 を 明 確 に 把 握 させることが 必 要 といわれています - 2 -

5 4 Web 教 材 の 例 HTML5の 機 能 を 使 ったWeb 教 材 例 をいくつか 紹 介 いたします (1) てこを 利 用 した 道 具 プログラムの 特 徴 :カメラの 画 像 を 取 得 マルチタッチ 操 作 利 用 ライブラリ :hammer.js (2) 分 度 器 と 定 規 プログラムの 特 徴 :マルチタッチ 操 作 利 用 ライブラリ :hammer.js (3) とけいの 学 習 プログラムの 特 徴 : 音 声 合 成 ドラッグで 針 を 操 作 利 用 ライブラリ :enchant.js (4) タブレットが 話 します プログラムの 特 徴 : 音 声 合 成 利 用 ライブラリ :jquery (5) Gタブ 数 学 プログラムの 特 徴 : 分 数 やルートなど 数 学 特 有 の 表 記 利 用 ライブラリ :jquery MathJax (6) Gタブ 英 語 プログラムの 特 徴 :ドラッグで 並 べ 替 え 正 答 をタップ 利 用 ライブラリ :jquery (7) でじたるぱれっと Flashで 作 成 したswfファイルをGoogle SwiftyでHTML5に 変 換 https://developers.google.com/swiffy/ - 3 -

6 第 2 章 Web 教 材 作 成 のためのソフト 1 エディタ (1) メモ 帳 文 字 の 入 力 だけですので メモ 帳 でWeb 教 材 は 可 能 です ファイルを 保 存 するときに UTF-8 で 保 存 することを 注 意 してください ANSI で 保 存 するとShift-JIS 文 字 コードで 保 存 されてWebページにしたとき 文 字 化 けします Windowsのコンピュータで 開 発 しているときには 気 がつかないことがあ るので 注 意 してください あとで Webページとして 外 部 公 開 したときに 文 字 化 けに 気 がつくことがあります (2) サクラエディタ 無 料 で 高 性 能 のエディタとして サクラエディタ が 有 名 です Google 等 から 検 索 をかけてダウンロードしてください 2 ブラウザ (1) Google Chrome まずは Google Chrome のインストールをしてください HTML5でのプログラム 開 発 には 必 須 です F12 キーで 開 発 者 向 けのメニューを 表 示 できます ここでプログラムのエラー 等 を 見 ることができます (2) Safari ipad iphone 用 のWebページの 作 動 確 認 には Safari を 使 います ただし コン ピュータ 用 とモバイル 用 では 作 動 が 異 なる 場 合 がありますので 注 意 が 必 要 です (3) Internet Explorer HTML5の 機 能 が 不 完 全 なので 作 動 確 認 に 適 さないブラウザです しかし コンピ ュータで 利 用 されている 一 番 のシェアなのでとりあえず 見 てみましょう バージョン によってできることも 異 なるため Web 教 材 のページが 作 動 しないけれど と 言 わ れたときにIEを 利 用 していることを 一 番 最 初 に 疑 ってみましょう (4) Microsoft Edge Windows10から 導 入 されているブラウザです これから 出 番 が 多 くなりそうですが 今 は 様 子 見 です - 4 -

7 第 3 章 Webページの 基 礎 1 Webページのファイルを 作 る 1 エクスプローラで 右 クリック 新 規 作 成 フォルダ をしてください 2 エクスプローラで 拡 張 子 を 表 示 させます 3 エクスプローラで 右 クリック 新 規 作 成 テキスト ドキュメント で 新 しいテキスト ドキュメント.txt を 作 成 します 4 新 しいテキスト ドキュメント.txt を 右 クリックして 名 前 の 変 更 11kyouzai.html と 入 力 します 5 右 図 の 注 意 が 出 ます はい をクリックします 6 アイコンがeに 変 化 します 7 プログラムの Windowsアクセサリ から メモ 帳 を 起 動 します 8 メモ 帳 に 先 ほど 作 成 した 11kyouzai.html をドラッグ&ドロップします 9 メモ 帳 で 次 のように 記 入 します 解 説 <!DOCTYPE html> HTML5で 書 かれていることの 宣 言 <html lang="ja"> HTML 文 書 です <head> 文 書 のヘッダ 情 報 日 本 語 です <meta charset="utf-8" /> 文 字 コードはUTF-8です <title> 教 材 </title> タイトル </head> 文 書 のヘッダはここまで <body> 文 書 の 本 体 はここから Web 教 材 ページ 表 示 される 文 </body> 文 書 の 本 体 はここまで </html> HTML 文 書 はここまで 10 メモ 帳 で ファイル 上 書 保 存 - 5 -

8 11 文 字 コードを UTF-8 を 選 んで 保 存 をクリックし ます 12 エクスプローラで 11kyouzai.html を 左 ダブルクリックすると IE(インター ネット エクスプローラ)が 起 動 してWebページが 表 示 されます 記 入 したように 表 示 されましたか? 文 字 が 正 しく 表 示 されない( 文 字 化 けする)と きには 文 字 コードが UTF-8 になっていない 可 能 性 があります もう 一 度 メモ 帳 で ファイ ル 上 書 保 存 で 確 認 しましょう 発 展 1: 表 示 している 文 字 を 変 えてみましょう 発 展 2: メモ 帳 で 文 字 を2 行 にして 書 いてみましょう Webページはどうなりますか?.html はWebページを 表 示 するためのファイルを 示 す 拡 張 子 です ファイル 名 は 必 ず 半 角 英 数 にしてください 全 角 文 字 のファイルはインターネッ トでは 基 本 的 に 表 示 できません 2 文 章 の 要 素 (タグの 基 本 ) (1) <title> タイトルを 表 示 します 例 :<title>ここにタイトル 文 </title> (2) <h1> 文 章 の 見 出 しに 使 います<h1>から<h6>まであります 例 :<h1> 見 出 し</h1> 見 出 しを 上 手 に 使 って 構 造 的 なページを 作 りましょう (3) <br> 改 行 を 入 れます br:break( 改 行 ) <br> を 改 行 する 所 に 入 れます (4) <p> 段 落 を 表 します p:paragraph( 段 落 ) 例 :<p>はじめの 段 落 です </p> <p> 次 の 段 落 です </p> (5) <img> 図 を 表 示 します <img src= "zu.jpg">.jpg.png gif 等 の 画 像 ファイルを 指 定 (6) <a> ページのリンクを 張 ります <a href="next.html"> 次 のページ</a> a:エイ Anchor(アンカー 碇 (いかり)) - 6 -

9 href:エイチレフ Hypertext REFerenceの 略 (7) <div> 文 章 の 指 定 に 使 います div:ディブ Division( 分 割 ) <div align="right"> 右 寄 せ<div> center または left にすると (8) <span> 文 字 の 指 定 に 使 います 改 行 なして 使 うときに 用 います <span>ここを 指 定 <span> (9) <font> 文 字 の 色 や 大 きさ フォントの 指 定 に 使 います 将 来 的 にはなくなる 予 定 のタグです できるだけCSSで 表 記 しましょう 例 : <font size="1" color="#0000ff">サイズ1 カラー 青 (16 進 数 で 指 定 )</font><br> <font size="2" color="blue">サイズ2 カラー 青 ( 色 名 で 指 定 )</font><br> <font size="3">サイズ3 これがデフォルトサイズ</font><br> <font size="+1">デフォルト+1で サイズ4</font><br> <font size="+2">デフォルト+2で サイズ5</font><br> <font size="6" face="ms ゴシック">サイズ6 ゴシック 体 </font><br> <font size="7" face="ms 明 朝, 平 成 明 朝 ">サイズ7 明 朝 体 </font> (10) <table> 表 を 作 成 します 例 :2 行 の 表 を 作 成 した 例 <table border="0"> <tr> <td>データセル1-1</td> <td>データセル1-2</td> </tr> <tr> <td>データセル2-1</td> <td>データセル2-2</td> </tr> </table> 3 CSSについて (1) CSSとは CSS(Cascading Style Sheets)とは Webページのスタイルを 指 定 するための 言 語 です CSSは HTMLと 組 み 合 わせて 使 用 する 言 語 です HTMLがWebページの 要 素 の 意 味 や 情 報 構 造 を 定 義 し CSSではそれらをどう 装 飾 するかを 指 示 します 例 えば 色 フ ォントの 大 きさ 字 体 背 景 色 下 線 枠 線 等 を 表 示 させることができます (2) CSSはどこに 書 く 書 く 場 所 として3つの 方 法 があります 次 の3つのうち どれかの 方 法 をとります 1 外 部 ファイルとして 書 く 外 部 にCSS 用 のファイルを 作 り それを 読 み 込 んで 利 用 します - 7 -

10 複 数 のページで 同 じ 書 式 にしたいとき 有 効 です <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> 2 ヘッダにCSSを 記 載 する ページ 内 で 書 式 をそろえることができます <head> <style> h1{color:red; </style> </head> 3 HTMLタグ 内 部 に 記 載 する その 要 素 だけに 別 の 書 式 を 設 定 したいときに 利 用 します それぞれの 要 素 に 記 載 するので 修 正 が 大 変 になります <h1 style="color:red;"> 題 名 </h1> (3) CSSの 書 き 方 1 基 本 h1タグのフォントサイズを20px 文 字 の 色 を 青 にしたいときは 次 のようします 例 : h1{ font-size: 20px; color: #0000ff; : ; の 区 別 つけ 忘 れをしないようにしてください 2 スタイルを 適 用 する 対 象 の 指 定 のしかた ア 要 素 名 で 指 定 する(h1 h2 pなどの) 例 : p{color: #0000ff; イ idセレクタで 指 定 する 例 : <div id="sitei">ここを 指 定 </id> #sitei{cursor:pointer ウ classセレクタで 指 定 する 例 :<div class="koko">ここを 指 定 </div> - 8 -

11 .koko{background-color:# エ 指 定 のしかたの 結 論 では どの 方 法 で 指 定 すればいいのかというと ウ classセレクタで 指 定 が 一 番 適 しています idは 次 に 述 べるJavaScriptの 作 動 を 指 定 するのに 使 います (4) CSSの 表 記 例 /* この 間 はコメントアウト */ color: #000000; /* 文 字 色 を#000000( 黒 ) */ background-color: #ffffff; /* 背 景 色 を#ffffff( 白 ) */ font-weight: bold; /* フォントの 太 さを 指 定 する */ font-size: 500%; /* 文 字 の 大 きさ500% */ width:200px; height:100px; /* 幅 を200px 高 さを100px */ z-index: 999; /* 数 値 が 大 きいほど 手 前 に 表 示 */ padding: 10px 10px 15px 10px;/* 周 りの 空 白 */ border-radius:4px; /* 枠 を 角 丸 にする */ border: 1px solid #bbd; /* 枠 線 を1px 線 種 指 定 色 指 定 */ float:left; /* 回 り 込 んで 表 示 させる */ opacity:0.2; /* 透 明 にする */ cursor : pointer; /* カーソルを 指 の 形 にする */ display: inline; /* リストを 横 に 並 べて 表 示 */ 4 JavaScriptについて (1) JavaScriptとは JavaScriptという 言 葉 は 狭 義 にはMozillaが 仕 様 を 策 定 し 実 装 しているスクリプト 言 語 を 指 しています 多 くのWebブラウザー 等 でこの 言 語 が 利 用 できます よく 言 われることですが Java とは 別 言 語 です (2) Javasriptを 書 く 場 所 は? 1 外 部 ファイルとして 書 く 外 部 にJavaScript 用 のファイルを 作 り それを 読 み 込 んで 利 用 します プログラムを 別 ファイルで 作 成 したいとき 有 効 です <script src="./faile.js"></script> 2 <script> 内 にJavasriptを 記 載 する <script> // ここにJavaScriptのプログラムを 書 いてね </script> - 9 -

12 (3) コメント プログラムの 作 動 に 関 係 しないコメントの 記 入 例 // これ 以 降 はコメントになります /* 複 数 行 のコメントになります プログラム 作 成 しているときに 一 時 的 に 作 動 させないようにするとき に 使 ってください */ (4) 変 数 変 数 はデータを 入 れる 容 器 です 変 数 をプログラムの 中 で 使 うためには まず 最 初 に 変 数 の 宣 言 をします 変 数 が 使 える 有 効 範 囲 をスコープといいます 変 数 の 宣 言 var a=1; 普 通 の 変 数 の 宣 言 に 用 います 宣 言 と 同 時 に 代 入 もできます function 内 で 宣 言 した 場 合 には そのfunction 内 で 実 行 している 間 だけ 有 効 になり ます(ローカル 変 数 ) なお varを 省 略 すると 自 動 的 にグローバル 変 数 になり プログラムのどこから でも 参 照 できるようになってしまいます 推 奨 しません (5) 変 数 名 について 変 数 名 は 英 数 または_(アンダスコア)であること 漢 字 ひらがなは 使 えません 変 数 名 にコマンド 名 は 使 用 できない 英 字 の 大 文 字 と 小 文 字 は 別 変 数 になります (VisualBasicでは 区 別 なし) (6) 代 表 的 なデータ 型 について 文 字 列 型 数 値 型 オブジェクト 型 がありますが 他 の 言 語 のように 明 確 に 宣 言 で きません 変 数 に 代 入 する 値 で 変 わります つまり 数 値 型 の 変 数 に 文 字 を 代 入 する こともできてしまいます これが 結 構 やっかいで バグの 原 因 になります (7) 変 数 への 値 の 代 入 について 変 数 Hensu に 数 値 の 1 を 代 入 する 場 合 には 次 のように 記 入 します var Hensu = 1; (8) 型 変 換 変 数 は 型 を 持 っているため 型 が 異 なると 計 算 ができません var suuti =1, mozi = "2"; var kotae = suuti + mozi ; alert(kotae); // 答 えを 表 示 します 変 数 c は 文 字 型 の 12 になります 数 値 型 + 文 字 型 文 字 型 になります でも 明 確 に 型 変 換 した 方 が 安 全 です 1 文 字 型 数 値 型 への 変 換 kotae = Number(mozi);

13 2 数 値 型 文 字 型 への 変 換 kotae = String(suuti); (9) 演 算 子 下 表 の 上 位 が 優 先 となります 優 先 順 位 を 変 える または 明 確 にしたい 場 合 には 括 弧 ()を 用 いてください 算 術 演 算 子 ^ べき 乗 * 乗 算 / 除 算 % 整 数 の 除 算 の 余 り + 加 算 - 減 算 等 値 演 算 子 関 係 演 算 子 == 等 しい!= 等 しくない not(a==b) < 小 さい 未 満 <= 以 下 ( 小 さいか 等 しい) > 大 きい >= 以 上 ( 大 きいか 等 しい) 論 理 演 算 子 && 論 理 積 (AND) 論 理 和 (OR) ( Shiftキー + \ ) (10) 関 数 Math.ceil(x) 繰 り 上 げた 整 数 1.5は2-1.5は-1 Math.floor(x) 繰 り 下 げた 整 数 値 1.5は1-1.5は-2 Math.round(x) 四 捨 五 入 した 整 数 値 1.5は2-1.5は-2 Math.random() 0~1までの 乱 数 の 発 生 Math.abs(x) 絶 対 値 Math.sin(x) サイン xの 単 位 はラジアン Sin45 の 値 をAに 代 入 するためには 次 のように 記 入 します A = Math.sin(45/180*Math.PI) Math.cos(x) コサイン xの 単 位 はラジアン Math.tan(x) タンジェント xの 単 位 はラジアン Math.sqrt(x) 平 方 根 (7) 配 列 配 列 は 同 じ 性 質 を 持 った 値 を 効 率 的 に 管 理 するためのデータ 構 造 です 変 数 の 集 合 体 ともいえます 配 列 の 各 要 素 に 書 き 込 みを 行 うためには インデックス( 番 号 ) で 指 定 します インデックスの 範 囲 は0 以 上 の 数 値 になります 1 宣 言 だけをする 例 : var hairetu = new Array(); // Array オブジェクトを 作 成 する var hairetu = new Array(1024); // 初 期 値 を 決 めて 作 成 する 2 宣 言 と 代 入 をする 例 : var hairetu = [1, 2, 3, "A", "B", true, false]; 3 配 列 の 値 の 参 照 する 例 : var hairetu = [1, 2, 3, "A", "B", true, false]; alert(hairetu[0]); // 1 が 表 示 される(0 番 目 から 代 入 されるから ここ 注 意 )

14 alert(hairetu[3]); // A が 表 示 される (11) 配 列 流 れ 文 制 御 には 条 件 判 断 繰 り 返 しなどがあります ここでは 代 表 的 なステートメ ント( 命 令 )について 基 本 の 説 明 をします 1 if 文 ある 条 件 が 成 立 すれば 処 理 1 を 実 行 し 成 立 しないときには 処 理 2 を 実 行 させたい 場 合 には IF 文 を 使 います 例 :Aの 値 が10 以 上 ならAから10を 引 き そうでなければAに2を 加 える プログラム 例 if (A >= 10){ alert("aは10 以 上 "); else{ alert("aは10 未 満 "); ; else ifでさらに 判 断 させることもできます プログラム 例 if (A >= 10){ alert("aは10 以 上 "); else if(a >=5){ alert("aは5 以 上 10 未 満 "); else{ alert("aは5 未 満 "); ; 条 件 式 の 例 A == 10 Aが10なら( 注 意 = にするとエラー)!(A >= 10) Aが10 未 満 なら (A >= 10) && (B >= 20) Aが10 以 上 かつ Bが20 以 上 なら (A >= 10) (B >= 20) Aが10 以 上 または Bが20 以 上 なら && And Bが 真 Bが 偽 Or Bが 真 Bが 偽 Aが 真 真 偽 Aが 真 真 真 Aが 偽 偽 偽 Aが 偽 真 偽 2 switch 文 switchは 条 件 式 の 値 にしたがって 対 応 するブロックを 実 行 する 分 岐 文 です 多 分 岐 するときにはif 文 よりすっきりした 記 述 ができます switch( 式 ){ case 値 1: 文 1;

15 3 break; case 値 2 文 2 break; default: どれも 該 当 しない 場 合 の 実 行 文 ; break; break; を 忘 れると 次 の 文 も 実 行 されるので 注 意! for 文 for 文 は 指 定 回 数 のループを 行 います 回 数 をループ 変 数 で 管 理 します for (ループ 変 数 = 初 期 値 ;ループ 変 数 <= 最 終 値 ; ループ 変 数 増 分 ){ 文

16 第 4 章 教 材 作 りの 準 備 1 ライブラリの 利 用 Webページでの 教 材 作 りでは HTMLでページの 要 素 の 指 定 をして 骨 格 を 作 り CSSで 色 や 文 字 の 大 きさを 指 定 し JavaScriptで 作 動 のプログラムを 書 きます でも これ らを 位 置 から 作 っていては 大 変 です 共 通 なところ についてはライブラリを 利 用 して 省 力 化 を 図 ります ライブラリの 利 点 は JavaScriptの 記 載 を 簡 略 化 できる 開 発 時 間 を 短 縮 できる ブラウザの 種 類 やバージョンによる 違 いを 吸 収 してくれる 場 合 もある でも 欠 点 として それそれのライブラリの 記 載 方 法 を 覚 える 必 要 がある バグが 出 た 場 合 原 因 がライブラリにある 場 合 がある ライブラリを 読 み 込 むと 起 動 に 時 間 がかかる 作 動 が 遅 くなる まあ 欠 点 もありますが 他 力 本 願 できるだけ 簡 単 な 方 法 でプログラムを 書 くこ ととしましょう 2 jqueryについて jqueryとは 2006 年 から 開 発 / 公 開 されているJavaScript 用 のライブラリです ライ センスは MIT Licenseであり ライブラリの 著 作 権 表 示 を 消 さなければ 商 用 非 商 用 を 問 わずに 誰 でも 自 由 に 利 用 可 能 です 使 い 方 の 本 リファレンス 本 もたくさん 出 版 されており JavaScriptの 標 準 ライブラリとなっています jqueryを 利 用 すると 要 素 の 指 定 がとても 楽 になります 公 式 サイト https://jquery.com/ jquery 日 本 語 リファレンス 1 使 い 方 の 基 本 jqueryが 読 み 込 まれてから 命 令 が 作 動 するように 下 のような 書 き 方 をします $(function() { /* ここにJavasriptを 書 く */ 中 括 弧 {とかっこ()の 違 いには 意 味 があります 2 セレクターの 指 定 <div id="name">のセレクターを 指 定 する 場 合 には $("#name")とします 例 : $("#name").hide(); /* 非 表 示 にする */ $("#name").show(); /* 表 示 する */ $("#name").css("background-color","#0000ff"); /* 背 景 色 を 青 色 に */

17 3 セレクターの 指 定 その2 <div id="name1">1</div> <div id="name2">2</div> の 場 合 2つのセレクターを 指 定 する 場 合 には カンマで 区 切 って 指 定 します $("#name1,name2").hide(); 3 jquery-uiについて jquery UI とは jquery 公 式 のユーザインターフェース(UI) 用 ライブラリです 並 べ 替 え ドラッグ 移 動 ドロップなど 教 材 作 りで 必 須 な 機 能 の 他 に 表 示 切 替 カ レンダー タブ アコーディオン ダイアログ エフェクト サイズ 変 更 スライダー などを 導 入 できます 公 式 サイト https://jqueryui.com/ 4 jquery UI Touch Punchについて jquery UI はiPadなどのタブレットでは 作 動 しない 場 合 があります これを 解 決 してくれるのが jquery UI Touch Punch です 公 式 サイト 5 hammer.jsについて 図 形 の 拡 大 縮 小 回 転 などタブレットの 画 面 を2 本 の 指 で 操 作 するマルチタッチジ ェスチャーを 可 能 にするライブラリです 日 本 語 の 情 報 が 少 ないだけでなく 利 用 例 も 少 ないことが 難 点 です 公 式 サイト 6 enchant.jsについて ゲームやアプリを 開 発 するために 作 成 された JavaScript フレームワークです 日 本 で 開 発 されたので 日 本 語 の 説 明 が 充 実 しており ゲーム 作 成 の 解 説 本 も 出 版 されてい ます 公 式 サイトにはゲーム 用 の 図 も 用 意 してあります 反 応 速 度 もよく かなり 本 格 的 なRPGやシューティングを 比 較 的 容 易 に 開 発 できるようです 公 式 サイト

18 第 5 章 教 材 作 成 例 1 英 単 語 を 表 示 日 本 語 をクリックすると 英 単 語 を 表 示 するページを 作 ります (1) HTMLで 骨 格 を 作 る step1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style> </style> </head> <body> 英 単 語 を 表 示 します <br><br> <span id="11" class="tango">りんご </span> <span id="12" class="tango">ぶどう </span> <span id="13" class="tango">かき </span> <br><br> <span id="kotae"></span> <script> </script> </body> </html> (2) cssでデザインする step2 <style></style>の 間 に 次 のcssを 記 入 します.tango{ font-size: 300%; cursor:pointer; #kotae{ font-size: 300%;

19 (3) JavaScriptで 動 きをつける step3 <script></script>の 間 に 次 のJavaScriptを 記 入 します $(function() { $("#11").on("click", function () { $("#kotae").html("apple"); $("#12").on("click", function () { $("#kotae").html("grapes"); $("#13").on("click", function () { $("#kotae").html("persimmon"); (4) 単 語 を 増 やしてみましょう 発 展 問 題 1 文 字 に 色 をつけてみましょう 2 いちご 梨 スイカなどを 追 加 してみましょう 3 野 菜 バージョンを 作 って 別 ファイルで 保 存 してみましょう

20 2 英 単 語 4 択 クイズ 正 答 の 場 合 には 赤 色 の が まちがいの 場 合 には 青 色 の を 表 示 します (1) HTMLで 骨 格 を 作 る step1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style> </style> </head> <body> 1 次 の 日 本 文 が 表 す 英 文 になるように 正 しい 語 を 選 びましょう <p> (1) 私 は 毎 朝 朝 食 を 作 ります <br> <span id="maru1" class="maru">?</span> I <span id="12" class="tango">am cooking</span> <span id="11" class="tango">cook</span> <span id="13" class="tango">cooked</span> <span id="14" class="tango">cooks</span> breakfast every morning. </p> <script> </script> </body> </html> (2) cssでデザインする step2 <style></style>の 間 に 次 のcssを 記 入 します <style>.tango{ background-color: #cff; padding: 10px 10px 10px 10px;

21 border-radius:4px; border:1px solid #bbd; cursor:pointer;.maru{ font-size: 300%; </style> (3) JavaScriptで 動 きをつける step3 <script></script>の 間 に 次 のJavaScriptを 記 入 します <script> $(function() { $("#11").on("click", function () { $("#maru1").html("<font color='red' > </font>"); $("#12,#13,#14").on("click", function () { $("#maru1").html("<font color='blue' > </font>"); </script> (4) 回 答 後 に 正 答 誤 答 の 色 分 けをする step4 <script></script>の 間 に 次 のJavaScriptを 記 入 します <script> $(function() { $("#11").on("click", function () { $("#maru1").html("<font color='red' > </font>"); $("#11").css("background-color","#fbb"); $("#12,#13,#14").css("background-color","#aaa"); $("#12,#13,#14").on("click", function () { $("#maru1").html("<font color='blue' > </font>"); $("#11").css("background-color","#fbb"); $("#12,#13,#14").css("background-color","#aaa"); </script>

22 3 社 会 4 択 クイズ わたしは 誰? (1) 第 1 問 だけ 英 単 語 4 択 クイズ を ほんの 少 し 訂 正 するだけで 別 のクイズに 応 用 できます まずは 名 前 をつけて 別 名 でファイルを 保 存 してください 下 線 部 を 書 き 換 えてください <body> わたしの 名 前 を 当 ててください <p> (1) 私 は 憲 法 を 作 るためにヨーロッパへ 調 査 に 行 きました 大 日 本 帝 国 憲 法 を 作 成 し 45 歳 で 初 代 総 理 大 臣 になりました 私 は 誰? <div id="maru1" class="maru">?</div> <div id="12" class="tango"> 木 戸 孝 允 </div> <div id="11" class="tango"> 伊 藤 博 文 </div> <div id="13" class="tango"> 板 垣 退 助 </div> <div id="14" class="tango"> 大 久 保 利 通 </div> </p> (2) 問 題 文 を 増 やしてみましょう 1 コピー&ペーストでHTML 文 を 増 やして 問 題 文 を 修 正 する 2 <div id='11' class='tango'>のidを 修 正 する 3 JavaScriptをコピー&ペーストで 行 を 増 やして 修 正 する 私 は 鹿 児 島 の 士 族 を 引 き 連 れて 戦 いましたが 西 南 戦 争 で 政 府 軍 に 敗 れてしまいま した 今 は 上 野 公 園 にいます 私 は 誰? 西 郷 隆 盛 坂 本 龍 馬 大 隈 重 信 木 戸 孝 允 私 は 海 援 隊 を 結 成 しました だけど 歌 手 でも 俳 優 でもありません 私 は 誰? 坂 本 龍 馬 西 郷 隆 盛 勝 海 舟 伊 藤 博 文 天 は 人 の 上 に 人 をつくらず 人 の 下 に 人 をつくらず 私 の 肖 像 画 がたくさん 出 回 っ ているらしい 私 は 誰? 福 沢 諭 吉 樋 口 一 葉 夏 目 漱 石 坂 本 龍 馬

23 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style>.tango{ background-color: #cff; padding: 10px 10px 10px 10px; border-radius:4px; border:1px solid #bbd; cursor:pointer;.maru{ font-size: 300%; </style> </head> <body> わたしの 名 前 を 当 ててください <p> (1) 私 は 憲 法 を 作 るためにヨーロッパへ 調 査 に 行 きました 大 日 本 帝 国 憲 法 を 作 成 し 45 歳 で 初 代 総 理 大 臣 になりました <br> 私 は 誰? <div id="maru1" class="maru">?</div> <div id="12" class="tango"> 木 戸 孝 允 </div> <div id="11" class="tango"> 伊 藤 博 文 </div> <div id="13" class="tango"> 板 垣 退 助 </div> <div id="14" class="tango"> 大 久 保 利 通 </div> </p> <br> <p> (2) 私 は 鹿 児 島 の 士 族 を 引 き 連 れて 戦 いましたが 西 南 戦 争 で 政 府 軍 に 敗 れてしまいました 今 は 上 野 公 園 にいます <br> 私 は 誰? <div id="maru2" class="maru">?</div> <div id="22" class="tango"> 坂 本 龍 馬 </div> <div id="23" class="tango"> 大 隈 重 信 </div> <div id="21" class="tango"> 西 郷 隆 盛 </div> <div id="24" class="tango"> 木 戸 孝 允 </div> </p> <br> <p> (3) 私 は 海 援 隊 を 結 成 しました だけど 歌 手 でも 俳 優 でもありません <br> 私 は 誰?

24 <div id="maru3" class="maru">?</div> <div id="32" class="tango"> 西 郷 隆 盛 </div> <div id="33" class="tango"> 勝 海 舟 </div> <div id="34" class="tango"> 伊 藤 博 文 </div> <div id="31" class="tango"> 坂 本 龍 馬 </div> </p> <br> <p> (4) 天 は 人 の 上 に 人 をつくらず 人 の 下 に 人 をつくらず 今 は 私 の 肖 像 画 がたくさん 出 回 っているらしい <br> 私 は 誰? <div id="maru4" class="maru">?</div> <div id="41" class="tango"> 福 沢 諭 吉 </div> <div id="42" class="tango"> 樋 口 一 葉 </div> <div id="43" class="tango"> 夏 目 漱 石 </div> <div id="44" class="tango"> 坂 本 龍 馬 </div> </p> <br> <script> $(function() { $("#11").on("click", function () { $("#maru1").html("<font color='red' > </font>"); $("#11").css("background-color","#fbb"); $("#12,#13,#14").css("background-color","#aaa"); $("#12,#13,#14").on("click", function () { $("#maru1").html("<font color='blue' > </font>"); $("#11").css("background-color","#fbb"); $("#12,#13,#14").css("background-color","#aaa"); $("#21").on("click", function () { $("#maru2").html("<font color='red' > </font>"); $("#21").css("background-color","#fbb"); $("#22,#23,#24").css("background-color","#aaa"); $("#22,#23,#24").on("click", function () { $("#maru2").html("<font color='blue' > </font>"); $("#21").css("background-color","#fbb"); $("#22,#23,#24").css("background-color","#aaa"); $("#31").on("click", function () { $("#maru3").html("<font color='red' > </font>"); $("#31").css("background-color","#fbb"); $("#32,#33,#34").css("background-color","#aaa"); $("#32,#33,#34").on("click", function () {

25 $("#maru3").html("<font color='blue' > </font>"); $("#31").css("background-color","#fbb"); $("#32,#33,#34").css("background-color","#aaa"); $("#41").on("click", function () { $("#maru4").html("<font color='red' > </font>"); $("#41").css("background-color","#fbb"); $("#42,#43,#44").css("background-color","#aaa"); $("#42,#43,#44").on("click", function () { $("#maru4").html("<font color='blue' > </font>"); $("#41").css("background-color","#fbb"); $("#42,#43,#44").css("background-color","#aaa"); </script> </body> </html> 4 英 文 の 並 べ 替 え 問 題 (1) 第 1 問 だけ 英 単 語 をドラッグして 並 べ 替 える 問 題 を 作 ります <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style> li{ display: inline;.tango{ background-color: #cff; padding: 10px 10px 10px 10px; border-radius:4px;

26 border:1px solid #bbd; cursor:pointer;.maru{ font-size: 300%; </style> </head> <body> 2 次 の 日 本 文 が 表 す 英 文 になるように 語 をドラッグして 正 しく 並 べかえて ください 文 頭 に 来 る 語 も 小 文 字 で 表 していることもあります <P> (1) 岩 手 山 が 一 番 人 気 です <br> <span id="maru1" class="maru"> </span> <ul id="mondai1"> <li id="12" class="tango">is</li> <li id="14" class="tango">popular</li> <li id="13" class="tango">the most</li> <li id="11" class="tango">mt.iwate</li> <li id="15" class="tango">.</li> </ul> </P> <script> $(function() { $("#mondai1").disableselection(); $("#mondai1").sortable({ update: function(e, ui) { if(($("#mondai1").sortable("toarray")) == "11,12,13,14,15"){ $("#maru1").html("<font color='red' > </font>"); ; </script> </body> </html>

27 (2) 問 題 を 追 加 してみましょう <body> 2 次 の 日 本 文 が 表 す 英 文 になるように 語 をドラッグして 正 しく 並 べかえて ください 文 頭 に 来 る 語 も 小 文 字 で 表 していることもあります <P> (1) 岩 手 山 が 一 番 人 気 です <br> <span id="maru1" class="maru"> </span> <ul id="mondai1"> <li id="12" class="tango">is</li> <li id="14" class="tango">popular</li> <li id="13" class="tango">the most</li> <li id="11" class="tango">mt.iwate</li> <li id="15" class="tango">.</li> </ul> </P> <br> <P> (2) この 机 を 使 ってもいいですか <br> <span id="maru2" class="maru"> </span> <ul id="mondai2"> <li id="24" class="tango">this desk</li> <li id="23" class="tango">use</li> <li id="22" class="tango">i</li> <li id="21" class="tango">may</li> <li id="25" class="tango">?</li> </ul> </P> <br> (3) お 味 噌 はカナダで 売 られていますか <br> <span id="maru3" class="maru"> </span> <ul id="mondai3"> <li id="34" class="tango">in Canada</li> <li id="33" class="tango">sold</li> <li id="31" class="tango">is</li>

28 <li id="32" class="tango">miso</li> <li id="35" class="tango">?</li> </ul> </P> <br> <script> $(function() { $("#mondai1").disableselection(); $("#mondai1").sortable({ update: function(e, ui) { if(($("#mondai1").sortable("toarray")) == "11,12,13,14,15"){ $("#maru1").html("<font color='red' > </font>"); ; $("#mondai2").disableselection(); $("#mondai2").sortable({ update: function(e, ui) { if(($("#mondai2").sortable("toarray")) == "21,22,23,24,25"){ $("#maru2").html("<font color='red' > </font>"); ; $("#mondai3").disableselection(); $("#mondai3").sortable({ update: function(e, ui) { if(($("#mondai3").sortable("toarray")) == "31,32,33,34,35"){ $("#maru3").html("<font color='red' > </font>"); ; </script> </body>

29 5 タイマーを 作 る 経 過 時 間 を 計 るには スタート 時 間 と 現 在 の 時 間 から 計 算 をするのが 一 番 正 確 です が 今 回 はインターバル 機 能 を 使 って 簡 易 的 に 作 ります (1) 経 過 時 間 を 表 示 するタイマー <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style>.mozi{ color:#6666ff; /* 文 字 の 色 の 指 定 */ font-size: 500%; /* 文 字 の 大 きさ500% */ </style> </head> <body> <span id="zikan" class="mozi">0</span> <span class="mozi"> 秒 </span> <script> var byousuu=0; // 変 数 の 定 義 starttimer(); // タイマーをスタート // 経 過 秒 数 の 表 示 function starttimer(){ mytimer = setinterval(function(){ // インターバル 設 定 byousuu = byousuu + 1; // 変 数 を 加 算 する $('#zikan').text(byousuu); // 表 示 する,1000); // 1000m 秒 = 1 秒 に 設 定 </script> </body> </html>

30 (2) 残 り 時 間 を 表 示 するタイマー 30 秒 から 開 始 して 残 り 時 間 を 表 示 します <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style>.mozi{ color:#6666ff; /* 文 字 の 色 の 指 定 */ font-size: 500%; /* 文 字 の 大 きさ500% */ </style> </head> <body> <span id="zikan" class="mozi">30</span> <span class="mozi"> 秒 </span> <script> var byousuu=30; // 変 数 の 定 義 starttimer(); // タイマーをスタート // 経 過 秒 数 の 表 示 function starttimer(){ mytimer = setinterval(function(){ // インターバル 設 定 byousuu = byousuu - 1; // 変 数 を 減 算 する $('#zikan').text(byousuu); // 表 示 する if(byousuu == 0){ // もし0 秒 になったら clearinterval(mytimer); // タイマーを 止 める,1000); // 1000m 秒 = 1 秒 に 設 定 </script> </body> </html>

31 6 カメラを 使 う タブレット 等 についているカメラや タブレット 内 に 保 存 してある 写 真 ファイルを 利 用 するプログラムを 作 ります (1) カメラの 画 像 を 表 示 する <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style> </style> </head> <body> <form> <input type="file" accept="image/*;capture=camera" id="cameraimage" src="camera.png" value="カメラ"> </form> <canvas id="mycanvas" width="900" height="675" style="border:1px solid black"> </canvas> <script> document.getelementbyid("cameraimage").addeventlistener("change", function(){ var canvasobj = document.getelementbyid("mycanvas"); var context = canvasobj.getcontext("2d"); var canvasw = canvasobj.width; var canvash = canvasobj.height; var reader = new FileReader(); reader.onload = function(evt){ var imgobj = new Image(); imgobj.src = reader.result; imgobj.onload = function(){ context.drawimage(imgobj,0,0, canvasobj.width, canvasobj.height); var imagefile = document.getelementbyid("cameraimage").files[0]; reader.readasdataurl(imagefile);, false); </script> </body> </html>

32 (2) 植 物 の 体 のつくりの 説 明 カメラの 画 像 の 上 で 文 字 をドラッグできるようにします <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style>.tango{ background-color: #cff; padding: 10px 10px 10px 10px; border-radius:4px; border:1px solid #bbd; font-size:150%; cursor:pointer; opacity:0.6; /* 半 透 明 */ </style> </head> <body> <form> <input type="file" accept="image/*;capture=camera" id="cameraimage" src="camera.png" value="カメラ"> <span id="11" class="tango"> 根 </span> <span id="12" class="tango"> 茎 </span> <span id="13" class="tango"> 葉 </span> </form> <canvas id="mycanvas" width="900" height="675" style="border:1px solid black"></canvas> <script> $(function(){ $("#11,#12,#13").draggable(); document.getelementbyid("cameraimage").addeventlistener("change", function(){ var canvasobj = document.getelementbyid("mycanvas"); var context = canvasobj.getcontext("2d"); var canvasw = canvasobj.width; var canvash = canvasobj.height; var reader = new FileReader(); reader.onload = function(evt){ var imgobj = new Image(); imgobj.src = reader.result; imgobj.onload = function(){ context.drawimage(imgobj,0,0,canvasobj.width,canvasobj.height);

33 var imagefile = document.getelementbyid("cameraimage").files[0]; reader.readasdataurl(imagefile);, false); </script> </body> </html> 7 テキストの 読 み 上 げ 日 本 語 英 語 のテキストを 読 み 上 げさせることができます ipadのsafari AndridoのChrome WindowsのChromeとSafari WindowsのIEとEdge 読 み 上 げの 言 語 として 日 本 語 や 英 語 の 選 択 の 他 音 量 早 さ 声 のトーンを 変 え ることができます 漢 字 の 文 章 も 正 しく 読 みます 英 語 も 結 構 流 暢 に 話 します 読 み 上 げの 機 能 を 組 み 込 むことで 教 材 の 利 便 性 が 広 がると 思 います (1) 日 本 語 を 読 み 上 げる <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style>.tango{ background-color: #cff; padding: 10px 10px 10px 10px; border-radius:4px; border:1px solid #bbd; font-size:150%; cursor:pointer; </style> </head> <body> こんにちは 今 日 はとても 良 い 天 気 ですね 早 口 言 葉 も 話 せますよ 生 麦 生 米 生 卵 <br><br> <span id="yomiage" class="tango"> 読 み 上 げます</span> <script> $(function(){ $("#yomiage").on("click", function () { playspeech(); function playspeech(){

34 var synthes = new SpeechSynthesisUtterance(); synthes.voiceuri = 'native'; synthes.volume= 1; // 音 量 min 0 ~ max 1 synthes.rate = 0.8; // 速 度 min 0 ~ max 10 synthes.pitch= 1; // 音 程 min 0 ~ max 2 synthes.text = "こんにちは 今 日 はとても 良 い 天 気 ですね 早 口 言 葉 も 話 せますよ 生 麦 生 米 生 卵 "; // 話 す 内 容 synthes.lang = "ja-up"; // en-us or ja-up speechsynthesis.speak(synthes); // 発 話 実 行 ; </script> </body> </html> (2) 英 語 を 読 み 上 げる 次 の 太 字 に 変 更 してください ja-up を[en-US に 変 えるだけで 英 語 で 読 み 上 げします <body> Hello, my name is Dora. What do you want? This is convenient. <br><br> <span id="yomiage" class="tango">speech</span> <script> $(function(){ $("#yomiage").on("click", function () { playspeech(); function playspeech(){ var synthes = new SpeechSynthesisUtterance(); synthes.voiceuri = 'native'; synthes.volume= 1; // 音 量 min 0 ~ max 1 synthes.rate = 0.8; // 速 度 min 0 ~ max 10 synthes.pitch= 1; // 音 程 min 0 ~ max 2 synthes.text = "Hello, my name is Dora. What do you want? This is convenient."; // 話 す 内 容 synthes.lang = "en-us"; // en-us or ja-up speechsynthesis.speak(synthes); // 発 話 実 行 ; </script> </body> </html> (3) テキストボックスの 文 を 読 み 上 げる テキストボックスに 入 力 されている 文 を 読 み 上 げます 読 み 上 げの 速 度 音 程 (ピ ッチ) 音 量 を 調 節 できます 読 み 上 げの 言 語 を 日 本 語 英 語 から 選 択 できる ようにします 日 本 語 で 英 文 を 読 み 上 げさせると いかにも 日 本 人 が 英 文 を 読 ん

35 でいるようなローマ 字 読 みになります 英 語 では 日 本 文 を 読 み 上 げしません <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>webページ 教 材 </title> <style> </style> </head> <body> <form> <input id="mytext" size=80 type="text" value="これは ペンです This is a pen."> <br> 速 さ(1~30) <input id="myrate" type="text" value="9" size="2" /> 音 程 (2~20) <input id="mypitch" type="text" value="10" size="2" /> 音 量 (0~10) <input id="myvolume" type="text" value="8" size="2" /> 言 語 <select id="mylang" size="1" > <option value="ja-up" selected> 日 本 語 </option> <option value="en-us"> 英 語 </option> </select> <input type="button" value=" 読 み 上 げ" onclick="playspeech()"> </form> <script> function playspeech(){ var synthes = new SpeechSynthesisUtterance(); synthes.voiceuri = 'native'; synthes.volume=number(document.getelementbyid("myvolume").value)/10;// 音 量 synthes.rate = Number(document.getElementById("myRate").value)/10; // 速 度 synthes.pitch= Number(document.getElementById("myPitch").value)/10; // 音 程 synthes.text = document.getelementbyid("mytext").value; // 話 す 内 容 synthes.lang = document.getelementbyid("mylang").value; // en-us or ja-up speechsynthesis.speak(synthes); // 発 話 実 行 ; </script> </body> </html>

36 8 数 式 の 表 示 Webページで 累 乗 は 表 示 できますが 分 数 ルート 積 分 など 数 学 独 自 の 表 記 をさせ ることはとても 難 しいことです 図 形 と 数 字 を 組 み 合 わせれば 何 とか 表 現 できますが 汎 用 性 がありません 世 の 中 には 親 切 な 人 もいるようで 数 学 表 記 に 困 っている 人 の ためにJavaScriptライブラリを 作 ってくれる 人 がいます 数 学 の 表 記 用 に MathJax があります 使 い 方 は 日 本 語 で 使 い 方 を 説 明 している MathJaxの 使 い 方 を 参 照 願 います それでは サンプルを 作 ってみましょう MathJaxは3 万 のファイルがあるので ダウンロードして 展 開 すると 時 間 がかかるの でネット 上 のサイトを 参 照 するようにします (1) 分 数 とルートの 表 示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlinemath: [['$','$'], ["\\(","\\)"]] </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/mathjax.js?config=tex-ams_html"> </script> <meta http-equiv="x-ua-compatible" content="ie=emulateie7" /> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.ui.touch-punch.js"></script> <title>webページ 教 材 </title> <style> </style> </head> <body> 分 数 \(1\over2\) <br> ルート \(x=1\pm2\sqrt{3\) <script> </script> </body> </html>

37 第 6 章 参 考 となるWebページ 1 JavaScript 入 門 JavaScriptの 基 本 が 項 目 ごとに 分 けられ 丁 寧 な 説 明 が 書 かれています 2 とほほのJavaScriptリファレンス 内 容 はしっかりしていて とほほ ではありません とても 参 考 になります 3 アルファシス alphasis.info JavaScript jqueryの 基 本 リファレンス 作 品 や 小 技 集 があります 4 jquery 入 門 道 場 jqueryを 基 礎 から 勉 強 するにはこのサイト 5 jquery 日 本 語 リファレンス jqueryの 機 能 を 調 べるにはこちらのサイト 第 7 章 おわりに Webページを 作 ることやプログラミングをすることは パズルと 同 じです 小 さなピー スを 組 み 合 わせて 問 題 を 解 いていく ある 本 に コンピュータは 計 算 がとても 速 い 小 学 校 1 年 生 と 思 ってください と 書 かれていました プログラムで 使 用 している 単 語 は 小 学 校 1 年 生 の 知 っている 単 語 よりずっと 少 ないです その 少 ない 単 語 ( 命 令 )を 組 み 合 わせて 大 きな 問 題 を 解 くのがプログラミングです プログラムにも 流 行 があります 今 一 番 旬 なのが HTML5です ここ 数 年 で 新 しい 規 格 が 決 まり 新 機 能 がブラウザにも 取 り 入 れられるようになってきています 数 年 前 の 流 行 だったFlashはAppleから 嫌 われ VisualBasicは 本 の 発 刊 が 少 なくなり Delphiに 至 って はネットの 話 題 にも 出 なくなりました 多 くの 人 が 利 用 する 機 器 がコンピュータからタブ レットやスマートフォンに 移 ってきています それと 連 動 して プログラムを 作 成 する 言 語 も 変 わってきています 今 はHTML5が 最 新 でも 5 年 10 年 後 は 別 の 言 語 が 流 行 するかも しれません いや 技 術 は 常 に 進 歩 するので 新 しい 言 語 が 流 行 しているはずです いつ までも 同 じことにとどまっていないで 新 しいことにチャレンジする 貪 欲 な 心 を 持 ち 続 け たいものです

■新聞記事

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

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

コンピュータサイエンス 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

コンピュータサイエンス 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

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

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

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

第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

Lecture/CompPracR2003/12th

Lecture/CompPracR2003/12th Lecture/CompPracR2003/12th 2016 年 7 月 17 日 コンピュータ 演 習 ( 再 ) 第 12 回 (1) Webページの 作 成 (1) Webページを 作 成 する 道 具 (1) テキストエディタを 使 うメリット デメリット (2) HTML (2) HTMLとは (2) HTMLの 書 き 方 (3) HTMLファイルの 構 造 (3) 空 白 と 改 行

More information

CSSの基礎

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

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

Microsoft PowerPoint - css [互換モード]

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

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

モール管理者マニュアル Ver.1.0

モール管理者マニュアル Ver.1.0 1 Html 編 集 ツール 補 足 マニュアル Ver.1.0 株 式 会 社 ソフトクリエイト 2012/11/14 目 次 1. Html について... 3 1.1. Html とは... 4 1.2. Html タグの 基 本... 5 1.2.1. HTML タグの 基 礎... 5 1.2.2. HTML タグの 種 類 ( 主 要 タグ)... 7 2. Html 編 集 ツール...

More information

アフィリエイターの為のHTML

アフィリエイターの為のHTML アフィリエイターが 覚 えておくべき HTML 辞 典 著 作 権 について このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です このレポートの 著 作 権 はやまひろに 属 します 著 作 権 者 の 許 可 なく このレポートの 全 部 又 は 一 部 を いかなる 手 段 においても 複 製 転 載 流 用 転 売 等 することを 禁 じます このレポートに 書 かれた

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 の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

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt)

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt) 平 成 23 年 度 技 術 研 究 会 HTML5 部 会 HTML5を 使 ったWebアプリの 開 発 ~HTML4.0とHTML5の 比 較 ~ メンバー 富 士 通 九 州 システムズ 三 角 瞳 オーガス 大 分 シーイーシー オーイーシー オーイーシー 老 川 翔 太 行 部 佑 希 西 角 幸 恵 下 郡 剛 九 州 東 芝 エンジニアリング 渡 邉 泰 三 大 分 交 通 松 迫 翔

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

(Microsoft Word - CSS\202P\201i\212\356\226{\202P_.doc)

(Microsoft Word - CSS\202P\201i\212\356\226{\202P_.doc) スタイルシート ( 第 1 章 基 礎 1) HTMLはWeb 作 成 用 の 言 語 ですが 文 字 飾 りがかなり 貧 弱 です そこを 強 化 した ものがスタイルシートと 言 われるものです さらにスタイルシートには HTMLでは 出 来 ないような 仕 組 みも 取 り 入 れられています スタイルシートよりレベルの 高 い 技 術 は JavaScript ですが スタイルシートの 仕

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

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

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

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

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

4 ログインをクリックして 下 さい 2. ログイン 方 法 その2 1 右 上 の 人 型 マークをクリックして 下 さい 2 ログインをクリックして 下 さい 3 ご 自 身 の ID とパスワードを 入 力 して 下 さい 4 次 回 から ID 入 力 を 省 略 のチェックボックスをクリッ

4 ログインをクリックして 下 さい 2. ログイン 方 法 その2 1 右 上 の 人 型 マークをクリックして 下 さい 2 ログインをクリックして 下 さい 3 ご 自 身 の ID とパスワードを 入 力 して 下 さい 4 次 回 から ID 入 力 を 省 略 のチェックボックスをクリッ 韓 国 小 顔 骨 気 美 容 協 会 ウェブサイトのご 利 用 ガイド 1. ログイン 方 法 その1 1 右 上 のメニューバー ログイン にカーソルを 合 わせて ログイン をクリックして 下 さい 2 ご 自 身 の ID とパスワードを 入 力 して 下 さい 3 次 回 から ID 入 力 を 省 略 のチェックボックスをクリックすると がつきます すると 次 回 から ID の 最 初

More information

WORD 98 入力の手引き

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

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

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

1. 新 しくページを 作 成 する( 無 制 限 タイプ) デザイン 変 更 検 索 1 左 のメニューから デザイン 変 更 をクリックします 2ページタイプが 3 種 類 あります ここでは 無 制 限 タイプ を 選 びます テーマとカラーがありますので ここでデザインを 絞 り 込 むこと

1. 新 しくページを 作 成 する( 無 制 限 タイプ) デザイン 変 更 検 索 1 左 のメニューから デザイン 変 更 をクリックします 2ページタイプが 3 種 類 あります ここでは 無 制 限 タイプ を 選 びます テーマとカラーがありますので ここでデザインを 絞 り 込 むこと ウェブ 作 成 システム Web Factory 1 1. 新 しくページを 作 成 する( 無 制 限 タイプ) デザイン 変 更 検 索 1 左 のメニューから デザイン 変 更 をクリックします 2ページタイプが 3 種 類 あります ここでは 無 制 限 タイプ を 選 びます テーマとカラーがありますので ここでデザインを 絞 り 込 むことが 出 来 ます 1ページタイプ では 情 報

More information

Taro-01_Web_html自習テキストⅠ.

Taro-01_Web_html自習テキストⅠ. 平 成 18 年 度 学 校 Web ページ 作 成 研 修 講 座 HTML の 基 礎 Ⅰ ~メモ 帳 で Web ページを 作 ろう!!~ 今 回 の 勉 強 内 容 メモ 帳 /ファイルの 保 存 / 文 字 入 力 /ページタイトルの 設 定 文 字 色 の 設 定 / 文 字 サイズの 設 定 / 水 平 線 /リンクの 設 定 岩 手 県 立 総 合 教 育 センター 情 報 教 育

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

JavaScript演習

JavaScript演習 JavaScript 入 門 1 JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能 ( 実 際 は,HTMLファイル 内 or 外 部 ファイル として

More information

28年オンライン調査システム操作説明書

28年オンライン調査システム操作説明書 平 成 28 年 科 学 技 術 研 究 調 査 オ ン ラ イ ン 調 査 シ ス テ ム 操 作 説 明 書 科 学 技 術 研 究 調 査 では 郵 送 に 加 えてオンライン 調 査 システムを 利 用 した インターネットによるご 回 答 も 可 能 となっています オンライン 調 査 システムの 利 用 には フリーソフトである AdobeReader の 所 定 バージョン 等 の 利

More information

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

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

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

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 1 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく

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

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 Active! mail 6.52 ユーザーズマニュアル(スマートフォン 版 ) Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 権 の 侵 害 とな

More information

情報資源組織演習B:

情報資源組織演習B: 情 報 資 源 組 織 演 習 A( 書 誌 の 作 成 ) 第 12 回 書 誌 データ 管 理 検 索 システムの 構 築 2013 年 度 跡 見 学 園 女 子 大 学 文 学 部 准 教 授 福 田 博 同 書 誌 データ 管 理 検 索 システムの 構 築 第 9 回 で 書 誌 データベース 構 築 は 理 解 Web 検 索 では 以 下 の 様 な 方 法 が 取 られる A B

More information

項 目 設 定 設 置 可 能 項 目 数 100 項 目 投 票 フォームの 設 置 可 能 投 票 項 目 数 1 項 目 (10 選 択 肢 ) 必 須 項 目 設 定 条 件 項 目 設 定 添 付 ファイル 合 計 容 量 入 力 項 目 を 必 須 項 目 に 設 定 できます フォーム

項 目 設 定 設 置 可 能 項 目 数 100 項 目 投 票 フォームの 設 置 可 能 投 票 項 目 数 1 項 目 (10 選 択 肢 ) 必 須 項 目 設 定 条 件 項 目 設 定 添 付 ファイル 合 計 容 量 入 力 項 目 を 必 須 項 目 に 設 定 できます フォーム 更 新 日 :2015 年 4 月 14 日 料 金 初 期 費 用 月 額 料 金 無 料 サーバーの 初 期 セットアップ 時 以 外 または 複 数 フォームメーラーを インストールする 場 合 には 別 途 費 用 が 必 要 となります 無 料 スペック 100 個 作 成 可 能 フォーム 数 一 般 投 票 注 文 フォームに 対 応 設 置 可 能 項 目 数 100 項 目 添 付

More information

情報処理実習(工基3)

情報処理実習(工基3) 情 報 ( 実 習 )( 体 育 4 班 ) 第 4 回 ホームページ 篇 今 週 は 皆 さんにホームページを 作 って 頂 きます ホームページ 作 成 を 通 じて 様 々な 情 報 を 発 信 したり 受 信 したりする 方 法 のひとつとなることを 目 指 します 0 はじめに はじめに 筑 波 大 学 のホームページ(HP と 略 )を 見 てみましょう デスクトップ 上 にある Internet

More information

Microsoft PowerPoint - manualtachiyomi.pptx

Microsoft PowerPoint - manualtachiyomi.pptx ニックネームはここに 載 る!! マイページの 左 上 ブログのプロフィール 欄 メッセージを 送 った 相 の 受 信 箱 クリックしてもらえるような 興 味 を 引 く 名 前 にしましょう 記 事 を 編 集 削 除 する 下 書 き 保 存 されている= 公 開 されていない 公 開 されている リンクが 付 いていて クリックすると 公 開 されている 記 事 が 開 く 記 事 を 編

More information

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作

Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 Active! mail 6.54 ユーザーズマニュアル(スマートフォン 版 ) Active! mail のプログラムとマニュアルは 著 作 権 法 で 保 護 された 著 作 物 で その 全 部 または 一 部 を 許 可 なく 複 製 したり 複 製 物 を 配 布 したり あるいは 他 のコンピュータ 用 に 変 換 したり 他 の 言 語 に 翻 訳 すると 著 作 権 の 侵 害 とな

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

JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能

JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能 JavaScript 入 門 1 JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能 ( 実 際 は,HTMLファイル 内 or 外 部 ファイル として

More information

第 5 部 コンピューターの 仕 組 み 保 存 ができたら 第 21 章 で 作 っていた hello.html に 手 を 加 えて 上 書 き 保 存 し ブラウザーで 確 認 してみよう 例 7: 画 像 を 入 れる

背 景

第 5 部 コンピューターの 仕 組 み 保 存 ができたら 第 21 章 で 作 っていた hello.html に 手 を 加 えて 上 書 き 保 存 し ブラウザーで 確 認 してみよう 例 7: 画 像 を 入 れる <html> <body bgcolor=yellow> <p> 背 景 第 22 章 ウェブページの 作 成 2 画 像 の 表 示 HTMLの 細 かいタグ 自 己 紹 介 ページの 作 成 1. 画 像 を 入 れる Word の 画 面 で 画 像 ( 写 真 や 絵 )を 入 れるときは イメージそのものを 表 示 し たが ウェブページに 画 像 を 入 れるには メモ 帳 の 画 面 で 直 接 画 像 を 表 示 させることはできない 作 業 している HTML

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

更 新 履 歴 更 新 日 更 新 内 容 2016 年 3 月 14 日 地 理 院 地 図 の 改 良 に 伴 い 本 マニュアルを 刷 新 2016 年 3 月 16 日 説 明 の 図 を 一 部 更 新 2016 年 5 月 12 日 Google Chrome の 仕 様 変 更 に 伴

更 新 履 歴 更 新 日 更 新 内 容 2016 年 3 月 14 日 地 理 院 地 図 の 改 良 に 伴 い 本 マニュアルを 刷 新 2016 年 3 月 16 日 説 明 の 図 を 一 部 更 新 2016 年 5 月 12 日 Google Chrome の 仕 様 変 更 に 伴 地 理 院 地 図 操 作 マニュアル 2016 年 7 月 19 日 更 新 国 土 地 理 院 1 更 新 履 歴 更 新 日 更 新 内 容 2016 年 3 月 14 日 地 理 院 地 図 の 改 良 に 伴 い 本 マニュアルを 刷 新 2016 年 3 月 16 日 説 明 の 図 を 一 部 更 新 2016 年 5 月 12 日 Google Chrome の 仕 様 変 更 に

More information

68 69

70 71 72 73

68 <td valign=top class=c8> 69 <p class=c13><a name=マーク0><span class=c9>⓪</span></a></p> 70 </td> 71 </tr> 72 <tr> 73 <td valign=top class ページ 内 のリンクでページ 内 に 移 動 の html のページの 追 加 方 法 三 宅 節 雄 Html 文 書 を TeraPad で 開 きます 1 2

More information

すべての 文 書 は テンプレートから 作 成 を 開 始 します 空 白 のテンプレートから 開 始 することもできます 完 成 した 文 書 のイメージに 最 も 近 いテンプレートを 見 つけてください Publisher 2013 にはテンプレートが 付 属 しております 1. [ファイル]

すべての 文 書 は テンプレートから 作 成 を 開 始 します 空 白 のテンプレートから 開 始 することもできます 完 成 した 文 書 のイメージに 最 も 近 いテンプレートを 見 つけてください Publisher 2013 にはテンプレートが 付 属 しております 1. [ファイル] Publisher 2013 の 基 本 的 使 い 方 TO_takatsuki Publisher の 向 いている 文 書 枚 数 の 少 ない 文 書 ポスター チラシ グリーティングカード ニュースレター など 記 載 枠 画 像 などの 挿 入 枠 の 大 きさを 固 定 し 文 書 や 画 像 を 配 置 したい 文 書 文 書 を 作 成 する まず テンプレートを 探 し そこから

More information

アスラテック株式会社 会社案内

アスラテック株式会社 会社案内 JavaScript SDK for V-Sido CONNECT 利 用 の 手 引 き Mac 編 アスラテック 株 式 会 社 目 次 1. はじめに 1-1. 本 マニュアルの 概 要 p.3 1-2. 使 用 する 機 材 など p.4 1-3. 各 機 器 の 接 続 構 成 と 開 発 イメージ p.5 2. 初 期 設 定 とVSidoConn4Macの 導 入 2-1. Bluetoothのペアリング

More information

スライド 1

スライド 1 Hos-CanR 3.0 運 用 マニュアル Hos-CanR 3.0 運 用 マニュアル 登 録 作 業 者 用 Ver. 2 バージョン 改 訂 日 付 改 訂 内 容 Ver. 1 2010/3/15 初 版 Ver. 2 2010/8/9 ファイル 取 り 込 み 時 の 同 一 レコードの 判 定 についての 記 載 を 追 記 Hos-CanR 3.0 運 用 マニュアル 目 次 1.

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

HTML文章作成

HTML文章作成 HTML 文 章 作 成 Web ページは HTML(Hyper Text Markup Language) という 言 語 を 使 っ て 欠 かれた HTML ファイルでできています ここでは 簡 単 な HTML 文 章 を 実 際 につくっていきます 参 考 文 献 :エクスナレッジ HTML とスタイルシートによる Web サイト 作 成 術 1. 簡 単 なホームページをつくりましょう

More information

0序文‐1章.indd

0序文‐1章.indd 本 書 に 記 載 されたURL 等 は 執 筆 時 点 でのものであり 予 告 なく 変 更 される 場 合 があります 本 書 の 使 用 ( 本 書 のとおりに 操 作 を 行 う 場 合 を 含 む)により 万 一 直 接 的 間 接 的 に 損 害 が 発 生 し ても 出 版 社 および 著 者 は 一 切 の 責 任 を 負 いかねますので あらかじめご 了 承 下 さい Microsoft

More information

スライド 1

スライド 1 Webプログラミング2 2.Webプログラミング 概 要 (2) ( 復 習 )Webとは 様 々な 利 用 シーン 様 々なデバイス/ブラウザ パソコン 携 帯 電 話 ゲーム 機 /TV 電 子 ブックリーダー 学 校 案 内 / 会 社 案 内 オンラインショップ ブログ/ 掲 示 板 /SNS/Twitter/Facebook 学 内 / 社 内 システム スケジューラ/カレンダー/Webメール

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

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

intra-mart Accel GroupMail 2016 Spring — リリースノート   初版 2016-04-01  

intra-mart Accel GroupMail 2016 Spring — リリースノート   初版 2016-04-01   intra-mart Accel GroupMail 2016 Spring リリースノート 初 版 2016-04-01 Copyright 2016 NTT DATA INTRAMART CORPORATION 1 Top 目 次 intra-mart Accel GroupMail 2016 Spring リリースノート 初 版 2016-04-01 1. 改 訂 情 報 2. はじめに 3.

More information

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

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

More information

Microsoft Word - 2014第10&11回HTML入門.doc

Microsoft Word - 2014第10&11回HTML入門.doc 第 10 & 11 回 HTML 入 門 水 野 りか ここでは,いわゆるホームページを 作 成 する 方 法 の 基 礎 を 学 びます ホームページを 作 るための 言 語 は,HTML (Hyper Text Markup Language)と 呼 ばれています この 言 語 はどんなエディタやワープロ ソフトでも 書 くことができますが, 本 講 では, Windows 標 準 のメモ 帳

More information

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1..............................

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 4 2.............................. 6 3...........................

More information

目 次 目 次... 2 1. 概 要... 4 1.1. 対 応 バージョン(2013/06/01 時 点 )... 5 1.2. 動 作 環 境 (2013/06/01 時 点 )... 5 1.3. 対 応 フォーマット... 5 1.4. 動 画 変 換... 5 1.5. MS Offic

目 次 目 次... 2 1. 概 要... 4 1.1. 対 応 バージョン(2013/06/01 時 点 )... 5 1.2. 動 作 環 境 (2013/06/01 時 点 )... 5 1.3. 対 応 フォーマット... 5 1.4. 動 画 変 換... 5 1.5. MS Offic 作 成 日 文 書 番 号 文 書 ver 2013/05/31 V2.0.0 作 成 部 署 / 作 成 者 検 討 者 文 書 管 理 者 3hands タイトル 文 書 種 類 ページ Media Library 操 作 マニュアル 説 明 書 1(55) Media Library Ver.1.2 ipad 操 作 マニュアル スリーハンズ 株 式 会 社 100-6103 東 京 都 千

More information

「V-Sido CONNECT RC」 Raspberry Pi 2との連係方法

「V-Sido CONNECT RC」 Raspberry Pi 2との連係方法 アスラテック 株 式 会 社 V-Sido CONNECT RC Raspberry Pi 2との 連 係 方 法 目 次 1. はじめに 1-1. 本 マニュアルの 概 要 p.3 1-2. 使 用 する 機 材 など p.4 1-3. 各 機 器 の 接 続 イメージ p.5 1-4. JavaScriptによる 開 発 環 境 の 概 略 p.6 2. Raspberry Pi 2を 利 用

More information

Chap

Chap Chapter 2 レポート 作 成 2 回 目 は レポート 作 成 に 必 要 な Word や 画 像 編 集 ソフトの 利 用 法 などを 学 びます 1.Word の 利 用 Word(ワード)はコンピュータを 文 房 具 として 使 用 する 上 でおそらく 最 も 頻 繁 に 使 用 する 文 書 作 成 のソフトウエアです マイクロソフト 社 が 自 社 の Windows 上 で

More information

( 受 信 したメッセージの 確 認 検 索 ) ( 申 請 届 出 書 類 や 説 明 会 資 料 等 の 確 認 ダウンロード) (スケジュール/ToDo の 登 録 確 認 更 新 削 除 ) (ブックマークの 登 録 確 認 更 新 削 除 ) ( 受 信 したメッセージの 転 送 設 定

( 受 信 したメッセージの 確 認 検 索 ) ( 申 請 届 出 書 類 や 説 明 会 資 料 等 の 確 認 ダウンロード) (スケジュール/ToDo の 登 録 確 認 更 新 削 除 ) (ブックマークの 登 録 確 認 更 新 削 除 ) ( 受 信 したメッセージの 転 送 設 定 F-Station パソコン 版 マニュアル ( 受 信 したメッセージの 確 認 検 索 ) ( 申 請 届 出 書 類 や 説 明 会 資 料 等 の 確 認 ダウンロード) (スケジュール/ToDo の 登 録 確 認 更 新 削 除 ) (ブックマークの 登 録 確 認 更 新 削 除 ) ( 受 信 したメッセージの 転 送 設 定 ) ( 講 義 に 関 するお 知 らせの 確 認 )

More information

スライド 0

スライド 0 V8.0 新 機 能 と 改 良 機 能 のご 紹 介 2016/2/29 目 次 1. V8.0 主 な 機 能 改 良 点 2. V7.1からの 主 な 変 更 点 について 全 般 的 な 変 更 点 会 議 室 管 理 者 向 け 画 面 の 変 更 点 登 録 ユーザー 向 け 画 面 の 変 更 点 Windowsクライアント 画 面 の 変 更 点 モバイルアプリ 関 連 の 変 更

More information

ノートをクラウドで 管 理 する [ 共 有 ] タブについて OneNote を 初 めて 起 動 すると クラウドに 接 続 するように 求 められ そのクラウドに 最 初 のノートブックが 作 成 されます OneNote では Microsoft アカウント (MSN Hotmail Mes

ノートをクラウドで 管 理 する [ 共 有 ] タブについて OneNote を 初 めて 起 動 すると クラウドに 接 続 するように 求 められ そのクラウドに 最 初 のノートブックが 作 成 されます OneNote では Microsoft アカウント (MSN Hotmail Mes クイック スタート ガイド Microsoft OneNote 2013 は レイアウトがこれまでのバージョンから 変 わりました このガイドは 少 しでも 早 く 慣 れることができるようにそれらの 違 いをまとめたものです タッチとマウスを 切 り 替 える タッチ デバイスで OneNote を 使 う 場 合 クイック アクセス ツール バーにこのスイッチを 追 加 できます リボンの 表

More information

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

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

More information

スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年

スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年 Departmental Bulletin Paper / 紀 要 論 文 スタイルシートを 用 いたWebページの 運 用 太 田, 諭 之 ; 大 橋, 和 義 ; 後 藤, 克 嘉 ; 水 野, 保 則 技 術 職 員 による 技 術 報 告 集. 2009, 17, p. 24-27. http://hdl.handle.net/10076/10274 スタイルシートを 用 いた Web ページの

More information

Ver2.2.0 新機能ガイド

Ver2.2.0 新機能ガイド アプリケーション 新 機 能 ガイド ~Version 2.9.0~ 1 目 次 1 はじめに... 3 2 新 機 能... 3 3 機 能 紹 介 フォトレポート... 4 3.1 売 場 ノート フォトレポート の PC 画 面 対 応 #902... 4 4 機 能 紹 介 お 知 らせ... 18 4.1 店 舗 スタッフ 回 答 の 店 長 閲 覧 不 可 オプション 追 加 #916...

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

2 2-1 HTMLの 構 造 等 公 開 URLが 静 的 なHTMLであること 判 読 不 可 能 な 文 字 を 含 むものや 文 字 数 が 多 すぎるURL(いわゆる 動 的 なHTML)は 原 則 として 不 可 とする 2-2 任 意 なURLが 使 用 でき コンテンツ 作 成 時

2 2-1 HTMLの 構 造 等 公 開 URLが 静 的 なHTMLであること 判 読 不 可 能 な 文 字 を 含 むものや 文 字 数 が 多 すぎるURL(いわゆる 動 的 なHTML)は 原 則 として 不 可 とする 2-2 任 意 なURLが 使 用 でき コンテンツ 作 成 時 1 1-1 サイト 全 般 デザイン 等 サイト 全 体 が 標 準 化 統 一 化 されたページデザインとすること ただし サイトで 異 なるデザインで 作 成 表 示 することができること 1-2 ヘッダー フッターは 原 則 すべてのページで 統 一 したデザインとすること 1-3 ロゴ イラスト バナーなどサイトに 応 じたデザインで 作 成 すること 1-4 スマートフォンやタブレット 端

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション HTMLガイダンス 1 HTMLを 用 いたUI 設 定 2 色 々な 見 え 方 で 画 面 に 表 示 されるWebページ 全 て 文 字 /キャラクタで 表 現 されたデータの 集 まり HTML(Hyper Text Markup Language) パソコン 等 のインターネット 端 末 のブラウザソフトで 文 書 情 報 を 表 示 するときに 用 いられるプログラム 言 語 の 一 種

More information

卒 論 のためのWord03 目 次 ページ 設 定 の 方 法 - 用 紙 サイズの 設 定 - 余 白 印 刷 形 式 の 設 定 -3 文 字 数 行 数 の 設 定 ページ 番 号 のつけ 方 5 - ページ 番 号 をつける - ページ 番 号 を 途 中 からつける -3 ページ 番 号

卒 論 のためのWord03 目 次 ページ 設 定 の 方 法 - 用 紙 サイズの 設 定 - 余 白 印 刷 形 式 の 設 定 -3 文 字 数 行 数 の 設 定 ページ 番 号 のつけ 方 5 - ページ 番 号 をつける - ページ 番 号 を 途 中 からつける -3 ページ 番 号 卒 論 のためのWord03 目 次 ページ 設 定 の 方 法 - 用 紙 サイズの 設 定 - 余 白 印 刷 形 式 の 設 定 -3 文 字 数 行 数 の 設 定 ページ 番 号 のつけ 方 5 - ページ 番 号 をつける - ページ 番 号 を 途 中 からつける -3 ページ 番 号 を 途 中 から 消 す -4 一 部 のページのみページ 番 号 を 消 す 3 目 次 のつくり

More information

Microsoft Word - 1-html.doc

Microsoft Word - 1-html.doc Web ページ 作 成 の 基 礎 の 基 礎 内 容 : 1. HTML の 仕 組 み 2. HTMLの 文 法 2007-11-16 テキスト 原 案 作 成 原 田 隆 史 ( 慶 應 義 塾 大 学 ) 協 力 : 石 田 栄 美 ( 駿 河 台 大 学 ), 新 居 雅 行 (Apple Japan), 中 島 玲 子 1.Web ページの 仕 組 みと 作 成 1. Web ページを

More information

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

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

More information

サーバサイドスクリプトPHPを実感しよう

サーバサイドスクリプトPHPを実感しよう 第 3 講 サーバサイドスクリプト PHP を 実 感 しよう! クライアントサイドでは HTML に 埋 め 込 んだ(あるいは 別 ファイルから HTML に 読 み 込 まれた)JavaScript によって さまざまな 処 理 や 動 的 ページの 生 成 を 行 えることは すで に 第 3 講 までで 学 習 しました しかし HTML と JavaScript の 組 合 せではどうしても

More information

トーマツグループの事業展開

トーマツグループの事業展開 モバイルナレッジ for Freshers 利 用 ガイド 1 目 次 Ⅰ.ようこそモバイルナレッジへ 1.モバイルナレッジとは 2.モバイルナレッジを 使 ったメリット Ⅱ.モバイルナレッジの 利 用 イメージ Ⅲ.モバイルナレッジの 学 びの 流 れ 3ページ 4ページ 5ページ 7ページ 9ページ Ⅳ. 初 期 設 定 1.サインイン 11ページ 2.プロフィールの 設 定 12ページ (1)

More information

著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマイクロソフトの 見 解 を 反 映 したものです マイクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われな

著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマイクロソフトの 見 解 を 反 映 したものです マイクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われな Visual Studio Do-It-Yourself シリーズ 第 15 回 jquery 著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマイクロソフトの 見 解 を 反 映 したものです マイクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われないものとします

More information

CMS操作手順書

CMS操作手順書 モーハワイ ブログ 操 作 マニュアル 目 次 No タイトル 1 フォルダ ファイル 構 成 2 Wordpress の 操 作 3 その 他 のページの 編 集 4 用 語 集 P1 1 フォルダ ファイル 構 成 この 項 ではウェブサイトを 構 成 するフォルダ ファイルについて 説 明 します 1.1 フォルダ 構 造 ファイル 名 フォルダ/ファイル 名 ページ 名 称 フォルダ 内 容

More information

- 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2

- 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2 操 作 マニュアル 学 生 編 - (204 年 3 月 ) - 目 次 - 第 章 システムの 概 要.... ポータルサイトとは.... 2 利 用 環 境 とブラウザ 操 作 時 の 留 意 事 項.... 3 添 付 ファイル 登 録 時 の 留 意 事 項... 2 第 2 章 基 本 操 作... 3 2. ログインとログアウト... 3 2. 2 ポータル 画 面 の 構 成... 4

More information

Microsoft Word - Gmailユーザ向け利用マニュアル_20131105v6.docx

Microsoft Word - Gmailユーザ向け利用マニュアル_20131105v6.docx 目 次 1. Gmail のログイン ログアウト 方 法... 1 1.1. ログイン 方 法... 1 1.2. ログアウト 方 法... 4 2. Gmail 作 成 方 法... 5 2.1. 新 規 メールの 作 成... 5 3. メールデータの 移 行... 8 3.1. GraceMail のデータをバックアップ( 保 存 )する... 8 3.2. Thunderbird の 入 手

More information

3 システム 概 要 ウェブ アプリケーションによる 情 報 収 集 シ ステムの 概 要 をユースケース 図 にて 示 す( 図 1) 途 中 まで 行 い 一 時 的 にサーバに 格 納 しておき 再 度 先 ほどの 途 中 から 記 入 できるようになっている つまり 1 日 に 何 度 も1

3 システム 概 要 ウェブ アプリケーションによる 情 報 収 集 シ ステムの 概 要 をユースケース 図 にて 示 す( 図 1) 途 中 まで 行 い 一 時 的 にサーバに 格 納 しておき 再 度 先 ほどの 途 中 から 記 入 できるようになっている つまり 1 日 に 何 度 も1 XMLとExcelを 利 用 したWebによるアンケート 収 集 システム の 構 築 Synthesis a new web application system using XML, php and Excel 福 良 博 史 伊 東 久 美 子 荻 野 美 佐 子 FUKURA Hirofumi, Ito Kumiko, Ogino Misako 1 はじめに 0 歳 ~2 歳 の 主 として

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (6) ~POST (2011/06/22) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 入 力 された 文 字 を 受 け 取 りPOSTで 送 信 する 部 分 (post.htm)

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

カゴラボ管理画面マニュアル(3.商品管理)

カゴラボ管理画面マニュアル(3.商品管理) カゴラボ 管 理 画 面 操 作 設 定 マニュアル CHAPTER 3 商 品 管 理 編 カゴラボバージョン4.0 系 お 問 い 合 せはこちらまで カゴラボサポートセンター 0120-713-362 ( 携 帯 電 話 からは 0985-23-3362 ) E-mail : support@cagolab.jp 受 付 時 間 : 平 日 10:00~12:00/13:00~18:00 (

More information

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を

1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封 率 を メールテンプレート 編 集 ユーザーマニュアル Ver1.0 2016/5/1 株 式 会 社 シャノン 1 1. 目 次 1. 目 次 2.はじめに 2-1.メールテンプレート 編 集 機 能 とは? 2-2. 対 象 読 者 3. 用 語 一 覧 4. 利 用 の 流 れ 4-1.メールテンプレート 編 集 の 流 れ 5. 機 能 説 明 利 用 方 法 5-1.テキストメール 編 集 開 封

More information

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

More information

この 講 座 で 学 ぶこと Webサイト 制 作 に 関 わるスマートフォ ン/タブレットの 仕 様 2

この 講 座 で 学 ぶこと Webサイト 制 作 に 関 わるスマートフォ ン/タブレットの 仕 様 2 スマートフォンサイト 制 作 基 礎 02. スマートフォン/タブレットの 仕 様 この 講 座 で 学 ぶこと Webサイト 制 作 に 関 わるスマートフォ ン/タブレットの 仕 様 2 Web 制 作 に 関 わる 仕 様 スマートフォン/タブレット ブ 向 けWeb サイト 制 作 をする 際 に 知 っておくべき 仕 様 など OS 画 面 サイズ/ 解 像 度 ブラウザ 使 用 言 語

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

目 次 本 書 について... 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

Developer Camp

Developer Camp A2 HTML5テクニカルセッション HTML5アプリ 開 発 入 門 エンバカデロ テクノロジーズ エヴァンジェリスト 高 橋 智 宏 ttakahashi@embarcadero.com アジェンダ HTML5とは? HTML5の 基 礎 Audio Video Canvas WebGL(Web-Based Graphics Library) AppCache(アプリケーションキャッシュ) Mobile(iOS,

More information

22. 情 報 の 発 信 伝 達 コミュニケーション Ustream :2007 年 にジョン ハム ブラッド ハンスタブル ジュラ フェヘルに よって 設 立 された 動 画 共 有 サービス 元 々は3 人 が 開 発 した イラク 戦 争 に 派 兵 された 友 人 達 と 家 族 のための

22. 情 報 の 発 信 伝 達 コミュニケーション Ustream :2007 年 にジョン ハム ブラッド ハンスタブル ジュラ フェヘルに よって 設 立 された 動 画 共 有 サービス 元 々は3 人 が 開 発 した イラク 戦 争 に 派 兵 された 友 人 達 と 家 族 のための 2016 年 度 春 学 期 ( 月 V/ 火 II ) 情 報 情 報 発 信 と 伝 達 22. 情 報 の 発 信 伝 達 コミュニケーション 23. 情 報 発 信 のためのHTMLの 基 礎 最 初 に 講 義 資 料 は http://astro.u-gakugei.ac.jp/~nishiura 西 浦 クンの 講 義 室 に 縮 小 版 (PDFファイル)を 置 く 予 定 東 京

More information

ホームページとは何?

ホームページとは何? ホームページ 作 成 にあたっての 基 本 事 項 ホームページとは? インターネットを 介 して 誰 もが 閲 覧 できるように 作 られたものを ホームページ と 言 います ホームページには 文 字 だけでなく 画 像 や 動 画 音 楽 なども 埋 め 込 むことができま す またホームページに 掲 載 されている 情 報 の 中 でひとまとめに 括 られたものを コンテ ンツ と 呼 んでいます

More information

Microsoft Word - 第4&5回HTML&MIFES入門.doc

Microsoft Word - 第4&5回HTML&MIFES入門.doc 第 4&5 回 HTML & MIFES 入 門 水 野 りか ここでは,いわゆるホームページを 作 成 する 方 法 の 基 礎 を 学 びます ホームページを 作 るための 言 語 は,HTML (Hyper Text Makeup Language)と 呼 ばれています この 言 語 を 書 くためのテキスト エディタが MIFES です HTML で 書 かれたページは,Netscape や

More information