上記ファイルサーバなどがない場合で、先生の PC を含め生徒 全員が同じ LAN の中にいる場 合は、
Web サーバの実験用ソフトである XAMMP が使えます。
XAMMP は先生用の PC にインストールし、使用を開始することで、生徒の PC からは次のような URLでアク セス出来るようになります。（xx 部分は各 LAN ごとに違います）
http://192.168.xx.xx:80/3b01asai/index.html
※ LAN の中の他の PC へのアクセスが許可されていない場合は、ルーターや PC の設定変更が必要です。
●レンタルサーバを使う方法
普通にレンタルサーバを契約する方法です。
価格的には最安値のサービスで充分で、各社から 1 年で 3000 円ぐらいで利用 できるプランが出ています
この場合、非常に実践的なファイルの取り扱いが可能ですが、アップロードと同時に全世界に公開されてしま うので、注意が必要です。
XAMMP
http://www.apachefriends.org/jp/xampp-windows.html
ロリポップ http://lolipop.jp/
生徒のファイルを Google などの検索エンジンから探せないようにする方法 次の 2 行をテキストファイルに記述
User-agent: *
67
-■CSSによるスマートデバイス対応
パソコン用のWebページを、スマートフィンやタブレットでの表示 に対応させてみましょう
step2フォルダをスマートフォンなどで表示すると、文字が小さく 見にくい印象になります。そこで、スマートフォンなどの横幅の小 さい画面で表示された際に、レイアウトを切り替えたのがstep3 フォルダです。HTMLにViewport、CSSにMediaQueryなどが追加さ れています
パソコンのWebブラウザでも画面を横方向に細くすることで、変化 を確認できます
追記されたHTMLファイルのhead部分
CSSファイルの各要素に画面サイズによる振り分けを追記
56
1 /*---structure setting---*/
2 /*---mod-pageWrapper---*/
3 .mod-pageWrapper { 4 text-align: left;
5 margin: 0 auto;
6 padding: 0 24px;
7 max-width: 960px;
8 } 9
10 @media screen and (max-width: 687px) { 11 .mod-pageWrapper {
12 padding: 0 12px;
13 min-width: 320px;
14 } 15 }
16 /*---mod-pageHeader---*/
17 .mod-pageHeader {
18 border-bottom: 2px solid silver;
19 margin-bottom: 2em;
20 padding: 2em 0 2em;
21 }
22 .mod-pageHeader .mod-pageHeader-logo { 23 float: left;
24 }
25 .mod-pageHeader .mod-pageHeader-menu { 26 float: right;
27 margin-bottom: 0;
28 padding: 0.857em 0 0;
29 }
30 .mod-pageHeader .mod-pageHeader-menu li { 31 float: left;
32 margin: 0 0 0 3.286em;
33 }
34 .mod-pageHeader .mod-pageHeader-menu li a { 35 color: #000;
36 line-height: 24px;
37 text-decoration: none;
38 display: block;
39 padding-left: 33px;
40 }
41 .mod-pageHeader .mod-pageHeader-menu li a.cart {
42 background: url(../images/icon_cart.png) 0 50% no-repeat;
43 }
44 .mod-pageHeader .mod-pageHeader-menu li a.help { 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 src="shared/images/logo.png" alt="うみそら雑貨店"></a></h1>
15 <ul class="mod-pageHeader-menu">
16 <li><a href="#" class="cart hoverOpacity">カート</a></li>
17 <li><a href="#" class="help hoverOpacity">お問い合わせ</a></li>
18 </ul>
19 </header>
20 <!--/mod-pageHeader-->
21 <div class="mod-pageContent">
22
23 <div class="mod-topicPath">
24 <ul>
25 <li><a href="#">ホーム</a></li>
26 <li><a href="#">Tシャツ</a></li>
27 <li class="current">オーガニックコットンTシャツ</li>
28 </ul>
29 </div>
30 <!--/mod-topicPath-->
31
32 <div class="mod-pageContent-main">
33 <h1 class="mod-heading">オーガニックコットンTシャツ</h1>
34
35 <div class="mod-multiColumn">
36 <div class="mod-multiColumn-colA">
37 <div class="mod-figure"><img src="shared/images/img_p1.jpg" alt="
" width="640" height="400"></div>
38 </div>
39 <div class="mod-multiColumn-colB">
40
41 <div class="mod-multiColumn2">
42 <div class="mod-multiColumn2-colA">
43 <div class="mod-multiColumn2-colA-inner">
44 <p>地球と肌に優しい、オーガニックコットンを使ったTシャツです。柔らか い着心地をホワイト・チョコレート・モスグリーンの3色からお選びください。日本サイズでXSと Sの2サイズをご用意しました。<br>
45 海外の有機農家の手で、大切に育てられた原綿を輸入し、日本国内で環境 MacOS:Users:uedakimihiro:Documents:job:1_now:アドビビデオ企画:サンプル:html:step3:sample.html: 1/4
Media Queries
http://www.w3.org/TR/css3-mediaqueries/
ここでは画面サイズの違いを簡単に反映するため に、CSS3 の Media Queries（メディアクエリ）を使っ ています。多くの Web サイトでは、Media Queries 以外も併用しています。
Adobe HTML5 特設サイト http://adobe-html5.jp/tips/
Adobe & HTML
http://html.adobe.com/edge/
■CSSボタンの作成
step4では「ショッピングカートに入れる」ボタンをCSSで描いています。さまざまなディスプレイのサイ ズ、解像度が増えてくる中で、スケーラブル（可変長）なWebサイトを制作するには、ビットマップ画像 ではなく、CSSでの処理やベクター形式の画像を使用するのも一つの方法です
CSSでは好きなフォントを表示したり、文章を角丸の四角で囲んだり、奥行きのある形に変形させたりが 可能です。これを利用してボタンを作っています
setp3までの画像ボタンと比較すると、Webブラウザで拡大表示したときや、iPhone5（高解像度ディスプ レイ）で見たときに、ボタンを美しく表現することが可能です
step3までで使用していた、PNG画像で作成した「ショッピングカートに入れる」ボタン
step4ではボタンをCSSで表現しています。現時点では、グラデーション表現に対する記述がWebブラウザ ごとに違うため、少し複雑になっています
57 -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, multiColumn:after, multiColumn2:after, .mod-thumbBlock: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,-webkit-gradient( linear, left top, left bottom, stop(37%, #ffffff), color-stop(68%, #f4f4f5) );
234 background: url(../images/cart.png) 10px 50% no-repeat,-moz-linear-gradient( center top, #ffffff 37%, #f4f4f5 68% );
235 background: url(../images/cart.png) 10px 50% no-repeat,-ms-linear-gradient( top, #ffffff 37%, #f4f4f5 68% );
236 }
MacOS:Users:uedakimihiro:Documents:job:1_now:アドビビデオ企画:サンプル:html:step4:shared:css:modules.css: 5/5
CSS Button Generator
http://css-button-generator.com CSS Button Generator
http://www.dextronet.com/css-buttons-generator/
■JavaScriptでプログラミング
JavaScript（ジャバスクリプト）はHTML、CSSとならんでWebブラウザで動く技術として非常に重要で す。HTMLが文章の構造定義、CSSがその装飾、JavaScriptはそのファイルやWebサイト自身をWebブラウ ザ側で動かすプログラミング言語です。多くのWebサイトが、Webサーバ側のプログラミング言語と、
JavaScriptによるWebブラウザ側のプログラミングを使い分け、併用することによって動いています finalとstep4の違いは写真をクリックしたときの挙動です。finalでは画像ファイルに遷移することなく、そ の場で画像が拡大表示されます
jQuery
よく使われている機能をまとめて、使いやすくひとまとめにしたものを JavaScriptライブラリとよんでいます。もっとも広く使われているJavaScriptライブ
ラリーがjQuery（ジェイクエリー）です。finalのJavaScriptでもこのjQueryを使用し、HTMLファイルをそ の場で書き換えて、拡大画像を画面に表示しています
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();
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 });
jQuery
http://jquery.com
jQuery Mobile
http://jquerymobile.com
言語としてはソースコードをその場で解釈しながら実行するインタプリタです。ECMA スクリプト（ECMAScript：エクマスクリプト）
という規格に準拠しているので、比較的習得しやすくいろいろな 他言語への応用が可能です。
ちなみに Java と JavaScript は、たまたま同じ名字の他人です。
開発当時の会社同士が業務提携していたため、同じ名字になりま したが、全く別の言語です。
■Webページのファイル構成
CSSファイルや画像ファイルが複数になってきたときは、フォルダに分けて整理しましょう
step2以降では、sharedフォルダにまとめ、その中で画像やCSSなどをそれぞれフォルダにまとめています
CSSファイルは再利用や使い分けの観点から複数ファイルで構成することが多くなります。HTMLファイル
からは1つのCSSファイルにリンクしておき、そのCSSファイルの中に@importを使用しそれぞれのCSS ファイルを読み込みます
59 -それぞれのパーツごとにフォルダ分け
1 @charset "utf-8";
2 3 @import "basic.css";
4 @import "structure.css";
5 @import "modules.css";
サンプルでも step2 以降はファイ ルをフォルダに分けています。
@import を使う方法は多用すると表示速度が低下しますが、意味を 分けておくという点ではわかりやすい方法です。
60 -アドビシステムズ株式会社
〒141-0032 東京都品川区大崎1-11-2 ゲートシティ大崎 イーストタワー www.adobe.com/jp/
Adobe Systems Incorporated 345 Park Avenue, San Jose, CA 95110-2704 USA・www.adobe.com
アドビカスタマーサービス窓口 0570-067337（ナビダイヤル）または 03-5350-0407 受付時間／平日 9:30-20:00（土曜、日曜、祝日、弊社指定休日を除く）
Adobe, the Adobe logo, Adobe Illustrator, Adobe Photoshop, Flash, ActionScript and Adobe Creative Suite are either registered trademarks or trademarks of Adobe Systems Incorporated, in the United States and/or other countries.
© 2013 Adobe Systems Incorporated. All rights reserved. ASJST
サンプルは step1 から Final まで 5 段階で用意しています。
テキスト 55 ページまでで step1 を作ります、56 ページからのサンプル step2 以 降を扱った内容は、Web 技術系の予備知識のないと理解が難しいので、ポイン トと概念のみの説明にしています。
step1 までの内容が早く修了した場合は、step2 以降のファイルを開いて HTML や CSS のソースコードを、前の step と比較しながら見てみましょう。
コラム 個人情報の価値
Web サービス各社は個人の趣味趣向、出身地や出身校などに興味津々です。SNS では個人情報をお互いに 公開して、他人同士が繋がっていくことを目的としています。それはリアル社会において新しく友人ができるこ とと似ています。場を提供している Web サイト側は、多くの個人情報をスポンサー企業に売ることで、場を 無料提供しています。個人情報をネット上へ公開することによって得られるものと、図らずも得てしまう危険性 をよく理解することが大切です。
一人暮らしの女性が、顔写真や部屋の間取り、近所の写真を公開し「今から買い物行ってきます」とつぶやく。
この状況の危険性は理解しやすいと思います。
しかし、逆の見方もあります。例えば日記やアドレス帳など人に見られたくない情報があります。
・その情報が入ったノートパソコンを電車に置き忘れる
・情報が置いてあるクラウドストレージがクラックされる どちらの可能性が高いでしょうか ?
便利さは危険性と引き替えですが、飛行機と同様に意外と安全なものかもしれません。
いずれにせよ、各サービスに対する正しい理解と情報に対する管理能力が必要です。