【区分  】: ホームページ勉強会
【活動日】: 平成18年6月28日
【時間  】: 10:00〜12:00
【場所  】: 鶴ヶ島地域活動支援センター
【件名  】: 6月HP勉強会報告
【報告者】: 秋吉敏子
【参加者】: 近藤、須田、稲川、綿貫、吉田、菅原、宇佐美、大山、林、木野、秋吉
 

【内容】:
 [1]初級コース:

 1. 稲川さん、須田さんの解説によって次のことを勉強した。

   (1)HPが表示される仕組み。
   (2)スタイルシートとは。
   (3)アクセシビリティを配慮したHP。

  Key Words:
    ブラウザ
    テキストエディタ
    Webページ
    HTML
    マークアップ言語
    HTML4.01
    HPの構造内容
    文字や画像のレイアウト
    スタイルシート(CSS)
    アクセシビリティ
    指示タグ
    etc .
    (説明内容は近藤講師のテキスト参照)

 2. 箇条書きをHTML化してブラウザに表示する。

  (1)ソフトは、Hyper Edit(ハイパーエディター) を使う。
  (2)<html>および<head>部分は、近藤講師提供のテンプレートを利用する。
  (3)メモ帳に作成した箇条書き文に、箇条書きを表すためのタグ
    <ul>
      <li>データ</li>
      <li>データ</li>
    </ul>
  または
    <ol>
      <li>データ</li>
      <li>データ</li>
    </ol>
  でマークアップして<body>〜</body>内に貼り付けて保存する。
  (4)ブラウザに表示させる。

[2]上級コース:
 近藤講師から、宿題回答の問題点についての説明があった。
   (1)4つの括りは同じパターンの繰り返しである。
    宿題は ULまたはOLよりもDL書きが「構造の意味」から適している。
    構造を見極めて利用するタグとレイアウトを決めることが大切。
   (2)位置は、マージンの設定、または「position:relative」を利用。
    「説明文」と「説明される項目(用語)」を同じ行位置に表示されるようにするには、marginとpadding を設定をする。
   (3)タグによるマークアップは
    <dl>
        <dt>用語</dt>
        <dd>説明文</dd>
        <dt>用語</dt>
        <dd>説明文</dd>
    </dl> 
    という形になる。
   (4)CSSは例として次のようになる。
    dl  { line-height: 1.5em; width: 555px; }
    dt  { width: 6em; padding: 1px 3px; border: solid 1px #dd0000; }
    dd  { margin: -1.7em 0 0 7.5em; padding:0 0 1em 1em;  }

   CSSはブラウザによって表示に差があるため、複数のブラウザを利用して比較、確認をしながら書くのが望ましい。 

【決定事項】:
 /
 

【課題】:
  /


【感想】:
 十分に理解していない者が報告を書くのは、とても難しい。
とりあえず書いたものを、近藤講師に添削をお願いしました。
いろいろと追加をしていただき、「なるほど」といい勉強になりました。
 本当にありがとうございました。 

─────────────────────────────
20060702