10 章 各 種 Visual ツールを 作 ってみよう 実 際 の Web ページで 見 かける 各 種 Visual ツールの 作 り 方 を 説 明 します <input>タグで 作 るボタンでなく イメージを 使 った Visual ボタン ある 領 域 にマウス が 入 ったらその 領 域

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "10 章 各 種 Visual ツールを 作 ってみよう 実 際 の Web ページで 見 かける 各 種 Visual ツールの 作 り 方 を 説 明 します <input>タグで 作 るボタンでなく イメージを 使 った Visual ボタン ある 領 域 にマウス が 入 ったらその 領 域"

Transcription

1 ゼロからわかる JavaScript 超 入 門 たのしいプログラミング 河 西 朝 雄 著 技 術 評 論 社 の 補 足 記 事 すでに 紙 媒 体 で 出 版 した 上 記 著 作 に 関 し 頁 数 の 関 係 から 載 せられなかった 以 下 の 内 容 を 提 供 します 10 章 各 種 Visual ツールを 作 ってみよう 11 章 最 終 課 題 ( 各 種 ゲーム) 原 稿 としては 2009 年 の 脱 稿 時 にできていてお 蔵 入 りしていたものをここで 公 開 することと します 2012 年 12 月 河 西 朝 雄 本 書 の 一 部 または 全 部 を 著 作 権 法 の 定 める 範 囲 を 超 え 無 断 で 複 写 複 製 転 載 あるい はファイルに 落 とすことを 禁 じます 本 書 に 記 載 された 内 容 は 情 報 の 提 供 のみを 目 的 としています したがって 本 書 を 用 い た 運 用 は 必 ずお 客 様 自 身 の 責 任 と 判 断 によって 行 ってください これらの 情 報 の 運 用 の 結 果 について 著 者 はいかなる 責 任 も 負 いません 2012 河 西 朝 雄

2 10 章 各 種 Visual ツールを 作 ってみよう 実 際 の Web ページで 見 かける 各 種 Visual ツールの 作 り 方 を 説 明 します <input>タグで 作 るボタンでなく イメージを 使 った Visual ボタン ある 領 域 にマウス が 入 ったらその 領 域 の 色 が 変 わる 地 図 月 単 位 のカレンダー ページを 切 り 替 えるタブな どです 本 書 の1 章 ~7 章 はプログラミングの 初 心 者 が 視 覚 的 に 興 味 のある 題 材 を 使 って 効 率 よ く JavaScript や DynamicHTML の 技 術 を 学 べるような 構 成 になっています このため DynamicHTML の 使 い 方 (ラケットゲーム ドットアートなど)としては 特 殊 な 部 類 に 入 ります この 章 で 説 明 する 内 容 は Web ページに 応 用 できる 本 来 の DynamicHTML の 内 容 となっています 特 にタブの 例 はスタイルシートの 各 プロパティを 最 も 豊 富 に 使 っていま す

3 10-1 Visual ボタン バーを3つのイメージ(normalbar.png,prevbar.png,nextbar.png)で 切 り 替 えます 前 の 写 真 部 センター 部 次 の 写 真 部 は 1 つのイメージに 収 まっているので 各 部 の 領 域 を 判 定 する 場 合 は onmouseover イベントでなく onmousemove イベントで 行 います イメー ジ 外 に 出 た 場 合 は onmouseout イベントで 行 います normalbar.png prevbar.png nextbar.png 例 題 10-1 バーへマウスが 入 ったときその 位 置 で 前 の 写 真 領 域 か 次 の 写 真 領 域 かで 対 応 す るバーを 表 示 します <html> <head> <script type="text/javascript"> function over(event) var obj=document.getelementbyid("bar"); if (event.clientx<242) // obj.src="prevbar.png"; else if (event.clientx>432) // obj.src="nextbar.png"; else 3 obj.src="normalbar.png"; function out() 4 var obj=document.getelementbyid("bar"); obj.src="normalbar.png"; </script> </head> <body> <img id="bar" src="normalbar.png" onmousemove="over(event)" onmouseout="out()"

4 style="position:absolute;left:100;top:50"> </body> </html> 1マウス 位 置 が 前 の 写 真 位 置 のとき 2マウス 位 置 が 次 の 写 真 位 置 のとき 3それ 以 外 の 位 置 のとき 4マウスがバーから 離 れたとき 練 習 問 題 10-1 バーのクリックで 前 の 写 真 次 の 写 真 を 表 示 しなさい 写 真 のファイル 名 は 配 列 photo に 格 納 するものとする 写 真 番 号 を Number, 写 真 の 枚 数 を Max で 管 理 する <html> <head> <script type="text/javascript"> var Number=0,Max=4; var photo=new Array("balloon.jpg","flower.jpg","hikari.jpg","matsuri.jpg","sakura.jpg"); function next(event) if (event.clientx<242) Number--; else if (event.clientx>432) Number++; if (Number<0) Number=Max; if (Number>Max) Number=0; var obj=document.getelementbyid("srcimg"); obj.src=photo[number]; function over(event) var obj=document.getelementbyid("bar");

5 if (event.clientx<242) // obj.src="prevbar.png"; else if (event.clientx>432) // obj.src="nextbar.png"; else obj.src="normalbar.png"; function out() var obj=document.getelementbyid("bar"); obj.src="normalbar.png"; </script> </head> <body> <img id="bar" src="normalbar.png" onclick="next(event)" onmousemove="over(event)" onmouseout="out()" style="position:absolute;left:100;top:50"> <img src="balloon.jpg" id="srcimg" style="position:absolute;left:120;top:100;width:400;height:300"> </body> </html>

6 10-2 地 図 地 図 を 領 域 で 分 け その 領 域 にマウスが 入 ったらその 領 域 の 色 を 変 えるようにします 例 題 10-2 日 本 地 図 を 北 海 道 から 九 州 沖 縄 の9つの 領 域 に 分 け その 領 域 の 色 を 変 えた 地 図 map1.png~map9.png と どこも 色 が 変 わっていない 地 図 map0.png を 用 意 します <html> <head> <script type="text/javascript"> function disp(event) var x=event.clientx; var y=event.clienty; var obj=document.getelementbyid("map"); if (290<x && x<380 && 10<y && y<80) 1 obj.src="map1.png"; else if (260<x && x<300 && 90<y && y<155) 2 obj.src="map2.png"; else if (230<x && x<260 && 164<y && y<200) obj.src="map3.png"; else if (200<x && x<230 && 150<y && y<180) obj.src="map4.png"; else if (188<x && x<222 && 174<y && y<203) obj.src="map5.png"; else if (160<x && x<177 && 160<y && y<200) obj.src="map6.png"; else if (95<x && x<150 && 160<y && y<180) obj.src="map7.png"; else if (115<x && x<145 && 185<y && y<205) obj.src="map8.png"; else if (60<x && x<90 && 170<y && y<220) obj.src="map9.png"; else 3 obj.src="map0.png"; </script> </head>

7 <body> <img id="map" src="map0.png" style="position:absolute;left:0;top:0" onmousemove="disp(event)"> </body> </html> 1 北 海 道 の 領 域 のとき 2 東 北 の 領 域 のとき 3どこの 領 域 にも 入 らないとき 練 習 問 題 10-2 例 題 10-2 は 地 図 の 配 置 位 置 をクライアント 画 面 の(0,0)と 仮 定 してプログラムにしてい ましたが 地 図 の 配 置 位 置 に 依 存 しないで 領 域 の 判 定 ができるようにしなさい 地 図 の 配 置 位 置 の top,left を 取 得 し そこからの 位 置 で 領 域 の 判 定 を 行 う <html> <head> <script type="text/javascript"> function disp(event) var x=event.clientx; var y=event.clienty; var obj=document.getelementbyid("map"); var top=parseint(obj.style.top); var left=parseint(obj.style.left); if (left+290<x && x<left+380 && top+10<y && y<top+80) obj.src="map1.png"; else if (left+260<x && x<left+300 && top+90<y && y<top+155) obj.src="map2.png"; else if (left+230<x && x<left+260 && top+164<y && y<top+200) obj.src="map3.png";

8 else if (left+200<x && x<left+230 && top+150<y && y<top+180) obj.src="map4.png"; else if (left+188<x && x<left+222 && top+174<y && y<top+203) obj.src="map5.png"; else if (left+160<x && x<left+177 && top+160<y && y<top+200) obj.src="map6.png"; else if (left+95<x && x<left+150 && top+160<y && y<top+180) obj.src="map7.png"; else if (left+115<x && x<left+145 && top+185<y && y<top+205) obj.src="map8.png"; else if (left+60<x && x<left+90 && top+170<y && y<top+220) obj.src="map9.png"; else obj.src="map0.png"; </script> </head> <body> <img id="map" src="map0.png" style="position:absolute;left:100;top:50" onmousemove="disp(event)"> </body> </html>

9 10-3 カレンダー カレンダーを 作 るには 次 のような 手 順 で 考 えます 1 月 の 1 日 の 曜 日 を 調 べる week に 0( 日 )~6( 土 )が 得 られる var Year=today.getFullYear(); var Month=today.getMonth(); var day=new Date(Year,Month,1); var week=day.getday(); 2 閏 年 か 調 べる if ((Year % 4)==0 && (Year % 100)!=0 (Year % 400)==0) mt[1]=29; else mt[1]=28; 3カレンダーとして 表 示 次 のような calendar.png 上 に 1~31 を 表 示 する 表 示 位 置 は1 で 求 めた week の 値 を 開 始 位 置 として 使 う 例 題 10-3 今 日 の 月 のカレンダーを 作 ります <html> <head> <script type="text/javascript"> function mannen() var mt=new Array(31,28,31,30,31,30,31,31,30,31,30,31); var i,x,y,tag=""; var today=new Date(); var Year=today.getFullYear(); var Month=today.getMonth(); var day=new Date(Year,Month,1); 1 var week=day.getday(); 2

10 if ((Year % 4)==0 && (Year % 100)!=0 (Year % 400)==0) 3 mt[1]=29; else mt[1]=28; tag+="<font size='3' style='position:absolute;left:60;top:20'>"+year+" 年 "+(Month+1)+" 月 </font>"; 4 x=week*40+45;y=65; 5 for (i=1;i<=mt[month];i++) 6 tag+="<font size='3' style='position:absolute;left:"+x+";top:"+y+"'>"+i+"</font>"; 7 x+=40; 8 if ((week+i)%7==0) 9 x=45; y+=40; var obj=document.getelementbyid("calendar"); obj.innerhtml=tag; 10 </script> </head> <body onload="mannen()"> <img src="leftbtn.png" style="position:absolute;left:40;top:18"> <img src="rightbtn.png" style="position:absolute;left:160;top:18"> <img id="n1" src="calendar.png" style="position:absolute;left:40;top:40"> <div id="calendar"></div> </body> </html>

