WebGL References Kageyama (Kobe Univ.) Visualization *4 2 / 54

Size: px
Start display at page:

Download "WebGL References Kageyama (Kobe Univ.) Visualization 2013.05.07 *4 2 / 54"

Transcription

1 WebGL * *2 *1 X LR301 *2 05/08: Kageyama (Kobe Univ.) Visualization *3 1 / 54

2 WebGL References Kageyama (Kobe Univ.) Visualization *4 2 / 54

3 Chrome Firefox ID Kageyama (Kobe Univ.) Visualization *5 3 / 54

4 Kageyama (Kobe Univ.) Visualization *6 4 / 54

5 Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂 点 シェーダ プリミティブ 組 み 立 て ラスタ 化 フラグメントシェーダ Kageyama (Kobe Univ.) Visualization *7 5 / 54

6 n n Kageyama (Kobe Univ.) Visualization *8 6 / 54

7 頂 点 シェーダ 用 ソースコード (GLSL) 頂 点 attribute 変 数 ( 座 標 色 など) 頂 点 シェーダ 組 み 込 み 変 数 gl_position gl_frontfacing g_lpointsize ユーザ 定 義 uniform 変 数 ( 変 換 行 列 光 源 位 置 ) ユーザ 定 義 の varying 変 数 Kageyama (Kobe Univ.) Visualization *9 7 / 54

8 C OpenGL SL (Shading Language) 4 4 a t t r i b u t e vec3 avertexpos ; a t r r i b u t e vec4 a V e r t e x C o l o r ; u n i f o r m mat4 umvmatrix ; u n i f o r m mat4 upmatrix ; v a r y i n g vec4 v C o l o r ; void main ( ) { g l P o s i t i o n = upmatrix umvmatrix vec4 ( avertexpos, 1. 0 ) ; v C o l o r = a V e r t e x C o l o r ; } Kageyama (Kobe Univ.) Visualization *10 8 / 54

9 a t t r i b u t e vec3 avertexpos ; a t r r i b u t e vec4 a V e r t e x C o l o r ; attribute RGBA 4 Kageyama (Kobe Univ.) Visualization *11 9 / 54

10 u n i f o r m mat4 umvmatrix ; u n i f o r m mat4 upmatrix ; mat4 4 4 uniform Kageyama (Kobe Univ.) Visualization *12 10 / 54

11 v a r y i n g vec4 v C o l o r ; varing (varying variable) varying gl Position gl FrontFacing gl PointSize Kageyama (Kobe Univ.) Visualization *13 11 / 54

