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

先月よりこのボランティアズ・カフェの会議室でもE-Mobileのルーターのお蔭でInternetにアクセスできるようになりましたので、相互研鑽の勉強会が非常に便利になりました。

勉強会のテーマに就いては、ここ３回BoxModelの実習が続きましたが、もう少し同じテーマを続けて欲しいという意見が出ましたので、実習の資料つくりに一工夫が必要でしょう。

（B）勉強会：

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

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

☆　BoxModelでは：HTMLの各要素（Element）でBoxと見做せるタグは：

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

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

（Step１）　挿入メニューよりコンテナ（レイアウト枠）を挿入する。

（Step２）　コンテナーを指定して、DIVの属性ダイアログでIDを指定する。

（Step３）　スタイルシート・マネジャーを呼び出して、コンテナーのサイズ、ボーダーの太さや
　　　　　　 色等を規定する。

（Step４）　プレビューのモードにして、コンテナーの入れ子の配置等が正しくなされているかどう
　　　　　　かチェックする。

HTMLのタグにスタイルを規定する：

（Step１）　挿入メニューよりElementを段落（ｐまたはH1～H6）或いはリスト（ul-Li又はol-li）等として入力する。
　　　　　　 これは入力されたデータがBoxとして規定されるようにするためです。

（Step２）　「表示」→「スタイルシート・マネジャー」→「ルール情報の追加」→「HTMLタグ・スタイル設定」→
　　　　　　「HTMLタグ・タグ名選択」→＜そのElementのサイズや色、ボーダーの太さ、マージンやパディング
　　　　　　　等のスタイルを規定する＞

既成のBoxにClass・スタイルを関連付け：

（Step１）　そのElementを指定して、画面右上の属性ボタンから属性ダイアログ表示して、右下の
　　　　　　「スタイル」ボタンをクリックして、

（Step２）　スタイルシート・マネジャーを呼び出して、下段の規定済みのクラス選択欄から上で規定
　　　　　　　したクラスを選んでそのElementに適用する。　

（Step３）　プレビューのモードにして指定したElementのスタイルが正しく設定されているかどうかチェックする。

☆　Boxの配置のコツ：

隣のBoxとの間隔　　＝　「レイアウト」タブ　→　上下左右のマージンで決める Box内の配置　　　　＝　「レイアウト」タブ　→　上下左右のパディングで決める 文字列のBoxの配置　＝　「文字のレイアウト」タブ　→　各種配置で決める

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

「たそがれ長兵衛」サイトの「奥の細道紀行」を例にとる。

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

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

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

レイアウト・タブの4隅のマージンとパディングによって自在な文字列の配置。

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

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

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

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

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

日時：　　１１月１８日（第３金曜日）に予約が取れました。
　　　　　例月と異なり第３金曜日なりましたので、間違いないようにお願いいたします。

テ―マ：　「ホームページ・ビルダーを使ったBox Modelの作成実習の続き
　　　　　　10月の実習の続きを行い「ホームページ同好会」サイトの「１０月例会の記録を」各自完成させてみます。