to-r

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "to-r"

Transcription

1

2 to-r

3

4

5

6

7

8

9

10

11

12 We re targeting a 1.0 release within the next few weeks. 1.0

13

14

15

16

17

18

19

20

21

22 IE6

23

24

25

26

27

28 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery Mobile Sample</title> <link rel="stylesheet" href="jquery.mobile-1.0rc1.min.css"> <script src="jquery min.js"></script> <script src="jquery.mobile-1.0rc1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> </head> <body>... </body> </html>

29 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery Mobile Sample</title> <link rel="stylesheet" href="jquery.mobile-1.0rc1.min.css"> <script src="jquery min.js"></script> <script src="jquery.mobile-1.0rc1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> </head> <body>... </body> </html>

30

31 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery Mobile Sample</title> <link rel="stylesheet" href="jquery.mobile-1.0rc1.min.css"> <script src="jquery min.js"></script> <script src="jquery.mobile-1.0rc1.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> </head> <body>... </body> </html>

32

33 <meta name="viewport" content="width=device-width, initial-scale=1">

34 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">

35 <body> <div data-role="page" id="index">... </div> <div data-role="page" id="about">... </div> <div data-role="page" id="seminar">... </div> </body>

36

37 <a href="#seminar"> <div> <h2>seminar</h2> <p>this is block link</p> </div> </a>

38 <body> <div data-role="page" id="index"> <a href="#about">about</a>... </div> <div data-role="page" id="about"> <a href="#index">index</a>... </div> </body>

39 index.html <body> <div data-role="page" id="index"> <a href="detail.html">detail</a> </div> </body> detail.html <body> <div data-role="page" id="index"> <a href="index.html">index</a> </div> </body>

40 <div data-role="page" id="index"> <div data-role="header"> <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer"> <h4> 2011 to-r</h4> </div> </div>

41

42 <div data-role="page" id="index" data-theme="b"> <div data-role="header"> <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer"> <h4> 2011 to-r</h4> </div> </div>

43

44 data-theme="c" data-theme="d" data-theme="e"

45 <div data-role="page" id="index" data-theme="b"> <div data-role="header" data-theme="b" > <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer" data-theme="b" > <h4> 2011 to-r</h4> </div> </div>

46 <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">menu</li> <li><a href="#about"><h3>to-r </h3></a></li> </ul> </div> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

47

48 <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">menu</li> <li><a href="#about"><h3>to-r </h3></a></li> </ul> </div> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

49

50 <div data-role="content"> <form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="name"> </label> <input type="text" id="name"> </div> <div data-role="fieldcontain"> <label for="gender"> </label> <select name="gender" id="gender" data-role="slider"> <option value=" "> </option> <option value=" "> </option> </select> </div>

51

52

53

54 <a href="#about" data-transition="slide"> <a href="#about" data-transition="slideup"> <a href="#about" data-transition="slidedown"> <a href="#about" data-transition="pop"> <a href="#about" data-transition="fade"> <a href="#about" data-transition="flip">

55

56

57

58

59

60 ( д )

61

62

63

64

65

66

67

68

69

70

71

72

73 <a href="#about" data-transition="none"> <a href="about.html" rel="external">

74

75

76

77

78

79 tap vmouseover taphold vmousedown swipe vmousemove swipeleft vmouseup swiperight vclick vmousecancel

80

81

82

83

84 $('div#access').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setcenter(mylatlng); });

85

86

87 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery min.js"></script> <script> $(document).bind("mobileinit", function() { $.mobile.page.prototype.options.addbackbtn = true; }); </script> <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>

88 <div data-role="header"> <a href="#index" data-rel="back" data-icon="arrow-l"> </a> <h1>to-r</h1> </div>

89 <div data-role="header"> <a href="#index" data-direction="reverse" data-icon="arrow-l">top </a> <h1>to-r</h1> </div>

90

91 Web

92

93

94

95

96

97

98 <div data-role="page" id="index" data-theme="a"> <div data-role="header" data-theme="a" > <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer" data-theme="a" > <h4> 2011 to-r</h4> </div> </div>

99

100 <div data-role="page" id="index" data-theme="f"> <div data-role="header" data-theme="f" > <h1>to-r</h1> </div> <div data-role="content"> <p> </p> </div> <div data-role="footer" data-theme="f" > <h4> 2011 to-r</h4> </div> </div>

