( )

Similar documents
PowerPoint プレゼンテーション

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

ch31.dvi

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

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


Web

m_sotsuron

CSS

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

JavaScript の使い方

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

Webデザイン論

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2

Network Computing の基礎

3 top#index 1 web router.ex web/router.ex 12 scope "/", NanoPlanner do 13 pipe_through browser get "/", TopController, index 16 end URL / to


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

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

Color Change

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box


インターネット社会の発展

トリガーをわかり易くする方法

css.pdf

Microsoft Word - 11_thesis_08k1131_hamada.docx

8 7 + <div class='col-12 col-md-8'> 8 <%= item.description %> 9 </div> 10 </div> 11 <% end %> 12 </div> class container container-fluid PicoPlan

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

6 2 1

! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web

WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization / 39

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

Microsoft PowerPoint - css-3days 互換モード

WebGL *1 DOM API *1 X LR301 Kageyama (Kobe Univ.) Visualization / 37

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

untitled

Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

CSS CSS

Microsoft PowerPoint - css-3days 互換モード

untitled

Moshimo Challenge Report

HTML5 CSS

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

jquery

【お試し版】Web制作者のためのCSS設計の教科書(非売品)

SVG資料第6回目(その3) SVGとHTMLの間でデータを交換する

6/ Kageyama (Kobe Univ.) / 39

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

cssnitelp47_hasegawa_v02.key


サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

CSSNite-LP54-kubo-ito.key

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

JavaScript 演習 2 1

untitled

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn

WebGL X LR301 Kageyama (Kobe Univ.) Visualization / 45

27短01研01斉藤.indd

_勉強会_丸山さつき_v3

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する)

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11

// レイヤー (glfn: 地質 +ライン+ 断層 + 凡例番号 ) var _opacity = 0.5; // 地質図の不透明度 (0-1, 0 が完全に透明 ) var _map = new google.maps.map(document.getelementbyid('map'), {

Web±ÜÍ÷¤Î³Ú¤·¤µ¤ò¹â¤á¤ëWeb¥Ú¡¼¥¸²ÄÄ°²½¥·¥¹¥Æ¥à

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

Microsoft Word - JavaScript基礎講座Web Speech API.docx

untitled

WebGL Safari WebGL WebGL Safari Kageyama (Kobe Univ.) / 5

Web 設計入門

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され


<!DOCTYPE html> <html> <head> <title>spaceorbitanime</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="spaceorbitanime.css">

div: 3 span: 4 h1,..., h6: (heading) h1 h2 </tag1> table: table tr (table row) tr td (table data) ol, ul: (ordered) (unordered) </tag4> 1: HTML

Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で

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

SmartBrowser_document_build30_update.pptx

JavaScript演習

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

/var/lib/sharelatex/data/compiles/5b35c6e168aeba3d a72a7acd11f6ba07fbbff68/output.dvi

Color Change

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/

B 20 Web

paper.pdf

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

ウェブデザイン技能検定学科試験 2 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 文字実体参照の は 改行しない半角スペースを表示する 第 2 問 HTML 5.2 では コメントの中に連続したハイフンを入れることができる 第 3 問

pdf

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt


Transcription:

2016 13H018

1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5 7 5.1.................................................. 7 6 10 6.1........................................... 10 6.2.................................................. 10 7 12 7.1.............................................. 12 7.2............................................ 14 8 15 8.1............................................ 15 8.2........................................... 15 8.3......................................... 15 9 16 10 17 A 19 A.1.1............................................. 19 A.2.2............................................. 20 A.3.3............................................. 21

1 1 1 1 1 2 3 4 5 6 7 8 9 10 1

2 ( ) ( ) ( ) ( 2003) [1] 1. 2. 3. [2] 1. 6 ( ) 2. 4 3. 10 ( ) [2] 3. [2] [3] (1) (2) (3) (4) [3] (1) (4) (2) (4) 6 3 [2] (1) [4] ( ) ( ) [4] 1 ( ) 3 [2] 2

3

3 3.1 1 ( ) ( ) ( ) ( ) 1 ( ) ( ) 1 [5] 4

3.2 ( ) ( ) ( 2 ) ( ) 2 [6] ( ) 5

4 4.1 5 6 ( 1 ) 1 [2] 6 6 5 4 3 2 1 ( ) ( ) ( ) ( 6,5 4 ) ( ) ( 2 ) 4.2 1. 6 ( ) 10 3 15 1 [2] 1 5 ( ) 6

5 OS JavaScript web 5.1 10 1 7 7 1 5 10 2 4 5 3 3 5 2.5 2 1.5 1 5 2 1 1 7 40 2 1 10 5 2 5 4 3 5 3 4 5 2.5 5 5 2 6 5 1.5 7 5 1 3. ( 100 ) 7

3 start 4 8

5 6 9

