平成26年4月の活動

（A）４月度の月例会：

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

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

この数ヶ月、幹事役の長兵衛が勉強したjQueryの分野の発表をしてきましたが、そろそろこの会の『相互研鑽の場』という趣旨に立ち返って、他の会員の方もご自分で勉強されたことを他の会員と分かち合うという動きをされてよい頃だと思われます。
差し当たり来月は、ＬｉｌｙさんがＰＣ用とスマホ用のＨＴＭＬコードを振り分ける技術に就いて発表して下さることになりました。
今後、その他の方もどんな些細なことでも、ご自分で勉強されたことや経験され問題などに就いて、他の会員にお裾分けしてして下さることが期待されます。他人のために、判り易く発表しようとすることは、ご自分の為にもなることです。
勉強のテーマもそろそろ種切れになってきました。テーマ選定役を中心になって月例会のテーマ選定をお願い致します。

（B）勉強会：

（１）先月までの復習

１－１　StyleSheetの整理　－　後で保守がし易いように整理するとよい

　　１）ＣＳＳ３の新しい機能は必ずしもHPBのStylesheet Managerで生成出来ない。

　　２）HPBのStyle Sheet Managerにだけに任せない。自分でソース・コードを確かめる。

　　３）基本的な部分はCopy/Pasteして先ず用意する。（char-set はuft-8にしておく）

　　　　　　（基本的部分の例）
　　　　<style type="text/css">
　　　　*　{
　　　　　　　margin:0;
　　　　　　　padding:0;
　　　　　　　font-weight: normal;
　　　　　　　border: 0;
　　　　　　}
　　　　#container　{
　　　　　　width : 900px; //または90%
　　　　　　margin: 5px auto; //中央揃え
　　　　　　overflow: auto;　　 //中に入るfloatする子枠を内蔵する
　　　　　}
　　　　header　{
　　　　　　width : 99%;　　　　//枠線の幅を考慮して親枠一杯の横幅
　　　　　　height : 450px; //headerの存在が判るように適当に指定
　　　　　　border : solid 1px grey;
　　　　　　background-image : url(image/ph_header_photo.jpg);
　　　　　　background-repeat : no-repeat;
　　　　　　background-size : 100% 92%;　//枠の横幅一杯に、縦は92%に
　　　　　　background-position : bottom;　　　　　//下端に揃える
　　　　　　margin : 0 auto;　　　　　　　　　　　//中央揃え
　　　　　　float : left;　　　　　　　　　　　　　//左揃え
　　　　　　border-radius : 5px;　　　　　　　　　 //角丸
　　　　 }　
　　　

　　４）ソース・コードを自動整形して綺麗な階層構造にする。
　　　　　　　　　HPBでは：「ツール」→「オプション」→「一般タブ」　→　ＨＴＭＬソースを自動整形にチェック
　　　　　　　　　DWでは：「フォーマット」→　「インデント/　段落フォーマット/CSSスタイル」
　　　　　　　　　この場合、入力は左端から始め、絶対にスペースで揃えない。

　　５）ソース・コードをCopy/Pasteで構造の順序に並びかえる。

　　６）出来るだけ1行で指定出来る方法が便利。　　左上から時計お廻りの順に纏める
　　　　　　　　　　（例）　margin: 5px 0 5px 10px;　　　これは後での微調整がし易い
　　　　　　　　　　　　　　　　margin: 5px auto; 上下と左右を一度に指定
　　　　　　　　　　　　　　　　padding: 3px 0 3px 10px;
　　　　　　　　　　　　　　　　font: bold 18px "MS 明朝";　　この３属性が必須でこの順序でなければならない。　

１－２　Text Shadow と　Box Shadow
　　　
　　　　　 text-shadow: 水平オフセット　垂直オフセット　（ぼかし半径）　陰の色；

　　　　　(例)　　text-shadow: 2px 2px 1px yellow;
　　　　（例）　 http://trial01.my.zmx.jp/folder_jichikai/pg_bus_trip_salon.html
　　　　　　　　　タイトル文字の白い陰はセンスが良い

１－３　背景画像

　　　　　　background-image: url("")　;
　　　　　　 background-repeat: repeat/no-repeat;
　　　　　　 background-position:left /center/ right;
　　　　　　 bacground-size: 100% 100%;

　　(例)
　　　　　　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;
　　　　　　　}

　（例）　　 http://trial01.my.zmx.jp/folder_jichikai/pg_bus_trip_salon.html

　１－４　線形グラデーション

　　linear-gradient　(　開始位置と角度, 開始色, 途中色, 終了色　);

　　開始位置と角度を指定すると、グラデーションの方向を定義することができます。
　　開始位置は、left・center・right、to p・center・bottomのキーワード、％、pxなどの単位を付けた数値で指定し
　　ます。　指定しないと左上隅から開始される。
　　角度は、degなどの単位を付けた角度値で指定します。　指定しないと上から下に直角に向かう。
　　　　　　　　　　　　　　　　　　　　　　　　　　通常は"to right"渡指定すると、右横に水平方向になる。
　　開始位置と角度は省略可能ですが、その場合には初期値の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);
　　　　　　}
　（例）　 http://trial01.my.zmx.jp/folder_jichikai/pg_bus_trip_salon.html
　　　　　　　　　#bannerは右横へ水平に複数色、#asideは垂直に下へ複数色、
　　　　　　　　　#footerは右横水平に上品に2色

１－５　円形グラデーション

　　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);
　　　　　}
　　　　但し、このGradationのCSS3の機能は、AndroidのBrowserには実装されていないようです。

（２）今日の勉強　MobileのＷｅｂ設計に向けて　－　ＰＣ用のＷｅｂ設計にも役だつ