11 1Year 年 Month 月 1 日 の Date オブジェクトの 作 成 2Year 年 Month 月 1 日 の 曜 日 (0: 日 ~6: 土 )の 取 得 3 閏 年 なら2 月 の 日 を 29 にする 4 年 月 の 表 示 Month は 0(1 月 )~11(12 月 )の 値 なので +1 した 値 を 表 示 51 日 の 表 示 位 置 を x,y に 設 定 61 日 から 月 の 終 わりの 日 まで 繰 り 返 す 7 日 を 示 す 数 字 を(x,y) 位 置 に 表 示 8 表 示 位 置 を 横 に 進 める 9 土 曜 日 なら 次 の 行 先 頭 に 移 す 10tag に 追 加 してきた HTML タグを<div>タグの 内 部 HTML として 置 き 換 える 練 習 問 題 9-3 左 ボタンで 前 の 月 を 表 示 し 右 ボタンで 次 の 月 を 表 示 できるようにしなさい これに 伴 い 今 日 の 月 を 表 示 する 場 合 init 関 数 を 最 初 に 呼 び 出 し Year と Month を 求 める back 関 数 で 月 を 前 に 戻 し next 関 数 で 月 を 次 に 進 める <head> <script type="text/javascript"> var Year,Month; function init() var today=new Date(); Year=today.getFullYear(); Month=today.getMonth(); mannen(); function back() if (Month==0)

12 Year--; Month=11; else Month--; mannen(); function next() if (Month==11) Year++; Month=0; else Month++; mannen(); function mannen() var mt=new Array(31,28,31,30,31,30,31,31,30,31,30,31); var i,x,y,tag=""; var day=new Date(Year,Month,1); var week=day.getday(); if ((Year % 4)==0 && (Year % 100)!=0 (Year % 400)==0) mt[1]=29; else mt[1]=28; tag+="<font size='3' style='position:absolute;left:60;top:20'>"+year+" 年 "+(Month+1)+" 月 </font>"; x=week*40+45;y=65; for (i=1;i<=mt[month];i++) tag+="<font size='3' style='position:absolute;left:"+x+";top:"+y+"'>"+i+"</font>"; x+=40;

13 if ((week+i)%7==0) x=45; y+=40; var obj=document.getelementbyid("calendar"); obj.innerhtml=tag; </script> </head> <body onload="init()"> <img src="leftbtn.png" style="position:absolute;left:40;top:18" onclick="back()"> <img src="rightbtn.png" style="position:absolute;left:160;top:18" onclick="next()"> <img id="n1" src="calendar.png" style="position:absolute;left:40;top:40"> <div id="calendar"></div> </body> </html>

14 10-4 タブ タブのクリックでページを 切 り 替 えます タブは<a>タグ ページは<div>タグにスタイ ルシートを 指 定 して 作 ります スタイルシートは<style type="text/css">~</style>に 記 述 します a の 中 に<a>タグのスタイルシートを div の 中 に<div>タグのスタイルシートを 記 述 し ます さらに a.tab1 の 中 に 指 定 したスタイルシートは<a class="tab1">のように class を 指 定 した 個 々の<a>タグに 適 用 されます スタイルシートの 各 プロパティの 意 味 は 以 下 の 通 りです display: 表 示 方 法 block,inline,list-item,none overflow:オーバーフローした 内 容 の 表 示 方 法 none,clip,scroll clear: 文 字 の 回 り 込 みのクリア none,left,right,both float: 文 字 の 回 り 込 み left,right,none text-align:テキストの 配 置 left,right,center,justify border: 枠 の 幅 スタイル 色 padding: 枠 と 内 容 の 上 右 下 左 間 隔 color: 文 字 色 background-color: 背 景 色 width:スタイルシートの 幅 height:スタイルシートの 高 さ 指 定 する 長 さの 単 位 は 以 下 が 指 定 できます em 使 用 されている 文 字 の 高 さ pt ポイント px ピクセル 例 題 10-4 タブのクリックでページを 切 り 替 える 関 数 change を 作 ります タブ 上 にマウスが 入 ると ハンドマークにするために<a>タグを 用 いているのですが <a>タグのクリックでリンク 先 にジャンプさせないために onclick イベントの 呼 び 出 しを 行 った 後 の return false; は 必 要 です <html> <head> <script type="text/javascript"> function change(tab) 1 document.getelementbyid("tab1").style.display="none"; document.getelementbyid("tab2").style.display="none";

15 document.getelementbyid(tab).style.display="block"; </script> <style type="text/css"> a 2 display:block;width:5em;float:left; padding:3px;text-align:center;color:white; a.tab1 background-color:blue; 3 a.tab2 background-color:green; div 4 width:400px;height:150px;clear:left;overflow:scroll; div.page1 border:2px solid blue; 5 div.page2 border:2px solid green; </style> </head> <body onload="change('tab1')"> <a href="" class="tab1" onclick="change('tab1');return false;">エンタメ</a> 6 <a href="" class="tab2" onclick="change('tab2');return false;">スポーツ</a> <div id="tab1" class="page1"> 7 エンタメ 情 報 </div> <div id="tab2" class="page2"> スポーツ 情 報 </div> </body> </html> 1クリックしたタブのページだけを 表 示 する 関 数 display プロパティが block のページだ

16 けが 表 示 される 他 のページの display プロパティを none にすることで そのページの 縦 横 サイズは 0 になるので 複 数 のページを 同 じ 位 置 に 重 ね 合 わせることができる 2タブの 共 通 形 状 float:left の 指 定 でタブを 横 に 配 置 できる 3 各 タブの 個 々の 形 状 ( 背 景 色 ) 4ページの 共 通 形 状 clear:left で 横 表 示 をクリアしてタブの 下 に 配 置 することができる 5 各 ページの 個 々の 形 状 ( 枠 の 色 ) 6タブを2つ 配 置 7ページを2つ 配 置 練 習 問 題 10-4 タブを 3 つに 増 やしなさい タブの 色 は olive とする <html> <head> <script type="text/javascript"> function change(tab) document.getelementbyid("tab1").style.display="none"; document.getelementbyid("tab2").style.display="none"; document.getelementbyid("tab3").style.display="none"; document.getelementbyid(tab).style.display="block"; </script> <style type="text/css"> a display:block;width:5em;float:left; padding:3px;text-align:center;color:white; a.tab1 background-color:blue; a.tab2 background-color:green; a.tab3 background-color:olive; div width:400px;height:150px;clear:left;overflow:scroll; div.page1 border:2px solid blue; div.page2 border:2px solid green; div.page3 border:2px solid olive; </style> </head>

17 <body onload="change('tab1')"> <a href="" class="tab1" onclick="change('tab1');return false;">エンタメ</a> <a href="" class="tab2" onclick="change('tab2');return false;">スポーツ</a> <a href="" class="tab3" oncclick="change('tab3');return false;">グルメ</a> <div id="tab1" class="page1"> エンタメ 情 報 </div> <div id="tab2" class="page2"> スポーツ 情 報 </div> <div id="tab3" class="page3"> グルメ 情 報 </div> </body> </html>

18 章 末 問 題 10-1 ツールバーのイメージを3 領 域 に 区 分 し 各 領 域 にマウスが 入 れば カーソルをハンド マークにし ページに 表 示 する 内 容 を 領 域 に 合 わせて 変 えなさい 領 域 のイメージ 内 のx 座 標 は 5,29,53 とし 幅 は 20 とする イメージの 配 置 位 置 (left,top)から 領 域 の 範 囲 を 計 算 する <head> <script type="text/javascript"> function disp(event) var map=document.getelementbyid("map"); var page=document.getelementbyid("page"); var left=parseint(map.style.left); var top=parseint(map.style.top); var x=event.clientx; var y=event.clienty; if (left+5<x && x<left+25) map.style.cursor="hand"; page.innerhtml=" 記 事 1"; else if (left+29<x && x<left+49) map.style.cursor="hand"; page.innerhtml=" 記 事 2"; else if (left+53<x && x<left+73) map.style.cursor="hand"; page.innerhtml=" 記 事 3"; else map.style.cursor="default"; page.innerhtml="";

19 if (y<=top+2 top+28<=y) // 上 下 に 離 れたとき map.style.cursor="default"; page.innerhtml=""; </script> </head> <body> <img id="map" src="toolbar.png" style="position:absolute;left:20;top:10" onmousemove="disp(event)"> <div id="page" style="position:absolute;left:20;top:38;width:400;height=200; border-style:solid;border-color:blue;border-width:1;padding: "></div> </body> </html> 章 末 問 題 10-2 テキストボックスに 入 力 した 名 前 と 一 致 する 人 のデータを 検 索 して 表 示 します テキス トボックスに 適 用 するスタイルシートを.box に 記 述 し 結 果 を 表 示 する 領 域 に 適 用 する スタイルシートを.page に 記 述 します 会 員 のデータは2 次 元 配 列 girl[][]に 名 前 住 所 年 齢 血 液 型 が 格 納 されています オブジェクトの 上 をマウスが 通 過 したときにハンドマークにする 簡 単 な 方 法 は onmouseover="this.style.cursor='hand'" です <html> <head> <style type="text/css">.box width:100;height:24; border-style:solid;border-color:blue;border-width:1; background-color:#ffe0ff;

20 font-size:18;.page width:276;height=150; border-style:solid;border-color:blue;border-width:1; padding: ; </style> <script type="text/javascript"> function search() var girl=new Array(3); girl[0]=new Array(" 新 垣 ゆう"," 新 宿 区 1-2-1","18 才 ","A 型 "); girl[1]=new Array(" 長 沢 みちる"," 千 代 田 区 1-2-1","22 才 ","B 型 "); girl[2]=new Array(" 綾 瀬 はるな", " 港 区 1-2-1","19 才 ","O 型 "); var namae=document.getelementbyid("namae"); var result=document.getelementbyid("result"); for (var i=0;i<girl.length;i++) if (girl[i][0]==namae.value) result.innerhtml=" 名 前 :"+girl[i][0]+"<br>"+ " 住 所 :"+girl[i][1]+"<br>"+ " 年 齢 :"+girl[i][2]+"<br>"+ " 血 液 型 :"+girl[i][3]+"<br>"; return; result.innerhtml=" 見 つかりませんでした<br>"; </script> </head> <body> <form style="position:absolute;top:10;left:10"> <div style="position:absolute;top:4;left:0;width:40"> 会 員 </div> <input id="namae" class="box" type="text" style="position:absolute;top:0;left:40"> <img src="searchbar.png" style="position:absolute;top:0;left:140" onmouseover="this.style.cursor='hand'" onclick="search()">

