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

Size: px
Start display at page:

Download "10 章 各 種 Visual ツールを 作 ってみよう 実 際 の Web ページで 見 かける 各 種 Visual ツールの 作 り 方 を 説 明 します タグで 作 るボタンでなく イメージを 使 った 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) ,,,,, <> ( ) (/ ) (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

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

インターネットマガジン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

表紙

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

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

JavaScript演習

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

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

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

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

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

More information

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

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

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

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

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

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

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

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

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

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

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

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

(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

Accessの起動と終了

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

More information

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

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

More information

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

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

More information

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

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

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

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

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

More information

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

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

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

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

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

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

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

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

More information

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

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

More information

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

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

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

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

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

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

やさしく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

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

スライド 1

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

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

<4D6963726F736F667420506F776572506F696E74202D20434D53837D836A83858341838B81698C888DCF8ED29770816A2E707074205B8CDD8AB78382815B83685D>

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

More information

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

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

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. 概 要 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

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

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

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

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

A

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

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

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

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

More information

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

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

More information

1/2

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

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

携帯電話で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

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

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

More information

もくじ

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

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

第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

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

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

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

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: 画 像 を 入 れる

背 景

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

More information

PowerPoint活用マニュアル

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

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

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

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

PowerPoint プレゼンテーション

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

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

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

アスラテック株式会社 会社案内 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

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

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

More information

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

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

More information

PowerPoint プレゼンテーション

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

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

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

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

More information

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

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

More information

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i

例 ) B&B Brighton House ( http://www.bbbrightonhouse.com/ ) このサイトは タブ 先 のページごとにヘッダー 部 に 使 用 する 写 真 を 変 化 させている 例 です またこのサイト では トップページには ModifiableWeb i ModifiableWeb レイアウトデザインガイド 1. 基 本 構 成 ModifiableWeb を 使 用 したWebサイトの 基 本 構 成 は 以 下 のようになっています ModifiableWeb iframe の 外 側 の Page Header Page Footer 及 び 全 体 の 背 景 は 普 通 のWebサ イト 同 様 自 由 にデザインすることができます ModifiableWeb

More information

Excel basics

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

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

Microsoft Word - 第4章.doc

Microsoft Word - 第4章.doc 第 4 章 その 他 の 機 能 この 章 では 絶 対 参 照 と 関 数 (さまざまな 数 式 を 作 成 するときに 必 要 となるセル 参 照 の 使 い 分 けと 関 数 の 使 い 方 ) ワークシートの 操 作 方 法 ( 行 や 列 セルの 挿 入 と 削 除 方 法 ワークシート 間 でのデータの 移 動 とコピーの 方 法 ) 図 形 の 作 成 と 編 集 (オートシェイプの

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

(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

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

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

More information

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

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

More information

PowerPoint プレゼンテーション

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

More information

文 書 構 造 とスタイル

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

More information

(Microsoft Word - \203v\203\215\203O\203\211\203~\203\223\203O1new.doc)

(Microsoft Word - \203v\203\215\203O\203\211\203~\203\223\203O1new.doc) 1.プログラム 言 語 1-1 プログラム 言 語 の 種 類 プログラム 言 語 は その 言 語 が 目 的 とする 処 理 別 に 基 本 的 な 記 述 概 念 が 存 在 する プログ ラム 言 語 の 種 類 ごとに 記 述 的 特 徴 や 生 産 性 が 異 なる Program 言 語 低 水 準 言 語 マシン 語 アセンブラ 高 水 準 言 語 手 続 き 型 言 語 FORTRAN

More information