6 6.1 18 ( ) 40 18 24 19 62 ( 33 ) 28 7 29 28 9 12 5 ( 4 1 ) 41 61 ( 54) 6 15 3 1. 28 9 10 28 9 18 3 ( ) 1 41 16 11 10 2 51 21 6 10 3 61 12 15 9 4 61 21 7 8 5 57 17 11 5 6.2 ( ) 10 ( ) ( ) 1 3 5 ipad mini ipad 7 10

図7 対照群の検査中の様子 こちらは研究室内で行った 左手にタッチペンを持ち 問題に答えている 11

7 7.1 3 1 4 8 3 15 (37.5%) 6 13 (32.5%) 7 12 (30%) 3 1 11 (26%) 25 9 8 1 4 5 12

9 0 10 1 11 15 2 16 20 3 21 25 4 26 30 5 31 35 6 36 40 7 25 13

7.2 4 1 5 6 2 2 4 3 4 1 3 4 1 5 2 1 27 32 2 9 22, 3 5 19 4 3 16 5 2 5 2 3 4 5 5 4 1 2 3 4 5 1 5-3 *1 (27) * 2 6-1(30) 6-1(30) 5-4(28) 6-3(32) 2 2-4(13) 2-1(9) 4-3(22) 3-1(15) 3-1(15) 3 2-2(11) 3-4(19) 1-7(6) 1-8(7) 1-6(5) 4 1-4(3) 3-2(16) 2-4(13) 1-6(5) 1-5(4) 5 1-4(3) 1-3(2) 1-6(5) 1-6(5) 1-4(3) *1 *2 14

8 8.1 4 4 2.5 2.5 ( ) ( ) 4 4 8.2 4 1 1 4 1 1 4 5 1 2 1. ( 2,3,4,5) (1) (2) (3) (1) (2) [4] 8.3 ( ) [4] 3. ( ) 15

9 1. 4 4 2. 1. 1 1. 3. 4. 16

10 2 1. UI 2. 1 2 40 5 17

[1]. [2]., 2003. [3]., 2014. [4]. slta, 2009. [5] st-medica. http://www.st-medica.com/. [6].., 1998. 18

A A.1.1 Listing 1 html <!DOCTYPE HTML> <html> <head> <script src= http : / / ajax. g o o g l e a p i s. com/ ajax / l i b s / jquery / 1. 7. 0 / jquery. min. j s ></ script> <meta charset = u t f 8 > <LINK href= s t y l e. c s s rel= s t y l e s h e e t type= t e x t / c s s > <script type= t e x t / j a v a s c r i p t src= ugoku. j s ></ script> <t i t l e> </ t i t l e> </head> <body> <div id= hajime > <h1> <br> <br> </h1><br><br> <span> 40</span><br><br> <button id= p o t i onclick= startm ( ) >s t a r t</button><br><br> <a href= setumei. html > </a><br><br> </ div> <div id= main cnt > <! > <div id= sound s ></div> <div id= hanamaru ></ div> <div id= mondai f ></div><br><br> <! > <center><div id= s e n t a k u f ></div></center> </ div> <div id= kekka > <h2> </h2> <div id= k e kka f ></div><br> <button onclick= l o c a t i o n. r e l o a d ( ) id= onemore > </button> 19