21 <div id="result" class="page" style="position:absolute;left:0;top:26;"></div> </form> </body> </html>

22 11 章 最 終 課 題 ( 各 種 ゲーム) 9 章 のリバーシゲームで 実 用 的 なプログラムを 作 るスキルが 付 いたと 思 います この 章 ではさらに 自 分 で 考 えて 実 用 的 に 使 えるプログラムを 作 るためのヒントとなるサンプル として ブロックくずし マインスイーパー 迷 路 の3 例 題 を 説 明 します ブロックくずしは6 章 のラケットゲームを 元 にそこにブロックを 置 きます マインスー パーは 練 習 問 題 7-2 リバーシーゲームのマスを 開 ける 手 法 を 応 用 します 迷 路 はここま で 説 明 しなかったテクニックがいくつかあります マインスーパーと 迷 路 では 再 帰 を 使 用 しています 発 展 課 題 は 各 例 題 に 対 し 追 加 または 変 更 された 箇 所 ( 赤 色 )とその 周 辺 部 のみを 掲 載 しています プログラムの 全 リストは 技 術 評 論 社 の 以 下 の Web ページで 入 手 することがで きます

23 11-1 ブロックくずし 6 章 のラケットゲームにブロックを 置 いたブロックくずしを 作 ります ブロックを 4 6 個 配 置 し ブロックの 情 報 (0:なし 1:あり)を 2 次 元 配 列 M[][]に 格 納 します ブロックの 高 さを 10 幅 を 40 とし 配 置 開 始 位 置 を(100,100)からy 方 向 は 20 x 方 向 は 50 単 位 で 配 置 します ボールの 位 置 を By,Bx とすると その 位 置 にあるブロックに 対 応 する 配 列 の 添 字 i,j は 次 式 で 得 られます 次 式 では By,Bx が 100 未 満 の 場 合 も i,j が 0 になってしまい ブロックの ないところでもあると 判 断 されてしまうので if 文 で By,Bx は 100 以 上 という 条 件 を 付 け てあります i=parseint((by-100)/20);// ボール 位 置 から ブロックの 位 置 を 計 算 する j=parseint((bx-100)/50); if (100<=Bx && 100<=By && 0<=i && i<=3 && 0<=j && j<=5 && M[i][j]==1) // ブロックがあれば ボールが 上 に 移 動 している 場 合 と 下 に 移 動 している 場 合 でブロックに 当 たったと 判 定 す る 位 置 は 異 なります 正 確 に 判 定 するにはもう 少 し 細 かな 条 件 を 付 ける 必 要 がありますが ここでは 大 ざっぱな 判 定 をしています block1.html <html> <head> <script type="text/javascript"> var By=200,Bx=100,Dy=10,Dx=10; // ボール 位 置 と 移 動 量 var Ry=400,Rx=200; // ラケットの 位 置 var Point=0,BallN=3,TimeID; // 得 点 ボール 残 数 タイム ID var M=new Array(4); // ブロック 情 報 配 列 function move() var i,j,n; TimeID=setTimeout("move()",100); var ball=document.getelementbyid("ball"); By+=Dy;Bx+=Dx; ball.style.top=by;ball.style.left=bx; if (Bx<=50 Bx+10>=450) Dx=-Dx; if (By<=50 (Rx-25-10<=Bx && Bx<=Rx && By+10==Ry))

24 Dy=-Dy; i=parseint((by-100)/20); // ボール 位 置 から ブロックの 位 置 を 計 算 する j=parseint((bx-100)/50); if (100<=Bx && 100<=By && 0<=i && i<=3 && 0<=j && j<=5 && M[i][j]==1) // ブロックがあれば n=i*6+j; // ブロックの ID を 求 める document.getelementbyid("block"+n).style.visibility="hidden"; // 非 表 示 にする M[i][j]=0; // 配 列 情 報 を 0 にすることで ブロックな し 状 態 を 示 す Dy=-Dy; Point+=10; // 得 点 の 加 算 と 表 示 document.getelementbyid("pointmsg").value=point+" 点 "; if (By>420) BallN--; // ボールの 残 数 を 減 らす document.getelementbyid("ballmsg").value=" 残 り"+BallN+" 個 "; cleartimeout(timeid); // ボールを 停 止 する if (BallN>0) Bx=parseInt(Math.random()*30)*10+50;By=200; settimeout("move()",1000); //1 秒 後 に 再 開 function racket(event) var bar=document.getelementbyid("bar"); Rx=event.clientX; if (50<=Rx-25 && Rx+25<=450) bar.style.left=rx-25; function init() var i,j,n=0,tag=""; var block=document.getelementbyid("block"); window.resizeto(550,700); // ウィンドウサイズを 変 更

25 for (i=100;i<=160;i+=20) // ブロックの 配 置 for (j=100;j<=350;j+=50) tag+="<img id='block"+n+"' src='blockbar.png' style='position:absolute;left:"+j+";top:"+i+"'>"; n++; block.innerhtml=tag; for (i=0;i<4;i++) // 4 行 6 列 のブロックの 情 報 を 表 す 2 次 元 配 列 M[i]=new Array(6); for (j=0;j<6;j++) M[i][j]=1; // i 行 j 列 のブロックがあれば 1 Bx=parseInt(Math.random()*30)*10+50;By=200; move(); </script> </head> <body onmousemove="racket(event)"> <form style="position:absolute;left:180;top:20"> <input name="ballmsg" type="text" size="10" value=" 残 り 3 個 "> <input name="pointmsg" type="text" size="10" value="0 点 "> </form> <img src="wall.png" style="position:absolute;left:46;top:46"> <img id="ball" src="ball.png" style="position:absolute;left=-10;top=0"> <img id="bar" src="bar.png" style="position:absolute;left:200;top:400" onclick="init()"> <div id="block"></div> </body> </html>

26 発 展 課 題 次 の 機 能 を 追 加 しなさい ボールが 下 に 移 動 しているときにブロックに 当 たったという 判 断 をブロックの 直 前 位 置 にしなさい Dy が 正 のときは 配 列 の 仮 想 位 置 を y 方 向 に-10 した 位 置 とする 全 面 クリア(Point が 240 の 倍 数 )するたびにブロックを 再 表 示 し タイムアウト 時 間 を -20 にしてボールの 移 動 スピードを 速 くする block2.html var Level=100; function move() var i,j,n; TimeID=setTimeout("move()",Level); var ball=document.getelementbyid("ball"); By+=Dy;Bx+=Dx; ball.style.top=by;ball.style.left=bx; if (Bx<=50 Bx+10>=450) Dx=-Dx; if (By<=50 (Rx-25-10<=Bx && Bx<=Rx && By+10==Ry)) Dy=-Dy; if (Dy<0) i=parseint((by-100)/20); // ボール 位 置 から ブロックの 位 置 を 計 算 する else i=parseint((by-90)/20); j=parseint((bx-100)/50); if (100<=Bx && 90<=By && 0<=i && i<=3 && 0<=j && j<=5 &&

27 M[i][j]==1) // ブロックがあれば n=i*6+j; // ブロックの ID を 求 める document.getelementbyid("block"+n).style.visibility="hidden"; // 非 表 示 にする M[i][j]=0; // 配 列 情 報 を 0 にすることで ブロックな し 状 態 を 示 す Dy=-Dy; Point+=10; // 得 点 の 加 算 と 表 示 document.getelementbyid("pointmsg").value=point+" 点 "; if (Point%240==0) cleartimeout(timeid); Bx=parseInt(Math.random()*30)*10+50;By=200; Dy=10; if (Level>=40) Level-=20 init(); if (By>420) BallN--; // ボールの 残 数 を 減 らす document.getelementbyid("ballmsg").value=" 残 り"+BallN+" 個 "; cleartimeout(timeid); // ボールを 停 止 する if (BallN>0) Bx=parseInt(Math.random()*30)*10+50;By=200; settimeout("move()",1000); //1 秒 後 に 再 開

28 11-2 マインスイーパー おなじみのマインスイーパーを 作 ります ここで 作 るゲームは 以 下 のような 内 容 です クリックした 位 置 に 機 雷 があれば すべて 機 雷 を 表 示 し 機 雷 でないならその 位 置 だけ 開 きます マスを 開 けるところは 練 習 問 題 7-2 リバーシーゲームと 同 じ 要 領 です 発 展 問 題 で 接 近 度 数 0 のマスを 開 く 再 帰 関 数 visit を 作 ります minesweeper は( 機 雷 除 去 の) 掃 海 艇 または 地 雷 除 去 装 置 の 意 味 です 配 列 M[][]に 機 雷 の 情 報 機 雷 の 接 近 度 数 を 格 納 します (1,1)-(N,N)を 実 際 のマスと 対 応 させます 配 列 の 外 枠 要 素 は visit 関 数 で 再 帰 呼 び 出 しを 行 う 際 に 配 列 の 外 に 進 まない ようにするためのものです このように 配 列 の 範 囲 を 越 えて 探 索 を 行 なわないように 見 張 りをしているものを 番 兵 と 呼 びます 配 列 M[][]には 機 雷 があれば-1 外 枠 要 素 は-2 それ 以 外 の 要 素 はその 要 素 の 隣 接 すると ころに 機 雷 がある 個 数 ( 接 近 度 数 )を 格 納 します 例 えば M[3][1]の 要 素 は 機 雷 が 2 個 隣 接 しているので 2 となります 隣 接 する 機 雷 がないところは 0 となります マスを 開 いたときに 表 示 するイメージは 接 近 度 数 0,1,2 に 対 し num0.png,num1.png,num2.png を 使 い ま す num1.png 以 後 は 数 字 入 り で す が num0.png は 数 字 は 入 っていません 機 雷 の 接 近 度 数 をカウントアップする 関 数 count 機 雷 の 接 近 度 数 を 示 す 数 値 は 機 雷 を 中 心 とする 周 辺 8 箇 所 を+1 することでカウントア ップして 求 めます このときその 周 辺 8 箇 所 の 中 で 機 雷 のある 要 素 と 外 枠 の 要 素 はカウン トアップしません mine1.html <html> <head> <script type="text/javascript"> var N,Bomb,W=20; // マスの 数 機 雷 の 数 マスのサイズ var M; function yx(event) // クリックイベント 処 理 関 数 var y,x,n,obj; y=math.floor((event.clienty-50)/w+1); x=math.floor((event.clientx-50)/w+1); if (M[y][x]==-2) return; // visit で 訪 問 してあれば 戻 る n=(y-1)*n+(x-1); obj=document.getelementbyid("img"+n); if (M[y][x]==-1) // 機 雷 のときは 全 ての 機 雷 を 表 示 for (i=1;i<=n;i++)

