テキスト

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "テキスト"

Transcription

1

2

3 インターネットの歴史 コンピューターは第2次大戦中のミサイル弾道計算の為に急速に発展しました 同様にコンピューター ネットワークも どこか一台のコンピューターが破壊されても 他のコンピューター同士の通信は維持さ れるように設計されました これが今のインターネットの原型であるアーパネットです その後 研究所 や大学 国の機関を中心にそれらを相互に接続し広まっていき 一般の商用利用が開始され 現在のイン ターネットが形成ました インターネットの今 インターネットの存在はすでにメディアではなくインフラ infrastructure 電 気やガス 水道といった 生活になくてはならないライフライン となってい ます 中でもWebサイトを中心としたコミュニケーションは ホームページを 見る から Webサービスを利用する へと大きく変化しました Webサイトはユーザ側に依存したメディアです どんな方法でそのWebサイト にアクセスされるかは制作側には解りません ハードウェアの低価格化 定額 の携帯電話回線や公衆無線LANなどにより スマートフォンやタブレットなど 普通の人にとって操作が簡単な端末 が加速度的に普及しています それにともないWebサイトに求め られるものも変わってきましたが Webデザインの本質が情報の整理であることに変わりはありません インターネットへの接続方法 インターネットは一般的にISP Internet Service Provider インターネット サービスプロバイダ と呼ばれるインターネット網への接続業者と契約して 利用します ISPへはADSLなどの電話回線 光ファイバー 携帯電話回線など を使用して接続します インターネットの普及率 インターネットは世界中に広がっています 2012年現在で世界人口の4割近くが 何らかの方法でイン ターネットに接続しています 日本では携帯電話が広く普及しているおかげで 人口の9割以上がイン ターネットに接続可能な状況となっています -3 -

4

5

6 スマートデバイス スピーカー 加速度センサ カメラ タッチパネル 位置情報 GPS 無線LAN マイク iphone Androidに代表されるスマートフォンや ipadやkindleなどのタブレットなど 従来のパソコン ではない端末が普及しました これらの端末は画面を触る 端末を傾ける 回すというような直感的 人 間的な動き で簡単な操作方法が多く キーボードとマウスで操作する従来のパソコンより 操作に専門 知識を必要としません タッチパネル 主体となる入力デバイスは タッチパネル です マウスカーソルでは細かな操作が可能でしたが 指先 での操作は 触っている下は見えないため大きなボタンを作るなどの考慮が必要です マウス操作 クリックした場所は見える 操作する部分 マウス と見る部分 ディスプレイ は離れている ドラッグ&ドロップなどの複雑な操作もユーザに要求できる タッチパネル 指の真下は見えない 操作する部分と見る部分 ディスプレイ が同じ 複数指での拡大縮小 回転など 新しい操作方法がある -6 -

7

8

9 Webサイト制作で使用するソフトウェア 写真などの画像ファイル イラストや地図 映像や音声 素材の編集 Adobe Photoshop Adobe Illustrator Adobe Premiere 素材の管理 確認 文章や表など Adobe Bridge Word / Excel HTML/CSSの作成 Adobe Dreamweaver Webサイトの公開 Webサーバー -9 - 表示や動作の確認

10 商品を撮影する 商品を美しく 美味しそうに撮影する最大のポイントは明るいところで撮影することです 近くにある光で いちばんよいのは太陽光です 窓際の日陰など 直射日光が入らない範囲で なるべく 明るい場所をみつけ 被写体が陰にならないようにして撮影します 写真を上手く撮る方法はたった1つ たくさん撮影することです デジタルカメラはフィルムなどの消耗 品が不要なので 撮影にかかるコストは非常に低くなっていますから なるべく多くシャッターをきって みましょう 被写界深度 ピントが合っている範囲を被写界深度といいます 一眼レフカメラなどを使うと 比較的簡単に被写界深 度の調整ができるので 背景がボケた写真を撮影できます シャッタースピード シャッタースピードを遅くすると 動いているものを撮るときに 残像を意図的に作ることができます 逆にシャッタースピードを早くすると 不自然なぐらいに時間を止めることも可能になります

11