101 .ui-bar-f { " border: 1px solid " " #669999; " background: "" " #709f9f; " color: " " " " " #ffffff; " font-weight: bold; " text-shadow: 0-1px 1px #669999; " background-image: -webkit-gradient(linear, left top, left bottom, from(#b4cece), to(#709f9f)); /* Saf4+, Chrome */ " background-image: -webkit-linear-gradient(top, #b4cece, #709f9f); /* Chrome 10+, Saf5.1+ */ " background-image: -moz-linear-gradient(top, #b4cece, #709f9f); /* FF3.6 */ " background-image: -ms-linear-gradient(top, #b4cece, #709f9f); /* IE10 */ " background-image: -o-linear-gradient(top, #b4cece, #709f9f); /* Opera */ " background-image: linear-gradient(top, #b4cece, #709f9f); }

102 .ui-btn-up-f {...}.ui-btn-hover-f {...}.ui-btn-down-f {...}.ui-btn-active {...}

103 .ui-btn-up-f {...}.ui-btn-hover-f {...}.ui-btn-down-f {...}.ui-body-f.ui-btn-active {...}

104 .ui-icon-checkbox-on,.ui-checkbox-on.ui-icon,.ui-radio-on.ui-icon { background-color: #709f9f; }

105 .ui-body-f.ui-icon-checkbox-on,.ui-body-f.ui-checkbox-on.ui-icon,.ui-body-f.ui-radio-on.ui-icon { background-color: #709f9f; }

106

107 <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="f"> <li data-role="list-divider">menu</li> <li><a href="#about"><h3>to-r </h3></a></li> </ul> </div> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

108

109 <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="f"> <li data-role="list-divider">menu</li> <li data-theme="f"> <a href="#about"><h3>to-r </h3></a> </ul> </div> </li> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

110

111

112

113

114

115

116

117 <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="f"> <li data-role="list-divider">menu</li> <li><a href="#about"><h3>to-r </h3></a></li> </ul> </div> <li><a href="#seminar"><h3> </h3></a></li> <li><a href="#access"><h3> </h3></a></li> <li><a href="#contact"><h3> </h3></a></li>

118 <div data-role="content"> <ul data-role="listview" datainset="true" data-dividertheme="f" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"> ( ) " </ul> </div>

119

120

121

122

123

124

125

126

127

128

129 Could

130

131

132

133

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

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

■新聞記事

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

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

il15-internet.key

il15-internet.key http://www.is.c.titech.ac.jp/edu/2016-infoliteracy1/ /edu/2016-infoliteracy1/ /edu/2016-infoliteracy1/day6/ http://www.is.c.titech.ac.jp/edu/2016-infoliteracy1/day6/ /edu/2016-infoliteracy1/ /edu/2016-infoliteracy1/day6/

More information

文 書 構 造 とスタイル

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

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

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

forever朝活

forever朝活 forever 朝 活 php 講 座 データベースの 巻 株 式 会 社 フォーエバー 目 次 データベースを 使 う... 2 mysqliを 使 用 する... 2 郵 便 番 号 データベースを 作 る... 4 市 ごとに ドロップダウンリストにしてみる... 8 Foundation を 使 ったサンプルソース... 11 1 データベースを 使 う 今 日 は php でデータベースをさわりましょう

More information

qcon.pptx

qcon.pptx WEBフロントエンド 開 発 の 最 新 トレンド HTML5,モバイル,オフライン 2012/4/17 株 式 会 社 シーエー モバイル Web 先 端 技 術 フェロー 白 石 俊 平 自 己 紹 介 白 石 俊 平 と 申 します コミュニティhtml5j.org 管 理理 人( 会 員 数 4500 名 超 ) HTML5とか 勉 強 会 主 催 ( 毎 月 一 回 100 名 を 動 員

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

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

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

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

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

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

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

More information

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS

More information

CSSの基礎

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

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 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

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

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

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

Microsoft PowerPoint - HTML1復習_1021.ppt

Microsoft PowerPoint - HTML1復習_1021.ppt HTML-Ⅱ(HTML 文 書 構 造 編 ) 3-1 HTML 基 本 構 造 html おいしいお 店 一 覧

More information

HTML+CSS_Lesson03_2s.indd

HTML+CSS_Lesson03_2s.indd Windows ファイル 名 には 半 角 スペースも 使 用 しないよう 注 意 しましょう 1. _- 2 類 似 するコンテンツがある 際 に content001 content002 といった 連 続 するナンバリングでフォ ルダ 名 をつけることがあります この 方 法 だと 途 中 のコンテンツがなくなったり ネーミングのルールに 無 理 が 生 じたときに ファイル やフォルダを 管

More information

テキスト

テキスト インターネットの歴史 コンピューターは第2次大戦中のミサイル弾道計算の為に急速に発展しました 同様にコンピューター ネットワークも どこか一台のコンピューターが破壊されても 他のコンピューター同士の通信は維持さ れるように設計されました これが今のインターネットの原型であるアーパネットです その後 研究所 や大学 国の機関を中心にそれらを相互に接続し広まっていき 一般の商用利用が開始され 現在のイン

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

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