_bodik_seminar.key

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "20151112_bodik_seminar.key"

Transcription

1

2

3

4

5

6

7

8

9

10

11

12

13

14 AJAXで動的に新しいコンテンツを取得できる AJAXなし GET /index.html HTTP/1.1 HTTP/ OK GET /index.html HTTP/1.1 HTTP/ OK AJAXあり GET /index.html HTTP/1.1 HTTP/ OK GET /index.html HTTP/1.1 HTTP/ OK クライント HTTPサーバー ウェブブラウザー 14 ウェブサーバー

15 AJAXで動的に新しいコンテンツを取得できる AJAXなし GET /index.html HTTP/1.1 HTTP/ OK メリット GET /index.html HTTP/1.1 新しいコンテンツを得るためにページを HTTP/ OK 再読み込みする必要ない クライエント側に複数の箇所から情報を GET /index.html HTTP/1.1 AJAXあり 集めてページを生成できる e.g.ミューズア HTTP/ OK グリゲータサイト GET /index.html HTTP/1.1 HTTP/ OK クライント HTTPサーバー ウェブブラウザー 15 ウェブサーバー

16 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <style> /* some styling rules */ </style> <link rel= stylesheet href= some_file.css > <script> /* some javascript code */ </script> <script src= some_file.js ></script> </head> <body> <! Some HTML code > </body> </html>

17 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <style> /* some styling rules */ </style> <link rel= stylesheet href= some_file.css > <script> /* some javascript code */ </script> <script src= some_file.js ></script> </head> <body> <! Some HTML code > </body> </html>

18 <html> <head>...</head> <body> <header> <h1></h1> </header> <article> <h2>1</h2><p></p1> </article> <article> <h2>2</h2><p></p1> </article> </body> </html>

19 <div class="css" id="id" class="css ">...</div>

20 body header body article h2article h2 body pp p.classnamediv#idname

21 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>title</title> <script src= </head>

22 > var process_result = function(response_body, status) {} > $.get( process_result) > $.get( function(data, status){ $( pre ).text(data) })

23

24

25 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2015/11/12 BODIK 1-1</title> <!-- Leaflet() --> <script type="text/javascript" src="../leaflet/leaflet.js"></script> <link rel="stylesheet" href="../leaflet/leaflet.css"> <style> body { padding: 0; margin: 0; } h1 { margin-left: 1em; font-family: sans-serif; font-weight: lighter; } #map { width: 100%; height: 400px; padding: 0; margin: 0; } </style> </head> <body> <h1>1-1</h1> <div id="map"></div> <script type="text/javascript"> var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer(' { attribution: ' <a href=" contributors' }).addto(map); // :SRP( , ) </script> </body> </html>

26 <div id="map"></div> > var map = L.map( map )

27 > var tile_layer = L.tileLayer( ) > tile_layer.addto(map)

28

29

30 > var map = L.map('map').setView([51.505, -0.09], 13);

31 > var marker = L.marker([,]) > marker.addto(map) > marker.bindpopup('bodik')

32

33

34 <link href=' rel='stylesheet'> <i class="fa fa-car"></i>

35 <link rel="stylesheet" href=../leaflet.awesome-markers/ dist/leaflet.awesome-markers.css"> <script type="text/javascript" src="../leaflet.awesomemarkers/dist/leaflet.awesome-markers.js"></script>

36 var restaurantmarker = L.AwesomeMarkers.icon({ icon: 'coffee', markercolor: 'darkred', prefix: 'fa', iconcolor: 'white' }); L.marker([ , ], { icon: restaurantmarker }).addto(map).bindpopup('bodik')

37

38