29 for (j=1;j<=n;j++) if (M[i][j]==-1) n=(i-1)*n+(j-1); obj=document.getelementbyid("img"+n); obj.src="bomb.png"; else obj.src="num"+m[y][x]+".png"; // 機 雷 でないとき function count() // 接 近 度 数 カウント 関 数 var i,j; for (i=1;i<=n;i++) for (j=1;j<=n;j++) if (M[i][j]==-1) for (dx=-1;dx<=1;dx++) for (dy=-1;dy<=1;dy++) if ((dx!=0 dy!=0) && (M[i+dy][j+dx]!=-1 && M[i+dy][j+dx]!=-2)) M[i+dy][j+dx]++; function init() var i,j,x,y,n=0,tag=""; var mine=document.getelementbyid("mine"); N=parseInt(document.getElementById("level").value); // parseint 必 要 Bomb=N; for (y=50;y<50+w*n;y+=w)

30 for (x=50;x<50+w*n;x+=w) tag+="<img src='sea.png' id='img"+n+"' style='position:absolute;left:"+x+";top:"+y+"' onclick='yx(event)'>"; n++; mine.innerhtml=tag; M=new Array(N+2); for (i=0;i<n+2;i++) M[i]=new Array(N+2); for (j=0;j<=n+1;j++) if (i==0 i==n+1 j==0 j==n+1) M[i][j]=-2; // 外 枠 要 素 番 兵 else M[i][j]=0; for (i=0;i<bomb;i++) // y,x 位 置 のマスに 機 雷 を 最 大 で Bomb 個 置 く x=math.floor(math.random()*n+1); y=math.floor(math.random()*n+1); M[y][x]=-1; count(); </script> </head> <body> <form style="position:absolute;left:50;top:10"> マスの 数 <input id="level" type="text" size="4"> <input type="button" value=" 表 示 " onclick="init()"> </form> <div id="mine"></div> </body> </html> 発 展 課 題 接 近 度 数 0 のマスをクリックしたらそれにつながる 全 ての 接 近 度 数 0 のマスを 開 く 関 数

31 visit を 作 りなさい 8-2 の 3. 閉 路 の 探 索 の vist 関 数 を 元 に 作 ります 上 下 左 右 に 進 む 方 向 のマスの 内 容 が 0 なら 再 帰 的 に 訪 問 します 訪 問 した 印 として-2 を 置 きます mine2.html function visit(i,j) // 接 近 度 数 0 のマスを 開 ける 関 数 var n,obj; n=(i-1)*n+(j-1); obj=document.getelementbyid("img"+n); obj.src="num"+m[i][j]+".png"; M[i][j]=-2; // 訪 問 した 印 if (M[i][j+1]==0) visit(i,j+1); // 右 位 置 への 訪 問 if (M[i+1][j]==0) visit(i+1,j); // 下 位 置 への 訪 問 if (M[i][j-1]==0) visit(i,j-1); // 左 位 置 への 訪 問 if (M[i-1][j]==0) visit(i-1,j); // 上 位 置 への 訪 問 function yx(event) // クリックイベント 処 理 関 数 if (M[y][x]==-2) return; // visit で 訪 問 してあれば 戻 る n=(y-1)*n+(x-1); obj=document.getelementbyid("img"+n); if (M[y][x]==-1) // 機 雷 のときは 全 ての 機 雷 を 表 示 else if (M[y][x]==0) visit(y,x); // 接 近 度 数 0 のマスのときの 処 理 else obj.src="num"+m[y][x]+".png"; // 接 近 度 数 1 以 上 のマスのときの 処 理

32

33 11-3 迷 路 縦 NY 横 NX の 各 マスに 迷 路 配 列 M[][] を 対 応 させ その 各 要 素 に 上 壁 の 有 無 右 壁 の 有 無 訪 問 の 有 無 の3つの 情 報 を 持 たせます (i,j) 位 置 から 進 む 方 向 を 乱 数 で1: 右 2; 下 3 左 4 上 の 中 から 選 択 し 1マス 進 む ことにします その 方 向 に 進 めるかは そのマスがまだ 未 訪 問 である 場 合 とします これ を 進 む 方 向 がなくなるまで 再 帰 的 に 繰 り 返 します 全 てのマスに 上 壁 右 壁 をつけて 置 き 進 む 方 向 の 壁 を 取 り 去 るという 方 法 で 迷 路 を 作 ります 通 過 に 伴 う 壁 の 取 り 崩 しは 次 の 要 領 で 行 います 1 右 へ 進 む 場 合 は 今 いる 位 置 の 右 壁 をとる 2 下 へ 進 む 場 合 は 進 む 位 置 の 上 壁 をとる 3 左 へ 進 む 場 合 は 進 む 位 置 の 右 壁 をとる 4 上 へ 進 む 場 合 は 今 いる 位 置 の 上 壁 をとる 具 体 的 には たとえば M[i][j] 位 置 の 右 壁 をとるには 次 のようにします M[i][j]&=0xd; 第 1 ビット 0x0d のビットパターンは 1101 で これとの AND をとることにより 第 1ビットだけ を 0 にすることができます 迷 路 配 列 の 初 期 値 は 外 壁 に 番 兵 の 15( 再 トライ 禁 止 訪 問 済 み 右 壁 あり 上 壁 あり) を 置 き 各 マスには 3( 未 訪 問 右 壁 あり 上 壁 あり)を 置 きます 壁 の 長 さを W 迷 路 の 左 上 隅 位 置 を(0,0) 迷 路 の 入 り 口 と 出 口 の 配 列 要 素 を(Si,Sj)と (Ei,Ej)とします 配 列 に i,j 位 置 に 対 応 するマスの y,x 位 置 は 以 下 の 式 で 得 られます y=(i-1)*w; x=(j-1)*w; この y,x 位 置 に M[i][j] & 1 が 真 なら 上 壁 イメージ(upwall.png)を M[i][j] & 2 が 真 なら 右 壁 イメージ(rightwall.png)を 配 置 します キー 入 力 で 迷 路 をたどります 経 路 を 示 す 直 線 は id を h0~h99 v0~v99 まで 付 けた 水 平 線 イメージ(hline.png)と 垂 直 線 イメージ(vline.png)を 使 って 描 画 します 右 に 移 動 するときは oldy,oldx 位 置 に hline.png を 配 置 してから oldx を+20 します 左 に 移 動 するときは oldx を-20 した 後 でその 位 置 に hline.png を 配 置 します キー 入 力 イベント キー 入 力 イベント 処 理 は onkeypress アトリビュートに 指 定 します 矢 印 キーはキーイベントを 取 得 できないので E( 上 ) S( 左 ) D( 右 ) X( 下 )キーを 使 います 入 力 されたキーのコードは event.keycode で 得 られます E は 115 S は 100

34 D は 101 X は 120 という 値 になります E S D X ビット 演 算 子 プログラミング 言 語 では 人 間 の 感 覚 に 合 わせて 10 進 数 で 表 しますすが 実 はコンピュ ータの 世 界 では 2 進 数 が 基 本 になっていてます 2 進 数 は 0 と 1 で 表 します 2 進 数 4 桁 の 数 値 に 対 応 する 10 進 数 値 16 進 数 値 を 表 11-1 に 示 します 2 進 数 4 桁 が 16 進 数 1 桁 に 対 応 します JavaScript では 16 進 数 値 を 示 すのに 先 頭 に 0x を 付 け 0xd のように 表 します 表 進 数 10 進 数 16 進 数 の 関 係 2 進 数 10 進 数 16 進 数 a b c d e f ビット 演 算 子 は 数 値 を 2 進 表 現 したときの 1 または 0 の 各 ビットごとの 論 理 演 算 を 行 います 論 理 演 算 には AND OR があります ビット a と b を AND,OR した 結 果 ( 真 理 値 表 ) を 表 11-2 に 示 します JavaScript では AND 演 算 を& 演 算 子 OR 演 算 を 演 算 子 で 行 いま す 表 11-2 AND と OR の 真 理 値 表 AND( 論 理 積 )

35 a b a&b OR( 論 理 和 ) a b A b たとえばある 数 と 0x0d との AND をとることの 効 果 を 考 えてみましょう 0x0d は 2 進 数 で 表 すと 1101 となります ある 数 がたとえば 1011 と 1110 の 場 合 につい て 0x0d と AND をとると 以 下 のようになります つまり 1101 と AND をとること は 1101 の 0 の 位 置 に 対 応 するビットを 強 制 的 に 0 にすることになります このよ うな 操 作 をマスクと 呼 びます & 1101 & 強 制 的 に 0 にされる 強 制 的 に 0 にされる maze1.html <html> <head> <script type="text/javascript"> var NY,NX,Si,Sj,Ei,Ej; // マスの 縦 と 横 入 口 位 置 出 口 位 置 var W=20; // 壁 の 長 さ var M; // 迷 路 配 列 var oldy,oldx,h,v; // 移 動 の 前 の 位 置 水 平 線 と 垂 直 線 の id 番 号 function move(event) var obj,mouse; if (event.keycode==115) oldx-=20;// 左 obj=document.getelementbyid("h"+h);h++; obj.style.top=oldy;obj.style.left=oldx;

