第5回HTML講座（Ⅲ)は、10月21日（木）の9:00～15:00、12名の参加で、日立市施設の「会瀬青少年の家」の「体育室」で開催しました。今回はテキスト本のPart4の「スタイルシートによるレイアウトデザイン」です。本講座の講師は安田出世話人が担当しました。

講座の内容梗概は下記のとおりです。

Pａｒｔ４　スタイルシートによるレイアウトデザイン

Lesson-1　セレクタの種類を学ぼう

◆HTMLタグをセレクタ―として利用する以外に、オリジナルのセレクタを作成することができる。オリジナルのセレクタには2種
　 類あり、IDセレクタとクラスセレクタがある。
◆IDセレクタは、HTML文書内の要素1つだけに特別なスタイルを設定するとき使う。IDセレクタを定義するにはスタイルシート
　 とHTML文書の両方に記述する必要がある。スタイルシートにはセレクタ名の前に「#」を付け、HTML文書には、適用させた
　 い要素にid属性と属性値（スタイルシートで記述したセレクタ名と同じもの）を追加する。
　　　　例、 スタイルシート　#content{ …… } 　　　　HTML文書　<div id="content">……</div>
◆クラスセレクタは、HTML文書内の複数の要素にスタイルを設定する時に使用する。クラスセレクタを定義するには、スタイル
　 シートとHTML文書の両方に記述を追加する。スタイルシートには使用するオリジナルのセレクタの前に「.」を付ける。
　　　　例、　スタイルシート　.style1 { ……　｝ 　　　　HTML文書　<div class="style1">……</div>
◆スタイルシートにおいて、複数のセレクタを「,」で区切って記述することで、記述した複数のセレクタに同じスタイルを指定す
　 ることができる。 　例、　　div, .article{ line-height: 150%; border： 1px solid #cccccc; }
◆スタイルシートでは、セレクタを2つ並べることにより、セレクタ内の特定セレクタだけにスタイルを適用させることができる。
　　　　例、　#content p { background: #BBDDEE; padding: 10px; }
◆リンクを記述する際に使用する「a」要素に対して擬似クラスを設定することで、リンクの色を変えたり、背景色を加え下線を引
　 いたり、様々なスタイルを適用できる。擬似クラスには 「link（未訪問）」「visited（訪問済み）」「hover（オンマウス）」「active
　 （アクセス中）」の4つがある。
　　　　例、a:link{ color: #289 }、a:visited{ color: #438 }、a:active,a:hover{ color: #29A; text-decoration: underline; }
◆「a」要素に指定できる擬似クラスは、必ず、 「link」「visited」「hover」「active」の順に記述すること。
◆2段組を実現するには、floatプロパティとclearプロパティを使用する。
　　　　例、#content{ float:left; } 　#nav{ float:right; }　 #footer{ clear:both; }

Lesson-2　floatプロパティを使ってレイアウトしよう

◆スタイルシートを使ったWeｂページのレイアウトは、コンテンツそのものを一まとまりの4角い箱（ボックス）と考え、これを組み　 合わせて作っていく。つまり、スタイルシートを使って細かく指定し、配置する。
◆HTML文書にはid属性を記述する。　例、<div id="content">
◆名前は、ページ構造に関するスタイルシートを記述する。すなわち、#wrapper、#header、#content、#nav、#footerなど。
◆floatプロパティを使って段組みレイアウトを実現させる。
　　　　例、#col1 { float: left; }、　#col2 { float: right; }　 #footer { clear: both; ｝
◆リスト要素を使って、横に並ぶメニューを作成する。　例、#nav li { float: left; } その後、leftをclearする必要がある。

Lesson-3　positionプロパティを使ってレイアウトしよう

◆ウインドウ内におけるボックスの表示位置を詳細にレイアウトする場合、配置のルールをpositionプロパティ、leftプロパティ、
　 rightプロパティ、bottomプロパティを利用する。それぞれのプロパティの値は単位付き数値を記述する。
◆positionプロパティの値として、「absolute」「relative」「fixd」「static」があり、それぞれルールが異なる。
◆「absolute」はウインドウ上辺からの距離、「relative」は何もスタイルが指定していない地点からの距離、「fixd」はウインドウ
　 上辺からの距離となるが、スクロールしても位置の変動はない。「static」はレイアウトの指定のない、初期設定で表示される
◆このpositionプロパティを使って、画像の配置など詳細なレイアウトの設定が可能である。
◆スクロールバー付きボックスの作成は、overflowプロパティを使用する。値として「visible」、「scroll」、「hidden」がある。
　　　　例、#content { overflow: scroll; }
◆ボックスの重ね順は、z-indexプロパティで指定できる。 例、#img2 { z-index: 2; } 　#img3 { z-index: 1; }

世話人・文責：安田 出

第5回HTML講座（Ⅲ）の参加者

（戻り）