39 <!DOCTYPE html> <html> <head>... <!-- jquery(ajax) --> <script type="text/javascript" src="../jquery/jquery min.js"></script> </head> <body> <h1>1-3:sparql</h1> <div id="map"></div> <pre id="sandbox"> </pre> <script type="text/javascript">... $.post( ' { query:... }, function(data, status, jqxhr) { $("#sandbox").text("http/1.1 " + jqxhr.status + " " + jqxhr.statustext + "\n" + jqxhr.getallresponseheaders() + "\n" + jqxhr.responsetext)... } ).fail(function(jqxhr){ $("#sandbox").text("http/1.1 " + jqxhr.status + " " + jqxhr.statustext + "\n" + jqxhr.getallresponseheaders() + "\n" + jqxhr.responsetext) }) </script> </body> </html>

40 $.post( ' { query: [ POST /sparql HTTP/1.1 'prefix rdfs:< 'prefix bodic:<'+bodic_voc_prefix+'#>', 'select?s?lon?lat?sensor_type query=prefix {', rdfs:< ' graph <'+dataset_iri+'> {', '?lat_hiri a bodic:rawproperty rdf-schema#> ; rdfs:label '?lon_hiri a bodic:rawproperty ; rdfs:label '?stype_hiri a bodic:rawproperty ; rdfs:label '?s?lon_hiri?lon ;?lat_hiri?lat ;?stype_hiri?sensor_type', ' }.', ' FILTER(?sensor_type!= "")', '}'].join(" ") }, function(data, status, jqxhr) { $("#sandbox").text("http/1.1 " HTTP/1.1 + jqxhr.status 200 OK + " " + jqxhr.statustext + "\n" + jqxhr.getallresponseheaders() + "\n" Content-Type: + jqxhr.responsetext) application/sparql-results+json; var bindings = data.results.bindings; charset=utf-8 for(var i=0; i<bindings.length; i++){ var b = bindings[i]... var lon = parsefloat(b.lon.value) var lat = parsefloat(b.lat.value) { var sensor_type = b.sensor_type.value heads : { vars: [...]}, // : "results": { "bindings": [...] } } } } ).

41 prefix rdfs:< prefix bodic:< select?s?lon?lat?sensor_type { graph < G2a57ee9d4b0c2dbddeb0c4b > {?lat_hiri a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label ;?lat_hiri?lat ;?stype_hiri?sensor_type. }. FILTER(?sensor_type!= "") }

42 prefix rdfs:< prefix bodic:< select?s?lon?lat?sensor_type { graph < G2a57ee9d4b0c2dbddeb0c4b > {?lat_hiri a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label ;?lat_hiri?lat ;?stype_hiri?sensor_type. }. FILTER(?sensor_type!= "") }

43 prefix rdfs:< prefix bodic:< select?s?lon?lat?sensor_type { graph < G2a57ee9d4b0c2dbddeb0c4b > {?lat_hiri a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label ;?lat_hiri?lat ;?stype_hiri?sensor_type. }. FILTER(?sensor_type!= "") }

44 prefix rdfs:< prefix bodic:< select?s?lon?lat?sensor_type { graph < G2a57ee9d4b0c2dbddeb0c4b > {?lat_hiri a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label ;?lat_hiri?lat ;?stype_hiri?sensor_type. }. FILTER(?sensor_type!= "") }

45 prefix rdfs:< prefix bodic:< select?s?lon?lat?sensor_type { graph < G2a57ee9d4b0c2dbddeb0c4b > {?lat_hiri a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label a bodic:rawproperty ; rdfs:label ;?lat_hiri?lat ;?stype_hiri?sensor_type. }. FILTER(?sensor_type!= "") }

46 application/sparql-results+json; { "head": { "vars": [ "s", "lon", "lat", "sensor_type" ] }, "results": { "bindings": [ { "s": { "type": "uri", "value": " G2a57ee9d4b0c2dbddeb0c4b /raw_line_246" }, "lon": { "type": "literal", "value": " " }, "lat": { "type": "literal", "value": " " }, "sensor_type": { "type": "literal", "value": "" } }, { "s": { "type": "uri", "value": " G2a57ee9d4b0c2dbddeb0c4b /raw_line_120" }, "lon": { "type": "literal", "value": " " }, "lat": { "type": "literal", "value": " " }, "sensor_type": { "type": "literal", "value": "" } } } ] },... select?s?lon?lat?sensor_type {... }