12 画面の大きさと画像の解像度 解像度 1990年頃のディスプレイは 解像度が72dpi dots per inch ディーピーアイ でした これは1インチ 約2.54cm 四方の中に72 72個のピクセル ドット がある状態を表しています 現在のディスプレ イの多くは72dpiより遙かに高精細な表示をしています 昔のパソコン 72dpi 一般的な紙の印刷物 ipod Touch dpi 326dpi 縦1136ピクセル 横640ピクセル dpiが大きくなると 文字を同じサイズで表示しても 実際の見た目は小さくなります また 一般的な 画像ファイルは今でも72dpiで作ります 画面サイズ ディスプレイにはいろいろなサイズがあります 自分が制作しているWebサイトを人が見たとき どれく らいのサイズで見えているのかを 物理的な大きさと 解像度の両方を考慮する必要があります 本来的 にはそれぞれのモニターの特性にあわせたデザイン 表現を考えるべきなのですが実際には不可能です どのくらいの画面サイズを基準に制作すればよいか もしなにも判断材料がないならXGA 横1024ピクセ ル 縦768ピクセル にしてみましょう これは2010年頃に市販された最低スペックのノートパソコンの 画面サイズです この画面サイズでWebブラウザを画面いっぱいに表示すると Webページの横幅が940 ピクセル程度になります これくらいで作っておくとiPhoneやiPadなどでも問題なく表示できます 1024ピクセル 960ピクセル程度 人の目は横に2つついているため 大型のモニターは横長がものが見やすく 手で持つ端末は片手で持っ たり 立ったままでの操作のしやすから縦長が多くなります どんな画面サイズでも重要なのは意匠 雰 囲気が見る側に伝わるようにすることです

13 Adobe Photoshopで画像加工 Adobe Photoshopの画面構成 ツールパネル ドキュメントウィンドウ レイヤーパネル デジタルカメラで撮影した画像は そのままではWebサイトで使用するには大きすぎるため Photoshop で使用したいサイズに加工します 写真の一部分を切り抜いたり 色を調整することも可能です 他のAdobe製品と同様に パネルの位置や大きさなどは自由に調整できます

14

15

16

17 トリミング 画像の中から必要な部分を切り抜きます ツールパレットから切り抜きツールを選択 ドラッグで範囲を指定して をクリックすると切り抜きが実行されます 画像の上でダブルクリックでも同じ操作になります

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> </title> 6 </head> 7 8 <body> 9 </body> 10 </html> 11

34 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>t </title> 6 </head> 7 <body> 8 <header> 9 10 </header> <div class="mod-multicolumn"> 13 <div class="cola"> 14 a 15 </div> 16 <div class="colb"> 17 b 18 </div> 19 </div> 20 <footer> </footer> 23 </body> 24 </html> 25

35 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>t </title> 6 </head> 7 <body> 8 <header> 9 10 </header> <div class="mod-multicolumn"> 13 <div class="cola"> 14 a 15 </div> 16 <div class="colb"> 17 <p> T 3 XS S 2 <br> 18 </p> 19 <p>s 42cm 64cm <br> 20 XS 36cm 61cm <br> 21 XS S </p> 22 <p> </p> 23 <p> 6,700 ( )</p> 24 </div> 25 </div> 26 <footer> </footer> 29 </body> 30 </html> 31 MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1

36

37

38

39 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>t </title> 6 </head> 7 <body> 8 <header> 9 <img src="logo.png" width="320" height="98"> 10 </header> <div class="mod-multicolumn"> 13 <div class="cola"> 14 <img src="img_p1.jpg" width="320" height="200"></div> 15 <div class="colb"> 16 <p> T 3 XS S 2 <br> 17 </p> 18 <ul> 19 <li>s 42cm 64cm </li> 20 <li>xs 36cm 61cm </li> 21 </ul> 22 <p> XS S </p> 23 <p> </p> 24 <p><strong> 6,700 ( )</strong></p> 25 </div> 26 </div> 27 <footer> </footer> 30 </body> 31 </html> 32

40

41 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>t </title> 6 </head> 7 <body> 8 <header> 9 <img src="logo.png" width="320" height="98"> 10 </header> <div class="mod-multicolumn"> 13 <div class="cola"> 14 <img src="img_p1.jpg" width="320" height="200"></div> 15 <div class="colb"> 16 <p> T 3 XS S 2 <br> 17 </p> 18 <ul> 19 <li>s 42cm 64cm </li> 20 <li>xs 36cm 61cm </li> 21 </ul> 22 <p> XS S </p> 23 <p> </p> 24 <p><strong> 6,700 ( )</strong></p> 25 <form method="post" action=""> 26 <select> 27 <option value="" selected="selected"></option> 28 <option value=""></option> 29 <option value=""></option> 30 <option value=""></option> 31 </select> 32 <input type="submit" value=" "> 33 </form> 34 </div> 35 </div> 36 <footer> </footer> 39 </body> 40 </html> 41 MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1

