(A)平成24年10月度例会:
10月19日(金)午後1時より4時40分まで例会と勉強会が開かれました。今月も引き続きツイン・ビル2号館9階の千葉市民活力創造プラザの会議室を借りての開催です。プロジェクターも借りられて助かりました。
討議された事項は以下の通りです。
- 11月17日(土)と18日(日)に開催される「ちば市民活力創造」フェアの準備
フェアの準備に就いて次のことが相談の結果纏まりました。
☆ 同好会のPR用のポスターを1枚作成する。 ☆ 同好会のPR用の立標識3枚作成する。
☆ 同好会のPR用のチラシ30枚作成する。 以上、3件Appleさん作成担当、Lilyさん作成協力。
☆ PRの目的は2点、① 同好会のホームページ作成に関してのNPO支援及び相談活動
② ホームページ作成技術を学びたい会員の募集
☆ 11月17日(土)11時よりアテンドは長兵衛、Lily、Apple(PMのみ)、11月18日(日)10時よりアテンドは長兵衛、円月
- 勉強会のやり方に就いて
月一回の例会の2時間の勉強会で出来ることは非常に限られていますので、出来る限り会のブログを通しての質疑応答による学習に焦点を当て、月例会では質疑応答で解決出来なかった問題等の総括をするだけにしようということで合意しました。
あと1,2回はテーマを「HTMLとCSS連携」にしぼり学習することとし、具体的な共通の例題(来月まではTop英会話スクールの2ページ目)を選んで各自が次の例会までに作成してみる。問題に直面したら、その時点のページのURLを記してブログのQ&Aに支援を求める。
(B)勉強会:
千葉市民活力創造プラザの会議室での勉強会風景ーープロジェクターが非常に効果的でした
テーマ:HTMLとCSSの復習
(1) 制作依頼を受けた「Top英会話スクール」の例題の解説
特に次の2点に焦点を当てた解説:
- page_course.html (コース及び授業料のページ)のBoxモデルを使った内容物の配置
- KentWebのcgiパッケージを使ったアクセス・カウンターとアクセス集計表の紹介
(2) FireFoxとFireBugの導入とホームページビルダーとの連携
- FireFoxとFireBugのダウンロード。
- ホームページビルダーからFireFoxとFireBugを呼び出して編集中のページを即座にチェックすること。
(3) Boxモデル作成の上の幾つかのコツ
- 横並びに入れ子になっている2個の子<div>の高さの揃え方
例えば、<div id="left_side""> と <div id="right_side" >の場合は、内容物の違いで高さは不揃いになるので、
<div id="left_side" class="height"> と <div id="right_side" class="height"> のように共通のclass="height"で高さを揃える - 親枠の中で内容物の左揃えには親枠の { padding-left: 10px; } が有効
これを内容物の { margin-left: 10px; } で行うと全ての内容物に { margin-left: 10px; } を規定しなければならず、保守作業が大変でお勧めできません。 - ソース・コードを階層構造が判るように文字下げをして並べる方法
Tabキーで文字下げをして、Spaceキーでしない。
文字下げの桁数は「ツール」 → 「オプション」 → 「ソース編集」 → 「文字下げ」で規定する。
- 入力時のモードは出来る限り「ページ/ソース」モードを使うことをお勧め
上半分のページ編集画面で入力と同時に下半分のソース編集画面に生成されるソース・コードを確認しながら徐々にソース・コードに慣れる事が将来役に立つ。CSSのソース・コードの手入力はスタイルシート・マネジャーを使うより遥かに効率的です。
また、CSSのソース・コードに慣れておくと、将来jQueryを使うときに文法が大変似ているので役立つ。 - 複数のBoxを横並びする方法
殆どのHTMLタグはBlockの性格を持っていて、その侭だと上下に縦並びして表示(display)されます。
それらを横並びにするには、{ float: left; display : inline } のStyleルールが必要です。
(4) 11月例会までの宿題
- 各自、制作依頼を受けた「Top英会話スクール」の例題の「コース及び授業料」のページをBoxモデルを使って作成してみる。
そのページのURLは: http://top.vip.zmx.jp/page_course.html です。 - 各自、作成途上に問題に直面したら、必ずそのページのURLを添えて同好会ブログのQ&Aにヘルプを求める。
- 他人のQ&Aに就いて何か問題か判った方はそのQ&Aで援助の手を差し伸べる。
- 最終的には、11月の月例会で他の会員と一緒になって解決を試みる。
(C) 次回の例会とその討議テーマ
日時: 平成24年11月23日(第4金曜日・祝日)13:00~16:30
場所: ツイン・ビル2号館9階の千葉市民活力創造プラザの会議室
テ―マ: 引き続き「HTMLとCSSの連携」をテーマにして学習します。
11月17・18日のフェスタの結果を検証する。