cssnitelp47_hasegawa_v02.key

Size: px
Start display at page:

Download "cssnitelp47_hasegawa_v02.key"

Transcription

1

2 本当に利用は必要か デザイナーにとっての jquery と JavaScript フレームワーク HIROMU HASEGAWA

3

4

5

6

7

8

9

10

11

12

13 " "

14 <button class="js-show">show</button> <button class="js-hide">hide</button> <img src="img.png" class="js-toggle-body"> <script src="jquery.js"></script><! - jquery -> <script> $('.js-show').on('click', function() { $('.js-toggle-body').show(); }); $('.js-hide').on('click', function() { $('.js-toggle-body').hide(); }); </script>

15

16 var elements = document.queryselectorall("p"); for(var i = 0; i < elements.length; i++) { elements[ i ].classlist.add("classname"); } $("p").addclass("classname");

17 var elements = document.queryselectorall("p"); for(var i = 0; i < elements.length; i++) { elements[ i ].classlist.add("classname"); } $("p").addclass("classname");

18 # # #

19

20 <link rel="stylesheet" href="path/to/lightbox.css"> <script src="jquery.js"></script> <script src="lightbox.js"></script> - <a data-lightbox="groupname"> </a> <img src="img.png">

21

22

23

24

25 $ $ $

26 $('#main.tab span a').on('click', function() { $(this).parent().parent().addclass('active').siblings().removeclass('active'); $('.tabpanel').hide(); $($(this).attr('href')).show(); });

27 $('#main.tab span a').on('click', function() { $(this).parent().parent().addclass('active').siblings().removeclass('active'); $('.tabpanel').hide(); $($(this).attr('href')).show(); });

28 $('#main.tab span a').on('click', function() { $(this).parent().parent().addclass('active').siblings().removeclass('active'); $('.tabpanel').hide(); $($(this).attr('href')).show(); });

29 <main class="main"> <ul class="tablist"> <li class="tab"><span><a href="#panel1">~</a></span></li> <li class="tab"><span><a href="#panel2">~</a></span></li> <li class="tab"><span><a href="#panel3">~</a></span></li> </ul> <div class="tabpanel wrap"> <div id="panel1" class="tabpanel"> ~ </div> <div id="panel2" class="tabpanel"> ~ </div> <div id="panel3" class="tabpanel"> ~ </div> </div> </main>

30 photo by daniilr

