平成２６年０３月度

（A）３月度の月例会：


３月度の月例会の勉強会風景

平成26年02月27日（木）の13時より開かれた例会で次のような話し合いが行われました。

（B）勉強会：

（１）jQueryのこれまでの復習

☆　Lightboxはユーザが現在のページからの移動が必要なく、背景を暗くして拡大サイズで画像を表示し、
簡単にスライドショーを実現できる大変便利なjQueryライブラリー です。
仕組みとしては、HTML内の基本はハイパー・リンクの原理を応用しています。
ハイパー・リンクの原理の応用とは： 　

　　　　　　　　<li><a href="拡大画像のURL" title="拡大画像の説明"><img src="画像のサムネールのURL"></a>
　　　　　　　　　　　　　<br>画像のサムネールの説明</li>

　　作成するには、先ず
　　　<ul>
　　　　　　<li>サムネール画像01
　　　　　　<li>サムネール画像02
　　　　　　　　　　　　・ 　　　　　　
　　　　　　　　　　　　・ 　　　　　　
　　　　　　<li>サムネール画像0n
　　　</ul>

を用意しておいて、その各々のサムネール画像の対応する拡大画像へのリンクを張ればよい。

　　勿論、Plugin独特のCSSとimagesフォルダーの中に収納されたアイコンの画像が必要です。

☆　インターフェイスのjQueryのコーディング
インターフェイスのjQueryのコーディングは至って簡単です。

　　 　　　$(function(){
　　　　　　　　$("li.box a").lightBox(); 　　　　　　　　　　　　　// li.box aはサムネールを入れるBoxのアンカー
　　　　});
これはjs/my_light_box.js等として別ファイルにしておくと便利。又は、別のJavaScrptがあれば、その中に同居させておくのも一案です。

☆　jQuery Tab Pluginとの組合せ
ページ遷移はAjaxによっているので遷移されるページの<head>内部のScriptやStyleは伝わらないので新しいScriptやStyleの規定には最新の注意を要する。

（２）今日の勉強

２－１　HTML5とCSS3の復習

☆　HTML５による構造を示す新しいタグ
　　　<header>、<nav>、<aside>、<section> 、<article>、<footer>　
idやclassを付けなくても良く、ページの構造が明確化される。

☆　HTML5の斬新なタグ
＊　<audio>タグ：　音声を再生する際に使用します。
　　　　　　　　　　 　属性：src＝音声ファイルを指定する
　　　 　　　　　　　　　　 　preload＝音声をあらかじめ読み込む（auto、metadata、none）
　　　　　　　　　　 　　　 　autoplay＝音声を自動再生する
　　　　　　　　　　　　　　　loop＝ループ再生を指定する
　　　　　　　　　　 　　　 　controls＝インターフェースを表示する
＊　<canvas>タグ：図形を描く際に使用します。
　　　　　　　　　　　今までウェブページ上で図形を描くには、PNG・JPEG・GIFなどの画像に置き換えるか、
　　　　　　　　　　　Flashなどのプラグインデータを埋め込むのが一般的でしたが、<canvas>を使用することで、
　　　　　　　　　　　標準のHTMLやJavaScriptだけで、グラフやゲームのグラフィックスなどの図形をすばやく表示
　　　　　　　　　　　できるようになります。
　　　　　　　　　　　（例）
　　　　　　　　　　　onload = function() 　{
　　　　　　　　　　　　　　　 　　　　　　　　　　　　draw1();
　　　　　　　　　　　　　　　　　　　　　　　　　　}; 　　/* 円を描く */
　　　　　　　　　　　　function draw1() {
　　　　　　　　　　　　　　　　　var canvas = document.getElementById('c1');
　　　　　　　　　　　　　　　　　if ( ! canvas || ! canvas.getContext ) { return false; }
　　　　　　　　　　　　　　　　　var ctx = canvas.getContext('2d');
　　　　　　　　　　　　　　　　　ctx.beginPath();
　　　　　　　　　　　　　　　　　ctx.arc(70, 70, 60, 0, Math.PI*2, false);
　　　　　　　　　　　　　　　　　ctx.stroke();
　　　　　　　　　　　　　　　　　 }

☆　Styleの整理の仕方
　１）HPBのStylesheet Managerにだけに任せない。自分でソース・コードを確かめる。
　２）ソース・コードをCopy-Pasteで構造の順序に並びかえる。 　　　　　　　
　３）左上かた時計お廻りの順に纏める 　　　　　　　　　　
　　　（例）margin: 5px 0 5px 10px;

２－２　便利なCSS3のStyle機能

☆　角丸コーナー
　 　border-radius: 水平左上半径　水平右上半径　水平右下半径　水平左下半径/
　　　 　　　　　　　　　 垂直左上半径　垂直右上半径　垂直右下半径　垂直左下半径
　　　　　　　　　　　　/以下省略の場合は水平・垂直の半径が同じ。
　　　　　　　　　　　　半径を1ヶ所しか指定しない場合は、4隅の半径は同じ。
　 　 (例)　border-radius: 7px; 　　// 4隅が半径7pxの丸角

☆　Text Shadow と　Box Shadow
　　　text-shadow: 水平オフセット　垂直オフセット　（ぼかし半径）　陰の色；
　　　(例)　text-shadow: 2px 2px 1px yellow; 　

