テキスト

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

クリック クリック リンクを 張 るためのタグ タグ ~ リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク フォルダ 内 のファイルに

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

1/2

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

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

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

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

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

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

Adobe® Corporate Template 2005

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

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

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

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

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

(1) ,,,,, <> ( ) (/ ) (2) HTML5 (3) HTML (4) html (ja) (5) JavaScript CSS (6)

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

More information

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

インターネットマガジン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

おすすめページ

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

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