12 void main ( ) { g l P o s i t i o n = upmatrix umvmatrix vec4 ( avertexpos, 1. 0 ) ; v C o l o r = a V e r t e x C o l o r ; main varying gl Position varying vcolor Kageyama (Kobe Univ.) Visualization *14 12 / 54

13 primitive assembly 3 *15 *15 OpenGL 1.x 3 Kageyama (Kobe Univ.) Visualization *16 13 / 54

14 プリミティブ フラグメント Kageyama (Kobe Univ.) Visualization *17 14 / 54

15 varying varying varying varyingvalue_1 varyingvalue_2 varyingvalue_3 Kageyama (Kobe Univ.) Visualization *18 15 / 54

16 フラグメントシェーダ 用 ソースコード (GLSL) 組 み 込 み 変 数 gl_position gl_frontfacing g_lpointsize フラグメント シェーダ 組 み 込 み 変 数 gl_fragcolor ユーザ 定 義 varying 変 数 ユニフォーム 変 数 テクスチャ 用 サンプラ Kageyama (Kobe Univ.) Visualization *19 16 / 54

17 p r e c i s i o n mediump f l o a t ; // p r e c i s i o n q u a l i f i e r v a r y i n g vec4 v C o l o r ; // void main ( ) { g l F r a g C o l o r = v C o l o r ; } Kageyama (Kobe Univ.) Visualization *20 17 / 54

18 WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂 点 シェーダ プリミティブ 組 み 立 て ラスタ 化 フラグメントシェーダ シザーテスト マルチサンプリング ステンシルテスト デプステスト アルファブレンディング ディザリング WebGL 用 描 画 バッファ cavasの 他 の 画 像 スクリーン Kageyama (Kobe Univ.) Visualization *21 18 / 54

19 scissors *22 OpenGL Super Bible (Richard S. Wright et al., 2011, p.112) シザーテスト 不 合 格 シザーテスト 合 格 *22 Kageyama (Kobe Univ.) Visualization *23 19 / 54

20 OpenGL Super Bible (Richard S. Wright et al., 2011, p.382) Kageyama (Kobe Univ.) Visualization *24 20 / 54

21 OpenGL Super Bible (Richard S. Wright et al., 2011, p.399) Kageyama (Kobe Univ.) Visualization *25 21 / 54

22 Kageyama (Kobe Univ.) Visualization *26 22 / 54

23 Kageyama (Kobe Univ.) Visualization *27 23 / 54

24 Kageyama (Kobe Univ.) Visualization *28 24 / 54

25 WebGL WebGL Kageyama (Kobe Univ.) Visualization *29 25 / 54

26 WebGL WebGL webgl sample triangle 00.html Kageyama (Kobe Univ.) Visualization *30 26 / 54

27 WebGL 3 HTML WebGL canvas Kageyama (Kobe Univ.) Visualization *31 27 / 54

28 WebGL webgl sample triangle 00.html <!DOCTYPE HTML> <html lang= en > <head> < t i t l e>webgl Sample T r i a n g l e 00</ t i t l e> <meta c h a r s e t= u t f 8 > <s t y l e type= t e x t / c s s > canvas { b o r d e r : 2 px s o l i d g r e y ; }. t e x t { p o s i t i o n : a b s o l u t e ; top : 40 px ; l e f t : 20 px ; font s i z e : 1. 5em ; Kageyama (Kobe Univ.) Visualization *32 28 / 54

29 WebGL webgl sample triangle 00.html <!DOCTYPE HTML> <html lang= en > <head> < t i t l e>webgl Sample T r i a n g l e 00</ t i t l e> <meta c h a r s e t= u t f 8 > <s t y l e type= t e x t / c s s > canvas { b o r d e r : 2 px s o l i d g r e y ; }. t e x t { p o s i t i o n : a b s o l u t e ; top : 40 px ; l e f t : 20 px ; font s i z e : 1. 5em ; Kageyama (Kobe Univ.) Visualization *33 29 / 54

30 WebGL c o l o r : b l a c k ; } </ s t y l e > < s c r i p t t y p e= t e x t / j a v a s c r i p t > v a r g l ; v a r canvas ; v a r shaderprogram ; v a r v e r t e x B u f f e r ; f u n c t i o n c r e a t e G L C o n t e x t ( canvas ) { v a r names = [ webgl, e x p e r i m e n t a l webgl ] ; v a r c o n t e x t = n u l l ; f o r ( v a r i =0; i <names. l e n g t h ; i ++) { t r y { Kageyama (Kobe Univ.) Visualization *34 30 / 54

31 WebGL } c o n t e x t = canvas. g e t C o n t e x t ( names [ i ] ) ; } catch ( e ) {} i f ( c o n t e x t ) { break ; } } i f ( c o n t e x t ) { c o n t e x t. viewportwidth = canvas. width ; c o n t e x t. v i e w p o r t H e i g h t = canvas. h e i g h t ; } e l s e { a l e r t ( F a i l e d to c r e a t e c o n t e x t. ) ; } r e t u r n c o n t e x t ; Kageyama (Kobe Univ.) Visualization *35 31 / 54

32 WebGL f u n c t i o n l o a d S h a d e r ( type, s h a d e r S o u r c e ) { v a r s h a d e r = g l. c r e a t e S h a d e r ( t y p e ) ; g l. s h a d e r S o u r c e ( shader, s h a d e r S o u r c e ) ; g l. c o m p i l e S h a d e r ( s h a d e r ) ; } i f (! g l. g e t S h a d e r P arameter ( shader, g l. COMPILE STATUS) ) { a l e r t ( E r r o r c o m p i l i n g s h a d e r + g l. g e t S h a d e r I n f o L o g ( s h a d e r ) ) ; g l. d e l e t e S h a d e r ( s h a d e r ) ; r e t u r n n u l l ; } r e t u r n s h a d e r ; f u n c t i o n s e t u p S h a d e r s ( ) { v a r v e r t e x S h a d e r S o u r c e = Kageyama (Kobe Univ.) Visualization *36 32 / 54

33 WebGL v a r f r a g m e n t S h a d e r S o u r c e = p r e c i s i o n mediump f l o a t ; \n + v o i d main ( ) { \n + g l F r a g C o l o r = vec4 ( 0. 2, 0. 4, 0. 6, 1. 0 ) ; \n + } \n ; v a r v e r t e x S h a d e r = l o a d S h a d e r ( g l. VERTEX SHADER, v e r t e x S h a d e r S o u r c e ) ; v a r fragmentshader = l o a d S h a d e r ( g l.fragment SHADER, f r a g m e n t S h a d e r S o u r c e ) ; shaderprogram = g l. createprogram ( ) ; Kageyama (Kobe Univ.) Visualization *37 33 / 54

34 WebGL g l. a t t a c h S h a d e r ( shaderprogram, v e r t e x S h a d e r ) ; g l. a t t a c h S h a d e r ( shaderprogram, fragmentshader ) ; g l. l i n k P r o g r a m ( shaderprogram ) ; i f (! g l. getprogramparameter ( shaderprogram, g l. LINK STATUS) ) { a l e r t ( F a i l e d to s e t u p s h a d e r. ) ; } g l. useprogram ( shaderprogram ) ; } shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e = g l. g e t A t t r i b L o c a t i o n ( shaderprogram, a V e r t e x P o s i t i o n ) ; f u n c t i o n s e t u p B u f f e r s ( ) { Kageyama (Kobe Univ.) Visualization *38 34 / 54

35 WebGL } v e r t e x B u f f e r = g l. c r e a t e B u f f e r ( ) ; g l. b i n d B u f f e r ( g l. ARRAY BUFFER, v e r t e x B u f f e r ) ; v a r t r i a n g l e V e r t i c e s = [ 0. 0, 0. 0, 0. 0, 0. 8, 0. 0, 0. 0, 0. 0, 0. 5, 0. 0 ] ; g l. b u f f e r D a t a ( g l. ARRAY BUFFER, new F l o a t 3 2 A r r a y ( t r i a n g l e V e r t i c e s ), g l. STATIC DRAW) ; v e r t e x B u f f e r. i t e m S i z e = 3 ; v e r t e x B u f f e r. numberofitems = 3 ; f u n c t i o n draw ( ) { g l. v i e w p o r t ( 0, 0, g l. viewportwidth, g l. v i e w p o r t H e i g h t ) ; Kageyama (Kobe Univ.) Visualization *39 35 / 54

36 WebGL g l. c l e a r ( g l. COLOR BUFFER BIT) ; } g l. v e r t e x A t t r i b P o i n t e r ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e, v e r t e x B u f f e r. i t e m S i z e, g l. FLOAT, f a l s e, 0, 0) ; g l. e n a b l e V e r t e x A t t r i b A r r a y ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e ) ; g l. drawarrays ( g l. TRIANGLES, 0, v e r t e x B u f f e r. numberofitems ) ; f u n c t i o n s t a r t u p ( ) { canvas = document. getelementbyid ( myglcanvas ) ; g l = c r e a t e G L C o n t e x t ( canvas ) ; s e t u p S h a d e r s ( ) ; s e t u p B u f f e r s ( ) ; g l. c l e a r C o l o r ( 0. 8, 0. 8, 0. 4, 1. 0 ) ; draw ( ) ; Kageyama (Kobe Univ.) Visualization *40 36 / 54

37 WebGL } </ s c r i p t > </head> <body o nload= s t a r t u p ( ) ; > <canvas i d= myglcanvas width= 480 h e i g h t= 480 ></canvas> <d i v c l a s s= t e x t >H e l l o. This i s my f i r s t WebGL program.</ div > </body> </html> Kageyama (Kobe Univ.) Visualization *41 37 / 54