47 function(data, status, jqxhr) { $("#sandbox").text("http/1.1 " + jqxhr.status + " " + jqxhr.statustext + "\n" + jqxhr.getallresponseheaders() + "\n" + jqxhr.responsetext) var bindings = data.results.bindings; for(var i=0; i<bindings.length; i++){ var b = bindings[i] var lon = parsefloat(b.lon.value) var lat = parsefloat(b.lat.value) var sensor_type = b.sensor_type.value // : } }

48

49 function(data, status, jqxhr) { $("#sandbox").text("http/1.1 " + jqxhr.status + " " + jqxhr.statustext + "\n" + jqxhr.getallresponseheaders() + "\n" + jqxhr.responsetext) var bindings = data.results.bindings; for(var i=0; i<bindings.length; i++){ var b = bindings[i] var lon = parsefloat(b.lon.value) var lat = parsefloat(b.lat.value) var sensor_type = b.sensor_type.value // : } }

50

51

52 prefix geo: < prefix dbpedia:< prefix dbpedia-p:< prefix dbpedia-o:< prefix rdfs:< select?name?pop?lon?lat {?s a dbpedia-o:city ; dbpedia-o:timezone dbpedia:japan_standard_time ; rdfs:label?name ; dbpedia-p:populationtotal?pop ; geo:long?lon ; geo:lat?lat. FILTER(lang(?name)="ja" &&?pop> ) } ORDER BY DESC(?pop)

53 > var circle = L.circle([lat, lon], circle_radius, { fillcolor: circle_fill_color, color: false, fillopacity: 0.75 }) > circle.addto(map) > circle.bindpopup("hogehoge")

54 for(var i=0; i<bindings.length; i++){ var b = bindings[i] var name = b.name.value var pop = parseint(b.pop.value) var lon = parsefloat(b.lon.value) var lat = parsefloat(b.lat.value) } // : var circle_radius = // : var circle_fill_color = 'red' var circle = L.circle([lat, lon], circle_radius,{ fillcolor: circle_fill_color, color: false, fillopacity: 0.75 }).addto(map).bindpopup("<h3>"+name+"</h3>:"+pop+"");

55

56 > var hue=123, saturation=50 > var color = 'hsla('+hue+','+saturation+'%,80%,0.8)'

57 // : var circle_radius = // : var circle_fill_color = 'red'

58

59

60 <!DOCTYPE html> <html> <head>... </head> <body> <h1>2-2:</h1> <div id="map"></div> <script type="text/javascript"> var map = L.map('map').setView([ , ], 11); // : var fukuoka_wards_population = {... } function fukuoka_wards_style(feature){... } function add_popup_on_ward_layer(feature, area_layer) {... }... $.getjson(..., function(japandata){ L.geoJson(...).addTo(map); }) </script> </body> </html>

61 { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "N03_001": "", "N03_002": null, "N03_003": "", "N03_004": "", "N03_007": "40135" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ , ], [ , ], [ , ], ] ] } }, { "type": "Feature", "properties": { "N03_001": "", "N03_002": null, "N03_003": "", "N03_004": "", "N03_007": "40131" }, "geometry": { "type": "Polygon", "coordinates": [... ] } },... ] }

62 var fukuoka_wards_population = { '': , '': ,...} function fukuoka_wards_style(feature){ var ward_name = feature.properties['n03_004'] var ward_population = fukuoka_wards_population[ward_name] var ratio = (ward_population ) / var color = 'hsl('+360*ratio+',80%,80%)' console.log(color) } return { fillcolor: color, weight: 0.5,... }; function add_popup_on_ward_layer(feature, area_layer) { area_layer.bindpopup("") } $.getjson(' /.json', function(japandata){ L.geoJson(japanData, { style: fukuoka_wards_style, oneachfeature: add_popup_on_ward_layer }).addto(map); })

