テキスト - PDF Free Download

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

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

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

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

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

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

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

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

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> 11 12 <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> 27 28 </footer> 29 </body> 30 </html> 31 MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1

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> 11 12 <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> 37 38 </footer> 39 </body> 40 </html> 41 MacOS:Users:uedakimihiro:Desktop:htdocs:step1:sample.html: 1/1

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> 38 2013 39 </footer> 40 </body> 41 </html> 42 MacOS:Users:uedakimihiro:Documents:job:1_now: ::step1:sample.html: 1/1

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

1 @charset "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

1 @charset "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: 0 0 1.5em 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;} 26 27 /*----------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;} 36 37 /*----------multi column modules----------*/ 38.multiColumn { 39 overflow: hidden; 40 margin-bottom: 2em;} 41 42.multiColumn.colA{ 43 float: left; 44 margin-right: 80px;} 45 46.multiColumn.colB { 47 overflow:auto;} 48 MacOS:Users:uedakimihiro:Documents:job:1_now: ::step1:-style.css: 1/1

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  21 max-width: 960px; 8 <div class="mod-pagecontent"> 22 } 9 23 10 <div class="mod-topicpath"> 24 @media screen and (max-width: 687px) { 11 <ul> 25.mod-pageWrapper { <li><a href="#"> </a></li> 12 26 padding: 0 12px; <li><a href="#">t </a></li> 13 27 min-width: 320px; <li class="current">t </li> 14 28 } </ul> 15 29 } </div> 16 30 /*----------mod-pageheader----------*/  17 31.mod-pageHeader { 18 32 border-bottom: 2px solid silver; <div class="mod-pagecontent-main"> 19 33 margin-bottom: 2em; <h1 class="mod-heading">t </h1> 20 34 padding: 2em 0 2em; 21 35 } <div class="mod-multicolumn"> 22 36.mod-pageHeader.mod-pageHeader-logo { <div class="mod-multicolumn-cola"> 23 37 float: left; <div class="mod-figure"><img src="shared/images/img_p1.jpg" alt=" 24 } " width="640" height="400"></div> 25

197 } 198 #scaling_imgs.inactive { 199 display: block; 200 } 201 #scaling_imgs img { 202 cursor: pointer; 203 } 204 205 /*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 } 219 220 /*cart CSS3 btn*/ 221.add2cart { 222 color:#66523d; 223 cursor:pointer; 224 225 border-radius:6px; 226 -moz-border-radius:6px; 227 -webkit-border-radius:6px; 228 229 border:1px outset #e8e8e8; 230 padding:12px 8px 10px 46px; 231 232 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:

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(); 10 11 $(this).removeclass('inactive').addclass('active'); 12 $('#scaling_imgs').prepend('<div class="scaling_imgs_display">'+acti veimg+'</div>').addclass('show'); 13 14 $('.scaling_imgs_display').click(function(){ 15 reset($('#scaling_imgs p')); 16 $(this).remove(); 17 $('#scaling_imgs').removeclass('show'); 18 19 return false; 20 }); 21 22 return false; 23 }); 24 25 26 function reset(t){ 27 t.each(function(){ 28 $(this).removeclass('active').addclass('inactive'); 29 }); 30 } 31 32 });

1 @charset "utf-8"; 2 3 @import "basic.css"; 4 @import "structure.css"; 5 @import "modules.css";