38 WebGL HTML5 canvas getcontext method experimental-webgl *42 getcontext method WebGLRenderingContext WebGL WebGLRenderingContext gl *42 webgl Kageyama (Kobe Univ.) Visualization *43 38 / 54

39 WebGL GLSL GPU GPU HTML JavaScript GLSL fragmentshadersource Kageyama (Kobe Univ.) Visualization *44 39 / 54

40 WebGL WebGLRenderingContext Kageyama (Kobe Univ.) Visualization *45 40 / 54

41 WebGL GLSL *47 attribute float, vec2, vec3, vec4, mat2, mat3x2, mat4x2, mat2x3, mat3, mat4x3, mat4, mat2x4, mat3x4 attribute attribute *46 attribute *46 MAX VERTEX ATTRIBS *47 OpenGL 4.0 (Segal et al., 2010, p.60) Kageyama (Kobe Univ.) Visualization *48 41 / 54

42 WebGL int BindAttribLocation(unit program, unit index, const char *name); name attribute index program GL index int GetAttribLocation(unit program, const char *name); attribute (name) Kageyama (Kobe Univ.) Visualization *49 42 / 54

43 WebGL gl.useprogram(shaderprogram); shaderprogram. vertexpositionattribute = gl.getattriblocation(shaderprogram, avertexposition ); vertexpositionattribute shaderprogram. anynameisok = g l. g e t A t t r i b L o c a t i o n ( shaderprogram, a V e r t e x P o s i t i o n ) ; Kageyama (Kobe Univ.) Visualization *50 43 / 54

