カンペキな初心者のための、Adobe® AIR™の基礎の基礎

Size: px
Start display at page:

Download "カンペキな初心者のための、Adobe® AIR™の基礎の基礎"

Transcription

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

26

27 <?xml version="1.0" encoding="utf 8"?> <mx:windowedapplication xmlns:mx=" layout="absolute" showflexchrome="false"> <mx:script> <![CDATA[ private function dohello():void{ mytextarea.text+="hello World! ";} private function domove():void{ this.stage.nativewindow.startmove();} private function doclose():void{ this.stage.nativewindow.close();} ]]> </mx:script> <mx:image id="windowshape" source="fx_bg.swf" top="0" left="0" mousedown="domove()"/> <mx:button id="mybutton" label="fx Hello World!" top="107" left="39" click="dohello()"/> <mx:textarea id="mytextarea" top="140" left="39" width="264" height="127"/> <mx:button id="closebutton" label="x" top="0" left="325" click="doclose()"/> </mx:windowedapplication>

28

29

30 <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title>dreamweaver AIR sample</title> <style type="text/css"> body{ font family: Arial, Helvetica, sans serif;} #windowshape{ position: absolute; left: 0px; top: 0px;} #closebutton{ position: absolute; left: 325px; top: 0px;} #mytextarea{ position: absolute; left: 39px; top: 140px; height: 127px; width: 264px;} #mybutton{ position: absolute; left: 39px; top: 107px;} </style> <script type="text/javascript"> function dohello(){ document.getelementbyid("mytextarea").value+="hello World! ";} </script> </head> <body> <img id="windowshape" src="dw_bg.png" width="358" height="374" onmousedown="window.nativewindow.startmove();"/> <input type="button" id="mybutton" value="js Click Me!" onclick="dohello();"> <textarea id="mytextarea"></textarea> <input type="button" id="closebutton" value="x" onclick="window.nativewindow.close();"> </body> </html>

31

32

33 mybutton_mc.addeventlistener(mouseevent.click, dohello); function dohello(e:mouseevent):void{ mytextarea_mc.text+="hello World! "; } windowshape_mc.addeventlistener(mouseevent.mo USE_DOWN, domove); function domove(e:mouseevent):void{ stage.nativewindow.startmove(); } closebutton_mc.addeventlistener(mouseevent.mo USE_DOWN, doclose); function doclose(e:mouseevent):void{ stage.nativewindow.close(); }

34

35 //AS2 // Flash Player 8/ActionScript 2.0 mybutton_mc.onrelease=function(){ mytextarea_mc.text+="hello World! "; } //AS3 // Adobe AIR 1.0/ActionScript 3.0 //"as2_mc"as2 SWF //UILoader as2_mc.addeventlistener(mouseevent.mouse_down, domove); function domove(e:mouseevent):void{ stage.nativewindow.startmove(); } closebutton_mc.addeventlistener(mouseevent.mo USE_DOWN, doclose); function doclose(e:mouseevent):void{ stage.nativewindow.close(); }

36

37

38

39

40

41

42

43

44

45

