テキスト

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とメタデータ

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

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

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

More information

文 書 構 造 とスタイル

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

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

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

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

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

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

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

CSSの基礎

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

More information

■新聞記事

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

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

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

あいち電子自治体ガイドライン(第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

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

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

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

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

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

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

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

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード]

Microsoft PowerPoint - CSSガイドライン_201305.ppt [互換モード] COPYRIGHT 2013 CYBRiDGE CORPORATION COPYRIGHT 2013 CYBRiDGE CORPORATION 2 TEL [] COPYRIGHT 2013 CYBRiDGE CORPORATION 3 CSS CSS2.1 CSS3 CSS CSS3IEhtc js CSS ファイル 名 内 容 格 納 フォルダ common.css style.css xxx.css

More information

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

第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

1/2

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

More information

HTML+CSS_Lesson03_2s.indd

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

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

Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で

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

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

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

おすすめページ

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

More information

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body background-image: url("../images/wallpaper1.gif"); /* == 記事記入枠 container ( 全画面共通 )=========

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

(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

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23

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

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

Microsoft PowerPoint - HTML1復習_1021.ppt

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

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

ホームページの作成

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

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

Adobe® Corporate Template 2005

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

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

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.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

forever朝活

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

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

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

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

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

ic3_cf_p1-70_1018.indd

ic3_cf_p1-70_1018.indd 章オペレーティングシステム()の基いソフトウェアで 基本ソフトウェア とも呼ばれます 第礎第 章 オペレーティングシステム () の基礎 - の役割と動作 ここでは コンピューターの基本的な構成やオペレーティングシステムの基本的な役割と操作を学習します -- コンピューターの基本構成 現代社会では さまざまな種類のコンピューター機器が各分野で利用されています 身近なものでは パソコン タブレット スマートフォンなどがありますが

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

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

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

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

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

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

スライド 1

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

More information

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

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

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

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ

アメブロは そのままで使えるおしゃれなテンプレートが豊富にそろっているのが特徴ですがさらにデザインをカスタマイズすることによって 見やすく集客しやすいブログにすることができます このテキストでは 2016 年 3 月にリリースされた CSS 編集用デザイン を使用して あなただけのデザインにアメブロ このテキストについて このテキストは おもに下記の方を対象にしています Windows パソコンを使い 基本的なキーボード操作 マウス操作のできる方 アメブロを自分だけのデザインにカスタマイズしたい方 アメブロにメニューバーなどを設置して 使いやすいデザインにしたい方 本書はパソコン教室での個別学習を想定して作成されたテキストです インターネットにつながる環境が必要です テキストの作成環境 OS:

More information

HTML教科書 HTML5レベル1読者特典

HTML教科書 HTML5レベル1読者特典 f i t a c i r t e i o H T M HTML HTML5 1 n L 90 5 s P r o f e C l a n o i s HTML HTML5 1 HTML5 2 HTML HTML5 1 1 A. GET B. TRACE C. SAVE D. PUT E. OPTIONS 2 A. Authorization B. Referer C. User-Agent D.

More information

学習指導案

学習指導案 www.adobe-education.com/jp/ 概略と概要 対象とする学年 高等学校商業科2年生 もしくは3年生を対象 Wordは使えるが Photoshopなどは始めて触るレベルを想定 題材名 商品紹介のWebページを作る 題材の目標 インターネットの基本的な知識 Webサイトの構造 技術的背景を学ぶ さまざまなソフトウェアを使って 素材の加工や制作を実践する 電子商取引 EC を仮想した

More information

Web 設計入門

Web 設計入門 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models

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

0序文‐1章.indd

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

More information

スライド 1

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

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

環境確認方法 (Windows の場合 ) OS 動作環境日本語版 Windows 7, 8, 8.1, 10 であること 確認方法 Windows キーを押しながら R キーを押します または [ スタート ] メニューから [ ファイル名を指定して実行 ] ( または [ プログラムとファイルの

環境確認方法 (Windows の場合 ) OS 動作環境日本語版 Windows 7, 8, 8.1, 10 であること 確認方法 Windows キーを押しながら R キーを押します または [ スタート ] メニューから [ ファイル名を指定して実行 ] ( または [ プログラムとファイルの 環境確認チェックリスト 設定を変更できない場合は この用紙をプリントアウトしてお使いのパソコンの管理者にご相談ください 確認方法がわからない場合はテストセンターヘルプデスクにお電話ください 利用環境チェック 受検のためには以下の環境が必要となります 動作環境機能スペック CPU:1GHz 以上メモリ :1GB 以上 (32bitOS)/2GB 以上 (64bitOS) ディスプレイ解像度 :1024

More information

フレーム ページの作り方 那須シニアネット三宅節雄 今回は那須シニアネットのホームページと同様に 1バナーとホームページのタイトルなどを入れた top.html 2スライドショーなど構成するページの名前の一覧から各ページへリンクさせた menu.html 3 取り敢えず表紙を飾った main.htm

フレーム ページの作り方 那須シニアネット三宅節雄 今回は那須シニアネットのホームページと同様に 1バナーとホームページのタイトルなどを入れた top.html 2スライドショーなど構成するページの名前の一覧から各ページへリンクさせた menu.html 3 取り敢えず表紙を飾った main.htm フレーム ページの作り方 那須シニアネット三宅節雄 今回は那須シニアネットのホームページと同様に 1バナーとホームページのタイトルなどを入れた top.html 2スライドショーなど構成するページの名前の一覧から各ページへリンクさせた menu.html 3 取り敢えず表紙を飾った main.html という構成にします 2の一覧からリンクされたページは3の場所に表示されます 通常 1のタイトルを表示させるページはスクロールさせません

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

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

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

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

目 次 本 書 について... 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

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

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

More information

始める前にお読みください デジカメ写真のパソコンへの取り込み 保存 印刷 の注意点 1. この操作手順は Windows 7 の機能だけを使用しています 2. 使用するパソコンにインストールされているデジカメ写真の管理ソフトや画像処理ソフト 等をデジカメ写真の取り込み 保存 印刷に使用するときは こ

始める前にお読みください デジカメ写真のパソコンへの取り込み 保存 印刷 の注意点 1. この操作手順は Windows 7 の機能だけを使用しています 2. 使用するパソコンにインストールされているデジカメ写真の管理ソフトや画像処理ソフト 等をデジカメ写真の取り込み 保存 印刷に使用するときは こ PC どりーむ 始める前にお読みください デジカメ写真のパソコンへの取り込み 保存 印刷 の注意点 1. この操作手順は Windows 7 の機能だけを使用しています 2. 使用するパソコンにインストールされているデジカメ写真の管理ソフトや画像処理ソフト 等をデジカメ写真の取り込み 保存 印刷に使用するときは この操作手順ではなく 使用するソフトの操作手順に従ってください 3. パソコンにデジカメを

More information

SaCSS 49 LT

SaCSS 49 LT レスポンシブサイトの作り方 ワンソースで構築するWebサイトの基本的な作り方 2014/6/9 Ver.1.1 Hirotaka Ichimura レスポンシブ Web デザインとは 今まで一般的だったWebサイト制作の方法は PC 用 携帯専用と分けられ別々にサイトを構築し 閲覧したユーザーの端末によりプログラムで振り分けることで表示するサイトを変更して対応してきました そのため 単純計算で最低でも2

More information

_勉強会_丸山さつき_v3

_勉強会_丸山さつき_v3 CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS

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

目 次 本 書 について... 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

ホームページ制作 基礎編 (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

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

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

More information

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

More information

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

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

More information

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

More information

目 次 1.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

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

スターターガイド

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

More information

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

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

More information

ご利用になる前に ここでは しんきん電子記録債権システム をご利用になる前に知っておいていただきたいことがらについて説明します 1 ご利用環境と動作条件の確認 2 2 初期設定とは 4 3 ソフトウェアキーボードの使いかた 6

ご利用になる前に ここでは しんきん電子記録債権システム をご利用になる前に知っておいていただきたいことがらについて説明します 1 ご利用環境と動作条件の確認 2 2 初期設定とは 4 3 ソフトウェアキーボードの使いかた 6 ご利用になる前に ここでは しんきん電子記録債権システム をご利用になる前に知っておいていただきたいことがらについて説明します 1 ご利用環境と動作条件の確認 2 2 初期設定とは 4 3 ソフトウェアキーボードの使いかた 6 1 ご利用環境と動作条件の確認 本システムのご利用にあたり 推奨する動作環境をご案内します 1 ご利用可能な OS/ ブラウザの組み合わせ 2 本システムにおける企業向けの端末推奨環境は

More information

Web

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

More information

第21章 表計算

第21章 表計算 第 3 部 第 3 章 Web サイトの作成 3.3.1 WEB ページ作成ソフト Dreamweaver の基本操作 Web ページは HTML CSS という言語で作成されており これらは一般的なテキストエディタで作成できるのが特徴ですが その入 力 編集は時に煩雑なものです そこで それらの入力 編集作業など Web ページの作成を補助するソフトウェアである Dreamweaver の使い方について解説していきます

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