42

43 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>t </title> 6 </head> 7 <body> 8 <header> 9 <img src="logo.png" alt=" "> 10 </header> 11 <h1>t </h1> 12 <div class="multicolumn"> 13 <div class="cola"> 14 <a href="img_p1.jpg"><img src="img_p1.jpg" width="320" ></a> 15 </div> 16 <div class="colb"> 17 <p> T 3 XS S 2 <br> 18 </p> 19 <ul> 20 <li>s 42cm 64cm </li> 21 <li>xs 36cm 61cm </li> 22 </ul> 23 <p> XS S </p> 24 <p> </p> 25 <p><strong> 6,700 ( )</strong></p> 26 <form method="post" action="/"> 27 <select> 28 <option value="" selected="selected"></option> 29 <option value=""></option> 30 <option value=""></option> 31 <option value=""></option> 32 </select> 33 <input type="submit" value=" "> 34 </form> 35 </div> 36 </div> 37 <footer> </footer> 40 </body> 41 </html> 42 MacOS:Users:uedakimihiro:Documents:job:1_now: ::step1:sample.html: 1/1

44

45

46

47

48 "utf-8"; 2.multiColumn { 3 margin-bottom: 2em; 4 overflow: hidden; 5 } 6 : 1/1

49

50

51

52 "utf-8"; 2.multiColumn { 3 margin-bottom: 2em; 4 overflow: hidden; 5 } 6.multiColumn.colA { 7 float: left; 8 padding-right: 80px; 9 } 10.multiColumn.colB { 11 overflow: auto; 12 } 13 strong { 14 font-size: 114%; 15 } 16

53

54 "UTF-8"; 2 body { 3 margin: 0 auto; 4 width: 960px; 5 padding: 0 24px; 6 font-size: 14px; 7 line-height: 1.5em;} 8 h1 { 9 font-size: 114%; 10 margin-bottom: 1em;} 11 p { 12 margin: em 0;} 13 ul { 14 list-style: none; 15 margin: 0 0 1em 0; 16 padding: 0;} 17 strong { 18 font-size: 114%;} 19 img { 20 border: none;} 21 input, select { 22 margin: 0; 23 font-size: 100%; 24 line-height: 1.5; 25 vertical-align: middle;} /* header footer */ 28 header { 29 border-bottom: 1px solid gray; 30 margin-bottom: 2em; 31 padding: 2em 0 2em;} 32 footer { 33 font-size: 86%; 34 border-top: 1px solid gray; 35 padding: 1em 0;} /* multi column modules */ 38.multiColumn { 39 overflow: hidden; 40 margin-bottom: 2em;} multiColumn.colA{ 43 float: left; 44 margin-right: 80px;} multiColumn.colB { 47 overflow:auto;} 48 MacOS:Users:uedakimihiro:Documents:job:1_now: ::step1:-style.css: 1/1

55

