平成２３年５月度

平成２３年５月の例会

　　５月の例会の日は例年より１２日も早い梅雨入り宣言があり、生憎の雨模様でしたが、４人のメンバーが集まり、将来のグループの活動方針に就いて討議がなされ、またＢｏｘ‐Ｍｏｄｅｌのウェブ・ページ作成の実習が熱心に行われました。

　討議は先ず、もう少しメンバーを増やそうという案件が話し合われ、各人の知り合いの中でホームページ作成、マルティ・メディア、及びインターネットに関わるクラウド・コンピューティング等に興味をある友人をメンバーに誘い入れる試みを尽くしてみることになりました。

　次に、ＮＰＯのホームページやＴｗｉｔｔｅｒなどを通じて呼びかけてみることにしました。新規加入者には、この分野の初心者には基礎的なマンツー・マンの講習会などを開くなどして現会員が積極的にサポートしていこうという態勢を引き、新規加入者を誘うということになりました。


ボランティアズ・カフェでの勉強会の風景

５月度の例会で議論されたテーマ：

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

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

　　　DOM（Document Object Ｍｏｄｅｌ）：
　　　　　　BoxModelは一般的に、特にはオブジェクト指向ProgrammingではDOMと呼ばれ、HTMLのElementを
　　　　　　制御するモデルです。

　　　　　　HTMLとの連携の役割は：
　　　　　　　　　＊HTML　→　（構造示す）
　　　　　　　　　＊スタイルシート　→　（表示方法を示す）
　　　　　　　　　＊JavaScript　→　（動きを示す）
　　　　　　　　　＊CGI　→　（サーバとの同期コミュニケイション）
　　　　　　　　　＊Ajax　→　（サーバとの非同期コミュニケイション）

　　　　　　Boxの被制御属性は：　　
　　　　 　　　　＊Boxのレイアウト（位置、ボーダーの幅、スタイル、色、マージン、パディング）
　　　　　　　　 ＊文字のレイアウト（Boxの中に入る文字の配列）
　　　　　 　　　＊フォントの種類、色と背景　　


（２）ホームページ・ビルダーを使ったBox Modelの作業手順

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

　　　　　　　　　　コンテナー（DIV）の配置やサイズは予め慎重にに設計しておく。
　　　　　　　　　　この設計が杜撰であるとコンテナーを配置する作業でトライ＆エラーを繰り返し、時間の無駄を
　　　　　　　　　　することになります。（Ｓｔｅｐ４を参照して下さい）
　　
　　（Step２）　コンテナーを指定して、DIVの属性ダイアログでIDを指定する。

　　　　　　　　　正確な指定はHTMLソース・モードで行わないといけない。

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

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

　　　　　　　　　　コンテナーの入れ子の配置が正しく行われていない原因は；

　　　　　　　　　　(a) 入れ子コンテナーの横幅・高さが親コンテナーより大きくなっているか、
　　　　　　　　　　(b)　親コンテナーの廻り込み（Ｆｌｏａｔｉｎｇ）が解除されていないかです。

　　　　　　　　　　従って、正しく規定されていないコンテナーのＳｔｙｌｅを編集し直す。
　　　　　　　　　　その上で、再度ビューのモードにして、コンテナーの入れ子の配置をチェックする。

　　（Step５）　その他のBoxを各コンテナーの中に挿入（入力）する。

　　　　　　　　　　見出し（Hn）、段落（P）、リスト（Li）、表（Table）、等を該当コンテナーの中に入力する。
　　　　　　　　　　その場合、決して各Ｂｏｘの位置、サイズ等々の書式は設定しないこと。
　　　　　　　　　　それらの設定は、次の（ステップ７）で行うこと。

　　（Step６）　各Boxをポイントして、属性ダイアログから適宜ID名、Class名を指定しておく。

　　（Step７）　各Boxのスタイルを「スタイルシート・マネジャー」を通じて規定して行く。

　　　　　　　　　　ＩＤ名が付いているＢｏｘにはそのＩＤ名で規定する。　→　#ID名の就いたＳｔｙｌｅが生成される。
　　　　　　　　　　Ｃｌａｓｓ名が付いているＢｏｘにはそのＣｌａｓｓ名で規定する。　→ ・Class名の就いたＳｔｙｌｅが
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　生成される。
　　　　　　　　　　ＨＴＭＬタグにはそのタグにスタイルを規定　→　ＨＴＭＬタグにＳｔｙｌｅが生成される。

　　　　　　　　　　これらのＣＳＳはそのページの<head> ～　</head>の部分の；
　　　　　　　　　　<style type="text/css"> ～　</style> の間に生成される。

　　　　　　　　　　通常これらのＣＳＳが完成した暁には　xxxxxx.ｃｓｓ として外部ファイルに書き出され
　　　　　　　　　　<LINK rel="stylesheet" href="../xxxxxx.css" type="text/css">のようにして呼び出される。
　　　　　　　　　　この手順については次月の勉強会で勉強します。
　　　　


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

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

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

　｢参考情報｣

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