44 WebGL f u n c t i o n s e t u p B u f f e r s ( ) { v e r t e x B u f f e r = g l. c r e a t e B u f f e r ( ) ; g l. b i n d B u f f e r ( g l. ARRAY BUFFER, v e r t e x B u f f e r ) ; v a r t r i a n g l e V e r t i c e s = [ 0. 0, 0. 0, 0. 0, 0. 8, 0. 0, 0. 0, 0. 0, 0. 5, 0. 0 ] ; g l. b u f f e r D a t a ( g l. ARRAY BUFFER, new F l o a t 3 2 A r r a y ( t r i a n g l e V e r t i c e s ), g l. STATIC DRAW) ; v e r t e x B u f f e r. i t e m S i z e = 3 ; v e r t e x B u f f e r. numberofitems = 3 ; } Kageyama (Kobe Univ.) Visualization *51 44 / 54

45 WebGL WebGLRenderingContext createbuffer() WebGLBuffer JavaScript vertexbuffer vertexbuffer Kageyama (Kobe Univ.) Visualization *52 45 / 54

46 WebGL f u n c t i o n draw ( ) { g l. v i e w p o r t ( 0, 0, g l. viewportwidth, g l. v i e w p o r t H e i g h t ) ; g l. c l e a r ( g l. COLOR BUFFER BIT) ; } g l. v e r t e x A t t r i b P o i n t e r ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e, v e r t e x B u f f e r. i t e m S i z e, g l. FLOAT, f a l s e, 0, 0) ; g l. e n a b l e V e r t e x A t t r i b A r r a y ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e ) ; g l. drawarrays ( g l. TRIANGLES, 0, v e r t e x B u f f e r. numberofitems ) ; Kageyama (Kobe Univ.) Visualization *53 46 / 54

47 Kageyama (Kobe Univ.) Visualization *54 47 / 54

48 webgl sample triangle 01.html Kageyama (Kobe Univ.) Visualization *55 48 / 54