36 else if (event.keycode==100) // 右 obj=document.getelementbyid("h"+h);h++; obj.style.top=oldy;obj.style.left=oldx; oldx+=20; else if (event.keycode==101) oldy-=20;// 上 obj=document.getelementbyid("v"+v);v++; obj.style.top=oldy;obj.style.left=oldx; else if (event.keycode==120)// 下 obj=document.getelementbyid("v"+v);v++; obj.style.top=oldy;obj.style.left=oldx; oldy+=20; mouse=document.getelementbyid("mouse"); mouse.style.top=oldy-5;mouse.style.left=oldx-5; function genmaze(i,j) // 迷 路 の 作 成 var n; M[i][j] =4; while (M[i][j+1]==3 M[i+1][j]==3 M[i][j-1]==3 M[i-1][j]==3) n=math.floor(math.random()*4)+1; if (n==1 && M[i][j+1]==3) M[i][j]&=0xd; genmaze(i,j+1); else if(n==2 && M[i-1][j]==3) M[i][j]&=0xe; genmaze(i-1,j); else if(n==3 && M[i][j-1]==3) M[i][j-1]&=0xd; genmaze(i,j-1);

37 else if(n==4 && M[i+1][j]==3) M[i+1][j]&=0xe; genmaze(i+1,j); function meiro() var i,j,tag=""; var maze=document.getelementbyid("maze"); NY=parseInt(document.getElementById("NY").value); NX=parseInt(document.getElementById("NX").value); Si=1;Sj=1;Ei=NY;Ej=NX; oldy=10;oldx=10;h=0;v=0; M=new Array(NY+2); for (i=0;i<ny+2;i++) M[i]=new Array(NX+2); for (i=0;i<ny+2;i++) for (j=0;j<nx+2;j++) if (i==0 j==0 i==ny+1 j==nx+1) M[i][j]=15; else M[i][j]=3; genmaze(ei,ej); M[Ei][Ej]&=0xd; for (i=1;i<=ny;i++) for (j=1;j<=nx;j++) x=(j-1)*w; y=(i-1)*w; if (M[i][j] & 1) tag+="<img style='position:absolute;left:"+x+";top:"+y+"'>"; src='upwall.png'

38 if (M[i][j] & 2) tag+="<img src='rightwall.png' style='position:absolute;left:"+(x+w)+";top:"+y+"'>"; tag+="<img src='mazeh.png' style='position:absolute;left:0;top:"+(ny*20)+";height:1;width:"+(nx*20)+"'>"; // 下 壁 tag+="<img src='mazev.png' style='position:absolute;left:0;top:20;width:1;height:"+(ny*20-20)+"'>"; // 左 壁 for (i=0;i<100;i++) tag+="<img "+"id='h"+i+"'"+" src='hline.png' style='position:absolute;left:-40;top:0'>"; tag+="<img "+"id='v"+i+"'"+" src='vline.png' style='position:absolute;left:-40;top:0'>"; tag+="<img id='mouse' src='mouse.png' style='position:absolute;left:5;top:5'>"; maze.innerhtml=tag; </script> </head> <body onkeypress="move(event)"> <form style="position:absolute;left:20;top:10"> 横 <input id="nx" type="text" size="5"> 縦 <input id="ny" type="text" size="3"> <input type="button" value=" 迷 路 " onclick="meiro()"> </form> <div id="maze" style="position:absolute;left:20;top:40"></div> </body> </html>

39 発 展 課 題 先 の 例 題 では 壁 を 突 き 抜 けて 進 んでしまうので 次 の 機 能 を 追 加 しなさい 進 めない 位 置 を 判 定 たとえば 左 に 進 場 合 はその 位 置 (i,j)の 左 のマスの 右 壁 の 有 無 を 調 べることになるので (M[i][j-1]&2)==0 なら 右 壁 が 無 いことになります 逆 戻 りしたら 消 す M[][]と 同 じ 2 次 元 配 列 G[][]を 用 意 し そこに 直 線 を 描 いたかどうかの 情 報 ( 描 いた 線 の id 名 )を 与 えます 描 いていないところは 0 を 置 きます たとえば 左 に 進 場 合 はその 位 置 (i,j)の 左 のマスの G[i][j-1]が 0 なら 水 平 線 を 描 き 0 でないなら その id 名 の 水 平 線 を 隠 します maze2.html var M,G; // 迷 路 配 列 var oldy,oldx,h,v; // 移 動 の 前 の 位 置 水 平 線 と 垂 直 線 の id 番 号 function move(event) var obj,mouse,i,j; i=parseint((oldy+10)/20);j=parseint((oldx+10)/20); if (event.keycode==115 && (M[i][j-1]&2)==0) oldx-=20;// 左 if (G[i][j-1]==0) // 線 を 引 く 時 は 移 動 先 の 配 列 G[i][j-1]="h"+H; obj=document.getelementbyid("h"+h);h++; obj.style.top=oldy;obj.style.left=oldx; else obj=document.getelementbyid(g[i][j]); obj.style.visibility="hidden"; G[i][j]=0; // 消 すときは 今 いる 位 置 の 配 列

40 if (event.keycode==100 && (M[i][j]&2)==0)// 右 if (G[i][j+1]==0) G[i][j+1]="h"+H; obj=document.getelementbyid("h"+h);h++; obj.style.top=oldy;obj.style.left=oldx; else obj=document.getelementbyid(g[i][j]); obj.style.visibility="hidden"; G[i][j]=0; oldx+=20; if (event.keycode==101 && (M[i][j]&1)==0)// 上 oldy-=20; if (G[i-1][j]==0) G[i-1][j]="v"+V; obj=document.getelementbyid("v"+v);v++; obj.style.top=oldy;obj.style.left=oldx; else obj=document.getelementbyid(g[i][j]); obj.style.visibility="hidden"; G[i][j]=0; if (event.keycode==120 && (M[i+1][j]&1)==0)// 下 if (G[i+1][j]==0) G[i+1][j]="v"+V; obj=document.getelementbyid("v"+v);v++; obj.style.top=oldy;obj.style.left=oldx; else obj=document.getelementbyid(g[i][j]);

41 obj.style.visibility="hidden"; G[i][j]=0; oldy+=20; mouse=document.getelementbyid("mouse"); mouse.style.top=oldy-5;mouse.style.left=oldx-5; function meiro() M=new Array(NY+2); G=new Array(NY+2); for (i=0;i<ny+2;i++) M[i]=new Array(NX+2); G[i]=new Array(NX+2); for (i=0;i<ny+2;i++) for (j=0;j<nx+2;j++) if (i==0 j==0 i==ny+1 j==nx+1) M[i][j]=15; else M[i][j]=3; G[i][j]=0; G[1][1]=1; // 始 点 用 特 殊 処 理

42

CSSの基礎

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

More information

■新聞記事

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

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

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

var NUM1 = document.getelementbyid('param1').value var NUM2 = document.getelementbyid('param2').value document.getelementbyid("result").innerhtml = ev

var NUM1 = document.getelementbyid('param1').value var NUM2 = document.getelementbyid('param2').value document.getelementbyid(result).innerhtml = ev ########################### ###2つの 数 の 和 を 求 める ### ########################### 和 を 求 める function Add() var NUM1 = document.getelementbyid('param1').value; var NUM2 = document.getelementbyid('param2').value;

More information