　２－１　横幅は親枠の幅の％で指定する事によって、ある程度PCのモニター画面の違いに対応出来る
　　　特に、#containerの％指定は有効である。中枠や小枠の横幅の100%指定が有効であるが、その枠に枠線が
　　　ある場合は、 99%か98%にして微調整すると良い。

　２－２　行高（line-heigt）は%か倍数指定がよい。

　２－３　Font-sizeの指定とFont-sizeを基にしたサイズの指定
　　　px : 絶対単位のように思われるが、72dpiや96dpiといったモニタの解像度により変化しますが、一応絶対単位
　　　　　　とみてよい。　　但し、過去にIEがCSSで文字サイズを変更出来ないという問題があった。

　　　em : フォント・サイズ（フォントの高さ）を1とする相対単位で便利のように思われるが、親要素から子要素に
　　　　　　複式計算でサイズが決まるので階層が深い場合は実情に合わない問題点があった。

　　 rem: CSS3で導入された単位で、「root em」のことで、ドキュメントのルートに設定されているフォントサイズに対
　　　　　　して「何倍」という使い方ができるため、親要素の影響を受けなない単位です。

　　Font-sizeを指定しない場合は、1em = 14px ですが、通常プロは　
　　　　　　　html { style="font-sixe:62.5%";} /* 1em = 10pxのように先ず指定して、
　　　　　　　body { font-size: 1.4rem; } /* =14px */
　　　　　　　h1 { font-size: 2.4rem; } /* =24px */
　　　　　　　li { font-size: 1.2rem; } /* =12px */
　　　　　　　のように指定する。
　　上のケースで、emを使うと階層が下の子要素のサイズが異常に大きく計算されたので、remではこの点改善
　　された。font-size以外にも使える。

　２－４　Tableによる画像の配置はフレクシブル性を失うようなので、
　　　　　　　Tableはテクストの配置のみに使う方が好ましい。
　　　　　　　TableのTDやTRのセレクションには：

　　　　　　　　E("foo") {　　　｝　　 /* foo属性を持つE要素

E:nth-child(n) { } /* n番目の子となるE要素

等が便利です。
　　　　　　　この他にも色々要素をセレクトする方法があるので、調べて使ってみては。

　　　　　　　（例）table.sample tr:nth-child(2n+1) {background-color:lightyellow;}　/*奇数行は薄黄色
　　　　　　　　　　table.sample tr:nth-child(2n+0) {background-color:lightgreen;}　/*偶数行は薄緑色

　２－５　metaタグのviewport機能

　　　　　　　meta要素に name="viewport" を追加すると、
　　　　　　　文書の表示領域を設定することができます。
　　　　　　　これはスマートフォン向けの機能で、レスポンシブWebデザインの一つです。

　レスポンシブWebデザインとはアクセスした人のデバイスサイズによって、
　　　　　　　自動的にレイアウトが切り替わるデザインのこと。

　　　　　　　　（例）
　　　　　　　　　　<meta name="viewport" content="width=device-width, 　maximum-scale=1, initial-scale=1,
　　　　　　　　　　　　　　　　　　　　　　　　　user-scalable=no" ">

　　　　　　　　　　上の指定は、内容物（Windows)の幅を検索者の端末の幅と同じくし、
　　　　　　　　　　検索者によるスクロールを許さないという意味。）
　　　

　２－６　CSS3のMediaクエリ　（CSS2のMedia Type を発展させたもの）
　　　　　　　使用するMediaを検査して（クエリして）、それに対応するStyleを設定できるようにした。

　　（例）
　　　　　　　　　 @media screen and (min-width: 480px) {
　　　　　　　　　　　　　　#container{
　　　　　　　　　　　　　　　　　max-width: 700px;
　　　　　　　　　　　　　　}　　
　　　　　　　　　　　　　　}
　　　　　　　　　上の指定は、480px以上の画面のScreen（即ちスマホ出ないPCの画面）に対しては
　　　　　　　　　　#containerの横幅を、100%として指定しても700px以上にしないという意味。

　viewportとメディア・クエリーを使って、各デバイスに合わせた適切なレイアウトに自動的に設定出来るようにした。

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

☆　Windows　８．０でＮｏｒｔｏｎ　Ｉｎｔｅｒｎｅｔ　Ｓｅｃｕｒｉｔｙが深刻な問題を起こしている。
自宅で３台のＰＣを使っており、２台はWindows７で１台はWindows8.0を使っている。
今年の３月上旬、3台のPCに導入可能なNorton Internet Security2014を量販店で購入し、自宅の3台のPCに導入入した。所が、Windows　８．０の自動更新の後、そのPCから突然Internetに接続が出来なくなった。

PCのメーカーである富士通の有料サービスで調べてもらった結果、Internetに接続が出来ない理由は、Nortonの
InternetSecurityのスマート・ファイアーウォールがInternet接続をブロックしているからだと判明した。

そこで、Nortonの顧客サービスを受けたところ、矢張りInternetSecurityのスマート・ファイアーウォールが原因であることを認めたが、何故問題を起こしているか判らないという。そこで、Nortonから最新のVersionをDownloadしてもらって、それに置き換えたら問題は解決した。同じVersionのSoftwareがWindows７では問題を起こさず、Windws８で問題を起こしているという事は、Windows８とNortonの相性に問題があるということだろう。この問題で金銭的、時間的なダメージを受けて憤懣やるかたない。Microfoft社がMobile端末の爆発的な普及の流に押し流されて、他のソフトウェア・べンダーを含めて準備万端整わないうちにWindows８を発表した結果だと思われる。このような犠牲に会わない為にもWindows７から８へのアップグレードはもう少し待った方がよさそうだ。

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

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

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

テ―マ：　ＰＣ用とスマホ用のＨＴＭＬコードを振り分け。