49 webgl sample triangle 01.html f u n c t i o n s e t u p S h a d e r s ( ) { v a r v e r t e x S h a d e r S o u r c e = a t t r i b u t e vec3 a V e r t e x P o s i t i o n ; \n + v o i d main ( ) { \n + g l P o s i t i o n = vec4 ( a V e r t e x P o s i t i o n, 1. 0 ) ; \n + g l P o s i t i o n = vec4 ( 0. 2, 1. 0, 1. 0, 1. 0 ) ; // Here!! \n + } \n ; Kageyama (Kobe Univ.) Visualization *56 49 / 54

50 Kageyama (Kobe Univ.) Visualization *57 50 / 54

51 Kageyama (Kobe Univ.) Visualization *58 51 / 54

52 webgl sample triangle 00.html 1. PDF 2. HTML gmail kageyama PDF HTML 5/13 Kageyama (Kobe Univ.) Visualization *59 52 / 54

53 MAX VERTEX ATTRIBS, 41 varing, 11, 38, 19, 21, 24, 45, 14, 13, 13, 20, 14, 17 Kageyama (Kobe Univ.) Visualization *60 53 / 54

54 References References Richard S. Wright, J., Haemel, N., Sellers, G., and Lipchak, B. (2011). OpenGL SuperBible: Comprehensive Tutorial and Reference. Pearson Education, Inc, Boston, MA, 5th edition. Segal, M., Akeley, K., and (2010). OpenGL Kageyama (Kobe Univ.) Visualization *61 54 / 54

Kageyama (Kobe Univ.) 2015.06.23 2 / 41

Kageyama (Kobe Univ.) 2015.06.23 2 / 41 2015 2015.06.23 Kageyama (Kobe Univ.) 2015.06.23 1 / 41 Kageyama (Kobe Univ.) 2015.06.23 2 / 41 [ 1, +1] [ 1, +1] [ 1, +1] Kageyama (Kobe Univ.) 2015.06.23 3 / 41 Kageyama (Kobe Univ.) 2015.06.23 4 / 41

More information

DrawArrays DrawElements References Kageyama (Kobe Univ.) Visualization / 34

DrawArrays DrawElements References Kageyama (Kobe Univ.) Visualization / 34 WebGL *1 DrawArrays DrawElements 2013.05.14 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.05.14 1 / 34 DrawArrays DrawElements References Kageyama (Kobe Univ.) Visualization 2013.05.14 2

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

0序文‐1章.indd

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

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

(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

101NEO資料

101NEO資料 Version 1.5 Tutorial PDF ... 1. PDF... 2 -.... 2 -. PDF... 2 -.... 4 -. HTML... 4 -. PDF... 5 -.... 7 -.... 8 Tutorial PDF Tutorial PDF - Page 1 Tutorial PDF - Page 2 Tutorial PDF - Page 3 Tutorial PDF

More information

PowerPoint プレゼンテーション

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

More information

スライド 1

スライド 1 HTML5 と 関 連 API はじめに 一 般 的 に HTML5 と 呼 ばれている 範 囲 ( 広 義 ) HTML5 という 仕 様 Web Workers キャンバス ドラッグ&ドロップ Data Cache API オフライン コミュニケーション File API など Server-Sent API Web SQL Database Web Sockets Web Storage Indexed

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

31 Jul.2012 API Application Program Interface Markup SEMANTICS OFFLINE & STORAGE DEVICE ACCESS CONNECTIVITY MULTIMEDIA 3D, GRAPHICS EFFECTS PERFORMANCE INTEGRATION CSS3 HTML5 CSS3 JavaScript WHATWG

More information

やさしいJavaプログラミング -Great Ideas for Java Programming サンプルPDF

やさしいJavaプログラミング -Great Ideas for Java Programming サンプルPDF pref : 2004/6/5 (11:8) pref : 2004/6/5 (11:8) pref : 2004/6/5 (11:8) 3 5 14 18 21 23 23 24 28 29 29 31 32 34 35 35 36 38 40 44 44 45 46 49 49 50 pref : 2004/6/5 (11:8) 50 51 52 54 55 56 57 58 59 60 61

More information

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

1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ HTML 1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ 4 2..................... 6 3.....................

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

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

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

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 2.............................. 1 2 2 1........................... 2 2...................... 3 3...................

1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3................... 0448051 1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3.................... 4 4........................ 6 5...........................

More information

Developer Camp

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

More information

すばやく小さくはじめられる HTML5 CSS3 JavaScriptで 青森のコンテンツをつくる 青森大学ソフトウェア情報学部 小久保 温(こくぼ あつし) alert('x=' + x); var styletable = { normal: "default", syncing: "syncing", failed:

More information

untitled

untitled 25 10 12 11 24 (1) 14 (2) 26 10 44 (3) (4) (5) 27 10 68 (6) (7) (8) 25 10 ( ) (1) (2) (3) ) city.yokohama.lg.jp city.yokohama.jp WEB WEB WEB WEB WEB WEB 1 25 10 WEB WEB (1) (2) (3) (4) 25 10 (1) WEB (2)

More information

第 11 問 XML は Extensible Markup Language の 略 である 第 12 問 IPv6 で 定 義 可 能 な IP アドレスの 数 の 理 論 値 は 2 の 32 乗 である 第 13 問 Document Object Model (DOM) の 仕 様 は J

第 11 問 XML は Extensible Markup Language の 略 である 第 12 問 IPv6 で 定 義 可 能 な IP アドレスの 数 の 理 論 値 は 2 の 32 乗 である 第 13 問 Document Object Model (DOM) の 仕 様 は J 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 GIF 形 式 などで 用 いられるディザリングとは 限 られた 色 数 でより 多 くの 色 を 擬 似 的 に 表 現 する 手 法 である 第 2 問 HTML5 文 書 の 内 部 には SVG 要 素 を 直 接 書 き 込 むことができる 第 3 問 cookie

More information

130 11 A B C A B C Ctrl (S) 5 A B C 11.2: 11.1.2 2 11.2 (F) (A) ( OK ) 3 (E) ( ) (E) 11.1.3 3

130 11 A B C A B C Ctrl (S) 5 A B C 11.2: 11.1.2 2 11.2 (F) (A) ( OK ) 3 (E) ( ) (E) 11.1.3 3 129 11 Web IT ( 11.1) 1990 2004 2006 JIS 1 Windows 2 Web Web 11.1: 11.1 11.1.1 1 Ctrl ( ) 11.2 (U) (A) ( OK ) (S) 1 (JIS X 8341-2) (JIS X 8341-3) FAX (JIS X 8341-4) 8341 JIS JIS X8341 http://www.jisc.go.jp/

More information

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

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

More information

第 10 問 取 得 したドメインでウェブサイトを 公 開 する 場 合 共 用 サーバは 一 切 使 えないので 専 用 サーバを 用 意 する 必 要 が ある 第 11 問 WaSP とは Web accessibility Standard Project の 略 称 である 第 12 問

第 10 問 取 得 したドメインでウェブサイトを 公 開 する 場 合 共 用 サーバは 一 切 使 えないので 専 用 サーバを 用 意 する 必 要 が ある 第 11 問 WaSP とは Web accessibility Standard Project の 略 称 である 第 12 問 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 グローバルナビゲーションとは 水 平 方 向 に 配 置 されるものを 指 し 垂 直 方 向 に 配 置 されるものはローカルナビ ゲーションと 呼 ばれる 第 2 問 イーサネットとは 1000BASE-T の 規 格 のみをさす 第 3 問 IPv6 で 定

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

分散情報システム構成法

分散情報システム構成法 Web Information System Design No.3 Web 文 書 にスタイルを 付 ける Tatsuya Hagino (hagino@sfc.keio.ac.jp) 1 Webページの 構 成 要 素 直 交 技 術 を 組 み 合 わせる 内 容 スタイル プログラミング スタイル プログラミング JavaScript CSS Webページ Web 文 書 HTML 内 容

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

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

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 Web 2.0 Web Web Web Web Web Web Web I II I ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 1. 1.1 Web... 1 1.1.1... 3 1.1.2... 3 1.1.3... 4 1.2... 4 I 2 5 2. HTMLCSS 2.1 HTML...

More information

388-356697252-2.pdf

388-356697252-2.pdf 専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]

More information

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

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

More information

textbook.indd

textbook.indd 02 XHTML+CSS part2 CSS Topics 前 回 習 得 した 基 礎 CSS を 元 に ボックス CLASS ID の 概 念 を 習 得 ボックスレイアウトを 用 いた 2 カラムのサイト 構 築 をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24

More information

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 : 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 2 : : 1 1 : 3 : 2 (.ppsx) (A0nxxyyy.ppsx) presen (1 ) ID:A0nxxyyy Name: Title: 3 HTML (HyperText Markup Language) 4 ( ) http://pweb.cc.sophia.ac.jp

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

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

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet 2012 Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheets CSS2 CSS3 Web Web2.0 Web3.0 Web IT Web Homepage

More information

1. 2 DITA 2 2. 1 2. 1. 1 UModel UModel Altova [1] UModel UModel UML(Unified Modeling Language) Java C# VB.NET UML UModel UML 2. 1. 2 XML XML [7] chksp

1. 2 DITA 2 2. 1 2. 1. 1 UModel UModel Altova [1] UModel UModel UML(Unified Modeling Language) Java C# VB.NET UML UModel UML 2. 1. 2 XML XML [7] chksp 30 (2013 ) DITA DITA(Darwin Information Typing Architecture) In software development processes, several documents are created in period of each development phases. Most of these have different file type

More information

PowerPoint Presentation

PowerPoint Presentation XML 6 614 XBRL XBRL Japan 1 2 XBRL 3 4 5 6 7 XBRL XBRL XBRL EDINET Web XBRL Essentials, C. Hoffman, AICPA, 2001 All Rights Reserved, Copyright 2002, Hitachi Ltd. XBRL Essentials, C. Hoffman, AICPA, 2001

More information

6 2 1

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

More information

Presentation

Presentation OpenGL ES Agenda DMP OpenGL ES OpenGL ES 1.1 OpenGL ES 2.0 OpenGL OpenGL OpenGL ES EGL KTX DMP IP OpenGL ES E- PICA200 GPU DMP DMP www.dmprof.com D D JR 2 2002 7 OpenGL ES ULTRAY 2000 Chip (SIGGRAPH 2005)

More information

What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私 ) ぜひ 名 前 を 覚 えていってくださ

What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私 ) ぜひ 名 前 を 覚 えていってくださ HeartRails APIs for MA5 ハートレイルズの 提 供 API について http://www.heartrails.com/ What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私