問 題 1 背 景 色 という 文 字 列 の 背 景 をちょっと 青 っぽい 色 (#6699FF)で 表 示 するHMTLを 作 成 せよ <HTML><HEAD><TITLE>test11</TITLE> <BODY BGCOLOR="#FFFFFF"> この 部 分 は<STRONG STY

問 題 1 背 景 色 という 文 字 列 の 背 景 をちょっと 青 っぽい 色 (#6699FF)で 表 示 するHMTLを 作 成 せよ <HTML><HEAD><TITLE>test11</TITLE> <BODY BGCOLOR=#FFFFFF> この 部 分 は<STRONG STY 9.スタイルシートと JavaScript を 組 み 合 わせてみよう スタイルシートとは スタイルシートとは タグのみでは 実 現 不 可 能 なデザインレイアウトやページ 構 造 を 実 現 する 命 令 郡 です 主 に 次 の3つの 書 式 があります (1)インライン タグ 内 部 により 詳 細 なデザインを 組 み 込 む 書 式 です 例 : この 部 分 は

More information

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

(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

JavaScript演習

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

More information

表紙

表紙 EasyServlet V2 EsScreenEditorを 利 用 した Webアプリケーション 作 成 株 式 会 社 システムズリサーチ 1.1 EsScreenEditor 概 要 第 1 章 概 要 本 章 では EasyServletの 画 面 作 成 ツールであるEsScreenEditorの 概 要 について 説 明 します EasyServletは 本 来 Excelで 記 述 されたインタフェース

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

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 - 2016_2b-DOM.pptx

Microsoft PowerPoint - 2016_2b-DOM.pptx < 練 習 2-11> DOMの 空 白 ノード 2_nodeVisit の 実 行 結 果 ( 前 ページ)から,HTML をルート 要 素 とするDOMの 木 構 造 を 示 しなさい ただし, 空 白 ノードは 空 白,その 他 のテキストノードは テキスト とすること HTML DOMによる 文 書 データの 参 照 と 変 更 DOMツリー 内 のノード 参 照 相 対 位 置 によるノード

More information

インターネットマガジン1999年12月号―INTERNET magazine No.59

インターネットマガジン1999年12月号―INTERNET magazine No.59 +CD-ROM A N S W E R TD { color: white; borer-with: 8px; paing: ; :

More information

Microsoft PowerPoint - ⅩII-Allin1SP_HTMLエディタ.ppt [互換モード]

Microsoft PowerPoint - ⅩII-Allin1SP_HTMLエディタ.ppt [互換モード] HTML EDITOR HTMLエディタ マニュアル 目 次 HTMLエディタの 機 能 概 要 概 要 2 画 面 構 成 2 HTMLエディタの 機 能 説 明 各 ツールの 説 明 3 ツールの 詳 細 説 明 5 1 HTMLエディタ 機 能 概 要 概 要 HTMLエディタは ワープロソフトのように 直 感 的 にウェブページ(HTML 文 書 )を 編 集 するための 補 助 ツール です

More information

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

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

More information

WORD 98 入力の手引き

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

More information

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

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

More information

インターネットマガジン1997年4月号―INTERNET magazine No.27

インターネットマガジン1997年4月号―INTERNET magazine No.27 3.0 4.0 A N S W E R1 A N S W E R2 308 INTERNET magazine 1997/4 1 jhttp://www.tucows.com/ A { text-ecoration: none; } INTERNET magazine

More information

Microsoft Word - CMS操作説明会資料.docx

Microsoft Word - CMS操作説明会資料.docx 平 成 25 年 6 月 24 日 株 式 会 社 ネクストワン 1 今 回 の 操 作 説 明 会 では 次 のようなサンプル 記 事 を 作 成 してみたいと 思 います 2 管 理 画 面 にログインする 1. 九 重 町 役 場 ホームページにアクセスします 2.アドレスバーのホームページ URL の 後 ろに admin と 入 力 します http://www.town.kokonoe.oita.jp/admin/index.php

More information

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

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

More information

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

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

More information

PowerPoint によるプレゼンテーション 資 料 の 作 成 日 時 会 場 平 成 18 年 1 月 5 日 ( 月 )9 時 10 分 ~ 15 時 0 分 奈 良 産 業 大 学 10 号 館 1 階 1011 教 室 日 程 時 間 内 容 場 所 9:10 ~ 9:0 日 程 説 明

PowerPoint によるプレゼンテーション 資 料 の 作 成 日 時 会 場 平 成 18 年 1 月 5 日 ( 月 )9 時 10 分 ~ 15 時 0 分 奈 良 産 業 大 学 10 号 館 1 階 1011 教 室 日 程 時 間 内 容 場 所 9:10 ~ 9:0 日 程 説 明 PowerPoint による プレゼンテーション 資 料 の 作 成 教 職 員 のための 公 開 講 座 ( 平 成 18 年 1 月 5 日 ) PowerPoint によるプレゼンテーション 資 料 の 作 成 日 時 会 場 平 成 18 年 1 月 5 日 ( 月 )9 時 10 分 ~ 15 時 0 分 奈 良 産 業 大 学 10 号 館 1 階 1011 教 室 日 程 時 間 内

More information

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <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

問 題 1 次 の 文 章 は Word の 作 業 環 境 および 環 境 の 設 定 変 更 について 述 べたものである にあてはまる 適 切 なものを 解 答 群 { }より 選 び その 記 号 で 答 えよ 設 問 1. は [ウィンドウ]メニューの 表 示 したものである {ア.[ 並

問 題 1 次 の 文 章 は Word の 作 業 環 境 および 環 境 の 設 定 変 更 について 述 べたものである にあてはまる 適 切 なものを 解 答 群 { }より 選 び その 記 号 で 答 えよ 設 問 1. は [ウィンドウ]メニューの 表 示 したものである {ア.[ 並 Microsoft Word 文 書 処 理 技 能 認 定 試 験 1 級 サンプル 問 題 知 識 試 験 制 限 時 間 30 分 受 験 会 場 受 験 番 号 氏 名 問 題 1 次 の 文 章 は Word の 作 業 環 境 および 環 境 の 設 定 変 更 について 述 べたものである にあてはまる 適 切 なものを 解 答 群 { }より 選 び その 記 号 で 答 えよ 設

More information

スライドの 編 集 とリンク スライドのレイアウトやデザインが 決 まったら 文 字 の 編 集 をしたり スライドの 順 序 変 更 やリンク 設 定 をして 見 栄 えの 良 いプレゼンテーションを 作 成 しましょう ファイル MP05 完 成.ppt を 開 き 内 容 を 編 集 していき

スライドの 編 集 とリンク スライドのレイアウトやデザインが 決 まったら 文 字 の 編 集 をしたり スライドの 順 序 変 更 やリンク 設 定 をして 見 栄 えの 良 いプレゼンテーションを 作 成 しましょう ファイル MP05 完 成.ppt を 開 き 内 容 を 編 集 していき モジュール MP-06 MP-06 スライドの 編 集 とリンク 岡 山 県 情 報 教 育 センター スライドの 編 集 とリンク スライドのレイアウトやデザインが 決 まったら 文 字 の 編 集 をしたり スライドの 順 序 変 更 やリンク 設 定 をして 見 栄 えの 良 いプレゼンテーションを 作 成 しましょう ファイル MP05 完 成.ppt を 開 き 内 容 を 編 集 していきます

More information

縦 計 横 計 をSUM 関 数 で 一 度 に 計 算 する 縦 横 の 合 計 を 表 示 するセルが 計 算 対 象 となる セルと 隣 接 している 場 合 は 一 度 に 合 計 を 求 め ることができます 1 計 算 対 象 となるセル 範 囲 と 合 計 を 表 示 する セル 範

縦 計 横 計 をSUM 関 数 で 一 度 に 計 算 する 縦 横 の 合 計 を 表 示 するセルが 計 算 対 象 となる セルと 隣 接 している 場 合 は 一 度 に 合 計 を 求 め ることができます 1 計 算 対 象 となるセル 範 囲 と 合 計 を 表 示 する セル 範 数 式 や 関 数 を 利 用 する 合 計 を 計 算 するには 数 式 を 使 って 計 算 する 数 式 を 入 力 する 時 は 必 ず 半 角 英 数 字 で 入 力 し = から 入 力 を 開 始 します 1 合 計 を 表 示 したいセルを 選 択 します 2 = を 入 力 します 3 国 語 の 点 数 のセル(C4)をクリックします 4 + を 入 力 します 5 算 数 の

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

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

Accessの起動と終了

Accessの起動と終了 データベース Access2010 の 使 い 方 ここでは Microsoft Access2010 を 使 って 関 係 データベースである Access を 学 習 します Ⅰ データベースの 基 礎 データベースの 学 習 に 先 立 って すでに 作 成 してあるデータベースを 各 自 のホルダへコピー しておく 必 要 があります ここではサンプルのデータベースである database

More information

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

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

More information

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

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

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

担 当 分 のメニュー 6/21, 6/28: アルゴリズムについて 7/5: 出 張 につき 休 講 7/12, 7/19: プログラミングについて ( 補 講 の 予 定 内 容 は 未 定 です) 講 義 情 報 http://www.fos.kuis.kyotou.ac.jp/~igaras

担 当 分 のメニュー 6/21, 6/28: アルゴリズムについて 7/5: 出 張 につき 休 講 7/12, 7/19: プログラミングについて ( 補 講 の 予 定 内 容 は 未 定 です) 講 義 情 報 http://www.fos.kuis.kyotou.ac.jp/~igaras 全 学 共 通 科 目 工 学 部 専 門 科 目 計 算 機 科 学 概 論 アルゴリズムとプログラミング その3 五 十 嵐 淳 igarashi@kuis.kyoto-u.ac.jp 大 学 院 情 報 学 研 究 科 通 信 情 報 システム 専 攻 担 当 分 のメニュー 6/21, 6/28: アルゴリズムについて 7/5: 出 張 につき 休 講 7/12, 7/19: プログラミングについて

More information

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

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

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でカートにアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >> ファイル

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

地域ポータルサイト「こむねっと ひろしま」

地域ポータルサイト「こむねっと ひろしま」 5. エディタの 使 い 方 5.1. エディタとは? NetCommons の 全 モジュールで 共 通 する 編 集 画 面 です 5.2. 通 常 のエディタの 使 い 方 (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17)(18) (19)(20)(21) (22) (23) (24) (25)

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

やさしくPDFへ文字入力 PRO v.9.0 かんたん操作マニュアル

やさしくPDFへ文字入力 PRO v.9.0 かんたん操作マニュアル 1 はじめに... 3 1.やさしくPDFへ 文 字 入 力 で 出 来 ること... 4 2.やさしくPDFへ 文 字 入 力 を 起 動 しよう... 6 3. 画 像 を 読 み 込 んでみよう... 8 4. 読 み 込 んだ 元 画 像 をなおしてみよう... 15 5. 文 字 入 力 する 場 所 を 指 定 しよう... 19 6. 文 字 を 入 力 しよう... 24 7. 入

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

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

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

More information

Microsoft PowerPoint - Econometrics-2013-04-1018.pptx

Microsoft PowerPoint - Econometrics-2013-04-1018.pptx 計 量 経 済 学 講 義 第 回 記 述 統 計 の 基 礎 Part 0 年 0 8 ( ) 限 担 当 教 員 : 唐 渡 広 志 研 究 室 : 経 済 学 研 究 棟 階 号 室 email: kkarato@eco.u-toyama.ac.jp website: http://www.u-toyama.ac.jp/kkarato/ 講 義 の 目 的 般 的 なデータの 集 約 法 や

More information

2 題 字 を 選 択 してください の 画 面 になります どれを 選 んでもかまいません 差 出 人 情 報 を 入 力 してください 画 面 になります 宛 名 面 にご 自 分 の 住 所 氏 名 を 入 れない 方 は ここに 入 力 する 必 要 はありま イラストを 選 択 してくださ

2 題 字 を 選 択 してください の 画 面 になります どれを 選 んでもかまいません 差 出 人 情 報 を 入 力 してください 画 面 になります 宛 名 面 にご 自 分 の 住 所 氏 名 を 入 れない 方 は ここに 入 力 する 必 要 はありま イラストを 選 択 してくださ 1 Word で 年 賀 状 2012 解 説 作 成 蒲 原 直 樹 どの 文 面 を 作 成 しますか? 画 面 になりますので 年 賀 状 にチェック し 次 へ をクリックします Part1:はがきウィザードをつかう 年 賀 状 以 外 にもたくさんのテンプレートがありますので 別 の 機 会 にそれ ぞれ 開 いてご 覧 下 さい まず 紹 介 するのは はがきウィザード です これは 半

More information

Microsoft Word - 貼り付け2010pdf用.docx

Microsoft Word - 貼り付け2010pdf用.docx Word への 貼 り 付 け (2010) 図 写 真 の 貼 り 付 け ディジタルカメラなどで 撮 った 写 真 自 分 で 作 成 した 図 などを Word の 文 書 中 に 貼 り 付 けること ができる それがファイルの 形 で 存 在 する 場 合 には 挿 入 図 にある 図 ( 右 図 ) をクリックし 開 いたダイアログボックスで 文 書 ファイルと 同 じように 読 み 込

More information

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

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

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 山 都 町 移 住 定 住 サイト マイホームページ 操 作 説 明 書 平 成 26 年 3 月 10 日 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 センター 承 認 公 開 申 請 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト

More information

Microsoft Word - Access2003(ノースウィンド)配布資料.doc

Microsoft Word - Access2003(ノースウィンド)配布資料.doc Access 基 礎 知 識 (p.1) データベース(Access) 基 本 操 作 データベースとは 情 報 をいろいろな 目 的 で 利 用 することができるように 関 連 する 情 報 を 効 率 よく 蓄 積 したデータの 集 合 体 である Access はデータベースを 操 作 するためのソフトであり データベー スの 作 成 管 理 保 守 を 行 うことができる またデータベースから

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

A

A A. ツールボタン の 使 い 方 下 の 図 は NetCommons の 共 通 エディタで 表 示 されるツールボタンの 一 覧 です 書 式 設 定 左 からフォント サイズ スタイルを 設 定 するためのプルダウンメニューです 効 果 をつけたい 箇 所 の 先 頭 でク リックするか 効 果 をつけたい 箇 所 をカーソルで 選 択 してボタンをクリックします 文 字 効 果 左 から

More information

006-021_責)Wordトレ2-1章_斉

006-021_責)Wordトレ2-1章_斉 . Wordの 起 動 Wordの 基 礎 知 識. Wordの 起 動 Wordの 起 動 は 次 のように 行 います 他 のアプリケーションソフトのように いくつかの 起 動 方 法 があります スタートメニューからの 起 動 スタートメニューから 起 動 する 方 法 は 次 の 通 りです [スタート]メニューの[すべてのプログラム]から[Microsoft-Office]の [Microsoft-Word]を

More information

OpenOffice.org の 表 計 算 機 能 表 計 算 ツールの 基 本 操 作 OpenOffice.org の 表 計 算 ツール Calc(カルク)の 基 本 操 作 を 紹 介 します ここでは 請 求 書 の 作 り 方 を 通 し て 基 本 操 作 を 学 びます サンプルフ

OpenOffice.org の 表 計 算 機 能 表 計 算 ツールの 基 本 操 作 OpenOffice.org の 表 計 算 ツール Calc(カルク)の 基 本 操 作 を 紹 介 します ここでは 請 求 書 の 作 り 方 を 通 し て 基 本 操 作 を 学 びます サンプルフ オープンオフィス 3 入 門 ガイド - Calc:OpenOffice.org の 表 計 算 機 能 編 このドキュメントは クリエイティブ コモンズに 表 示 される 帰 属 - 2.1 日 本 のライセンスのもと 提 供 し ています このドキュメントの Web 版 を OpenOffice.org 日 本 ユーザー 会 のドキュメントで 公 開 しています http://openoffice-docj.sourceforge.jp/wiki/documentation/beginers_guide3

More information

前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel

前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel 広 域 機 関 システム 操 作 マニュアル 共 通 2016-01-00 前 書 き 広 域 機 関 システム System for Organization for Cross-regional Coordination of Transmission Operators(OCCTO) rev:2016-01-00 商 標 類 Windows Office Excel Word Internet

More information

一 覧 表 示 2 3 1 番 号 機 能 説 明 [1] メール BOX 一 覧 メールを 整 理 するためのBOXがここに 表 示 されます 標 準 のBOXは 全 てのBOX 受 信 BOX 送 信 BOX 送 信 済 BOX 下 書 きBOX 個 人 BOX 迷 惑 BOX 削 除 BOX

一 覧 表 示 2 3 1 番 号 機 能 説 明 [1] メール BOX 一 覧 メールを 整 理 するためのBOXがここに 表 示 されます 標 準 のBOXは 全 てのBOX 受 信 BOX 送 信 BOX 送 信 済 BOX 下 書 きBOX 個 人 BOX 迷 惑 BOX 削 除 BOX イントラネットにつながった WEB ブラウザさえあれば どこからでもメールの 送 受 信 が 可 能 1. メール 対 応 ブラウザさえあれば 場 所 を 問 わないWEBメール 機 能 です Point 普 段 お 使 いのメーラー(Windows Outlook Express などのメールソフト) 同 様 に 送 受 信 をはじめ チェックした メールの 編 集 検 索 など 簡 単 に 操

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

著 作 権 について 本 レポートは 著 作 権 法 で 保 護 されている 著 作 物 です 本 レポートの 著 作 権 は pinky に 属 します MAKI の 許 可 なく 本 レポートの 一 部 または 全 てを いかなる 手 段 におい ても 複 製 転 載 流 用 転 売 等 するこ

著 作 権 について 本 レポートは 著 作 権 法 で 保 護 されている 著 作 物 です 本 レポートの 著 作 権 は pinky に 属 します MAKI の 許 可 なく 本 レポートの 一 部 または 全 てを いかなる 手 段 におい ても 複 製 転 載 流 用 転 売 等 するこ アメブロカスタマイズ 大 百 科 著 作 権 について 本 レポートは 著 作 権 法 で 保 護 されている 著 作 物 です 本 レポートの 著 作 権 は pinky に 属 します MAKI の 許 可 なく 本 レポートの 一 部 または 全 てを いかなる 手 段 におい ても 複 製 転 載 流 用 転 売 等 することを 禁 じます 使 用 許 諾 契 約 書 本 契 約 は 本 冊

More information

Word 003 スキルブック 06 - オブジェクトの 利 用 0.Word で 作 る 表 : 行 幅 を 最 小 値 より 小 さく 設 定 する 3 表 の 左 右 のサイズを 適 宜 調 整 します Word で 表 を 作 成 するとき, 列 幅, 行 幅 ともに 基 本 的 に 自 由

Word 003 スキルブック 06 - オブジェクトの 利 用 0.Word で 作 る 表 : 行 幅 を 最 小 値 より 小 さく 設 定 する 3 表 の 左 右 のサイズを 適 宜 調 整 します Word で 表 を 作 成 するとき, 列 幅, 行 幅 ともに 基 本 的 に 自 由 Word 003 スキルブック 06 - オブジェクトの 利 用 Word 003 スキルブック 06 - オブジェクトの 利 用 ツールバーに 表 ( 罫 線 )の 作 成 機 能 を 追 加 する( 罫 線 ツールバーを 追 加 する) ツールバー 上 の,アイコンのない 空 白 箇 所 を 右 してメニューを 開 きます 0. 準 備 :ツールバーのカスタマイズ メニュー 内 の 罫 線 の

More information

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

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

More information

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W

演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W Webデータ 管 理 HTML+CSS (4) (2 章 ) 2011/10/26( 水 ) 1/21 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z:

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 1 ましき はぴまるサイト マイホームページ 操 作 説 明 書 平 成 27 年 12 月 2 会 員 登 録 からホームページ 公 開 まで 会 員 仮 登 録 本 登 録 申 請 ログイン センター 承 認 ホームページ 公 開 ホームページ 作 成 ホームページ 作 成 の4つのステップ 1 ホームページの 設 定 (p4) 2 レイアウト デザインの 設 定 (p5) 3 記 事 の 登

More information

<4D6963726F736F667420506F776572506F696E74202D20434D53837D836A83858341838B81698C888DCF8ED29770816A2E707074205B8CDD8AB78382815B83685D>

<4D6963726F736F667420506F776572506F696E74202D20434D53837D836A83858341838B81698C888DCF8ED29770816A2E707074205B8CDD8AB78382815B83685D> 茨 城 県 筑 西 市 CMS マニュアル ( 決 裁 者 用 ) 第 版 -CMS - 目 次 ログイン P3 メイン P4 課 係 P6 アカウント P 階 層 P4 ページ P7 お 知 らせ P カレンダー P6 FAQ P30 メールフォーム P34 関 連 書 類 P45 マップ P48 掲 示 板 P5 ログアウト P55 付 録 表 示 順 P56 付 録 公 開 P57 付 録 3

More information

Excel basics

Excel basics Excel 入 門 Excel は 表 計 算 およびデータ 分 析 のための 効 果 的 なアプリケーションです 最 も 効 果 的 に 使 用 するためには 最 初 にその 基 礎 を 理 解 する 必 要 があります このチュートリ アルでは すべてのブックで 使 用 する 作 業 と 機 能 をいくつか 紹 介 します 開 始 する 前 に... 1 1. 新 しい 空 白 のブックを 作

More information

もくじ

もくじ メルマガ 管 理 機 能 マニュアル 2016/7/4 株 式 会 社 ビズクリエイト 目 次 1. メルマガ 配 信 手 順... 3 2. メルマガ 作 成... 4 新 規 メルマガを 作 成 する... 4 3. メルマガ 一 覧... 8 作 成 したメルマガを 一 覧 で 確 認 する... 8 メルマガの 基 本 設 定 を 確 認 変 更 する... 9 メルマガの 基 本 設 定

More information

PowerPoint活用マニュアル

PowerPoint活用マニュアル PowerPoint 活 用 マニュアル スライドショーにせず そのまま 見 てね スライドショー 編 キーボードの F5ボタンをクリック してください スライト ショーでここまで 戻 ってきたら ESCボタンを 押 してくださいね 次 にキーボードの Shift-F5ボタンを 押 してみてください いきなりこの 画 面 になるはずです 確 認 できたらESCボタン 次 に スライドショー 中 の

More information

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます <TITLE>JavaScript サンプル</TITLE> 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

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

インターネットマガジン1999年2月号―INTERNET magazine No.49

インターネットマガジン1999年2月号―INTERNET magazine No.49 A MagnaviIp990Htmltips +CD-ROM 3.0 3.0 A N S W E R A N S W E R 74 INTERNET magazine 999/ click here! 3

More information

スライド 1

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

More information

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

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (8) (2011/07/06) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 前 回 の 課 題 POSTでデータが 送 信 されているかを 確 認 送 信 されていれば

More information

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

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

More information

1 次 の 枠 で 囲 まれた 部 分 のデータを 入 力 しましょう 1データ 入 力 後 のセル 移 動 ア 下 方 向 への 移 動 は Enter キーを 使 います Enter イ 右 方 向 への 移 動 は Tab キーを 使 います Tab ウ 左 端 からデータを 入 力 し 右

1 次 の 枠 で 囲 まれた 部 分 のデータを 入 力 しましょう 1データ 入 力 後 のセル 移 動 ア 下 方 向 への 移 動 は Enter キーを 使 います Enter イ 右 方 向 への 移 動 は Tab キーを 使 います Tab ウ 左 端 からデータを 入 力 し 右 表 計 算 ソフトの 基 礎 Excel 2010 の 起 動 画 面 と 画 面 構 成 クイックアクセスツールバー タブ リボン 数 式 バー :アクティブセル :ダイアログボックス 起 動 ツール 列 名 :A~Z AA~ZZ AAA~XFD 列 行 番 号 :1~1048576 行 碁 盤 の 目 のような 小 部 屋 セル セルの 集 まり ワークシート ワークシートの 集 まり ファイル

More information

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2

ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 レンタルショッピングカートマニュアル Vol.2 ~ デザイン 設 定 編 ~ ファイル 管 理 ツール デザイン 設 定 >> ファイル 管 理 でアップロードされているファイルを 管 理 できます この 画 面 ではファイルの 確 認 / 移 動 / 削 除 が 可 能 です ファイルのアップロードはできません 2 ファイル 管 理 ファイルのアップロード/ダウンロード デザイン 設 定 >>

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

1/2

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

More information

資 料 について 本 資 料 は プレゼンテーションソフト Power Point(パワーポイント)の 基 本 的 な 使 い 方 をまとめたものです はじめの 準 備 1 起 動 すると 右 のような 画 面 が 表 示 されます [ 新 しいプレゼンテーション]をクリックします 2 画 面 上

資 料 について 本 資 料 は プレゼンテーションソフト Power Point(パワーポイント)の 基 本 的 な 使 い 方 をまとめたものです はじめの 準 備 1 起 動 すると 右 のような 画 面 が 表 示 されます [ 新 しいプレゼンテーション]をクリックします 2 画 面 上 平 成 28 年 8 月 25 日 名 古 屋 市 立 桜 丘 中 学 校 名 古 屋 市 情 報 教 育 研 究 会 全 体 研 修 会 資 料 - 0 - 資 料 について 本 資 料 は プレゼンテーションソフト Power Point(パワーポイント)の 基 本 的 な 使 い 方 をまとめたものです はじめの 準 備 1 起 動 すると 右 のような 画 面 が 表 示 されます [ 新

More information

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ページ 更 新 の 設 置 例 5. 変 換 指 定 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴

目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ページ 更 新 の 設 置 例 5. 変 換 指 定 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴 ページ 更 新 管 理 L-TOOL PgUpdater (ver 1.2) 取 扱 説 明 書 Little Net http//l-tool.net/ - 2015 年 07 月 24 日 版 - 目 次 1. 概 要 2.サーバーへの 設 置 3. 設 定 4.ページ 更 新 の 設 置 例 5. 変 換 指 定 6. 制 限 解 除 キー 7. 利 用 規 定 8. 更 新 履 歴 1. 概

More information

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

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (7) (2011/06/29) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 前 回 の 課 題 おみくじのプログラムを 参 考 にして 生 まれた 年 ( 西 暦 )を

More information

コマンド対応表 Excel2013

コマンド対応表 Excel2013 コマンド 対 応 表 (Excel 2003 Excel 2013) Excel 2003のコマンドがExcel 2013のコマンドにどのように 対 応 しているかを 記 載 しています コマンド 対 応 表 (Excel 2003 Excel 2013) ファイル メニュー 新 規 作 成 リボン: ファイル タブ 新 規 開 く リボン: ファイル タブ 開 く コンピューター 参 照 閉 じる

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

1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python..................

1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python.................. JavaScript 0648016 1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python.................. 3 2......................... 4 3..........................

More information

はじめに

はじめに NetCommons(CMS) 学 校 Web ページ 作 成 講 習 会 用 テキスト 作 成 編 - 目 次 - 1 ネットコモンズについて P.1 2 ログインしてみましょう P.1 3 ページの 構 成 P.2 4 ページ 構 成 の 設 定 P.2 5 トップページの 構 成 の 設 定 P.3 6 ロゴの 作 成 と 設 定 P.4 7 メニューの 設 定 P.7 8 トップページの 作

More information

携帯電話でGoogle Mapsを使う

携帯電話でGoogle Mapsを使う PHPのファイルは UTF-8 BOMなしで 保 存 し www.cyaneum.orgのpublic_htmlに 置 く! テーマ 研 究 会 (04/28) Google Mapsを 使 う 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト riho-m-rg10@cuc.ac.jp 資 料 http://www.cuc.ac.jp/rg10/ 前 回

More information

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

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

More information

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード] COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css

More information

1" 3 3 4 5 9 15 16 17 18 20 22 22

1 3 3 4 5 9 15 16 17 18 20 22 22 - - 2014 8 TEL 03-4455-7453 FAX 03-6740-1754 Mail tamago-con@temona.co.jp 1" 3 3 4 5 9 15 16 17 18 20 22 22 2" 2 23 24 25 27 28 29 30 31 32 33 34 35 42 47 STEP1 3" 4" STEP2 URL URL 5" STEP3 2 STEP4 jpg

More information

目 次 1. はじめに... G2 2. グラフの 作 り 方... G3 2.1. Excel シートからのグラフの 作 り 方... G3 2.2. Word や PowerPoint からのグラフの 作 り 方... G4 2.3. Excel から Word PowerPoint へのグラフ

目 次 1. はじめに... G2 2. グラフの 作 り 方... G3 2.1. Excel シートからのグラフの 作 り 方... G3 2.2. Word や PowerPoint からのグラフの 作 り 方... G4 2.3. Excel から Word PowerPoint へのグラフ Excel 2010 グラフ Microsoft Excel 2013 - グラフ 編 - 明 治 大 学 教 育 の 情 報 化 推 進 本 部 IZM20140417 目 次 1. はじめに... G2 2. グラフの 作 り 方... G3 2.1. Excel シートからのグラフの 作 り 方... G3 2.2. Word や PowerPoint からのグラフの 作 り 方... G4

More information

情報処理実習(工基3)

情報処理実習(工基3) 情 報 ( 実 習 )( 芸 術 1 班 ) 第 10 回 エクセル 篇 3 VBA を 使 ったプログラムによる 関 数 のシミュレーション これまでの2 回 で Excel の 表 計 算 ソフトとしての 機 能 及 び 統 計 機 能 の 初 歩 を 実 習 しました Excel にはこれ 以 外 にも 大 変 有 用 な 機 能 があります 今 日 はその 中 から VBA(Visual Basic

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

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

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

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

Microsoft Word - class_specification_guide_v60.doc

Microsoft Word - class_specification_guide_v60.doc IM-FormatCreator クラス 指 定 手 順 書 Ver 6.0 IM-FormatCreator i 1 はじめに 1 1.1 目 的 1 2 プログラムの 作 成 2 2.1 ファンクション コンテナ(.JS)の 作 成 2 2.2 プレゼンテーションページ(.HTML)の 作 成 3 3 クラス 指 定 項 目 の 設 定 5 3.1 クラス 指 定 設 定 画 面 5 3.2 クラスパス

More information

問 題 1 次 の 文 章 は 作 業 環 境 について 述 べたものである にあてはまる 適 切 なも のを 解 答 群 { }より 選 び その 記 号 で 答 えよ 設 問 1. < 図 1>はアプリケーションウィンドウの 一 部 である < 図 1>の1の 部 分 を < 図 1> という

問 題 1 次 の 文 章 は 作 業 環 境 について 述 べたものである にあてはまる 適 切 なも のを 解 答 群 { }より 選 び その 記 号 で 答 えよ 設 問 1. < 図 1>はアプリケーションウィンドウの 一 部 である < 図 1>の1の 部 分 を < 図 1> という Microsoft PowerPoint プレゼンテーション 技 能 認 定 試 験 初 級 2007 サンプル 問 題 知 識 試 験 制 限 時 間 30 分 受 験 会 場 受 験 番 号 氏 名 問 題 1 次 の 文 章 は 作 業 環 境 について 述 べたものである にあてはまる 適 切 なも のを 解 答 群 { }より 選 び その 記 号 で 答 えよ 設 問 1. < 図 1>はアプリケーションウィンドウの

More information

Microsoft PowerPoint - manualtachiyomi.pptx

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

More information

地理院地図マニュアル

地理院地図マニュアル 地 理 院 地 図 操 作 マニュアル 平 成 25 年 10 月 30 日 国 土 地 理 院 目 次 1. 機 能 概 要... - 4-2. 機 能 詳 細... - 7-2.1. 地 図 表 示 基 本 機 能... - 7-2.1.1. 地 図 のスクロール... - 7-2.1.2. ズームイン ズームアウト... - 7-2.1.3. スケールバー 表 示... - 8-2.1.4.

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 目 次 操 作 マニュアル メール 目 次 ログイン ログイン - メール 機 能 について - 手 動 メール 手 動 メールの 設 定 について - 手 動 メール 配 信 対 象 者 の 設 定 - 手 動 メールキャンペーン 結 果 の 確 認 - 自 動 メール - 自 動 メール 設 定 ( 誕 生 日 メール) - 自 動 メール 設 定 (フォローメール) - 自 動 メール 設 定

More information

名刺作成講習

名刺作成講習 名 刺 作 成 講 習 (Word 2007 編 ) OS:Windows Vista Basic 講 習 内 容 Microsoft Word 2007 でオリジナル 名 刺 の 作 成 名 刺 用 紙 の 確 認 印 刷 用 紙 の 詳 細 を 調 べる ラベル 製 品 名 エーワン 製 品 番 号 A-ONE 51002 用 紙 サイズ A4 列 数 2 行 数 5 上 余 白 11 横 余

More information

SchITコモンズ【活用編】

SchITコモンズ【活用編】 2016 SchIT コモンズ 活 用 編 株 式 会 社 スキット 1. 画 像 のサイズ 変 更 (リサイズ) 1. 画 像 の 大 き さ( 幅 )を 変 更 (ア) 画 像 を 挿 入 する 場 合 は[ 画 像 の 挿 入 ]のマークをクリックします [ 参 照 ]をクリックし 任 意 の 場 所 から 挿 入 したい 画 像 を 選 択 し [ 画 像 の 挿 入 ]をクリックします (イ)

More information

[1] 概 略 の 流 れ 概 略 の 流 れは 下 図 の 通 りです 1 本 ソフトの 環 境 設 定 2 ホームページに 編 集 開 始 文 1 行 を 書 き 込 む ( 例 ) <!-- start01 --> 3 管 理 者 用 パスワードでログイン 4 管 理 画 面 で 必 須 デー

[1] 概 略 の 流 れ 概 略 の 流 れは 下 図 の 通 りです 1 本 ソフトの 環 境 設 定 2 ホームページに 編 集 開 始 文 1 行 を 書 き 込 む ( 例 ) <!-- start01 --> 3 管 理 者 用 パスワードでログイン 4 管 理 画 面 で 必 須 デー 操 作 説 明 書 目 次 [1] 概 略 の 流 れと 環 境 設 定 -------------------------- 1 [2] 設 置 方 法 と 起 動 ----------------------------------- 3 [3] ログインと 設 定 ----------------------------------- 5 [4] 必 須 の3 項 目 の 入 力 -----------------------------

More information