31 $('.sample-selector').on('click.name1', function() { $.ajax('xxx.json').done(function(data) { $('#list').append('<li>' + '<a href="'+ data.link + '">' + data.title + '</a>' }); }); + </li>');

32 $('.sample-selector').on('click.name1', function() { ~ }); $('.sample-selector').on('click.name2', function() { ~ }); $('.sample-selector').on('click.name3', function() { ~ }); $('.sample-selector').on('click.name4', function() { ~ });

33 photo by Captain Pancakes

34 %%

35

36 apple

37

38

39

40

41 &

42 ' ' ' '

43 '

44 (

45 ? どれを選べば photo by ぱくたそ

46

47

48

49

50

51

52

53 <button class="js-show">show</button> <button class="js-hide">hide</button> <img src="img.png" class="js-toggle-body"> <script> $('.js-show').on('click', function() { $('.js-toggle-body').addclass('is-show'); }); $('.js-hide').on('click', function() { $('.js-toggle-body').removeclass('is-show'); }); </script>

54

55 var items = [ { title: 'list title01', link: 'entry01.html' }, { title: 'list title02', link: 'entry02.html' }, { title: 'list title03', link: 'entry03.html' }, { title: 'list title04', link: 'entry04.html' } ];

56 <button class="sample-selector"> </button> <ul id="list"></ul> <script> $('.sample-selector').on('click.sample', function() { $('#list').empty(); $.each(items, function() { $('#list').append('<li>' + '<a href="'+ this.link + '">' + this.title + '</a>' + '</li>'); }); }); </script>

57

58

59 <button class="sample-selector"> </button> <ul id= list"></ul> <script id="linklist" type="text/x-handlebars-template"> {{#each this}} <li><a href="{{ link }}">{{ title }}</a></li> {{/each}} </script> <script> $('.sample-selector').on('click.sample', function() { var source = $("#linklist").html(); var template = Handlebars.compile(source); var html = template(items); $("#list").html(html); }); </script>

60

61

62

63

64 <div id="button"> <button v-on:click="listshow"> </button> <ul v-if="itemlist"> <template v-for="item in items"> <li><a href="{{ item.link }}">{{ item.title }}</a></li> </template> </ul> </div> var linklist = new Vue({ el: '#linklist', data: { itemlist: '' }, // methods: { listshow: function() { this.itemlist = items; // } } });

65

66 <linklist></linklist> <script type="riot/tag"> <linklist> <button onclick={listshow}> </button> <ul> <li each={ this.items }><a href="{ link }">{ title }</a></li> </ul> listshow() { this.items = items // } </linklist> </script> <script src="riot%2bcompiler.min.js"></script> <script>riot.mount('linklist')</script>

67

68 *

69

70

71

PowerPoint プレゼンテーション

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

More information

( )

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

More information

vuejs_meetup.key

vuejs_meetup.key Rails Vue.js Vue.js Meetup 2015-01-28 @kazupon About Me @kazupon CUUSOO SYSTEM Vue.js Plugin vue-i18n: https://github.com/kazupon/vue-i18n vue-validator: https://github.com/kazupon/vue-validator Vue.js

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

スライド 1

スライド 1 XPages.JP はこう作られた! - テクテク Lotus 技術者夜会 -(2016 年 6 月 17 日 ) 株式会社エフ御代政彦ケートリック株式会社田付和慶 AGENDA テーマの選定 サイトマップ機能 サンプルAPP ギャラリー機能 管理機能 おまけ テーマの選定 < 選定基準 > 1. XPAGES だなってバレないクールなデザイン 2. フリーのデザインテンプレートから探す 3. Bootstrapを標準で搭載

More information

ウェブデザイン技能検定学科試験 2 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 A/B テストとは 複数の案を比較して定量的に評価するテストである 第 2 問 KVS は MySQL などのデータベースの標準的な格納形式である 第

ウェブデザイン技能検定学科試験 2 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 A/B テストとは 複数の案を比較して定量的に評価するテストである 第 2 問 KVS は MySQL などのデータベースの標準的な格納形式である 第 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 A/B テストとは 複数の案を比較して定量的に評価するテストである 第 2 問 KVS は MySQL などのデータベースの標準的な格納形式である 第 3 問 HTML 5.2 では dl 要素の内部において div 要素を使用し dt 要素と dd 要素をグループ化することができる 第 4

More information

橡点検記録(集約).PDF

橡点検記録(集約).PDF 942.8.8.8.7 671 86 11 1 9 9 9 1 1,792 7,23 2,483 1,324 2,198 7,23 82 7,23 6,327 9,22 9,713 8,525 8,554 9,22. 8,554. 1,79 9,713 95 947 8,525.. 944 671 81 7 17 1,29 1,225 1,241 1,25 1,375 9.3 23,264 25,

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ST&E API 導入手順書 ver1.0.1 Save Time & Effort! -1- - 目次 - P3 前提 P4 Step1 P5 Step2 P6 Step3 P7. P8 導入の前提条件導入対象のHTMLにリンクを設定導入対象のHTMLにhidden 項目を設定 Step1で命名したjsファイルとその中身を作成アップロードお問い合わせ -2- 前提条件 1. ST&E APIのお申込みがしていること

More information

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

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

More information

P44:STEP ul.menu li{ ul.main li{ /* メニューボタンロールオーバー */ ul.menu li a:hover{ background:url("btn_on.png"); ul.menu li a{ ul.main li a{ /* メニューボタンロー

P44:STEP ul.menu li{ ul.main li{ /* メニューボタンロールオーバー */ ul.menu li a:hover{ background:url(btn_on.png); ul.menu li a{ ul.main li a{ /* メニューボタンロー jquery デザインブック仕事で絶対に使うプロのテクニック お詫びと訂のお知らせ jquery デザインブック仕事で絶対に使うプロのテクニック をご購入いただきまして 誠にありがとうござ います 本書の P42 49 に掲載している CHAPTER01 02 サブメニューを表示する階層型メニュー の解説内容にりがございました 本記事の作例は Internet Explorer 6 ではしく動作いたしません

More information

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

Web±ÜÍ÷¤Î³Ú¤·¤µ¤ò¹â¤á¤ëWeb¥Ú¡¼¥¸²ÄÄ°²½¥·¥¹¥Æ¥à Web Web 2 3 1 PC, Web, Web. Web,., Web., Web HTML, HTML., Web, Web.,,., Web, Web., Web, Web., Web, Web. 2 1 6 1.1.................................................. 6 1.2.................................................

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

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

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

More information

Webデザイン論

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

More information

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

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

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

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

More information

ch31.dvi

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

More information

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

3 top#index 1 web router.ex web/router.ex 12 scope /, NanoPlanner do 13 pipe_through browser get /, TopController, index 16 end URL / to 3 NanoPlanner SASS Bootstrap Font Awesome 3.1 RAVT 6 RAVT route action view template Phoenix top index top index top#index RAVT URL / top#index top#index top 23 3 top#index 1 web router.ex web/router.ex

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

More information

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン

More information

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

More information

WPD2009_Plone3_theme-2.key

WPD2009_Plone3_theme-2.key http://ciel-serein.jp/study/wpd2009/wpd2009_plone3_theme.pdf/view http://ciel-serein.jp/study/wpd2009/wpdj-theme.zip/view $~/Plone-3.1/zinstance/buildout.cfg [instance] debug-mode = on $cd ~/Plone-3.1/zinstance

More information

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

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

More information

IPSJ SIG Technical Report Vol.2014-HCI-157 No.26 Vol.2014-GN-91 No.26 Vol.2014-EC-31 No /3/15 1,a) 2 3 Web (SERP) ( ) Web (VP) SERP VP VP SERP

IPSJ SIG Technical Report Vol.2014-HCI-157 No.26 Vol.2014-GN-91 No.26 Vol.2014-EC-31 No /3/15 1,a) 2 3 Web (SERP) ( ) Web (VP) SERP VP VP SERP 1,a) 2 3 Web (SERP) ( ) Web (VP) SERP VP VP SERP VP Web 1. Web Web Web Web Google SERP SERP 1 1 2-1-1, Hodokubo, Hino, Tokyo 191 8506, Japan 2 4-12-3, Higash-Shinagawa, Shinagawa, Tokyo 140 0002, Japan

More information

untitled

untitled 2005 HP -1-2005 8 29 30 HP 1 ( ) 1. Web 2. HTML HTML 1 PDF HTML 1 Web HTML http://www.media.ritsumei.ac.jp/kodais2005 2 2.1 WWW HTML Hyper Text Markup Language) HTML Web HTML Internet Explorer http://www.ritsumei.ac.jp

More information

JavaScript の使い方

JavaScript の使い方 JavaScript Release10.5 JavaScript NXJ JavaScript JavaScript JavaScript 2 JavaScript JavaScript JavaScript NXJ JavaScript 1: JavaScript 2: JavaScript 3: JavaScript 4: 1 1: JavaScript JavaScript NXJ Static

More information

スライド 1

スライド 1 Sencha Touch 入門 2011/11 伊藤雄大 ( 株 ) コア北海道カンパニー ビジネスソリューション部 IT ビジネスチーム アジェンダ 1. 会社紹介 自己紹介 2. なぜWebUI? 3. Sencha Touch ってどんな感じ? 4. Sencha Touch デモ 5. どうやって実装するの?- 基礎編 6. どうやって実装するの?- 応用編 7. 今回の開発で困ったこと 会社紹介

More information

Microsoft Word - W3C's_ARIA_Support

Microsoft Word - W3C's_ARIA_Support W3C の ARIA (Accessible Rich Internet Applications) 対応 : Windows Internet Explorer 8 Beta 1 for Developers Web 作業の操作性を向上 2008 年 3 月 詳細の問い合わせ先 ( 報道関係者専用 ) : Rapid Response Team Waggener Edstrom Worldwide

More information

第 10 問 DOM(Document Object Model) は JavaScript 以外のプログラミング言語からも操作が可能である 第 11 問 HTTP ステータスコードのうち 503 Service Unavailable はリソースへのアクセスが拒否されたことを示して いる 第 12

第 10 問 DOM(Document Object Model) は JavaScript 以外のプログラミング言語からも操作が可能である 第 11 問 HTTP ステータスコードのうち 503 Service Unavailable はリソースへのアクセスが拒否されたことを示して いる 第 12 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 getelementsbyclassname() メソッドは 引数のクラス名で得られる最初の要素のみを返す 第 2 問 html 要素の manifest 属性は HTML5 で追加されたが HTML5.1 では削除された 第 3 問 画像のデータ形式には ビットマップデータ ベクタデータ という

More information

ohp.mgp

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

More information

untitled

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

More information

Webプログラミング演習

Webプログラミング演習 Web プログラミング演習 STEP9 Ajax を利用した RSS フィードのタイムライン表示 Ajax Asynchronous JavaScript + XML クライアントサイド ( ブラウザ内 ) で非同期サーバ通信と動的ページ生成を組み合わせる技術の総称 ウェブアプリケーションの操作性向上 ( ページ遷移を伴わない ) サーバとの小刻みな通信 = 必要なデータを必要な時に要求 ( リクエスト

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

Microsoft PowerPoint _2b-DOM.pptx

Microsoft PowerPoint _2b-DOM.pptx 要素ノードの参照 プロパティで参照可能な親 子 兄弟ノード 要素ノードの他に, テキストノード, ノード, コメントノードなど様々なノードが含まれる ( 処理中に判別が必要 ) 要素ノードのみ参照するプロパティ プロパティ 参照先 parentelement 親要素 firstelementchild 先頭の子要素 lastelementchild 末尾の子要素 nextelementsibng 直後の兄弟要素

More information

Web データ管理 HTML+CSS (7) (2 章 ) 2011/11/16( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/15

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

More information

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

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)

More information

d_appendixB-asp10appdev.indd

d_appendixB-asp10appdev.indd 付録 B jquery Visual Studio 00 ASP.NET jquery ASP.NET MVC Scripts jquery jquery-...js jquery jquery とは jquery JavaScript JavaScript jquery Ajax HTML 図 B- jqurey とブラウザの関係 Visual Studio 00 jquery JavaScript

More information

社葬事前手続き

社葬事前手続き 2 ... 4... 4... 5 1... 5 2... 5 3... 5 4... 5 5... 5 6... 5 7... 5 8... 6 9... 6 10... 6... 6 1... 6 2... 6 3... 7 4... 7... 8 1 2.... 8 2 2.... 9 3 4.. 3 4. 1 2 3 4 5 6 7 5 8 9 10 I 1 6 2 EL 3 4 24 7

More information

paper.pdf

paper.pdf Cop: Web 1,a) 1,b) GUI, UI,,., GUI, Java Swing., Web HTML CSS,. CSS,, CSS,.,, HTML CSS Cop. Cop, JavaScript,,. Cop, Web,. Web, HTML, CSS, JavaScript, 1., GUI, Web., HTML CSS (UI), JavaScript, Web GUI.

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

More information

_IMv2.key

_IMv2.key 飯島基 文 customb2b@me.com $ ssh ladmin@im.example.com $ cd /Library/Server/Web/Data/Sites/Default/ $ git clone https://github.com/msyk/inter-mediator.git

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

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

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

More information

untitled

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

More information

1 ななちゃんの IT 教室ウェブページを作ろうの巻 第 1 回ウェブページの構造 ( 見出し 改行 箇条書き ) を指定 (HTML) なな : これって 朝日新聞の ののちゃんの DO 科学 のパクリ? 先生 : パロディって言ってちょうだい 家政婦のミタ ( 家政婦は見た のパロディ ) クレ

1 ななちゃんの IT 教室ウェブページを作ろうの巻 第 1 回ウェブページの構造 ( 見出し 改行 箇条書き ) を指定 (HTML) なな : これって 朝日新聞の ののちゃんの DO 科学 のパクリ? 先生 : パロディって言ってちょうだい 家政婦のミタ ( 家政婦は見た のパロディ ) クレ ななちゃんの IT 教室 ウェブページを作ろうの巻 by nara.yasuhiro@gmail.com ウェブページを見るだけだったななちゃんが自分のホームページを作れるようになるまでのお話 第 0.7 版 2017 年 5 月 7 日 フリー素材 http://freeillustration.net もくじ第 1 回ウェブページの構造 ( 見出し 改行 箇条書き ) を指定 (HTML) 第

More information

New Interface Photo by hiroohi http://flickr.com/photos/rainboweyes/2747484161/ New Standard Photo by hiroohi http://flickr.com/photos/rainboweyes/2747484331/ New Technology Photo

More information

PowerPoint Presentation

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

More information

日 http://microformats.org/ 西 class class id class id title class id title rel class id 工 title rel

More information

SmartBrowser_document_build30_update.pptx

SmartBrowser_document_build30_update.pptx SmartBrowser Update for ios / Version 1.3.1 build30 2017 年 8 月 株式会社ブルーテック 更新内容 - 概要 ios Version 1.3.1 build28 の更新内容について 1. 設定をQRから読み込み更新する機能 2.URLをQRから読み込み画面遷移する機能 3.WEBページのローカルファイル保存と外部インテントからの起動 4.JQuery-LoadImageライブラリの組み込み

More information

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

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

More information

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

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

More information

javascript key

javascript key Associate Professor Department of International Social Studies KYOAI GAKUEN UNIVERSITY Email: ogashiwa@c.kyoai.ac.jp, ogashiwa@wide.ad.jp sample

More information

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

JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4. http://www1.iwate-ed.jp/ JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.d 5.4.e 5.5.a 5.5.b 5.5.c

More information

untitled

untitled FONT FACE=" " /FONT hp11.html FONT FACE=" " /FONT FONT FACE=" " HTML HP10.html HTML HTML HTML html head title /title font face=" " size="5" /fontbr font face=" " size="5" /fontbr font size="5" /fontbr

More information

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

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

More information

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

- 1 - - 0.5%5 10 10 5 10 1 5 1

- 1 - - 0.5%5 10 10 5 10 1 5 1 - - - 1 - - 0.5%5 10 10 5 10 1 5 1 - 2 - - - - A B A A A B A B B A - 3 - - 100 100 100 - A) ( ) B) A) A B A B 110 A B 13 - 4 - A) 36 - - - 5 - - 1 - 6-1 - 7 - - 8 - Q.15 0% 10% 20% 30% 40% 50% 60% 70%

More information

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

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

More information

Oracle HTML DBのテンプレート・カスタマイズ

Oracle HTML DBのテンプレート・カスタマイズ Oracle HTML DB 2003 10 Oracle HTML DB... 3... 3... 5... 5 1:... 6 2:... 6 3: 2... 7... 8... 8... 8 CSS JavaScript... 10 HTML DB... 11... 11 Oracle HTML DB 2 Oracle Corporation Customizing Templates in

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

6 (1) app.html.eex 28 lib/nano_planner_web/templates/layout/app.html.eex 27 <footer> Oiax Inc <%= this_year() %> Oiax Inc. 29 </footer>

6 (1) app.html.eex 28 lib/nano_planner_web/templates/layout/app.html.eex 27 <footer> Oiax Inc <%= this_year() %> Oiax Inc. 29 </footer> 6 (1) of_today 6.1 Copyright 2017 lib/nano_planner_web/views layout_view.ex this_year/0 lib/nano_planner_web/views/layout_view.ex 1 defmodule NanoPlannerWeb.LayoutView do 2 use NanoPlannerWeb, view 3 +

More information

目次 DEV for CITIZEN 操作マニュアルの記載内容 ページ数 DEV for CITIZEN について DEV for CITIZEN に係る機能概要およびアクセス方法について記載しています P2 データを確認してみよう DEV for CITIZEN にて公開されているデータの確認方法

目次 DEV for CITIZEN 操作マニュアルの記載内容 ページ数 DEV for CITIZEN について DEV for CITIZEN に係る機能概要およびアクセス方法について記載しています P2 データを確認してみよう DEV for CITIZEN にて公開されているデータの確認方法 DEV for CITIZEN 操作マニュアル 目次 DEV for CITIZEN 操作マニュアルの記載内容 ページ数 DEV for CITIZEN について DEV for CITIZEN に係る機能概要およびアクセス方法について記載しています P2 データを確認してみよう DEV for CITIZEN にて公開されているデータの確認方法について記載しています P5 アプリケーションを作ってみよう

More information

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

インターネットマガジン2003年11月号―INTERNET magazine No.106 M o v a b l e T y p e text/template & css design : visual design : layout adjustment : http://www.b-architects.com/ http://internet.impress.co.jp/im/200311mt/ 98 +++ internet magazine 2003.11 +++ 1 Part.1

More information

6 2 1

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

More information

第 10 問 ドライブバイダウンロード攻撃とは ウェブページにマルウェアを埋め込んでおき アクセスしてきたユーザに気づ かれないように そのマルウェアを自動的にダウンロードさせる攻撃である 第 11 問 HTML ドキュメント内で PHP コードを扱う場合 <!-- と --> の 2 つのタグで囲

第 10 問 ドライブバイダウンロード攻撃とは ウェブページにマルウェアを埋め込んでおき アクセスしてきたユーザに気づ かれないように そのマルウェアを自動的にダウンロードさせる攻撃である 第 11 問 HTML ドキュメント内で PHP コードを扱う場合 <!-- と --> の 2 つのタグで囲 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 VDT 作業に従事する者の心身の負担を軽減するためには 事業者が作業環境をできる限り VDT 作業に適した状況に整備するとともに VDT 作業が過度に長時間にわたり行われることのないように適正な作業管理を行うことが重要である 第 2 問 HTML 5.2 では dl 要素の内部に div 要素を配置することができる

More information

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

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

More information

CSSNite-LP54-kubo-ito.key

CSSNite-LP54-kubo-ito.key div { div { width: ; div { width: 100%; div { width: 100%; div { width: 100%!important; a { color: #000!important; .box { padding: 20px; border: 4px solid #666; h1 { color:

More information

2

2 1 2 3 4 5 6 7 8 tbody tr div [_im_enclosure] div [_im_repeater] span [_im_enclosure] span [_im_repeater] ol li ul li select option 9 10

More information

CSS Taichi Kaminogoya 2007-05-26T14:00:00+09:00 design de sign coration デザイン サイン 情報 をデコレーション 装飾 どれが重要なのかのサイン メッセージ CSS CSS CSS CSS デザイン 線や色でサイン 情報をイイトコロに配置 CSS CSS CSS { : ; { : ; { : ; { : ; CSS

More information

SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000

More information

Onsen UI について Onsen UI について UI フレームワークとは モバイルアプリを作成する場合 パソコン向けのアプリケーションとは異なり アイコンを多用したり ボタンを指で押しやすいサイズにしたりして 小さな画面の中にアプリの機能を盛り込む工夫が必要です これらをすべて CSS や

Onsen UI について Onsen UI について UI フレームワークとは モバイルアプリを作成する場合 パソコン向けのアプリケーションとは異なり アイコンを多用したり ボタンを指で押しやすいサイズにしたりして 小さな画面の中にアプリの機能を盛り込む工夫が必要です これらをすべて CSS や Onsen UI 提供元 : アシアル株式会社 目次 Onsen UI について UI フレームワークとは モバイルアプリのための UI フレームワーク Onsen UI サンプルアプリの紹介 Yes No チャート 道路標識暗記アプリ その他の使い方 新規プロジェクトの作成方法 テーマカラーを変える方法 Onsen UI について Onsen UI について UI フレームワークとは モバイルアプリを作成する場合

More information

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

Web情報システム 第1章~第5章 Web 情報システム マルチメディア情報通信ソフトウェア 第 1 章 ~ 第 4 章 1 Web 情報システム マルチメディア情報の流通 Web 情報システム概論 デジタルメディアの特徴 デジタルメディアの記述 HTML (Hyper Text Markup Language) CSS (Cascading style sheet) デジタルメディアの制御 JavaScript コンピュータとネットワークの基礎

More information

Copyright

Copyright 2008 pdf Copyright 2008 2008 Copyright 2008 2008 2 SQL DNS Copyright 2008 2008 3 SQL Copyright 2008 2008 1 SQL 1.1 SQL 1.2 : 1.3 SQL 1.4 SQL Copyright 2008 2008 5 1.1 SQL Copyright 2008 2008 6 1.1 SQL

More information

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

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

JavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç

JavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç JavaScript 2009 5 28 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................

More information

スライド 1

スライド 1 ( おやまだあきひろ ) 小山田晃浩 ( 株 ) ピクセルグリッド フロントエンドエンジニア (HTML, CSS, JavaScript, SVG) twitter@yomotsu HTML5 と CSS3 と Dreameraer ネタ 連載してます http://goo.gl/8cpxb このセッションの流れ 1. 事例について 2. メディアクエリーを利用した振り分け 3. 振り分け後のスタイル適用

More information

第 8 回の内容 クライアントサイド処理 JavaScript の基礎

第 8 回の内容 クライアントサイド処理 JavaScript の基礎 第 8 回の内容 クライアントサイド処理 JavaScript の基礎 クライアントサイド処理 クライアントサイド / サーバサイド クライアントサイド サーバサイド Web ブラウザ Web サーバ 動的な Web ページ Web ブラウザ Web サーバ Web ブラウザ Web サーバ リソース生成 描画 描画 リソース生成 再描画 描画 再描画 描画 リソース生成 再描画 動的な Web ページとページ遷移

More information

ウェブデザイン技能検定学科試験 3 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 head 要素は body 要素の前に記述する 第 2 問 アクセシビリティの観点から img 要素の alt 属性には何らかのテキストを入力することが

ウェブデザイン技能検定学科試験 3 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 head 要素は body 要素の前に記述する 第 2 問 アクセシビリティの観点から img 要素の alt 属性には何らかのテキストを入力することが 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 head 要素は body 要素の前に記述する 第 2 問 アクセシビリティの観点から img 要素の alt 属性には何らかのテキストを入力することが必須である 第 3 問 画像データであれば 拡張子を.jpeg に変更すれば JPEG 形式のファイル形式となる 第 4 問 擬似要素 :hover

More information

photo by odysseygate 2

photo by odysseygate 2 photo by odysseygate 1 photo by odysseygate 2 3 4 5 6 photo by odysseygate 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 photo by odysseygate 26 27 photo by odysseygate 28 29 30 31 32 33 34 photo

More information