</ div> <script> $ ( window ). on ( touchmove. n o S c r o l l, f u n c t i o n ( e ) { e. preventdefault ( ) ; ) ; $ ( document ). ready ( f u n c t i o n ( ) { ) $ ( window ). load ( f u n c t i o n ( ) { ) </ script> </body> </html> A.2.2 Listing 2 css #hajime, #main cnt, #kekka { background : #f a f a d 2 ; width : 95%; padding : 10 px ; text a l i g n : c e n t e r ; margin : 30px auto ; #main cnt { d i s p l a y : none ; #kekka { d i s p l a y : none ; button { width :200 px ; font weight : bold ; text d e c o r a t i o n : none ; 20

text a l i g n : c e n t e r ; padding : 8 px 0 10px ; background c o l o r : #f f f ; border : 1 px s o l i d #333; button : hover { background c o l o r : #f f c 0 c b ; #p o t i { font s i z e : 2 4 px ; #onemore{ font s i z e : 15px ; img{ border : 1 px s o l i d #333; a : hover { p o s i t i o n : r e l a t i v e ; top : 3 pt ; l e f t : 3 pt ; A.3.3 Listing 3 js // qa = new Array ( ) ; qa [ 0 ] = [,1, gazou / hankachi. png, hankachi ] ; qa [ 1 ] = [,2, gazou / mirror. png, mirror ] ; qa [ 2 ] = [,3, gazou / k u s i. png, k u s i ] ; qa [ 3 ] = [,4, gazou / e n p i t s u. png, e n p i t s u ] ; qa [ 4 ] = [,5, gazou / hasami. png, hasami ] ; qa [ 5 ] = [,6, gazou / haburashi. png, haburashi ] ; qa [ 6 ] = [,7, gazou /100 en. png, 100 en ] ; 21

qa [ 7 ] = [,8, gazou /key. png, key ] ; qa [ 8 ] = [,9, gazou /match. png, match ] ; qa [ 9 ] = [,10, gazou / mannenhitsu. png, mannenhitsu ] ; var m array = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] ; count = 0 ; se = 1 ; q s e l = 1 0 ; hoge = new Array ( ) ; var t i d ; var chotmatu ; ni = 2 ; sms = 0 ; f l a g = 0 ; f u n c t i o n random ( array, num) { var a = array ; var t = [ ] ; var r = [ ] ; var l = a. length ; var n = num < l? num : l ; while ( n > 0) { var i = Math. random ( ) l 0 ; r [ n ] = t [ i ] a [ i ] ; l ; t [ i ] = t [ l ] a [ l ] ; return r ; hoge = random ( m array, 1 0 ) ; f u n c t i o n startm ( ) { document. getelementbyid ( hajime ). style. d i s p l a y= none ; document. getelementbyid ( main cnt ). style. d i s p l a y= block ; sentaku ( ) ; mondai ( ) ; audio. load ( ) ; 22

var playsound = f u n c t i o n ( ) { c l e a r I n t e r v a l ( chotmatu ) ; mondai ( ) ; audio. load ( ) ; f u n c t i o n mondai ( ) { t i d = settimeout ( f u n c t i o n ( ) { audio. play ( ) ;, 1 0 0 0 ) ; i f ( sms>38){ cleartimeout ( t i d ) ; time ( ) ; document. getelementbyid ( sound s ). innerhtml = <audio id = audio s r c = sound/ + qa [ hoge [ count ] ] [ 3 ] +. mp3 preload = auto ></audio> ; document. getelementbyid ( mondai f ). innerhtml = + se + + ( count + 1 ) ; f u n c t i o n sentaku ( ) { s = ; f o r ( n=1;n<=q s e l ; n++) { i f ( n==6){ s += <br> <a h r e f = j a v a s c r i p t : anser ( + n + ) onclick = playsound () > <img s r c= + qa [ n 1 ] [ 2 ] + width=17% h e i g h t=17% ></a> ; e l s e { s += <a h r e f = j a v a s c r i p t : anser ( + n + ) onclick = playsound () > <img s r c= + qa [ n 1 ] [ 2 ] + width=17% h e i g h t=17%></a> ; document. getelementbyid ( s e n t a k u f ). innerhtml = s ; f u n c t i o n anser (num) { 23

var s ; i f (num == qa [ hoge [ count ] ] [ 1 ] ) { document. getelementbyid ( main cnt ). style. background= #f f c 0 c b ; settimeout ( f u n c t i o n ( ) { document. getelementbyid ( main cnt ). style. background= #f a f a d 2 ;, 1 0 0 0 ) ; count++; sms++; i f ( sms==10 sms==15 sms==20){ count =0; hoge = random ( m array, 1 0 ) ; e l s e i f ( sms==25 sms==30 sms==35){ count =0; hoge = random ( m array, 1 0 ) ; e l s e i f ( sms>39){ count =0; owari ( ) ; mondai ( ) ; e l s e { cleartimeout ( t i d ) ; s += + qa [ hoge [ count ] ] [ 0 ] ; owari ( ) ; f u n c t i o n owari ( ) { document. getelementbyid ( main cnt ). s t y l e. d i s p l a y= none ; document. getelementbyid ( kekka ). s t y l e. d i s p l a y= block ; i f ( sms==40){ document. getelementbyid ( k e k k a f ). innerhtml = ; e l s e { ; document. getelementbyid ( k e k k a f ). innerhtml = se + + count + 24

document. getelementbyid ( s e n t a k u f ). innerhtml = ; f u n c t i o n time ( ) { c l e a r I n t e r v a l ( chotmatu ) ; i f ( sms>=0 && sms<=9){ chotmatu = s e t I n t e r v a l ( owari ( ), 7 0 0 0 ) ; e l s e i f ( sms>=10 && sms<=14){ chotmatu = s e t I n t e r v a l ( owari ( ), 6 0 0 0 ) ; se = 2 ; e l s e i f (15<=sms && sms<=19){ chotmatu = s e t I n t e r v a l ( owari ( ), 5 0 0 0 ) ; se = 3 ; e l s e i f (20<=sms && sms<=24){ chotmatu = s e t I n t e r v a l ( owari ( ), 4 5 0 0 ) ; se = 4 ; e l s e i f (25<=sms && sms<=29){ chotmatu = s e t I n t e r v a l ( owari ( ), 4 0 0 0 ) ; se = 5 ; e l s e i f (30<=sms && sms<=34){ chotmatu = s e t I n t e r v a l ( owari ( ), 3 5 0 0 ) ; se = 6 ; e l s e i f (35<=sms && sms<=39){ chotmatu = s e t I n t e r v a l ( owari ( ), 3 0 0 0 ) ; se = 7 ; e l s e i f (40<sms ){ se = 8 ; chotmatu = s e t I n t e r v a l ( owari ( ), 3 0 0 0 ) ; owari ( ) ; document. onkeypress = keyjump ; 25