2009年06月ホームページ勉強会


【区分  】: ホームページ勉強会
【活動日】: 2009年06月23日
【時間  】: 10時～12時30分
【場所  】: 市民活動交流フロア
【件名  】: 6月勉強会報告
【報告者】: 須田
【参加者】: 6名
            近藤、稲川、福田、大山、綿貫、須田。

【内容】:

無線ルーターを差し込み、各自のPCにつないだ。はじめに、ネットにつながることを全員で確認。

綿貫さん:
javascript  (ジャバスクリプト)  を使って、2枚の画像を置く方法を試した。
坂戸パソボラHPのトップ頁を参照し、ソースの該当部分をコピー＆貼り付けして、自分のサイトで実験してみる。
貼り付ける箇所は <head>・・・</head> の間であるが、 <style type="text/css"> ・・・ </style> 内ではなく、</style> の後。
2枚の画像のサイズを同じに設定し、パソボラトップページと同じように「画像の上にマウスを置くと別の画像に変わります!」
の表示ができた。

福田さん:
自分のサイト内でのファイルのリンクをした。

大山さん:
自分のサイトのレイアウトを工夫した。
画像の右寄せ、画像をフロートさせて文字の回り込み、画像のリサイズなど。

稲川さん:
大山さんのサポート

須田:
みなさんの作業を見学

------------------------------------
スタイルシート(CSS)の書き方について
------------------------------------
CSSはHTMLがブラウザで描画される前に読み込まれているが、まずHTMLの描画が先でCSSは後から適用される。
CSSの内容が複雑で長大になると、全体の描画に時間が掛かる。それは不親切で好ましいことではないという考え方もある。

そのページだけに反映させるには、「class="xx yy"」のように、CSSで複数のスタイル属性を指定する。
特定のページ、特定の箇所だけの表示になる。
複数の場合は、後の要素が優先される。

「class="xx yy"」のように複数のクラス属性を用いると、同じクラス属性を用いた要素のなかから
特定の要素を差別化(区別)することができる。
同じものがいっぱい並んでいてもここだけですよ、というものには、「id」「#」。
他と区別するという目的がある。区別する基準には迷うところだが、ID属性にすることで他と区別しやすく記憶を助けることも。

CSSで、「.」(ドット)があるのと無いの違いは?

ドットが付くのは、クラス属性。
構造タグや本文タグでは、ドットは付けない。

1. <h1>ABC</h1>
     h1 { color : #0f0; } と構造(本文)タグに直接CSSを設定

2. <h1 class="special">ABC</h1>  .special  { color : #0f0; } 

のように2つの書き方があり、1番目の書き方では「.」は付けない。


構造タグというのは厳密にはHTML文書の構造を表すもので、html, header, body これらが構造タグです。
body内に書かれるタグを本文タグと言い、これらのタグには「.」は付きません。
CSSが利用されるようになって、本来スタイルと無縁なタグを本文タグとか(本文の)構造(のみ表現する)タグと呼ぶようです。

見出しの「h1」には「一番重要な見出し」という意味があります。ここでは「意味」はあっても見た目の要素はありません。
見出しは、h1からh2、h3・・・と順番どおりに使います。
例えば、「ul」なら箇条書き、「p」なら段落、というように構造タグ(本文タグ)には意味があります。
意味にあった使い方をします。
bold, italic などは見た目だけで意味はありません。構造タグとは言われないわけです。

「h1」などの見出しは、そのページの内容にふさわしく分かりやすい表現(タイトル名)にしましょう。

クラス属性にも内容を想像しやすい名称をつけると良いでしょう。

例えば、単に「box」だけでなく、contentbox、content-main-box、content-sub-box、main-navigationなど、
内容を想像しやすい名称を考えましょう。
整理しやすく、間違いも少なくなります。(あとから間違いも発見しやすい。)
数字だけではわかりにくいです。数字とアルファベットが体系的に組み合わされてあればベターでしょう。

<h1 class="1">ABC</h1> はダメ!
<h1 class="a1">ABC</h1> はOK!

「div」は高さと幅があるが、実体がないもの。それ故、何にでも使える利点もあります。
「span」も実体がない。中身が何かとは問わないもの、ほかの場所と区別するものなどに使うと良いでしょう。
 インライン要素であることに注意が必要です。


【決定事項】:
．レタッチ勉強会(1)  7月14日(火)10時から市民交流フロア
．7月勉強会は、7月28日(火)10時から市民交流フロア

【課題】:
  /

【感想】:
欠席続きで久しぶりのhtmlやCSSでしたが、繰り返し教わることが出来たので、良かったです。
報告書をまとめるにあたり、近藤さんからアドバイスをいただき、とても勉強になりました。ありがとうございました。

─────────────────────────────
[管理用:hps090623] 20090626