平成２３年６月度

平成２３年６月の例会

　６月の例会の日は例年の６月にしては記録破りの３０℃を超す猛暑日となりましたが、４人のメンバーが集まり、将来のグループの活動方針に就いて討議がなされ、またＢｏｘ‐Ｍｏｄｅｌのウェブ・ページ作成の実習の続きが熱心に行われました。

　先月の例会での”もう少しメンバーを増やそう”という話し合に基づいて、朝日新聞の地方広告紙「あさひふれんど千葉」にPR原稿を送ったことが報告されました。

　次に、このボランティアズ・カフェの運営母体である千葉市民活動センターに協力をお願いして、千葉市民活動センターで発行しているメール・マガジンや広報誌に我々ホームページ同好会の活動記事を掲載して頂くようお願いしました。早速、同日中にボランティアズ・カフェの担当者の方宛にメールでPR原稿を送付しました。
恐らく、来月７月中旬位までに何らかの記事が掲載されるものと期待しています。

　７月と８月は例年にならって、夏休みとすることが了承されました。その代りに、７月下旬から８月初旬ににかけて、長野県の奥志賀高原での合宿に参加されたい方は申し出てください。大歓迎です。


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

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

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

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

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

　　　HTMLファイルの中のElementはBox又はDOMとしてタグ（名前）を付けてStyleSheetの中で書式の属性：
　　　　　　＊Boxのレイアウト（位置、ボーダーの幅、スタイル、色、マージン、パディング）
　　　　　　＊文字のレイアウト（Boxの中に入る文字の配列）
　　　　　　＊フォントの種類、色と背景　
　　　　　　等を規定することが出来る。--→　HTMLと書式の分離を達成する。　

　　　ホームページ・ビルダーを使ったBox Modelの作業手順
　　
　　　　（Step１）　挿入メニューよりコンテナ（レイアウト枠）を挿入する。

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

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

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

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

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

　　　　（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の作業実習

　☆HeaderBoxの中に入れるもの：

　　#header →　背景画像はheaderと同じサイズに作っておき、繰り返し属性に「繰り返さない」を指定

　　<>H1 ”Box Model の練習”→　フォント（HGP明朝B）、前景色（青）、文字レイアウト（水平方向中央揃え）、
　　　　　　　　　　　　　　　　　レイアウト（上方マージン25px、左方マージン60px）

　☆SideBoxの中に入れるもの：

　　<>H2 "目次" →　位置（幅60px）、レイアウト（四方ボーダー幅4px、2重線、緑色）、文字レイアウト
　　　　　　　　　　（行高さ1.5倍）、文字レイアウト（ワード間5px、水平中央揃え）、色と背景（前景色緑色）

　　.selected <LI>の”BoxModelとは”→　色と背景（背景色ピンク色）、位置（幅110px）、文字レイアウト
　　　　　　　　　　（行高さ1.9倍）、（ワード間5px、水平左揃え）、レイアウト（上・右・下方ボーダー幅1px、
　　　　　　　　　　実線、緑色、左ボーダー幅4px、 実線、緑色、マージン-20px、パディング7px）
　　　　　　　　　　これはMainBoxの中に現在選ばれているページの目次項目をピンク色の背景色で示すため。

　　.notselected<LI>の”Boxの作り方”→　色と背景（背景色薄黄色）、位置（幅110px）、文字レイアウト
　　　　　　　　　　（行高さ1.9倍）、（ワード間5px、水平左揃え）、レイアウト（上・右・下方ボーダー幅1px、
　　　　　　　　　　実線、緑色、上マージン5px、　左ボーダー幅4px、 実線、緑色、マージン-20px、
　　　　　　　　　　パディング7px）

　☆MainBoxの中に入れるもの

　 .large <H3>の　”１．BoxModelとは：”→　色と背景（前景色茶色）、文字レイアウト（水平左揃え）、
　　　　　　　　　　フォント（太さ900）

　　.middle <p>の　”CSSとHTM…”→　　色と背景（前景色茶色）、文字レイアウト（水平左揃え）、
　　　　　　　　　　フォント（太さ700）

　　.small <p>の　”<head>～</head>の中：”→　色と背景（前景色標準）、文字レイアウト（水平左揃え）、
　　　　　　　　　　フォント（太さ100）

　☆FootBoxの中に入れるもの：

　　.foot_txt <p>の　”この頁の著作権…”→　色と背景（前景色標準）、文字レイアウト（水平中央揃え）、
　　　　　　　　　　フォント（より細い）

　 .btn_back <ホームページに戻るボタンのimg>　→　レイアウト（下方マージン5px）

　　　　　　　　　　　


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

　　　　日時：　９月２９日（第５金曜日）に決定し部屋の予約がなされました。
　　　　　　　　　例月の第４金曜日は秋分の日の休日になりますので、９月のみ第５金曜日に変更しました。
　　　　　　　　　間違いないようにお願いいたします。

　　　　テ―マ：　「ホームページ・ビルダーを使ったBox Modelの作成実習」の続き
　　　　　　　　　　　或いはJavaScript入門になります。
　　　　　　　　　
以上

　｢参考情報｣

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