63 L.geoJson(japanData, { style: fukuoka_wards_style, oneachfeature: add_popup_on_ward_layer }) function fukuoka_wards_style(feature){ var ward_name = feature.properties['n03_004'] var ward_population = fukuoka_wards_population[ward_name] var ratio = (ward_population ) / var color = 'hsl('+360*ratio+',80%,80%)' console.log(color) "features": [ { "type": "Feature", "properties": {... }, "geometry": { "type": "Polygon", "coordinates": [... ] } }, ] } return { fillcolor: color, weight: 0.5,... };

64 var map = L.map('map').setView([ , ], 11); // : function add_popup_on_ward_layer(feature, area_layer) { // :fukuoka_wards_style... } area_layer.bindpopup("")

65

66 <!DOCTYPE html> <html> <head>... <style>... #graph { width: 700px;padding: 0; margin: 0; }... </style> </head> <body> <h1>3-1:</h1> <div id="graph"></div> <pre id="sandbox"></pre> <script type="text/javascript"> var sparql_query = [...].join("\n") $.post( ' { query: sparql_query }, function(data, status, jqxhr) {... } ).fail(function(jqxhr){ $("#sandbox").text("http/1.1 " + jqxhr.status + " " + jqxhr.statustext + "\n" + jqxhr.getallresponseheaders() + "\n" + jqxhr.responsetext) }) </script> </body> </html>

67 <!DOCTYPE html> <html> <head> <style>.bar { height: 20px; background-color: red; margin: 10px; } </style> </head> <body> <div class="bar" style="width:300px"></div> <div class="bar" style="width:250px"></div> <div class="bar" style="width:100px"></div> </body> </html>

68

69

70 function(data, status, jqxhr) { $("#sandbox").text("http/1.1 " + jqxhr.status + " " + jqxhr.statustext + "\n" + jqxhr.getallresponseheaders() + "\n" + jqxhr.responsetext) var bindings = data.results.bindings; var data = [] for(var i=0; i<bindings.length; i++) { var b = bindings[i] var pop = parseint(b.pop.value) var name = b.name.value data.push({pop: pop, name: name}) } var max_population = d3.max($.map(data, function(d) {return d.pop} )) var scale_x = d3.scale.linear().domain([0, max_population]).range([0, 400]); var div = d3.select("#graph").selectall("div").data(data).enter().append("div") div.append("p").attr("class", "label").text(function(d) { return d.name } ) div.append("div").attr("class", "bar").style("width", function(d) { return scale_x(d.pop) + "px" } ) } // :(numeric-label)

71 var div = d3.select("#graph").selectall("div").data(data).enter().append("div") div.append("p").attr("class", "label").text(function(d) { return d.name } ) div.append("div").attr("class", "bar").style("width", function(d) { return scale_x(d.pop) + "px" } ) [ {pop: , name: ""}, {pop: , name: "2"},... ] <div> <p> <div> <div>

72 div.append("p").attr("class", "label").text(function(d) { return d.name } ) div.append("div").attr("class", "bar").style("width", function(d) { return scale_x(d.pop) + "px" } ) div.append(...).text(...)

73

74

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

InfoPros13_digest.key

InfoPros13_digest.key ! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 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

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

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

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

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

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

More information

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

2

2 1 2 VICS G***** 3 4 5 http://****.yahooapis.jp/****?query=*** WebAPI HTTP 6 7 8 9 10 11 12 13 14 15 16 17 18 19 YOLP AppID hacku_test 20

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

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 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

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

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

■新聞記事

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

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

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

...... ......

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

ホームページの作成

ホームページの作成 HTML5,CSS 資 料 HTML5 HTML の 文 法 HTML(Hyper Text Markup Language)は, 文 章 の 部 分 を Tag(タグ)と 呼 ばれ る 命 令 で 挟 んでいく タグは ... 開 始 終 了 のように 開 始 タグと 終 了 タグ 一 対 のペアになっている. タグは, 挟 まれた 部 分 がどのような 情 報 であるかを

More information

CSSの基礎

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

More information

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

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

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

/ 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

文 書 構 造 とスタイル

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

More information

https://submitmail.jp/owners/login .... .. 500

More information

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >

(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

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

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

More information

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

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

More information

<!DOCTYPE html> 何かの宣言。必要。

<!DOCTYPE html> 何かの宣言。必要。 プロジェクトI/II テーマH( 担 当 : 日 紫 喜 光 良 ) 目 標 地 図 上 に 情 報 を 表 示 することが 解 決 に 役 立 つような 問 題 を 見 つけることができる 問 題 解 決 のために 必 要 な 情 報 をグループメンバーと 協 力 して 収 集 できる Google の 地 図 (Google Maps) 上 に 情 報 を 表 示 することができる 地 理 情

More information

スライド 1

スライド 1 第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの

More information

to-r

to-r to-r We re targeting a 1.0 release within the next few weeks. 1.0 IE6 jquery Mobile Sample

More information

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ HTTP/2 HTTP/1.1 (1999 ) 2015 5 RFC7540! Google SPDY ( ) 1 TCP TCP TLS HTTP Upgrade HTTP 1 HPACK 1 / 24 3 : HTTP : HTML4 2 / 24 testform.html: POST testform2.html: GET iedemo: IE default.css: CSS proxy.pac:

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

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

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

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

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

p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge

More information

PowerPoint プレゼンテーション

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

More information

20140208-DartFlightSchool

20140208-DartFlightSchool Jan 8 2014 Dartってなに? Google JavaScript https://www.dartlang.org/ Dartの 開 発 環 境 DartEditor Eclipse IDEMac / Windows / Linux https://www.dartlang.org/ DartでHello World

More information

jQuery_004_012_mkj(02).indd

jQuery_004_012_mkj(02).indd はじめに Flash Flash JavaScript jquery JavaScript jquery Web プログラム 経 験 の 少 ないデザイナーでも 容 易 に 理 解 できる 構 成 jquery jquery jquery 1 Web jquery Web SB 23 11 3 Contents コードの 解 説 39 サンプルコードを 書 き 替 えてみよう! 40 Column

More information

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522

More information

スライド 1

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

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

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

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

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

More information

第 11 問 画 像 が 多 いウェブページに HTTP1.0 でアクセスする 場 合 クライアント サーバ 間 のコネクション 数 も 多 くなる 第 12 問 新 しい VDT 作 業 における 労 働 衛 生 管 理 のためのガイドライン では 1. 対 象 となる 作 業 2. 作 業 環

第 11 問 画 像 が 多 いウェブページに HTTP1.0 でアクセスする 場 合 クライアント サーバ 間 のコネクション 数 も 多 くなる 第 12 問 新 しい VDT 作 業 における 労 働 衛 生 管 理 のためのガイドライン では 1. 対 象 となる 作 業 2. 作 業 環 1. 各 設 問 において 正 しいと 思 われるものは1を 間 違 っていると 思 われるものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 ウェブブラウザはユーザエージェントの 一 つである 第 2 問 イーサネットとは 1000BASE-T の 規 格 のみをさす 第 3 問 JavaScript で 記 述 されたコードは ウェブブラウザに 内 臓 されている Java

More information

16. ペルソナ シナリオ 法 におけるペルソナとは ある 実 在 する 特 定 の 1 人 の 人 物 のことである 17. ユーザインタフェースの 分 野 での GUI とは ジオグラフィック ユーザ インタフェースの 略 称 で ある 18. HTML 4.01 Strict では XML 宣

16. ペルソナ シナリオ 法 におけるペルソナとは ある 実 在 する 特 定 の 1 人 の 人 物 のことである 17. ユーザインタフェースの 分 野 での GUI とは ジオグラフィック ユーザ インタフェースの 略 称 で ある 18. HTML 4.01 Strict では XML 宣 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 1. CSS において div, p のような 記 述 は 子 孫 セレクタの 指 定 である 2. URL 中 のパスにおいて ファイル 名 を 指 定 せずにディレクトリ 名 だけ 指 定 した 場 合 必 ずそのディ レクトリ 内 の index.html が 表 示 される

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

第 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

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

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

More information

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使

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

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

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

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

html_text

html_text HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web

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

0序文‐1章.indd

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

More information

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

More information

ホームページの仕組み

ホームページの仕組み 見 やすいホームページを 作 ろう! 跡 見 学 園 女 子 大 学 公 開 講 座 文 学 部 准 教 授 福 田 博 同 平 成 23 年 5 月 7 日 14 日 目 次 5 月 7 日 1. ショートカットキー 2. HTMLの 仕 組 み 3. XHTMLとCSS 4. W3C 標 準 5. 見 本 に 書 き 込 む 6. 単 語 登 録 5 月 14 日 1. ブログを 試 そう 2.

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

Microsoft PowerPoint - 051105-2.ppt

Microsoft PowerPoint - 051105-2.ppt 1.Webアプリケーション 1-1 Web 1989Tim Berners-Lee 1993 1999iWindows98 2005: http://www.w3.org/people/berners-lee/ 1-2 ( ) 汎 用 機 オフコン データベース アプリケーション 言 語 (COBOLなど) 文 字 端 末 タイプライター 端 末 http://research.microsoft.com/~gbell/digital/timeline/dechistory.htm

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

第 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

1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python..................

1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python.................. JavaScript 0648016 1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python.................. 3 2......................... 4 3..........................

More information

スライド 1

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

More information

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 1 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく

More information

jQueryのはじめ方

jQueryのはじめ方 sato-shi 高 田 馬 場 で 働 いています jqueryを 分 かった 気 になる About jquery べた 書 き から お 手 軽 な 書 き 方 へ ブラウザ バージョン 表 示 CSS 操 作 イベント 処 理 エフェクト 非 同 期 通 信 (Ajax) クロスドメイン 通 信 (JSONP) アニメーション プラグイン 紹 介 (ズーム 画 像 表 示 ツールチップ) jqquery

More information

68 <td valign="top" class="c8"> 69 <p class="c13"><a name="マーク0"><span class="c9">⓪</span></a></p> 70 </td> 71 </tr> 72 <tr> 73 <td valign="top" class

68 <td valign=top class=c8> 69 <p class=c13><a name=マーク0><span class=c9>⓪</span></a></p> 70 </td> 71 </tr> 72 <tr> 73 <td valign=top class ページ 内 のリンクでページ 内 に 移 動 の html のページの 追 加 方 法 三 宅 節 雄 Html 文 書 を TeraPad で 開 きます 1 2

More information

インターネットマガジン2004年3月号―INTERNET magazine No.110

インターネットマガジン2004年3月号―INTERNET magazine No.110 C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;

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

ほんぶん-第14章.indd

ほんぶん-第14章.indd - - - http://j.people.com.cn/ ///.html - http://www.sasac.gov.cn/n /n /n / index.html .... ...................................................................... -,,,,.. ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

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

HTML入門

HTML入門 HTML ABC of Hyper Text Markup Language 2009 2 HTML2009 Copyright 2009 by BohYoh Shibata 3 WWW HTML WWW WWWworld wide web hyper text resource 4 HTML2009 http WWW httphyper text transfer protocol HTML HTMLhyper

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

11 ( 40 ) 1 ipad ) LAN (Local Area Network) WAN (Wide Area Network) 2 TCP/IP 3 LAN LAN EMOBILE WiMAX WILLCOM ) 4 ( www(world wide web,) ) 5 6 7 8 9 10 index.html Web IE, FireFox, Safari ( ) 11 IP IP xx.xx.xx.xx