46

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

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 JavaScript (2) 1 JavaScript 1.! 1. 2. 3. DOM 4. 2. 3. Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 (1) var a; a = 8; a = 3 + 4; a = 8 3; a = 8 * 2; a = 8 / 2; a = 8 % 3; 1 a++; ++a; (++

More information

untitled

untitled Ajax Web Ajax http://www.openspc2.org/javascript/ajax/ajax_stu dy/index.html Life is beautiful Ajax http://satoshi.blogs.com/life/2005/06/ajax.html Ajax Ajax Asynchronous JavaScript + XML JavaScript XML

More information

6 2 1

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

More information

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

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/

More information

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

インターネット社会の発展 インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :

More information

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.

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. http://www1.iwate-ed.jp/ 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.d 5.4.e 5.5.a 5.5.b 5.5.c

More information

スライド タイトルなし

スライド タイトルなし 御中 ドキュメント種 : お得意様名 : システム名 : デモ説明資料資料 EditionFlex DEMO 第一版平成 22 年 11 月第二版平成 22 年 12 月 11 日 15 日 Page - 1 1 DEMO1 Edition Flex エディター ( 編集画面 ) の呼出 DEMO1 では RESOLOGIC の Web サーバー上のデモメニューから まったく別のクラウド上にある Flex

More information

超簡単にWebページを作成

超簡単にWebページを作成 Lesson を始める前に どんなプログラマーもこれを実践しました 超簡単に Web ページを作成 この解説書は Lesson が高レベルになっても参照用として利用して下さい この章の実践方法はまず解説ページ内にある HTML ソースコードをコピーして メモ帳などに貼り付けて 実行して 表示してそのあとで表示内容を解説します 最初は全然理解できない方でも 同じ HTML コードを繰り返し 繰り返 し実践する事で

More information

ÉvÉçPM_02

ÉvÉçPM_02 2 JavaScript 2JavaScript JavaScript 2-11hello1.html hello

More information

ch31.dvi

ch31.dvi 1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5

More information

1 LEVEL Adobe Flex Builder SDK

1 LEVEL Adobe Flex Builder SDK UNIX -Adobe Flex - e055746 e055751 e055755 e055758 e055766 e055714 1 LEVEL 0 1 1.1 Adobe Flex......................... 1 1.2........................... 1 1.2.1 Builder.......................... 1 1.2.2

More information

Flex2とS2Flex2とAIR紹介

Flex2とS2Flex2とAIR紹介 Flex2 S2Flex2 AIR 2007.11.11 The Seasar Project Akabana!"#$%&'()*+*',-.& /012 1 2 3 4 5 6 Flex 7 mxml

More information

1

1 6. スタイルシートとは 6.1. デザインはスタイルシートで 1 学期は ホームページを作成するための HTML の基礎と コンテンツのパーツである画像を加工 作成する基本的な技術を学びました 次のステップとして ホームページに多くの色を統一的に付けたり レイアウト配置を細かく設定するための方法を学んでいきます HTML でも色やサイズを指定したりする方法を学びましたが ホームページの保守性などの面から

More information

IFRS 2011

IFRS 2011 IFRS 2011 International Financial Reporting Standards XBRL(eXtensible Business Reporting Language) EDINET XBRL XBRL XBRL IFRS Contents Contents... 2... 3... 6... 8... 10...11...11... 12... 14... 14...

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

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

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

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

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

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

PostgreSQL iphone/

PostgreSQL iphone/ iphone/ PostgreSQL irubysystems PostgreSQL iphone/ FUKUI Osamu (ir3) Ruby http://d.hatena.ne.jp/ir3 http://twitter.com/ir3 CSK Fsys SOHO 2005 itest 2006 CTO 2007 2009 irubysystems Ruby@ DB 1986~9 M IBM

More information

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam

More information

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

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21 Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 1/21 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111207 演習

More information

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

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

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

<!DOCTYPE html> <html> <head> <title>spaceorbitanime</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=spaceorbitanime.css> 1346-5 応用 2 Space Trip 宇宙船が地球を周回するアニメーションと宇宙旅行へ出発するアニメーションを作ってみ ましょう 宇宙船が地球を周回するアニメーション サンプル CSS1 スペースシャトルは円軌道で USS エンタープライズ号は楕円軌道で地球を周回します SpaceOrbitAnime の説明 HTML の記述 (SpaceOrbitAnime.html) id 属性 stage

More information

Moshimo Challenge Report

Moshimo Challenge Report このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ界 No.1 とも言われているデザイナー ナムー が WEB ページ作成の コツを解説していきます 少し技術的な内容も含まれていますが 分からない ことは積極的に調べて 1 つ 1 つスキルアップをしていきましょうね! マリー HTML CSS のプロフェッショナル うさぎだけど好きなブラウザは Fire Fox ナムー

More information

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

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

More information

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

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

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

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig 1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し

More information

untitled

untitled Flex 2010 1 21 5106139 5106144 1 -------------------------------------------------------------------------------------------------p3 ----------------------------------------------------------------------------------------------p4

More information

PowerCMS 8341 User's Guide

PowerCMS 8341 User's Guide -1- - 2 - 4 4 4-3 - http://powercms.alfasado.net/members/ powercms@alfasado.jp - 4 - cd mt/plugins/wcagtester/helper/linux./wcagtester () usage: wcagtester \#000000 \#FFFFFF wcagtester -Hex \#000000 \#Ffffff

More information

untitled

untitled 2007 IT G Google Map API WEB2.0 2007 8 23 GoogleMapAPI GoogleMapAPI Google Web URL XHTML JavaScript GoogleMAP LHACA FFFTP TeraPad Haruhiro Unno Japan Electronics College 1 GoogleMapAPI Web Google GMail

More information

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

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され 1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1 画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility:

More information

1221 Transitionの指定項目

1221 Transitionの指定項目 1310-5 Animation-direction プロパティ animation-direction animation-direction プロパティには アニメーションのサイクルの全部または一部分を 通常通り実行するか逆回転で実行するかを指定します 値 説 明 normal reverse alternate alternate-reverse アニメーションの全ての繰り返しが指定された通りに実行される

More information

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp 1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています 近い将来 webkit

More information

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

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out 1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation

More information

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

More information

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

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=clipanime1.css> </head> < 1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かす サンプル CSS1 1 つの画像を 4 分割して それぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます 右上の画像は 3D 変形しながら移動します 左下の画像は回転しながら移動します 右下の画像は拡大しながら移動します ClipAnime1

More information

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

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

Microsoft PowerPoint [互換モード]

Microsoft PowerPoint [互換モード] 砂原秀樹 suna@wide.ad.jp 2011/06/06 WWW とインターネット WWW とは何か? WWW を構成する物 http HTML Web2.0 とは何か? WWW: World Wide Web Webとはクモの巣 構成要素 http: hyper text transfer Protocol HTML: hyper text Markup Language WWW サーバ上のデータを転送

More information

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

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

ohp.mgp

ohp.mgp 2019/06/11 A/B -- HTML/WWW(World Wide Web -- (TA:, [ 1 ] !!? Web Page http://edu-gw2.math.cst.nihon-u.ac.jp/~kurino VNC Server Address : 10.9.209.159 Password : vnc-2019 (2019/06/04 : : * * / / : (cf.

More information

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

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18 Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111221

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

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

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

More information

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

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

More information

Word によるホームページ勉強会第 3 日目 Word でトップページを作成 2A 那須シニアネット三宅節雄事前準備 ピクセルの写真を 4 枚 の写真またはイラストを 2 枚 準備 (JTrim か縮小専用で この付近のサイズに加工しておく ) 勉強会にて実施

Word によるホームページ勉強会第 3 日目 Word でトップページを作成 2A 那須シニアネット三宅節雄事前準備 ピクセルの写真を 4 枚 の写真またはイラストを 2 枚 準備 (JTrim か縮小専用で この付近のサイズに加工しておく ) 勉強会にて実施 Word によるホームページ勉強会第 3 日目 Word でトップページを作成 2A 那須シニアネット三宅節雄事前準備 1.350 263 ピクセルの写真を 4 枚 200 150 の写真またはイラストを 2 枚 準備 (JTrim か縮小専用で この付近のサイズに加工しておく ) 勉強会にて実施 1. 予め自分の PC に My-HP というフォルダーを作っておきます 2.Word を起動します

More information

1 JIS X 8341-3:2016 WCAG2.0 http://waic.jp/docs/wcag2/understanding.html WCAG2.0 http://waic.jp/docs/wcag2/techs.html 2 ... 1... 3... 6 1.1... 6 1.2... 7... 8 1.1.1... 8 1.2.1... 13 1.2.2... 14 1.2.3...

More information

PowerPoint Presentation

PowerPoint Presentation 2 3 4 HTML 5 Level.1 Markup Professional HTML 5 Level.2 Application Development Professional 5 6 7 8 9 http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam http://www.pearsonvue.com/japan/registration/

More information

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

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

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

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

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

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する) 1232 セレクタを使う (selector) CSS でスタイルを指定する時に セレクタ (selector) でスタイルを適用する対象を特定することができます セレクタには次のようなものがあります もうすでに使用してきた #box1 のような指定は id セレクタ と呼ばれるセレクタです また フォントの指定で使用してきた.font1 は class セレクタ と呼ばれるセレクタです セレクタ

More information

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

トリガーをわかり易くする方法 1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが

More information

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

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています

More information

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/ 1324 画像を動かす ( 円 楕円 渦巻き運動 ) 画像を円運動 楕円運動 渦巻き運動をさせる方法です 3つの方法があります 1transform-origin プロパティで半径を作る 2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する 3 大きさのない親要素ボックスを回転させ 画像を子要素に指定する 3の方法は 円運動の回転の中心点が分かり易いので

More information

Visual Studio Do-It-Yourself シリーズ 第 10 回マスターページ

Visual Studio Do-It-Yourself シリーズ 第 10 回マスターページ Visual Studio Do-It-Yourself シリーズ 第 10 回マスターページ 著作権 このドキュメントに記載されている情報は このドキュメントの発行時点におけるマクロソフトの見解を反映したものです マクロソフトは市場の変化に対応する必要があるため このドキュメントの内容に関する責任を問われないものとします また 発行日以降に発表される情報の正確性を保証できません このホワトペーパーは情報提供のみを目的としています

More information

山梨県ホームページ作成ガイドライン

山梨県ホームページ作成ガイドライン 17 7 ...1...4...4...4...4...5...5 W3C...5...6...6...6...7...8...8...10...10...10... 11...12...12...13...13...13...14...14...14...15...15...16...16...16...16...16...17...18 15 (2003 ) 69.7 81.1 43.6 19.6

More information

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

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

More information

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

インターネットマガジン1999年7月号―INTERNET magazine No.54 A MagnaviIp9907Htmltips +CD-ROM 3 3 A N S W E R HTML TIPS&TRICKS A N S W E R function Init() { block.style.setexpression("left",

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の課題 Web デザイン論 の期末試験まで何日残っているか表示する Web ページを JavaScript で制作し 公開せよ 宛先 : dan@cc.matsuyama-u.ac.jp

More information

intra-mart マスカット連携ガイド

intra-mart マスカット連携ガイド intra-mart マスカット連携ガイド Version 6.1 第三版 2008 年 1 月 31 日 > 変更年月日変更内容 2007/7/31 初版 2007/8/31 第二版以下の説明を追加 3.1.2.2 初期表示時のアクション 3.2.2.2 初期表示時のアクション 2008/1/31 第三版 3.3 デバック を追加 目次 > 1 はじめに...3

More information

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf 1346-6 応用 2 Falling Leaves 落ち葉が舞い散る様子をアニメーションにしてみましょう できるだけリアルに再現して みます さらに秋のイメージアニメーションを作ってみましょう 落ち葉が舞い散るアニメーション サンプル CSS1 紅葉 ( もみじ ) 銀杏 ( いちょう ) 栗の葉がひらひら舞いながら落ちてきます FallingLeavesAnime の説明 HTML の記述 (FallingLeavesAnime.html)

More information

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2

MorphAndTextAnime の説明 HTML の記述 (MorphAndTextAnime.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中につぎの記述をします id 属性 div2 1343 アニメーションを連続させる 複数のアニメーションを連続して適用するためには つぎの 2 つの方法があります 1. 複数の連続したアニメーション全体を繰り返さずに 1 回だけ動かしたい場合は 待ち 時間を利用して複数のアニメーションを指定します アニメーション A 0% 100% アニメーション B( 待ち ) アニメーション C( 待ち ) アニメーションB 0% 100% アニメーションC

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します

More information

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========>

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========> 1 / 16 第 11 回セミナー / 全 12 (2014/8/28) HP の基本的構造の理解とページ構成の工夫 これだけはマスターしておきたい HTML 厳選タグ迷子を生まないためのリンクの配置 ( 読ませる工夫 ) Web 作成の基本ツール Web ブラウザ Chrome FireFox Opera (Internet Explorer) Chrome Firefox Opera https://www.google.com/intl/ja/chrome/browser/features.html

More information

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

Microsoft PowerPoint - css-3days 互換モード 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,

More information

untitled

untitled Web HTMLXHTML CSS JavaScript CGI World Wide Web XHTML 240px 480px CSS ECMAScriptJavaScript+ BinaryTable ES TR-B13 /ES// CGI B24 1 4 (XHTML) 5 (XHTML) TR-B15 BS 2 TR-B15 CSBS 2 TR-B14 A 23 TR-B14 B TR-B14

More information

スライド 1

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

More information

Microsoft PowerPoint äº™æ‘łã…¢ã…¼ã…›

Microsoft PowerPoint äº™æ‘łã…¢ã…¼ã…› 砂原秀樹 suna@wide.ad.jp 2018/07/02 WWW とインターネット WWW とは何か? WWW を構成する物 http HTML Web2.0 とは何か? 1 WWW: World Wide Web Web とはクモの巣 構成要素 http: hyper text transfer Protocol HTML: hyper text Markup Language WWW サーバ上のデータを転送

More information

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

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 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/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)

More information

SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web

More information

Microsoft PowerPoint _1a-HTML.pptx

Microsoft PowerPoint _1a-HTML.pptx HTML 5 の設計思想 誰もが自由に使い続けることができるオープンな Web 特定企業が定めた仕様 (API) や技術 ( プラグイン ) に頼らない 例 : アドビの Flash, マイクロソフトの Silverlight HTML5 に追加された新しい要素 ( タグ ) video, audio 要素 ( 動画や音声を再生する ) canvas 要素 ( ビットマップグラフィックスの表示 )

More information

css.pdf

css.pdf 1 2 Web (2) HTML ( ) HTML CSS CSS = Cascading Stye Sheet (CSS) W3C (Word Wide Web Consortium, Web ) 2006-2018 Harumi Murakami and Kota Abe HTML&CSS 3 1990 Web HTML Web 1993 Web , , HTML HTML&CSS

More information

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

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation

More information

Microsoft Word - manual.doc

Microsoft Word - manual.doc ヒットメール Ver 1.0 お試し版 URL http://www.sysco-net.com/hitmail/ ライセンス キー販売サイト URL http://www.vector.co.jp/ 価格 1,000 円 ( パソコン1 台当たり ) 本ソフトを動かすには 次のソフトが必要です 1 Microsoft Windows 2000 or XP 2 Microsoft Outlook 2000

More information

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

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 3 NanoPlanner SASS Bootstrap Font Awesome 3.1 RAVT 6 RAVT route action view template Phoenix top index top index top#index RAVT URL / top#index top#index top 23 3 top#index 1 web router.ex web/router.ex

More information

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

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 講義で使うフォルダ 2/23 Web データ管理 CGI (3 章 ) 2011/11/30( 水 ) 1/23 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 講義で使うフォルダ 2/23 CGI とは Common Gateway Interface の略 通常のページでは

More information

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

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

Microsoft Word 学外研修報告(玉置).doc

Microsoft Word 学外研修報告(玉置).doc 平成 17 年度中部職業能力開発促進センター研修報告 Web ページ構築技法 アニメーション 玉置一雄 工学研究科 工学部技術部電子 情報技術系 最近の技術革新や情報化の急速な進展に対応するために, 能力開発セミナーが 2005 年 10 月 31 日 11 月 2 日の 3 日間, 独立行政法人雇用 能力開発機構中部職業能力開発促進センター ( 愛称 : ポリテクセンター中部 ) で開講された.

More information

soturon2013

soturon2013 4.4. CGI, CGI Web. UNIX, UNIX Windows. UNIX CGI. i ( ). mi- http://www.mimikaki.net/ 67 (mi- ),mi-, http://ugawalab.miyakyo-u.ac.jp/j3/chika/wari.cgi.txt http://ugawalab.miyakyo-u.ac.jp/j3/chika/wari.cgi.txt,.

More information

Appendix( ) {x(t), y(t) } の値を計算し そのグラフを描く ( for t=a to t=b ) この Program ( a.c ) は t をパラメーターとして X 軸に x = x(t) として Y 軸を y = y(t) として 最大 9 個の Graph

Appendix( ) {x(t), y(t) } の値を計算し そのグラフを描く ( for t=a to t=b ) この Program ( a.c ) は t をパラメーターとして X 軸に x = x(t) として Y 軸を y = y(t) として 最大 9 個の Graph ********************************************************************* 補足資料 ********************************************************************* 人工知能パートナーシステム (AIPS) を支える デジタル回路の世界 ( ISBN978-4-88359-339-2

More information

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

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 CGI (3 章 ) 2012/6/12( 水 ) 講義 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 CGI (3 章 ) 2012/6/12( 水 ) 講義で使うフォルダ 1/23 2/23 CGI とは Common Gateway Interface の略

More information

Color Change

Color Change 1227 Text の 2D トランジション (text-shadow, white-sp, letter-sp, word-sp) テキストを変化させるトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover または Click ボタンを クリックすると テキストのトランジションが動きます プロパティ text-shadow テキストの影を指定します

More information

Microsoft PowerPoint - 04WWWとHTML.pptx

Microsoft PowerPoint - 04WWWとHTML.pptx 船舶海洋情報学 九州大学工学府海洋システム工学専攻講義資料担当 : 木村 04. WWW と HTML WWW(World Wide Web) インターネットの情報をハイパーテキスト形式で参照できる情報提供システム HTML などのコンテンツを HTTP プロトコルで転送 インターネット クライアント PC WWW の情報を画面に表示するクライアントソフトウエア :WEB ブラウザ Internet

More information

インターネットマガジン2001年10月号―INTERNET magazine No.81

インターネットマガジン2001年10月号―INTERNET magazine No.81 +CD-ROM Å 5 5.5 M0.9. A N S W E R A N S W E R RT { isplay: none; } function rubyswitch(on)

More information

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

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

( )

( ) 2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5

More information

1

1 1 2 3 4 確認しよう 今回のサンプルプログラムにアクセスしてみましょう 1. デスクトップ上のフォルダをクリックし /var/www/html に example1.html と example2.php ファイルがあることを確認します 2. ブラウザを起動し 次の URL にアクセスします http://localhost/example1.html 3. 自分の手を選択して じゃんけんぽん

More information

インターネットマガジン2000年9月号―INTERNET magazine No.68

インターネットマガジン2000年9月号―INTERNET magazine No.68 +CD-ROM Å 5 5.5 A N S W E R1 BODY { margin-right: 1px; margin-left: 180px; backgroun: #FFFFCC url (logo.gif) no-repeat fixe 0px 300px; A N S W E R

More information

NEC ラーニング Microsoft MVP for Visual Basic 山崎明子 利用シーンの拡大 開発の促進 運用性の強化 設計目標 ページの概念を超えた Web エクスペリエンス 検索候補 アクセラレータ Web スライス 迅速かつ簡単な Web 開発 開発者ツール Ajax Navigation, DOM Storage などに対応 快適で安心なブラウジング パフォーマンスの向上

More information

スライド 1

スライド 1 秋学期情報スキル応用 田中基彦教授, 樫村京一郎講師 ( 工学部共通教育科 ) / Web ページとは, 作成する HTML 言語とホームページ Web 検索エンジン ( 教科書第 8 章 ) Web ページを閲覧, 作成する 1.Web ページを閲覧する ブラウザを利用 - Internet (Expl.11), Firefox Adobe Reader や Flash Player が必要な場合も

More information

1

1 ...1...37 1 HTML4.01 Transitional Frameset DOCTYPE 5.1.a 2 Windows Shift_JIS Linux Unix EUC jp meta 5.1.a 3 5.1.a JIS cm cc kg alt 4 5.4.a 5.4.a 5 alt alt alt alt alt alt="" alt 6 5.4.b 5.4.b 7 8 5.3.a

More information

19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで

19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで 19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで Kivy というソフトウェアを使う Kivy は Python のパッケージ管理システム pip を使ってインターネット上のファイルサーバからインストールが可能である

More information

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

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

More information

Taro13-第6章(まとめ).PDF

Taro13-第6章(まとめ).PDF % % % % % % % % 31 NO 1 52,422 10,431 19.9 10,431 19.9 1,380 2.6 1,039 2.0 33,859 64.6 5,713 10.9 2 8,292 1,591 19.2 1,591 19.2 1,827 22.0 1,782 21.5 1,431 17.3 1,661 20.0 3 1,948 1,541 79.1 1,541 79.1

More information

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

~モバイルを知る~ 日常生活とモバイルコンピューティング 政策情報学部 渡辺恭人 riho-m@cuc.ac.jp 作業 1: 前回分を少し改造 1 行目の place = 那覇 の 那覇 の部分を他の地名に変えてみる 南西諸島地域以外の場合は 2 行目も変更する必要がある xmlfile = http://weather.livedoor.com/forecast/rss/amedas/temp/ 10/47.xml http://weather.livedoor.com/weather_hacks/rss_feed_lis

More information