More information

2 3

2 3 Sample 2 3 4 5 6 7 8 9 3 18 24 32 34 40 45 55 63 70 77 82 96 118 121 123 131 143 149 158 167 173 187 192 204 217 224 231 17 285 290 292 1 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

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

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

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

HTML文書の作成

HTML文書の作成 99 C HTML 1 1 2 HTML 1 3 2 4 HTML 2 4.1... 2 4.2... 3 4.3... 5 5 HTML 8 5.1... 8 5.2... 10 5.3... 12 6 HTML 13 7 13 1 HTML HTML [1] 2 HTML HTML Hyper-Text Markup Language World Wide Web (WWW)[2] HTML Hyper-Text

More information

.....

..... Peace & Piece Version1.0Peace & Piece 2011/12/17 ..... A-1 CV B-1 C-1 D-1 E-1 F-1 Web G-1 H-1 I-1 J-1 K-1 L-1 M-1 FAQ B-2 D-2 E-2 F-2 H-2 D-3 F-3 CMS () Web Web Web 75 85 Z Web alt SEO SEO Web

More information

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html

More information

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ

はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディ 株 式 会 社 クロノドライブ コーディングガイドライン 改 訂 履 歴 2009/10/01 初 版 2010/12/06 一 部 修 正 2011/05/02 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2013/04/12 対 応 ブラウザ 修 正 2014/02/25 文 言 内 容 一 部 修 正 2014/04/08 対 応 メーラーの 追 加 2014/06/05

