【区分 】: ホームページ勉強会
【活動日】: 平成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