(A)平成24年11月度「ちば市民活力創造」フェアへの参加:
11月17日(土)と18日(日)に開催された「ちば市民活力創造」フェアに参加し、当同好会の活動と会員募集のPRを行った。
準備したものは
☆ 同好会のPR用のポスターを2枚
☆ 同好会のPR用の立標識3枚
☆ 同好会のPR用のチラシ30枚 以上、3件AppleさんとLilyさんが大変立派のものを作成下さた。
2日間に当同好会の活動に興味を持ち、自分たちのボランティア活動をホームページでPRをしたいと希望している10組ほどのグループの訪問を受けた。そのような訪問者には当同好会のチラシを渡して、後でゆっくり当同好会のホームページを見てもらうようにお願いした。
ちば市民活力創造フェアの2階から俯瞰した風景
同好会に割り当てられた2階の一角(11月17日)
同好会に割り当てられた2階の一角(11月18日)
(B)11月度の月例会:
千葉市民活力創造プラザの会議室での勉強会風景
11月23日(金・祝)の13時より開かれた例会で次の件が討議された上、了承された。
- 「ちば市民活力創造」フェアの総括
2日間で10組ほどの興味を示すグループの訪問を受けた。その殆どのグループは既にホームページを業者に委託して作成しているが、コスト削減のために出来たら自前のホームページにしたいという潜在的な希望を持っている様であった。
フェアーの後数日間にそれらしいホームページへのアクセスが数件あったが、未だにメールによる具体的な支援に関する問い合わせは受けていない。コスト削減の意識はあるが、メンバー自らがホームページ作成に関与してみたいというレベルではないように思われる。
一方、同好会に参加して勉強してみたいという個人は一人も現れなかった。 - 今後の勉強のテーマ
HTMLとCSSの連携に関する勉強を数ヶ月続けて来ましたが、来月からは愈々「jQueryを利用したJavaScriptの学習」に入ることに皆さん合意しました。但し、JavaScriptはこれまでのCSSより少々細かいProgrammingの要素が入ってきますので、月例会の勉強会の後のしっかりした復習が必要であることを自覚し合いました。
(C)勉強会:
テーマ:HTMLとCSSの復習の締め括り
(1) ホームページ作成技術の変遷を認識しよう
- 現在は HTML4 → Xhtml1.0Transitional → HTML5 の変遷の過渡期である。
- 現在は CSS2 → CSS3 の変遷の過渡期である。
- 主要なブラウザー(IE、FireFox、GoogleChrome, Opera等)は着々とHTML5およびCSS3仕様対応への準備を始めている
残念ながらその対応の足並みがそろっておらず、ウェブ開発者の間には混乱を生じている。
中でもFireFoxは先進的で、IEはより慎重な動きを示しているのが開発者を困惑させている。 - このような状況の中で、オーサーリング・ソフト開発会社(DreamweaverのAdobeたHopageBuilderのJustSystem社等)は必ずしもこの動きに敏感ではない。例えば、HPBのスタイル・シート・マネジャーは新しいスタイル・ルールに全く対応していない。
- このような状況の下では、ウェブ開発者は先進的な技術を積極的に利用するためには、オーサーリング・ソフトの提供する機能に頼ることなく、StyleSheetのソース・コードに手作業で新しいスタイル・ルールを入力して行くしかない。
(2)スタイルシート・マネジャーでは生成で出来ないが便利なスタイル・ルール
- div枠の中央揃え
#container { margin : 0 auto;} - 初期設定のマージンとパッディングのリセット
* { margin : 0 padding: 0;} * はユニバーサル・セレクターですべてのタグを指す。 - 外枠の角を丸くする
.box { border-radius:7px;;} 枠組みboxの4隅の角に7pxの丸みを付ける。 - Box枠に陰を付ける
.box { box-shadow: 10px 10px brown;} 枠組みboxの縦横に10pxの茶色の陰を付ける -
Tableの二重罫線を単線に直す
table { border-collapse : collapse;} 表の全てのセルに罫線を引くと2重線になるので、それを単線に直す - 背景画のサイズを指定する
.box { background-size: 200px 50px ;} 指定した背景画像を枠組みboxの中に200pxX50pxの大きさの背景にする。
.box { background-size: contain;} 指定した背景画像を枠組boxの大きさに縮小・拡大する。 - 背景色をグラデーションにする
.box { background:-moz-linear-gradient(left top, white, yellow) ;} 枠組みboxの背景色を白→黄色のグラデーションにする
残念ながら現時点ではFireFoxでのみ作動する。
これらのCSS3のルールを適用した例はこのようなSampleです。
(D) 次回の例会とその討議テーマ
日時: 平成24年12月28日(第4金曜日)13:00~16:30
場所: ツイン・ビル2号館9階の千葉市民活力創造プラザの会議室
テ―マ: 「jQueryを利用したJavaScriptの学習」をテーマにして学習します。