More information

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

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

More information

Web情報システム 第1章~第5章

Web情報システム 第1章~第5章 Web 情 報 システム マルチメディア 情 報 通 信 ソフトウェア 第 1 章 ~ 第 4 章 1 Web 情 報 システム マルチメディア 情 報 の 流 通 Web 情 報 システム 概 論 デジタルメディアの 特 徴 デジタルメディアの 記 述 HTML (Hyper Text Markup Language) Css (Cascading style sheet) デジタルメディアの 制

More information

CSSの基礎

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

More information

第 10 問 HTML5 の h1 h6 要 素 は 単 なる 見 出 し ではなく セクションの 見 出 し を 表 す 第 11 問 ウェブページの 表 示 方 法 は CSS で 指 定 されるものであるため 記 述 する HTML の 文 法 に 誤 りがあったとしても 表 示 に 影 響

第 10 問 HTML5 の h1 h6 要 素 は 単 なる 見 出 し ではなく セクションの 見 出 し を 表 す 第 11 問 ウェブページの 表 示 方 法 は CSS で 指 定 されるものであるため 記 述 する HTML の 文 法 に 誤 りがあったとしても 表 示 に 影 響 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 において header 要 素 はセクショニングコンテンツに 属 さない 第 2 問 jquery などの JavaScript フレームワークの 利 用 には 各 ユーザエージェントのプラグインが 必 須 である 第 3 問 不 正 アクセスや 不 正

More information

WCAN

WCAN Web or App Web or App App 1.PC 2. 3. HTML Web design skill app design skill? ターゲットが必要 Web or App Web PC PC PC Web PC Web Web Media Queries CSS3 HTML responsible design PC Media

More information

0720

0720 DRM SNS WP WP UG Width of the Flash tag cloud Height of the Flash tag cloud Color of the tags 000000 Background color FFFFFF Use compatibility mode? WEB - HTML Color Names http://www.joomler.net/download/131-wordpress/890-wordpress-wp-cumulus-49kb.html

More information

第 10 問 img 要 素 の alt 属 性 に 指 定 すべき 値 は src 属 性 で 指 定 している 画 像 がどのように 見 えるのかを 説 明 するテキス トではなく src 属 性 で 指 定 している 画 像 が 表 示 されない 状 況 において 画 像 の 代 わりに 使