☆　背景画像
　 　 background-image: url("");
　　　background-repeat: repeat/no-repeat;
　　　background-position:left /center/ right;
　　　bacground-size: 100% 100%;</span>
(例)
　　　　header {
　　　　　　float : left;
　　　　　　text-align : center;
　　　　　　width : 100%;
　　　　　　border-radius:5px;
　　　　　　border : 1px solid #333;
　　　　　　overflow : auto;
　　　　　　background : url("image/ban_base.jpg");
　　　　　　background-repeat : no-repeat;
　　　　　　background-size :100% 100%;　　　　//縦横一杯に画像を引き延ばして背景とする
　　　　　　margin-bottom: 5px;
　　　　　}

☆　線形グラデーション
　　　linear-gradient ( 開始位置と角度, 開始色, 途中色, 終了色 );

開始位置と角度を指定すると、グラデーションの方向を定義することができます。
開始位置は、left・center・right、to p・center・bottomのキーワード、％、pxなどの単位を付けた数値で指定します。
角度は、degなどの単位を付 けた角度値で指定します。
開始位置と角度は省略可能ですが、その場合には初期値のtopになります。

また、グラデーションの開始色と終了色をカンマ（ , ）区切りで指定しますが、
さらにその中間に色を増やしてグラデーションの途中色を指定することもできます。

（例）
　　p.sample1, p.sample2, p.sample3, p.sample4 {
　　　　　width:600px; height:100px;
　　　}
　　p.sample1 {
　　　　background: linear-gradient(white, gray);
　　　}
　　p.sample2 {
　　　　background: linear-gradient(left, #ff0000, rgba(255,0,0,0));
　　　}
　　p.sample3 {
　　　　background: linear-gradient(left 45deg, red, orange, yellow, green, blue, indigo, violet);
　　　}

☆　円形グラデーション
　radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);
開始位置は：、left・center・right、top・center・bottomのキーワード、％、pxなどの単位を付けた数値で指定します。
角度は：、degなどの単位を付けた角度値で指定します。開始位置と角度は省略可能。
　　　　　　その場合には初期値のcenterになります。

グラデーションの形状は：
　　　circle …… 正円　ellipse …… 楕円（省略した場合の初期値）
サイズは：以下のキーワードから選択して指定します。
　　　　　　closest-side …… ボックスの一番近い辺に合わせる
　　　　　　closest-corner …… ボックスの一番近い角に合わせる
　　　　　　farthest-side …… ボックスの一番遠い辺に合わせる
　　　　　　farthest-corner …… ボックスの一番遠い角に合わせる
　　　　　　contain …… 指定範囲内に収める
　　　　　　cover …… 指定範囲に合わせて覆う（省略した場合の初期値）

（例）
　　　p.sample1, p.sample2, p.sample3, p.sample4 {
　　　　　　　　width:600px; height:100px;
　　　　}
　　　p.sample1 {
　　　　　　　　background: radial-gradient(yellow, green);
　　　　}
　　　p.sample2 {
　　　　　　　　background: radial-gradient(bottom left, farthest-side, red, yellow,
　 green);
}
　　　p.sample3 {
　　　　　　　　background: radial-gradient(500px 10px, circle contain, red, yellow, green);

２－３　MobileのWeb設計に向けて

☆　横幅は親枠の幅の％で指定する事によって、フレクシブルなデザインにする。
％は親枠の横幅の％で示す。

☆　Tableによる画像の配置はフレクシブル性を失う。
出来るだけ<ul><li></li></ul>や<div></div>等を使う方が無難である。

☆　レスポンシブWebデザイン：
アクセスした人のデバイスサイズによって、自動的にレイアウトが切り替わる デザインのこと。
　　viewportとメディアクエリーを使って、各デバイスに合わせた適切なレイアウト に自動的に変更する。　
　　　　　　（例）
　　　　　　@media screen and (min-width: 480px) { #container{ max-width: 900px; } }
　　　　　　この例は横幅480px以上のPCのページの#containerの横幅は幾ら大きくても900pxに留めるという指定。　

☆　jQuery Mobile 簡単に市場に出ているMobile機器全てに対応できるPluginと言われています。

（C）メンバーが経験した問題：

☆　IEなどのBrowserで表示されているページのソース・コードが表示出来なくなった。
通常、Broｗserで表示されているページのソース・コードは『表示』メニューか又は右クリックで表示出来るが、 ある日突然エラーになって、表示出来なくなった。
この原因は、IE等のBrowserの、『ツール』→『インターネット・オプション』→『プログラム』で「HTMLのエディター」 に「ホームページ・ビルダーV18」を指定したために起きることが判った。この指定を「特定せず」か「メモ帳」に変更すれば このエラーは起こらないことが判った。

☆　ウェブ・ページを更新している段階で、更新した特定のページにアクセスしても更新したページが表示されず、更新前の古いページが表示される問題が起きた。
これはCashメモリーに残っている古い内容が表示される現象のように思われて、Cashの内容を削除したが、依然とこの現象が起きた。
この原因はjQuery Mobile使用中のページで、他のページにリンクする箇所でAjax遷移の指定を解除しなかったために起こったことと判明した。

(D）　次回の例会とその討議テーマ

日時：　　平成２６年４月２５日（第４金曜日）13:00～16:30　

場所：　　千葉市市民文化センター9階の千葉市民活力創造プラザの小会議室

テ―マ：　HTML5＋CSS3の例題実習を行います。

宿題：　　jQuery ＬｉｇｈｔＢｏｘの例題の実習が未完の方は再度挑戦してみて下さい。
　　　　　どうしても完成出来ない方は、未完のページのURLをお送り下さい。
　　　　　3月の例会で勉強したHTML5＋CSS3に就いて、各自自分で例題を作って試してみて下さい。