（A）平成２３年９月度例会：

7月以来の久し振りのボランティアｽﾞ・カフェでの例会となった。今月からI‐さんが正式に入会して紹介されました。
次項（B)で述べられるように、このボランティアズ・カフェの会議室でもE-Mobileのルーターのお蔭でInternetにアクセスできるようになりましたので、勉強できるテーマも広がり、よりレベルの高い相互研鑽が出来るようになりました。従って、各自より一層レベルの高い分野（例えばJavaScript、CGI、GoogleMapsAPIなど）にもチャレンジして行こうという覚悟が確認されました。

ボランティアズ・カフェの運営グループが新年度から交替し、新しいスタッフになっていました。7月から「ボラカフェ通信」いうメルマガが発行されるようになっていて、その36号に私たちの「ホームページ同好会」が紹介されていました。その紹介記事に新入会員の募集も謳われていますので、更なるメンバーの加入を期待したいところです。

（B）勉強会：

ボランティアズ・カフェの会議室での勉強会風景
写真左下の丸みを帯びた小さい機器がE-Mobile WiFiの無線モバイル・ルーターで
1台のPCにはUSB有線接続で、他の3台にはWEP無線接続している

（０）E-Mobile WiFiを使ったInternet接続のテスト

新たに契約したE-Mobile WiFiの無線モバイ・ルーターがボランティアズ・カフェの会議室で十分な電波を受信し、勉強会の出席者全員がにInternet接続出来るかどうかのテストを行いした。

テストの結果、ボランティアズ・カフェの会議室に於けるE-Mobile WiFiルータの電波の受信状態は大変良好で、一つのPCにはUSB接続で、他の三つのPCには無線LANでInternetに問題なく接続することが出来ました。このE-Mobile WiFiルータの仕様によると無線LANによる接続は五台までのPCに接続可能ということです。

従って、この日の勉強会はInternet接続をフルに利用することが出来ました。その上、今後の勉強会では全員がInternet接続を利用しながら、JavaScript、CGI、その他CloudApplication等のテーマにも取り組むことが出来るようになりました。これは大層な朗報です。

（１）BoxModelとDOM（Document Object Model）の再再・復習

☆　BoxModelとは：

HTMLの各要素（Element）を全てある種のBoxと見做し、その各々にID名やClass 名の印を付けてCSS,　JavaScript, CGI, APIとの連携を図るモデルです。

☆　ホームページ・ビルダーを使った関連付け手順：

DIVレイアウト枠との関連付け：

（Step１）　挿入メニューよりコンテナ（レイアウト枠）を挿入する。
（Step２）　コンテナーを指定して、DIVの属性ダイアログでIDを指定する。
（Step３）　スタイルシート・マネジャーを呼び出して、コンテナーのサイズ、ボーダーの太さや色等を規定する。
（Step４）　プレビューのモードにして、コンテナーの入れ子の配置等が正しくなされているかどうかチェックする。

HTMLのその他のタグとの関連付け：

（Step１）　挿入メニューよりElementを段落（ｐまたはH1～H6）或いはリスト（ul-Li又はol-li）として入力する。
　　　　　　　これは入力されたデータがBoxとして規定されるようにするためです。ユメユメ単なる文字列として入力しない。
（Step２）　「表示」→「スタイルシート・マネジャー」→「ルール情報の追加」→「クラス・スタイル設定」→「・クラス名入力」
　　　　　　　→＜そのElementのサイズや色、ボーダーの太さ、マージンやパディング等のスタイルを規定する＞
（Step３）　そのElementを指定して、画面右上の属性ボタンから属性ダイアログ表示して、右下の「スタイル」ボタンを
　　　　　　　クリックして、
（Step４）　スタイルシート・マネジャーを呼び出して、下段の規定済みのクラス選択欄から上で規定したクラスを選んで
　　　　　　　そのElementに適用する。　
（Step５）　プレビューのモードにして指定したElementのスタイルが正しく設定されているかどうかチェックする。

（２）Box Modelによるキメの細かいスタイル設定の例

「たそがれ長兵衛」サイトの「甲子園高校野球観戦記」を例にとる。

☆　レイアウト枠の枠線のキメの細かい設定

レイアウト・タブの4隅のボーダーで線種、太さ、色等を自在に規定できる。３隅線の細さ、下線の太さに注目。
　従来のTableの属性ではここまでキメの細かい規定は出来ない。

☆　文字列や段落等のきめ細かい配置

<h1>２０１１年夏の甲子園観戦記</h1>、 <h2>甲子園に向かう往路</h2>、<li>１７：２６　土気駅発上り電車に乗る</li>
等のキメの細かい配置、サイズ、色の設定と自在な変更可能性。
フォント・タグによる文字のサイズや太さを自在に変更できる。
レイアウト・タブの4隅のマージンとパディングによって自在な文字列の配置。

☆　背景画を使ったデザインの妙。

<div id="head">の色と背景・タブによる<img>の挿入では難しいフレクシブルな背景のデザイン。

☆　<p class="head_txt" >や<p class="intro_txt">の文字列のデザインの妙

文字レイアウト・タブによる文字列の配置、行高、インデントなどの自在な設定、写真と説明文の位置調整に注目。

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

日時：　　１０月２８日（第４金曜日）に決定し部屋の予約がなされました。

例月のように第４金曜日に戻りましたので、間違いないようにお願いいたします。

テ―マ：　「ホームページ・ビルダーを使ったBox Modelの作成実習」の続き

Box Modelの再・再・再復習をしてから、
「たそがれ長兵衛」サイトの「甲子園高校野球観戦記」の第1頁の作成実習をします。
因みに、このページも出来るだけBox Modelのスタイルを使って作成してありますので、そのミエの良さ・悪さに注目下さい。各段落毎に強いて文字サイズ、行高、色、インデントなど変えて設定しています。然も、これらは自在に変更できます。

以上

｢参考情報｣

・Ｃａｎｐａｎ登録ページ：　https://canpan.info/index_view.do　（canpanで検索可）
・ホームページ同好会ブログ：　http://blog.canpan.info/hpgrpchiba/　（同好会ＨＰからリンクあり）
・Ｃａｎｐａｎの相談電話：　０３－６２２９－５５51 →　担当の女性が大変親切に対応してくれます。