第5回目
日 時：2012年12月15日 13:30～16:00
場 所：団交室Ⅰ Ⅱ
出席者：受講者 22名、HPWG 8名
講 師：内山啓次郎
内 容：第4章：スタイルシートで彩りをつけてみる
- ページ全体（body）に文字色と背景色及びフォントサイズを指定する
スタイルシートマネージャーを起動し、「追加」ボタンをクリックて、表れたスタイルの設定ダイアログで、HTMLタグ名ボックスに「body」と入力し「色と背景」タブをクリックする。文字色は「前景色」ボックスの右側の下向き▼をクリックして黒色選択します。背景色についても同様に白色を指定する。
続いて、「フォント」タブをクリックし、サイズ右側の「予約語」ボタンをクリックして、プルダウンメニューから「文字の高さ」を選択する。サイズボックスが「１」になっていることを確認して「OK」ボタンをクリックする。 - 大見出し（h1）の文字色と背景色を指定する
スタイルシートマネージャーを起動し、「追加」ボタンをクリックて、表れたスタイルの設定ダイアログで、HTMLタグ名ボックスに「h1」と入力し「色と背景」タブをクリックする。文字色は「前景色」ボックスの右側の下向き▼をクリックして目的の色選択する。求める色が無い場合には「ユーザー定義」をクリックして、さらに「その他」ボタンをクリックし、目的の色を指定して「OK」ボタンをクリックする。背景色についても同様に指定する。 - 中見出し（h2）の下に点線を加えフォントを指定する
スタイルシートマネージャーを起動し、「追加」ボタンをクリックて、表れたスタイルの設定ダイアログで、HTMLタグ名ボックスに「h2」と入力し、「レイアウト」タブをクリックする。「下方向」として、ボーダー部分で幅、スタイル、色をを設定する。続いて「フォント」タブをクリックし、「フォントの候補」で目的のフォントを選択し、「追加」ボタンをクリックした後「OK」ボタンをクリックする。 - リストマークの設定
スタイルシートマネージャーを起動し、「追加」ボタンをクリックて、表れたスタイルの設定ダイアログで、HTMLタグ名ボックスに「li」と入力し、「リスト」タブをクリックし、リストマークのタイプから目的のマークを選択する。
リストマークに画像を使用したい時は、「リストマークの画像」右側の「参照」ボタンをクリックして「素材集から」をクリックして目的の画像を選択する。「リストマークの画像」のボックスに画像のurlを確認して「OK」ボタンをクリックする。
今回はリストマーク画像を用いないので、この機能を確認したら設定を解除する。 - クラスhonbunボックスに背景画像を挿入する
スタイルシートマネージャーを起動し、「ルール情報」欄で「.honbun」を選択して「編集」ボタンをクリックし、「色と背景」タブをクリックする。「背景画像」右側の「参照」ボタンをクリックして「素材集から」をクリックして背景に使用する画像を選択する。「属性」の「繰り返し」からいずれかを選択して「OK」ボタンをクリックする。繰り返し条件による背景の現れ方を確認選択する
今回は背景画像を設定しないのでこの条件を削除しておく。 - address要素を右寄せにし離れた位置に上線を引く
スタイルシートマネージャーを起動し、「追加」ボタンをクリックて、表れたスタイルの設定ダイアログで、HTMLタグ名ボックスに「address」と入力し、「文字のレイアウト」タブをクリックし右寄せを選択する。続いて「レイアウト」タブをクリックし、「上方向」とし、ボーダー部分で幅、スタイル、色を設定して、パディングを１文字の高さに設定し「OK」ボタンをクリックする。 - リンク部分を修飾するく
スタイルシートマネージャーを起動し、「追加」ボタンをクリックて、表れたスタイルの設定ダイアログで、HTMLタグ名ボックスに「a」と入力し、「レイアウト」タブをクリックし、「４方向とも同じ値」であることを確認して、ボーダー部分で幅、スタイル、色を設定して、「OK」ボタンをクリックする。 - リンク部分にマウスがあたった時の修飾をする
スタイルシートマネージャーを起動し、「追加」ボタンをクリックて、表れたスタイルの設定ダイアログで、HTMLタグ名ボックスに「a:hover」と入力し、「レイアウト」タブをクリックし、「４方向とも同じ値」であることを確認して、ボーダー部分で上記と異なったスタイルと色を設定する、続いて「色と背景」タブで背景色を設定して「OK」ボタンをクリックする。
最終的に本日のCSSの設定は下表のとおりとした。
| body | 背景色 | #ffffff |
| 文字色 | #000000 | |
| フォントサイズ | 1em | |
| h1 | 文字色 | #ffffff |
| 背景色 | #ff0000 | |
| フォントサイズ | 極めて大きい | |
| h2 | ボーダー 下 | 5px 点線 #0000ff |
| フォント | serif | |
| li | リストマーク | 四角 |
| Address | 水平方向の位置 | 右 |
| パディング 上 | 1em | |
| ボーダー 上 | 標準 実線 #000000 | |
| a | ボーダー 4方向 | 5px アウトセット オレンジ色 |
| a:hover | ボーダー 4方向 | 5px インセット 黄緑 |
| 背景色 | 緑 | |
| 文字色 | #ffffff |
シビア―に点検したところ完全にクリアーしたのは受講者22名中5名に留まりました。CSS以外の部分、CSS部分に分けるとそれぞれ1０名が正確に記載されています。
CSS以外の部分については、終了タグ位置の間違え、必要タグの欠落と言った重大な誤りも見受けられます。また文法上の誤りではありませんか、CSSをタグに直接記述があり、今回の講習の趣旨に合わないので間違えとしました。タイトル無し、不要な改行<br>が目立ちます。
CSS部分については、指が滑ったのか意味のない不要記載がありますが、概ね正しく記載されていますので容易に改善できることと思います。