平成２２年０９月例会
日時： 平成２２年０９月２４日（金） 午後１：００～４：００
場所： 京葉銀行文化プラザ内ボランティアズ・カフェ会議室
参加者： Ｈｒさん、Ｎｈさん、Ａｓさん、Ｓｋさん、及びＨｓさんの５名
議題： 今後の進め方 及び ホームページデザインの勉強
久し振りに集まったメンバー：涼しくなって皆さん生き生きとしています
（１）打ち合わせと報告事項
Ａ．ホームページ同好会の今後の進め方；
☆ 幹事としてはブログを立ち上げたり、勉強の準備を一生懸命しているが、最近メンバーからのメール
等のリアクションもブログの書き込みも余りないので、メンバーの会を盛り上げようとという熱意が失
われているように感じられます。この状況を脱するにはメールやブログの書き込みを通じて双方向的
なコミュニケーションを回復して欲しい。
☆ 会員はホームページ同好会の団体ブログに積極的に記事を投稿し、
同時に投稿された記事に対しても積極的にコメントを書き加えることによって、
ブログとホームページが共々に活発化すよう心がける。
☆ ブログの「技術のQ&A」カテゴリーを活用して欲しい。このQ&Aの書き込みとそれに対するコメントを
通じてメンバーが技術の問題解決を共有できると同時に会の一体感を醸成出来ます。
☆ ブログの操作に不案内ならば、例会の前に言って頂ければIDやパスワードを用意して、ボランティア
ズ・カフェの端末で実演します。或いは、CＡＮＰＡＮの事務局に電話して訊ねて下さい。
ＣＡＮＰＡＮの事務局に電話番号は： ０３－６２２９－５５５１ です。
☆ 今後会員への連絡は、ブログに慣れるために、出来る限りブログの｢お知らせ｣記事で行う。
それに対して会員は出来る限り｢コメント｣で確認したり、意見を述べたりして下さい。
ということを確認しました。
（２） ｢ウェブ・ページを見やすくするデザインとレイアウト：
（A）デザインの基本原則
１）近接（グループ化）
関連性のあるものを一つのグループとして見えるようにする。
要素をグループ化するタグ：
<div>～</div>; 複数行に渡る範囲に適用
これはCSSではコンテナーと言われて重要な役割がある
<span>～</span>; 文章の一部など狭い範囲に適用
２）整列（レイアウト）
ページ全体に亘って一つの整列方法を使って統一されている。
要素を整列化するタグと属性：
<p>～</p>; 段落で文章の切れ目をハッキリさせる。
<table>～</table>; レイアウトを明確にする。
<div>～</div>; 内容物をブロックの中に入れてレイアウトする。
align=”left or center or right”;配置属性
３）反復
色・形・ラインなどの要素を繰り返してサイト全体に亘っての統一性を持たせる。
外部CSSはページ毎の繰り返しで統一性が出る
Classスタイルは同一クラスの繰り返しで統一性が出せる
４）対比
情報や要素を対照的にして、重要なポイントを浮き上がらせる。
要素を浮き上がらせるタグや属性：
<hx>～</hx>；文章の見出し
<hr>；水平線
<em>～</em>；強調（斜体強調）
<strong>～</strong>；強調（太字強調）
color=”#ff000” bgcolor=”黄 or #ffff00”； 前景色と背景色の属性
（B） SEO (Search Engine Optimization）
GoogleやYahooなどの検索エンジンに受け入れられ易くなる目安のヒント
☆ 文章構造とデザイン（スタイル）の分離
HTMLによる文章構造がしっかりしていて、デザインは別途にCSSで施されている
☆ Top頁の作り方とその中のKeyWordとタイトルの付け方
☆ Accessibilityに対する配慮
ハンディカップを持った検索者への配慮（例：画像等に代替テキストをチャント入れる）
☆ 更新頻度
殆ど更新しないサイトは見捨てられて、リピーターが付かない
（C）スタイル・シートでスタイルに変化を付ける方法
１） htmlのタグでスタイルを設定する
ウェブ・ページのhead部分にhtmlタグのスタイル・シートを設定する。
同一ページのタグが全て同じスタイルになって統一性は保たれるが、反面
同じタグでも異なったスタイルにしたい場合はこれだけでは困る。
例：
<STYLE type="text/css"> <!--
Table {{border-width:1px1px1px1px;border-style:solid solid solid solid;
border-color: green green green green;}--> </STYLE>
この場合、このページ内にある全ての表（table）の外枠が１pxの緑の実線となる。
２） class属性でスタイルを設定する
htmlのタグに関係なくclass属性でスタイルを設定するので、タグ毎に異なったスタイル
を設定できる。ウェブ・ページのhead部分にはclass名でスタイルを定義し、bodyの
該当タグ内には「class=”class名”」という属性を挿入して関連付ける。
例：
<STYLE type="text/css"> <!--
.small {border-width: 2px 2px 2px 2px ;border-style: solid solid
solid solid;
border-color: maroon maroon maroon maroon; empty-cells: show;}
--> </STYLE>
この場合、このページ内にある表やセルなど４隅に枠のあるタグで、その属性に
「class=”small”が挿入されているものは、枠線が2pxの茶色の実線となる。
３） id属性でスタイルを設定する
class属性でスタイルを設定する場合と同じように、タグ毎に異なったスタイルを設定できる。
ウェブ・ページのhead部分にはid名でスタイルを設定し、bodyの該当タグ内には
「id=”class名”」という属性を挿入する。但し、同じidはその頁には１つしか使えない。
例：
<STYLE type="text/css"> <! - -
#no3 {color:red; background-color: yellow; border-width: 2px 2px
2px 2px; border-style:
dashed dashed dashed dashed; border-color red red red red;}-->
</STYLE>
この場合、このページ内にある表やセルなど４隅に枠のあるタグで、その属性に
「id=”no3”が挿入されている表は、枠線が2pxの赤色の破線となって表示される。
（C）ホームページ・ビルダーを使ってClassとIDスタイルを設定する実習
１） 「test_site」フォルダー内に材料となるHtmlページpage_14が保存されているのを確認。
目次頁「index.html」を開いて、14番目の エントリーにpage_14へのリンクを張る。
page_14を開いて、外部CSS「out_common.css」を挿入する。
page_14ペイジの背景、見出し、及び３つの表（Table）全てに同じ枠線のスタイルが設定さ
れたことを確認する。
２）全ての段落<p> </p>に適用されるフォント色をGreenに設定する。
「表示」メニュー→「スタイルシートマネジャー」→「追加（T）」→
「HTMLのタグのスタイル設定」を指定 → ＜HTMLタグの候補 ＝ 段落p を指定＞ →
＜色と背景 → 前景の色＝緑 に設定＞ → 第1表の中の文字が緑色になったことを確認する。
３）第２の表のクラス・スタイル設定：
「表示」メニュー→「スタイルシートマネジャー」→「追加（T）」→「クラスのスタイル設定」
→ ＜クラス名＝．small＞ → ＜レイアウト：幅＝2pxスタイル＝実線色＝茶＞ → OK
作成された「smallスタイル・シート」を第２の表に適用するには：
＜第2表の全てのセルをドラグして選択＞ → ＜右上の属性ボタンからTD属性を選択＞ →
＜属性ダイアグラムのセル・タブの選択の上で、右下の「スタイル」ボタンをクリック＞ →
＜定義済みのクラス＝smallを指定してチェックを入れる＞ → OKボタン
第２の表のセル枠が茶色の太い実線になったことを確認する。
４）第３の表のID属性スタイル設定：
「表示」メニュー→「スタイルシートマネジャー」→「追加（T）」→「IDのスタイル設定」→
＜ID名＝#no3＞ → ＜色と背景： 前景色＝赤、レイアウト：幅＝2pxスタイル＝破線
色＝赤＞ → OK
＜第３表の全てのセルをドラグして選択＞ → ＜右上の属性ボタンからTD属性を選択＞ →
＜属性ダイアグラムのセル・タブの選択の上で、右下の「スタイル」ボタンをクリック＞ →
＜定義済みのid＝no3を指定してチェックを入れる＞ → OKボタン
第３の表のセル枠が赤色の太い破線で中の文字も赤になったことを確認する。
５）カラー属性のClassスタイルの設定：
「表示」メニュー→「スタイルシートマネジャー」→「追加（T）」→「Classのスタイル設定」→
＜Class名＝.color2＞ → ＜フォント：より太い色と背景：前景色＝濃紺＞ → OK
このフォント色を第1表と第2表の表題（Caption）及び第1表の最下端段落に適用する。
ホームページ・ビルダーでは表の表題にClass名を関連付ける機能はないので、<caption>
タグの中に「class=”color2”」を入力しなければなりません。
第1表の最下端段落に適用するには第2表にClassスタイル・シートを適用したと同じ方法で
適用することが出来ます。
第1表と第2表の表題（Caption）及び第1表の最下端段落の文字が濃紺色の太字になったこと
を確認する。
６）横書きの年賀状を縦書き表示する
class属性スタイル「.vertical」を以下のように設定する。
Vertical {width:430px; height:180px; writing-mode:tb-rl;}
残念ながら、ホームページ・ビルダーでは横書きを縦書きにするスタイル・シートは用意されて
いないので、先ず「スタイルシートマネジャー」で「.vertical」Classスタイル・シートを指定
し、位置タブから横430ピクセル、縦180ピクセルを規定して「.vertical」スタイル・シートを
生成しておく。その上で、HTMLモードで「.vertical」スタイル・シートを表示した後、
最後に、「writing-mode:tb-rl」を追加すればよい。
ページ編集モードに戻して、横書き年賀状が書かれている辺りをクリックすると、右上端に
「DIV」ボタンが現れるので、その属性ダイアログから定義済みのClass「vertical」を指定すればよい。
最後に、「プリビュー」モードで年賀状が縦書きで表示されていることを確認する。
｢参考情報｣
・Ｃａｎｐａｎ登録ページ： https://canpan.info/index_view.do （canpanで検索可）
・ホームページ同好会ブログ： http://blog.canpan.info/hpgrpchiba/ （同好会ＨＰからリンクあり）
・Ｃａｎｐａｎの相談電話： ０３－６２２９－５５51 → 担当の女性が大変親切に対応してくれます。
|
