(A)平成23年11月度例会:
今後の勉強会のより効率的なやり方を話し合いました。
月1回の3時間ほどの勉強の機会では出来ることは極く限れれていますので、出来る限り同好会のホームページとブログを活用してはどうかということが提案されました。特に、各自勉強して疑問が生じたことはブログのQ&Aというカテゴリーの頁を利用して質問し、回答できる人がそれに対してコメントとして答えるというようにすれば、会員全員が同種の問題とその解決方法を共有出来ます。然もその問題に就いては1年位は記録として残りますので、後々の参考資料として残りますので、「この件は以前に3回もやったのに!」というようなことは避けられます。このブログのQ&Aのやり取りで解決されなかった問題は月例会の席上で改めて説明するということにすれば、月例の勉強会もより効果的に行われるでしょう。
このやり方が徹底されてば、月例での勉強会は基本的なガイダンスの話と実習の宿題を出すことと、前月以来1ケ月のブログでのQ&Aで解決されなかった問題の詳細な説明だけで済むという非常に効率の良いやり方になるのではないかと思われます。
一般のインターネット上にもQ&Aとかフォーラムという形でこの種の質問サイトがありますが、この種のお助けサイトを利用するにあたってのエチケットがあります。その第一は質問の趣旨を明確にするよう工夫することです。唯、XXXが判りませんという質問では、回答者はXXX全般に就いて説明しなければなりません。XXXに就いてのYYYが判りません。場合によっては、エラー・メッセージを明記したり、問題のソースコードを添付したり、Web関係の質問では、問題のWebPageのURLを示すことが必要でしょう。エチケットの第2は回答があったら、必ずそれに対してお礼の返答をして、回答が役立ったかどうかを述べるとか、理解できなかった場合は、何処が理解できなかったかを述べる必要があります。
筆者はGoogleMapsAPIのフォーラムに投稿して、色々質問した経験がありますが、その分野で経験豊富な皆さんが大変親切に指導して下さいました。GoogleMapsAPIの質問の場合は、サーバー上にアップロードしたJavaScriptの問題ですので、問題のWebPageのURLを示して、どのような問題が起こっているかを説明すればたいていの場合解決策が得られます。
(B)勉強会:
ボランティアズ・カフェの会議室での勉強会風景
写真右下隅の丸みを帯びた小さい機器がE-Mobile WiFiの無線モバイル・ルーターで
1台のPCにはUSB有線接続で、他の3台にはWEP無線接続している
(1)BoxModelとDOM(Document Object Model)の再再再再・実習
☆ ホームページ同好会の10月例会のサンプル・ページを作成してみる:
- <div>を使って#container、#menu、#head、#main、#footのレイアウト枠を作成する。
- レイアウト枠の設計は慎重に行い、その中にElementを入力する折は枠のサイズを常に頭に入れておく。
- #menu枠はFrameを使った画面設計をなくするための練習です。
- 既存のスタイル・ルールの変更はスタイル・エクスプレス・ビューを右側のパネルに表示すると楽だ。
- 右側のパネルには常に使うもの(サイト・ビュー、フォルダー・ビュー、スタイル・エクスプレス・ビュー)
だけを表示しておき、滅多に使わないものは必要な折だけに表示する。 - <div>のレイアウト枠の高さは枠の右下隅のハンドラーをドラッグして調整できる。
- レイアウト枠をドラッグで変更した場合は、ページを保存する時、
属性の反映は「スタイル・シートに反映」を選択する。
属性の反映を「編集したページに反映」を選択するとBodyの中のインライン属性となってよくない。
インライン属性はスタイル・シートのルールより優先されるので、後でいくらスタイル・シートを変更しても
その変更が効いてこない。
☆ レイアウト枠が意図したような入れ子にならない原因:
- はみ出た枠の横幅が親枠の横幅より大きく設定されている
- 入れ子になる前の枠のFloatingがClearされていない(clear=bothが必要)
- その枠に入る段落などのElementの横幅が枠の横幅より大きいのでその枠の横幅が実際に親枠の
横幅より大きくなっている(その場合、Elementの横幅が指定されていない場合が多い)
☆ 実習中で観察された誤りの原因:
- <div>の配置が正しくない。 例えば、</div>が正しい位置にない。
- Floating(回り込)が正しく設定されていない。 例えば、Floating=Leftの代わりにClear=Leftに設定
- <p>~</p>のWidth(横幅)が設定されていないのに、非常に長い文字列が入力されている。
その為、実質的な枠の横幅が大きくなって、枠の入れ子がはみ出てしまう。
段落の横幅を枠の横幅よい小さくしておけば、自動的に行は折り返されて、入れ子の乱れは起きない。 - 枠の中に入るElementのMarginを誤解している。例えば、Margin-topは必ずしも枠の上端からの距離
ではない。その上隣にあるElementからの距離です。 - 中央揃えの指定はBoxの中の文字列に適用され、画像等の中央揃えは横Marginで設定する。
(2) 次回の例会とその討議テーマ
日時: 12月16日(第3金曜日)に予約が取れました。
例月と異なり第3金曜日なりましたので、間違いないようにお願いいたします。
宿題: 上記解説を参考にして例会までに自宅で例題を完成させるよう試みる。
巧く行かなかったら、#container、#menu、#head、#main、#footのレイアウト枠を新規に作成した後で、
中身のデータをCopy-Pasteする。
質問あればブログのQ&Aに投稿して質問する。
テ―マ: 「ホームページ同好会10月例会記録サンプル作成実習の続きを行い完成させる。
10月の実習の続きを行い「ホームページ同好会」サイトの「10月例会の記録を」各自完成させてみます。