第 10 問 img 要 素 の alt 属 性 に 指 定 すべき 値 は src 属 性 で 指 定 している 画 像 がどのように 見 えるのかを 説 明 するテキス トではなく src 属 性 で 指 定 している 画 像 が 表 示 されない 状 況 において 画 像 の 代 わりに 使 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 属 性 型 JP ドメイン 名 の 1 つである or.jp は 主 に 政 府 機 関 が 使 用 するものである 第 2 問 HTML5 では インラインの 引 用 文 を q 要 素 でマークアップせずに テキストに 引 用 符 を 埋 め 込 んで 示 すことも

More information

CONTENTS 0 1 2 3 4 5 6 7 8 9 10 0 viii ix x http://www.vector.co.jp/vpack/filearea/win/writing/edit/hm/index.html http://hidemaru.xaxon.co.jp/lib/macro/index.html ftp://ftp.m17n.org/pub/mule/windows/ http://www.yatex.org/

More information

(1) 2000 ( ) ( ) 1000 2000 1000 0 http://www.spacepark.city.koriyama.fukushima.jp/ http://www.miraikan.jst.go.jp/ http://www.nasda.go.jp/ 3000 1 1 http://www.city.nara.nara.jp/citizen/jyugsidu/jgy/jsj/

More information

地域と文化資産

地域と文化資産 11 2005 1980 151 20 65 1 6 37 7 A D E F G H - 2 - 2005 8 6 10:00 10:30 2-432 A D 7 E 8 1-F 1-G - 3 - 2005 H 1970 2005 8 26-4 - A B D E F G H 3 7 8 1 5 6 1 10-5 - 2005 10 1 5 6 1 1 30 2 3 5 3 2 1 2005 8

More information

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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 http://www.moj.go.jp/press/090130-1.html 55 56 57

More information

1 Web,.,, Web..,, Web.,,,.,,,., CGI.,, Web, Web.,,. PC,,.

1 Web,.,, Web..,, Web.,,,.,,,., CGI.,, Web, Web.,,. PC,,. Web 1 Web,.,, Web..,, Web.,,,.,,,., CGI.,, Web, Web.,,. PC,,. 2 1 6 1.1............................................... 6 1.2.............................................. 6 1.3...............................................

More information

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

More information

スライド 1

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

More information

Network Computing の基礎

Network Computing の基礎 CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS

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

001 No.3/12 1 1 2 3 4 5 6 4 8 13 27 33 39 001 No.3/12 4 001 No.3/12 5 001 No.3/12 6 001 No.3/12 7 001 8 No.3/12 001 No.3/12 9 001 10 No.3/12 001 No.3/12 11 Index 1 2 3 14 18 21 001 No.3/12 14 001 No.3/12

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

第 11 問 HTML5 において s 要 素 は 正 確 ではなくなった 部 分 や 関 係 なくなった 部 分 を 示 す 第 12 問 HTML で 文 字 コード(テキストエンコーディング)を 示 すための 文 字 列 は 大 文 字 小 文 字 のいずれで 記 述 して もよい 第 13

第 11 問 HTML5 において s 要 素 は 正 確 ではなくなった 部 分 や 関 係 なくなった 部 分 を 示 す 第 12 問 HTML で 文 字 コード(テキストエンコーディング)を 示 すための 文 字 列 は 大 文 字 小 文 字 のいずれで 記 述 して もよい 第 13 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 ウェブブラウザは ユーザエージェントの 一 つである 第 2 問 Apache などのウェブサーバが 動 作 しているかどうかは ping で 確 認 できる 第 3 問 労 働 基 準 法 では 使 用 者 は 労 働 時 間 が 6 時 間 を 超 える 場 合

More information

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

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

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

2013 5

2013 5 12 (SL) (L) (SL) 2013 5 5 29 () 4 ( ) 7 17 20 ( ) 2 14. 4.17 14. 5. 1 14. 5.22 14. 6. 5 14. 4.17 14. 5. 1 14. 5. 8 14. 5.22 14. 4.17 14. 5. 1 14. 5.22 14. 6. 5 4 10 7 7 10 7 31 8 14.4.10 14.7.10 14.7.31

More information

1000

1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 SL 1000 1000 1000 1000 1000 1000 1000 1000 1000 ( 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000 1000

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

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

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