More information

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

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

More information

HTML+CSS_Lesson03_2s.indd

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

More information

HTML5とJavaScriptを利用したAndroidネイティブアプリの作成

HTML5とJavaScriptを利用したAndroidネイティブアプリの作成 HTML5 と JavaScript を 利 用 した Android ネイティブアプリの 作 成 東 京 理 科 大 学 理 学 部 物 理 学 科 山 本 研 究 室 1210052 五 木 田 隼 人 目 次 0. はじめに 0-1.はじめに 0-2. 各 種 OS について 0-3.クロスプラットフォームツールの 紹 介 1. 開 発 環 境 の 準 備 Android の 場 合 ios

More information

WebGIS WebGIS(Web Geographic Information System) Web WebGIS Web WebGIS API(Application Program Interface) Web Google GoogleMaps API WebGISJSGI i

WebGIS WebGIS(Web Geographic Information System) Web WebGIS Web WebGIS API(Application Program Interface) Web Google GoogleMaps API WebGISJSGI i 18 WebGIS A Sharing of Geographic Information for WebGIS 1095303 2007 3 9 WebGIS WebGIS(Web Geographic Information System) Web WebGIS Web WebGIS API(Application Program Interface) Web Google GoogleMaps

More information

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

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

Taro-CSS.jtd

