第7回目

日　時：2013年1月12日　13:30～16:30

場　所：団交室Ⅰ Ⅱ

出席者：受講者　25名、HPWG　8名

講　師：竹本 隆　

内　容：第6章：表を作ってみる

3種類の表を作成し、それぞれをhyou2.html、hyou3.html及びhyou4.htmlとして各自のtextフォルダに保存し、TOPページと相互リンクした。

表の挿入 その１

  1. ホームページビルダーでサイトを開いて、新規ページを作り、ツールバーの「表の挿入ボタン」をクリックし、表のサイズを３行３列に、表の属性で「表の枠を表示する」にチェックを入れ、表のデザインで「最初の行を見出しセルにする」にチェックを入れ「OK」ボタンをクリックする。
  2. 編集画面で挿入された表の各セルにテキストに従って文字列を入力する。
  3. 見出しセルの設定
    1. １行目を選択状態にして、スタイルシートマネージャーを起動し、「追加」ボタンをクリックする。
    2. HTMLタグ名が「th」になっていることを確認して、「色と背景」タブで前景色を「赤」、背景色を「黄色」に設定して「OK」ボタンをクリックする。
  4. ２行目以下のセルの設定
    1. ２行目を選択状態にして、スタイルシートマネージャーを起動し、「追加」ボタンをクリックする。
    2. HTMLタグ名が「td」になっていることを確認して、「色と背景」タブで背景色を「水色」に設定して「OK」ボタンをクリックする。
  5. １列目のセルの設定
    1. ２行１列目のセルにカーソルにおき、画面右側の「スタイルエクスプレス」ビューの「カーソルの位置」タブで「td」を右クリックし、「ルールの新規作成」をクリックする。
    2. 現れたルールの追加ダイアログで「クラス」を選択し、「midasi」と入力し、「OK」ボタンをクリックする。
    3. 現れたスタイルの設定ダイアログの「色と背景」タブで背景色を「黄色」に設定し「OK」ボタンをクリックする。
    4. ３行１列目のセルにカーソルにおき、画面右側の「スタイルエクスプレス」ビューの「カーソルの位置」タブで「td」を右クリックし、「クラスの設定」から「midasi」を選択する。
    5. （注）上記１～４について講習では、ソースで <td class="midasi">と入力しスタイルシートマネージャーで、背景色を「黄色」に設定した。
  6. 「bodyの属性」で「ページタイトル」を「表２」に設定する。
  7. 表の下にTOPへ戻るリンクを設定してファイル名を「hyou2.html」としてtextフォルダーに保存する。

表の挿入 その２

  1. 「hyou2.html」のHTMLソースを全てコピーする。
  2. 「hyou2.html」を閉じ、新規ページを開いて、そのHTMLソース全体に上記でコピーしたソースを貼り付ける。
  3. 「bodyの属性」で「ページタイトル」を「表３」に設定する。
  4. tableの設定
    1. 「tableの属性」で表題を「表の上」に設定する。（<caption></caption>が挿入される）
    2. スタイルシートマネージャーを起動し、「追加」ボタンをクリックする。
    3. HTMLタグ名を「table」にし、「レイアウト」タブで左右のマージンを「自動」に設定する。
    4. 「位置」タブで幅を「500px」に設定する。
    5. 「テーブル」タブで「表題の位置」を「上」に、「テーブルの表示方法」を「固定」に、「内枠線の表示方法」を「セルの内枠線重ねて表示」に、「空白セルの内枠表示」を「セルの枠線を表示」に設定して「OK」ボタンをクリックする。
      （「表題の位置」は指定無しで「上」になるので省略しても可、同様に「空白セルの内枠表示」も指定無しで「セルの枠線を表示」となる。）
  5. 表題を入力する。
  6. 1列目の列幅を指定する
    1. 1行1列目のセルにカーソルをおき、画面右側の「スタイルエクスプレス」ビューの「カーソルの位置」タブで「th」を右クリックし、「ルールの新規作成」をクリックする。
    2. 現れたルールの追加ダイアログで「クラス」を選択し、「haba」と入力し、「OK」ボタンをクリックする。
    3. 現れたスタイルの設定ダイアログの「位置」タブで幅を「200px」に設定し「OK」ボタンをクリックする。
  7. ファイルから名前をつけて保存を選択し、ファイル名を「hyou3.html」としてtextフォルダーに保存する。

表の挿入 その３

  1. ファイルから名前をつけて保存を選択し、ファイル名を「hyou4.html」としてtextフォルダーに保存する。
  2. 見出しセルの設定
    1. スタイルシートマネージャーを起動し、ルール情報で「th」を選択し「編集」ボタンをクリックする。
    2. 現れたスタイルの設定ダイアログの「レイアウト」タブで、4方向とも同じ値になっていることを確認して、パディングを「8px」に設定する。
    3. 引き続き「ボーダー」で、幅を「5px」、「スタイル」を「実線」、「色」を「白」に設定して「OK」ボタンをクリックする。
  3. その他のセルの設定
    1. スタイルシートマネージャーに戻るので、ルール情報で「td」を選択し「編集」ボタンをクリックする。
    2. パディング及びボーダーについて上記と同じ値に設定する。
    3. 「文字のレイアウト」タブで「右揃え」を選択して「OK」ボタンをクリックする。
  4. 1列目の文字配置の設定
    1. スタイルシートマネージャーに戻るので、ルール情報で「.midasi」を選択し「編集」ボタンをクリックする。
    2. 「文字のレイアウト」タブで「左揃え」を選択して「OK」ボタンをクリックする。
  5. 表題（caption）の設定
    1. 表題部分を選択して、スタイルシートマネージャーを起動し、「追加」ボタンをクリックする。
    2. HTMLタグ名が「caption」になっていることを確認して、「レイアウト」タブで下方向のマージンを「10px」に設定して「OK」ボタンをクリックする。
  6. tableの属性で「枠表示」のチェックを外す。講習ではHTMLソースで <table border="1">を<table>に書き換えた。
    注）CSSで表を修飾する場合は、表の挿入時に「表の枠を表示する」にチェックをつけない方が良い。ツールオプションで初期設定しておくと設定の手が省けます。
  7. 上書き保存する

TOPページからのリンクの設定

  1. top.htmlを開く。
  2. リスト「画像の挿入」の下に「表２」、「表３」及び「表４」を加え、それぞれ「hyou2.html」、「hyou3.html」、「hyou4.html」にリンクを設定して上書き保存する。

最終的に本日のCSSの設定は下表のとおりとした。

表２ th 背景色 黄色
前景色 赤
td 背景色 水色
.midasi 背景色 黄色
表３ th 背景色 黄色
前景色 赤
td 背景色 水色
.midasi 背景色 黄色
table 左方向マージン 自動
右方向マージン 自動
幅 500px
テーブルの表示方法 固定
内枠線の表示方法 セルの内枠線重ねて表示
空白セルの内枠表示 セルの枠線を表示
(表題の位置) (上)
.haba 幅 200px
表４ th 背景色 黄色
前景色 赤
パディング 8px
ボーダー 5px　実線　白
td 背景色 水色
パディング 8px
ボーダー 5px　実線　白
文字のレイアウト 右揃え
.midasi 背景色 黄色
文字のレイアウト 左揃え
table 左方向マージン 自動
右方向マージン 自動
幅 500px
テーブルの表示方法 固定
内枠線の表示方法 セルの内枠線重ねて表示
空白セルの内枠表示 セルの枠線を表示
.haba 幅 200px
caption 下方向マージン 10px
topへ こんにちはへ ご苦労様へ 斬・Webオーサリングソフト