56 1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>t </title> 6 <meta http-equiv="x-ua-compatible" content="ie=edge"> 7 <meta name="format-detection" content="telephone=no"> 8 <meta name="viewport" content="width=device-width"> 9 <link rel="stylesheet" media="all" href="shared/css/import.css"> 10 </head> 11 <body> 12 <div class="mod-pagewrapper"> 13 <header class="mod-pageheader"> 14 <h1 class="mod-pageheader-logo"><a href="#" class="hoveropacity"><img 1 src="shared/images/logo.png" alt=" "></a></h1> 15 /* structure setting */ 2 <ul class="mod-pageheader-menu"> 16 /* mod-pagewrapper */ 3 <li><a href="#" class="cart hoveropacity"> </a></li> 17.mod-pageWrapper { 4 <li><a href="#" class="help hoveropacity"></a></li> 18 text-align: left; 5 </ul> 19 margin: 0 auto; 6 </header> 20 padding: 0 24px; 7 <!--/mod-pageheader--> 21 max-width: 960px; 8 <div class="mod-pagecontent"> 22 } <div class="mod-topicpath"> screen and (max-width: 687px) { 11 <ul> 25.mod-pageWrapper { <li><a href="#"> </a></li> padding: 0 12px; <li><a href="#">t </a></li> min-width: 320px; <li class="current">t </li> } </ul> } </div> /* mod-pageheader */ <!--/mod-topicpath--> mod-pageHeader { border-bottom: 2px solid silver; <div class="mod-pagecontent-main"> margin-bottom: 2em; <h1 class="mod-heading">t </h1> padding: 2em 0 2em; } <div class="mod-multicolumn"> mod-pageHeader.mod-pageHeader-logo { <div class="mod-multicolumn-cola"> float: left; <div class="mod-figure"><img src="shared/images/img_p1.jpg" alt=" 24 } " width="640" height="400"></div> 25

57 197 } 198 #scaling_imgs.inactive { 199 display: block; 200 } 201 #scaling_imgs img { 202 cursor: pointer; 203 } /*clearfix*/ 206.clearfix,.mod-multiColumn,.mod-multiColumn2,.mod-thumbBlock { 207 _overflow: visible; 208 _height: 1px; 209 zoom: 1; 210 } 211.clearfix:after,.mod-multiColumn:after,.mod-multiColumn2:after,.modthumbBlock:after { 212 content: "."; 213 display: block; 214 visibility: hidden; 215 clear: both; 216 height: 0px; 217 font-size: 0px; 218 } /*cart CSS3 btn*/ 221.add2cart { 222 color:#66523d; 223 cursor:pointer; border-radius:6px; 226 -moz-border-radius:6px; 227 -webkit-border-radius:6px; border:1px outset #e8e8e8; 230 padding:12px 8px 10px 46px; background: url(../images/cart.png) 10px 50% no-repeat #f4f4f5; 233 background: url(../images/cart.png) 10px 50% no-repeat,-webkitgradient( linear, left top, left bottom, color-stop(37%, #ffffff), colorstop(68%, #f4f4f5) ); 234 background: url(../images/cart.png) 10px 50% no-repeat,-moz-lineargradient( center top, #ffffff 37%, #f4f4f5 68% ); 235 background: url(../images/cart.png) 10px 50% no-repeat,-ms-lineargradient( top, #ffffff 37%, #f4f4f5 68% ); 236 } MacOS:Users:uedakimihiro:Documents:job:1_now: ::html:step4:shared:css:modules.css:

58 1 $(function(){ 2 reset($('#scaling_imgs p')); 3 4 $('#scaling_imgs p').click(function(){ 5 var activeimg = $(this).html(); 6 7 //reset 8 reset($('#scaling_imgs p')); 9 $('.scaling_imgs_display').remove(); $(this).removeclass('inactive').addclass('active'); 12 $('#scaling_imgs').prepend('<div class="scaling_imgs_display">'+acti veimg+'</div>').addclass('show'); $('.scaling_imgs_display').click(function(){ 15 reset($('#scaling_imgs p')); 16 $(this).remove(); 17 $('#scaling_imgs').removeclass('show'); return false; 20 }); return false; 23 }); function reset(t){ 27 t.each(function(){ 28 $(this).removeclass('active').addclass('inactive'); 29 }); 30 } });

59 "utf-8"; 2 "basic.css"; "structure.css"; "modules.css";

60

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

経営論集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

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

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

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 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

CSSの基礎

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

More information

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

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

クリック クリック リンクを 張 るためのタグ タグ <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

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

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

...... @media only screen and (max-width: 768px) {...... } RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iphone ipod ipad Android IEMobile) [NC] RewriteRule ^$ /sp/ [R,L]

More information

電 子 商 取 引 (EC)サイト 制 作 指 導 書 はじめに Apple の imac を 始 めとして 各 社 から 簡 単 に 使 えるパソコン が 発 売 されるようになり ようやく 各 家 庭 にパソコンが 普 及 するようになりました さらにハードウェアの 低 価 格 化 定 額 性

電 子 商 取 引 (EC)サイト 制 作 指 導 書 はじめに Apple の imac を 始 めとして 各 社 から 簡 単 に 使 えるパソコン が 発 売 されるようになり ようやく 各 家 庭 にパソコンが 普 及 するようになりました さらにハードウェアの 低 価 格 化 定 額 性 電 子 商 取 引 (EC)サイト 制 作 指 導 書 制 作 :アドビ システムズ 株 式 会 社 監 修 : 東 京 都 立 第 四 商 業 高 等 学 校 校 長 大 林 誠 先 生 電 子 商 取 引 (EC)サイト 制 作 指 導 書 はじめに Apple の imac を 始 めとして 各 社 から 簡 単 に 使 えるパソコン が 発 売 されるようになり ようやく 各 家 庭 にパソコンが

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

第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

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

2,700,000 26,800,000 5 - - jquery Mobile - - - - jquery Mobile - - Objective-C / 30% Android - - jquery Mobile - - - - jquery Mobile - - iphone ipod UI jquery Mobile Gallery http://www.jqmgallery.com/

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

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

1/2

1/2 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト (2) 1 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト HTMLの 基 礎 知 識 (2) 1 画 像 の 表 示 HPに 画 像 を 表 示 させてみる まず HTML 文 書 と 同 じフォルダ 内 にJPEGファイル( 拡 張 子.jpg )を1 個 準 備 する ( 画

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. デジタル押し花の作り方 3 2. デジタル押し花をきれいに仕上げる方法 まとめ 課題にチャレンジ 19 レッスン内容 デジタル押し花 マイクロソフト社のワープロソフト Word 2010( これ以降 Word と記述します ) の図ツールに搭載されている [ 背景

目次 1. デジタル押し花の作り方 3 2. デジタル押し花をきれいに仕上げる方法 まとめ 課題にチャレンジ 19 レッスン内容 デジタル押し花 マイクロソフト社のワープロソフト Word 2010( これ以降 Word と記述します ) の図ツールに搭載されている [ 背景 le Word で楽しむデジタル押し花 Sa mp Word の画像加工 1 本テキストの作成環境は 次のとおりです Windows 7 Home Premium Microsoft Word 2010 画面の設定 解像度 1024 768 ピクセル 本テキストは 次の環境でも利用可能です Windows 7 Home Premium 以外のオペレーティングシステムで Microsoft Word

More information

Adobe® Corporate Template 2005

Adobe®  Corporate Template 2005 Dreamweaver CS3 による CSS デザイン 入 門 小 松 学 史 アドビ 認 定 インストラクター(ACI) 1 Who is this guy? 小 松 学 史 アクティブファクター Dreamweaverおよび Flash アドビ 認 定 インストラク ター(ACI) 2000 年 よりフリーランスとして マルチメディアコン テンツ Web サイト 制 作 に 携 わる 現 在

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

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

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

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

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

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

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

HTML+CSS_Lesson03_2s.indd

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

More information

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc)

(Microsoft Word - \203u\203\215\203O\215\354\220\254.doc) ブログをカスタマイズ! ~HTML HTML CSS を 使 ってブログを 自 分 の 好 みにしちゃおう ~ ブログを 登 録 しよう! ブログってなんだろう? ブログとはインターネット 上 で 管 理 者 が 記 事 を 投 稿 する 私 的 ニュースサイト あるいは 日 記 的 なもののこと 個 人 のホームページを 持 たなくても 簡 単 に 自 分 が 書 きたいことを 作 って 載 せることができる

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

おすすめページ

おすすめページ 4-5 第 4 章 高 度 なリストのデザイン スマートフォン 向 けのCSSを 読 み 込 む スマートフォンのように 画 面 サイズの 小 さい 端 末 で 見 たときは 専 用 のCSSを 読 み 込 むように します 画 面 サイズが 小 さいときはレイアウトを 変 更 する スマートフォンなど パソコンに 比 べて 画 面 の 小 さい 端 末 で Web サイトを 閲 覧 しようとすると

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

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

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

More information

ホームページの作成

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

More information

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

More information

untitled

untitled MoogaOne 1. MoogaOne... 1 2. MoogaOne... 1 3.... 1 4.... 1 5.... 2 6.... 2 1.... 2 2.... 2 3. Template.htm... 2 4. index.htm... 4 [ ]... 4 5.... 4 6.... 6 7.... 6 8.... 6 [Template.htm Template-e.htm

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

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

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

More information

目次 1. 動画再生の機能 3 2. 動画を再生するスライドの作成 7 3. まとめ 課題にチャレンジ 19 レッスン内容 ムービーの中で動画を再生するスライドの作成 多くのデジタルカメラには動画撮影機能が搭載されています PowerPoint にはデジタルカメラで撮影した動画をスライド

目次 1. 動画再生の機能 3 2. 動画を再生するスライドの作成 7 3. まとめ 課題にチャレンジ 19 レッスン内容 ムービーの中で動画を再生するスライドの作成 多くのデジタルカメラには動画撮影機能が搭載されています PowerPoint にはデジタルカメラで撮影した動画をスライド PowerPoint で楽しむムービー作成講座 第 11 回 動画を再生するスライドの作成 PowerPoint で楽しむムービー作成講座 では 12 回に分けて デジタルカメラの写真や動画を 素材に ムービー作成ソフトを使用せずに PowerPoint 2010 だけでオリジナルムービーを作成す る方法を紹介します 本テキストの作成環境は 次のとおりです Windows 7 Home Premium

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

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

CSS3

CSS3 オレたちAndroid CSS @media only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;!

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

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

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

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

More information

Microsoft PowerPoint - HTML1復習_1021.ppt

Microsoft PowerPoint - HTML1復習_1021.ppt HTML-Ⅱ(HTML 文 書 構 造 編 ) 3-1 HTML 基 本 構 造 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

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

スターターガイド

スターターガイド PC は Wnidows OS のものをご用意下さい Smile Memory は Windows OS で動作することを想定して作られています Apple 社の MAC など OS が異なる環境での実施は不具合の原因となりますのでご遠慮ください 推奨スペック Chrome をダウンロードしてインストールして下さい Chrome Chrome とは世界中で使われている Google 社が提供するブラウザ

More information

forever朝活

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

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

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

演 習 室 の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

Microsoft Word - GISA2007moblog.doc

Microsoft Word - GISA2007moblog.doc 結果の上位に出す PageRank という方法により 人々 が必要としているページを高い確率で探し出すこと を可能とした Google マップは 2005 年から米国で 始まり キーワード検索を行うと 一定の地域内の 駅 店 学校など 目印となる情報を検索し 地図 上に表示することができるものである Google マップ は Ajax Asynchronous JavaScript + XML 技術を使うことで

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

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

スライド 1

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

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

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

More information

使用説明書(Macintosh)

使用説明書(Macintosh) 4 5 CANON INC. 00 CT-785DPPMJ-000 4 5 4 5 4 5 4 5 4 5 4 5 4 4 5 4 5 4 5 はじめに 特定の箇所を拡大して見る 編集画面で画像を拡大して見る 拡大したい箇所をダブルクリックする やりたいこと 目次 ダブルクリック 4 5 基本操作 ダブルクリック 応用操作 編集画面が表示されます ダブルクリックした箇所を中心に 00 ピクセル等倍

More information

Microsoft Word - メディア技術基礎.docx

Microsoft Word - メディア技術基礎.docx メディア 技 術 基 礎 (Web) 脇 田 玲 先 生 (2010) 田 中 浩 也 (2011) HTML の 基 本 的 な 書 き 方 テキストエディタで index.html を 作 成 して 以 下 のサンプルを 入 力 してみましょう 始 めの 2 行 は HTML を 書 く 前 のおまじないの 様 なものです ここで 登 場 する HTML タグについての 説 明 は 以 下 の

More information

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き Ver.2 ユーザマニュアル スタートガイド 第 2 版 最 終 更 新 日 2011/7/12 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き

More information

簡単ラベル作成 印刷マニュアル

簡単ラベル作成 印刷マニュアル プリンタードライバーの設定 お気にいりファイルの設定方法 動画マニュアルの案内 印刷したい用紙に合わせてプリンタードライバーを設定します プリンタードライバーの設定は プリンターに付属の取扱説明書でご確認いただけます また 簡単ラベル作成のトップページにある動画マニュアル プリンタードライバーの設定 では 実際の動作を確認しながら設定することができます 2 [ 画像取り込み ] ボタンをクリックし

More information

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

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (6) ~POST (2011/06/22) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 入 力 された 文 字 を 受 け 取 りPOSTで 送 信 する 部 分 (post.htm)

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

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 株 式 会 社 アイ オー データ 機 器 CSS 解 説 書 目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css 3 6 7 27 31 33 36 39 2 1.CSSとは? 3 1.CSSとは?

More information

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方

目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方 Ver.2 ユーザマニュアル スタートガイド 第 5 版 最 終 更 新 日 2012/7/11 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方...

More information

写真をクリックすると 拡大表示される Flashフォーマット Flashフォーマットは 写真が自動または手動で切り替わっていく スライドショー形式の表示方法です ページ内の情報 が多い場合や 写真をイメージ的に見せたい場合に便利です iphoneをはじめとする一部のスマートフォンはflashをサポー

写真をクリックすると 拡大表示される Flashフォーマット Flashフォーマットは 写真が自動または手動で切り替わっていく スライドショー形式の表示方法です ページ内の情報 が多い場合や 写真をイメージ的に見せたい場合に便利です iphoneをはじめとする一部のスマートフォンはflashをサポー みんビズ制作講座 デザインカスタマイズ 全10回 第8回 フォトギャラリーを使ってみよう 執筆 赤間 公太郎 株式会社マジカルリミックス みんビズでは 写真を掲載する際には通常 写真 機能を使用します しかし 写真の点数が多くなればなるほど 管理 も大変になります 多くの写真を扱う場合は フォトギャラリー が便利です みんビズのフォトギャラリーの使い方を見てみましょう フォトギャラリー はどんな機能

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

WORD 98 入力の手引き

WORD 98 入力の手引き コンピュータ 基 礎 実 習 ( 上 級 ) 第 13 週 スタイルシートの 基 礎 今 回 の 授 業 は スタイルシート(CSS)の 使 い 方 を 解 説 します 1. CSS の 基 本 1.1. CSS とは CSS は Cascading Style Sheets の 略 で ウェブページの 見 栄 えを 設 定 するための 言 語 です CSS は 最 近 多 くのサイトで 使 用 され

More information

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. Crescent Eve ホームページ編集ソフト の使い方マニュアル 1 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 3 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 4 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

More information

1. ホームページ作成方法 CCNet では お客様が作成したホームページを公開できるスペースを 150MB 分ご用意しております お客様がお作りになったホームページを公開するには FTP クライアントというソフトウェアを使って HTML ファイル ( ホームページを表示するときに用いられる HTM

1. ホームページ作成方法 CCNet では お客様が作成したホームページを公開できるスペースを 150MB 分ご用意しております お客様がお作りになったホームページを公開するには FTP クライアントというソフトウェアを使って HTML ファイル ( ホームページを表示するときに用いられる HTM ホームページ制作 20170531-1 1. ホームページ作成方法 P 1 FTP クライアントでのアップロード方法のご紹介 2. アクセスカウンタの設定の仕方 P 4 1. ホームページ作成方法 CCNet では お客様が作成したホームページを公開できるスペースを 150MB 分ご用意しております お客様がお作りになったホームページを公開するには FTP クライアントというソフトウェアを使って HTML

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

第 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............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. TempNate [テンプネート] ホームページ テンプレート設置マニュアル TempNate テンプネート 1 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. STEP1ホームページ テンプレートを ダウンロードしよう 3 COPYRIGHT TempNate. ALL RIGHTS

More information

画像参照画像送り 5 画像下部に再生ボタンが表示されます 再生ボタンをクリックすると 自動コマ送りされます 1

画像参照画像送り 5 画像下部に再生ボタンが表示されます 再生ボタンをクリックすると 自動コマ送りされます 1 画像参照画像送り 画像参照の画像送り方法について説明します 画像上にカーソルを表示した状態で マウスのホイールボタンでスクロールする またはマウスの左ボタンで上下にドラックすると アクティブなシリーズの画像送りができます 1 カルテ タブや 画像 レポート タブから 画像アイコンをクリックします 画像が表示されます 3 画像が切り替わって表示されます シリーズの位置はバー上の で表示されます 2 画像上にカーソルを表示した状態で

More information

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

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

More information

1/2

1/2 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (4) 1 スタイル指定 1-1 段落を罫線 ( ボーダー ) で囲む 前回はスタイル指定を行なって段落に色をつけた 今度は罫線で囲んで見よう これまでと同様に 開始タグの中に罫線の指定を行なえばよい HTML 文書は次の通りである 下線部が罫線を引くためのスタイル指定である

More information

概 要 デジカメで 撮 影 した 写 真 をそのままページに 貼 り 付 けることも 可 能 ですが 少 し 手 を 加 えるだけで 随 分 と 見 た 目 がよくなります WebClusterは 画 像 の 簡 単 な 編 集 機 能 を 持 って いますので その 機 能 を 使 った 編 集

概 要 デジカメで 撮 影 した 写 真 をそのままページに 貼 り 付 けることも 可 能 ですが 少 し 手 を 加 えるだけで 随 分 と 見 た 目 がよくなります WebClusterは 画 像 の 簡 単 な 編 集 機 能 を 持 って いますので その 機 能 を 使 った 編 集 WebCluster スライドショーで 見 る 操 作 ガイド -13- 画 像 の 編 集 概 要 デジカメで 撮 影 した 写 真 をそのままページに 貼 り 付 けることも 可 能 ですが 少 し 手 を 加 えるだけで 随 分 と 見 た 目 がよくなります WebClusterは 画 像 の 簡 単 な 編 集 機 能 を 持 って いますので その 機 能 を 使 った 編 集 方 法

More information

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変

スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変 カスタマイズダウンロード 版 の 新 バージョン(2.13.3 ~)マニュアル レスポンシブ Web デザインのヘッダー 部 グローバルメニューは 右 上 の 3 本 線 アイコン に 格 納 され ます クリックすると メニュー 項 目 が 展 開 します 上 部 メニューはそれぞれ テキスト から 左 上 のアイコン( 画 像 )に 切 り 替 わります 管 理 画 面 でのブロック 配 置 ヘッダー

More information

目次 1. アニメーションの軌跡の概要と仕組み 3 2. パノラマ写真にアニメーションの軌跡を設定 まとめ 課題にチャレンジ 19 レッスン内容 アニメーションの軌跡の概要と仕組み アニメーションの軌跡とは スライドに配置したオブジェクト ( テキストや図形 画像など ) を

目次 1. アニメーションの軌跡の概要と仕組み 3 2. パノラマ写真にアニメーションの軌跡を設定 まとめ 課題にチャレンジ 19 レッスン内容 アニメーションの軌跡の概要と仕組み アニメーションの軌跡とは スライドに配置したオブジェクト ( テキストや図形 画像など ) を PowerPoint で楽しむムービー作成講座 第 9 回 アニメーションの軌跡で風景を見渡す PowerPoint で楽しむムービー作成講座 では 12 回に分けて デジタルカメラの写真や動画を 素材に ムービー作成ソフトを使用せずに PowerPoint 2010 だけでオリジナルムービーを作成す る方法を紹介します 本テキストの作成環境は 次のとおりです Windows 7 Home Premium

More information

nabebon-v97.indd

nabebon-v97.indd 4-1 Web Web Web Web This Is Not The Web. Web http://bradfrostweb.com/blog/post/this-is-the-web/ Web Web This Is the Web. Web http://bradfrostweb.com/blog/post/this-is-the-web/ 164 This Will Be the Web.

More information

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

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (8) (2011/07/06) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 前 回 の 課 題 POSTでデータが 送 信 されているかを 確 認 送 信 されていれば

More information

0序文‐1章.indd

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

More information

3 1 5 1.1....................................... 6 1.2.......................................... 6 1.3..................................... 7 1.4.................................... 8 1.4.1.............................

More information

pic.indd

pic.indd 4-7-1 写真の加工 写真の加工とは デジタルカメラ等で撮った画像 写真を PC のソフトで 見 やすく調整したりするものです ここでは Photoshop Elements の技法を使い画像の明るさや大きさ 文字の挿 入の仕方を説明します 画像編集は 大学の講義でも多く扱われています 画像の明るさ調整 画像の明るさの調整の仕方は [ クイッ ク補正 ] 機能を使います まず 補正したい画像を [

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

More information

PowerPoint プレゼンテーション

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

More information

html6-8

html6-8 -1- -2- -3- -4- -5- -6- -7- -8- -9- MEMO ... Textbook 4-10- MEMO ... -11- Textbook 3 リスト7-3 break.html 7 8 9 10 11 12 13 14 15 16 Lesson 7 テキストの修飾 こうしたことがありますので たとえウェブエディタ を使う場合でも ある程度HTMLの知識を持っていた

More information

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. TeraPad ホームページ編集ソフト の操作マニュアル 1 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 3 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 4 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

More information

Cascade Style Sheet

Cascade Style Sheet SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;

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