平成２３年４月度

平成２３年４月の例会

　　４月の例会は本来ならば第４金曜日の４月２２日に開催されるべきですが、生憎幹事がその日に都合が悪いため、第３金曜日の４月１５日変更させて頂きました。

　猶、平成23年4月1日より、千葉市民活動センターおよび千葉市ボランティアズ・カフェの運営は、「特定非営利活動法人まちづくり千葉」が受託することとなりました。新しいNPOのスタッフが詰めておられると思ったのですが、まだ新旧の引継ぎが済んでいなくて、もとのスタッフがおられました。


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

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

（１）CSSとHTMLの連携に関わるBoxModelとは

　　　<head> ～</head>の中では：

　　　　　CSS, JavaScript, APIが書式（Attribute）を規定する。
　　　　　Attributeは様々な形で（例えば色々な尺度で）規定される。
　　　　　各々のAtributeにはID名（#xxx）、Class名(.yyy)、タグ名が付けられる。
　　　　　この名前でHTMLの中のBoxと連携付けられる。
　　　　　IDはそのページに唯一つ、Classは何回でも、タグはそのページの全てのタグ

　　　<body> ～ </bodyの中では：

　　　　　HTMLの各要素（Element）は全てある種のBoxと見做される。
　　　　　各Boxには基本的に；
　　　　　　＊Boxのレイアウト
　　　　　　　　（位置、4周のボーダーの幅、スタイル、色、マージン、パッディング）
　　　　　　＊文字のレイアウト
　　　　　　　　（Boxの中に入る文字の配列）
　　　　　　＊フォントの種類、色と背景
　　　　　があると考えられている。

　　　Boxの種類は基本的に：

　　　　　　＊ <div> 　；汎用に使われるBox
　　　　　　＊ <h1> ～ <hn> ；見出し
　　　　　　＊ <p> ；段落
　　　　　　＊ <li.> 　 ；番号付リスト、マーク付リスト
　　　　　　＊ <table> ；表
　　　　　　＊ 等


（２）ホームページ・ビルダーを使ったBox Modelの作成実習

　　目標：　DIVの大枠を次のように規定する
　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　←　　　　７００ｐｘｌ　　　→
container DIV　(この中にheaderとcontent DIVを含む)
　　↑
１００ｐｘｌ　　　　　　　　　　header DIV
　　↓
content DIV　(この中にsideとmain DIVを含む)
　　　　　　　　　　　　　　　
←１５０ｐｘｌ→


　　side DIV


　　　↑

６００ｐｘｌ

　　　↓

 　　　　　　　　　　←　　548pxl　　→


　　　　　　　　　　main DIV


　　（Step１） ホームページ・ビルダーを立ち上げ白紙の新規ページを作成。

　　（Step２） container、header,　content、side,　mainの５つの枠<div>を作成する。
　　　　　　　　各々の枠に就いて：　挿入　→　レイアウト枠　→　IDだけを記入　

　　（Step３） 各々枠<div>の不要のStyleを削除する。

　　（Step４） HTMLモードで順当な入り子になるように<div>を以下のように並べる。
　　　　　　　　
　　　　　　　　<div id="container">
　　　　　　　　　　　<div id="header"></div>
　　　　　　　　　　　<div id="content">
　　　　　　　　　　　　　　<div id="side"></div>
　　　　　　　　　　　　　　<div id="main"></div>
　　　　　　　　　　　</div>
　　　　　　　　</div>

　　（Step５） スタイル・シート・マネジャーで５つの枠<div>のルールを規定する。
　　　　　
　　　　　<div id="container">
　　　　　　　　位置　→　横幅700pxl 高さ720pxl
　　　　　　　　レイアウト　→　ボーダー　幅＝１pxl, 実線、グレイ
　　　　　　　　　　　　　　　　　　Margin 右　＝auto
　　　　　　　　　　　　　　　　　　Margin 右　＝auto　をHTMLソース・モードで修正する
　　　　　　　　　　　　　　　　　　これは大枠を中心揃える機能がホームページ・ビルダーに無い為。

　　　　 <div id="header">
　　　　　　　　位置　→　横幅698pxl 高さ100pxl
　　　　　　　　レイアウト　→　ボーダー　幅＝１pxl, 実線、グレイ

　　　　 <div id="content">
　　　　　　　　位置　→　横幅698pxl 高さ600pxl
　　　　　　　　　　　　　　　廻り込み　両方解除
　　　　　　　　レイアウト　→　ボーダー　幅＝１pxl, 実線、グレイ

　　　　<div id="side">
　　　　　　　　位置　→　横幅150pxl 高さ600pxl
　　　　　　　　　　　　　　廻り込み　左
　　　　　　　　色と背景　→　素材から壁紙を選ぶ、繰り返し指定

　　　　<div id="main">
　　　　　　　　位置　→　横幅549pxl 高さ600pxl
　　　　　　　　　　　　　　　廻り込み　左
　　　　　　　　色と背景　→　素材から壁紙を選ぶ、繰り返し指定


　　　上のように５つの枠の設定が終ったらプリビュー・モードで枠の設定を確かめる。

　　（Step６） 各枠にコンテンツを入力する。

　　　　H1,　H2,　H3,　Li,　Pに書式に構わず各枠内に入力する。　"header"に背景画像を指定する。

　　（Step７） 各BoxのStyleのルールを規定する。


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

　　　　日時：　５月２７日（第４金曜日）に決定し部屋の予約をする。

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

　｢参考情報｣

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