Taro-CSS.jtd CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML

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

スライド 1 ネットワーク ウェブサイト 関 連 の 基 本 (おさらい) ファイルの 公 開 ポート:80 (デフォルト) ウェブ サーバー 海 洋 大 のネットワーク プロキシ サーバー ファイルの アップロード 外 部 ネットワーク Apache サーバで ファイルを 公 開 パケットの 監 視 HTML 文 書 の 閲 覧 上 記 のネットワーク 構 成 は プロキシサーバーを 除 いておおよそどこでも

More information

slide.key

slide.key Responsive Web Design Adaptive Web Design マルチ 環 境 対 応 の 考 え 方 考 え 方は? 違 いは? Responsive Web Design.content {! position: absolute;! }! @media screen and (min-width: 768px) {!.content {! position: relative;!

More information

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

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

More information

2014メディプロ1HTML発展編2

2014メディプロ1HTML発展編2 04 年 度 メディアプロジェクト 演 習 HTML 講 座 発 展 編 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な Web ページの

More information

2013/12/9 1 / 2 1 オープンデータ 1.1 オープンデータ 取 得 概 要 オープンデータ 取 得 API /opendata/(:(.:format)) /opendata/od(:(_:date)(.:format)) オープンデータとしてまとめられている 場 所 リストを 返

2013/12/9 1 / 2 1 オープンデータ 1.1 オープンデータ 取 得 概 要 オープンデータ 取 得 API /opendata/(:(.:format)) /opendata/od(:(_:date)(.:format)) オープンデータとしてまとめられている 場 所 リストを 返 2013/12/9 1 / 1 インターフェース 仕 様 書 第 1.0 版 東 京 大 学, 株 式 会 社 リマージュアーツ 2013/12/9 1 / 2 1 オープンデータ 1.1 オープンデータ 取 得 概 要 オープンデータ 取 得 API /opendata/(:(.:format)) /opendata/od(:(_:date)(.:format)) オープンデータとしてまとめられている

More information

Microsoft Word - 2016メディプロ1HTML統合版v1

Microsoft Word - 2016メディプロ1HTML統合版v1 2016 年 度 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. 1 はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な

More information

情報公開システム論2.pptx

情報公開システム論2.pptx 情 報 公 開 システム 論 (2) 神 戸 情 報 大 学 院 大 学 横 山 輝 明 電 子 文 書 としてのWebページ 2 ホームページ(1) ホームページ 自 由 に 作 成 安 価 世 界 中 に 公 開 多 彩 な 表 現 力 双 方 向 性 - 島 根 県 立 大 学 - 島 根 県 立 大 学 短 期 大 学 部 h,p://www.u- shimane.ac.jp/ 3 ホームページ(2)

More information

CSSで書籍組版を

CSSで書籍組版を CSSで 書 籍 組 版 を ( 有 )イー エイド 藤 島 雅 宏 FormatterClub CSS 書 籍 組 版 セミナー 講 演 資 料 開 催 日 2013 年 10 月 18 日 会 場 東 京 都 中 央 区 浜 町 区 民 館 簡 単 そう 易 しい 簡 単 なことしかできない CSSはWeb 用 であり 組 版 機 能 が 劣 る コンテンツはHTMLなので 構 造 が 簡 単

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