第8回目

日　時：2015年2月21日　13:30～16:30

場　所：かるがも団体交流室 Ⅰ Ⅱ

出席者：受講者　12名、HPWG　11名

講　師：竹本 隆、松本 恭彦

内　容：

表を挿入する

  1. サブページstudy.htmlを開く
  2. 見出しの後ろをクリックし、［Tab］キーを押す
  3. ナビメニューの［表の挿入］をクリック
  4. 作成する表の行数、列数、属性を設定する
    ①ナビメニューの［表の挿入］、あるいはメニュー［表］から［表の挿入］をクリック
    ②［表の挿入］ダイアログで、作成する表の行数4と列数2を入力
    ③［表の枠を表示する］をオンにする
    ④［空白セルに空白コードを自動挿入する］がオフになっていることを確認す
    ⑤［OK］ボタンをクリック
  5. 上書き保存

表の枠線スタイルを変更する

  1. ［ルールの新規作成］を起動する
    ①挿入した表のいずれかのセルを選択
    ②［スタイルエクスプレス］ビューを開き
    ③［カーソル位置］パネルを選択
    ④表示されるタグのなかから <table> タグを右クリック
    ⑤表示されたメニューから［ルールの新規作成］をクリック
  2. ［ルールの新規作成］ダイアログで table タグとスタイルの追加場所を確認
    ①追加するルールのタグボックスには、table が入力されていること
    ②追加する場所は外部ＣＳＳファイルであること
    ③［OK］ボタンを押す
  3. ［外部 CSS ファイルの更新確認］ダイアログで［はい］をクリック
  4. ［内枠線の表示方法］を設定
    ①［スタイルの設定 - table］ダイアログが開くので、「テーブル」タブを選択
    ②［内枠線の表示方法］で、選択肢を表示して［セルの内枠線を重ねて表示］を選択
    ③［OK］ボタンで、閉じる
  5. 枠線が重ねて表示される表を確認して、［上書き保存］

セルに文字を入力する

  1. 表のセルに文字を順次入力 （文字の全角・半角にはこだわる必要はありません）
    ①左上のセルをクリックし、「タイトル」と入力
    ②［Tab］キーを押して次のセルへ移動し、「ＨＰ勉強会」と入力
    ③［Tab］キーを押して次のセルへ移動し、「期間」と入力
    ④［Tab］キーを押して次のセルへ移動し、「2014年11月から」と入力
    ⑤［Tab］キーを押して次のセルへ移動し、「内容」と入力
    ⑥［Tab］キーを押して次のセルへ移動し、「ビルダーとHTML／CSSを駆使したWebページ作り」と入力
    ⑦［Tab］キーを押して次のセルへ移動し、「対象者」と入力
    ⑧［Tab］キーを押して次のセルへ移動し、「有志」と入力
  2. 上書き保存

セル内の余白を編集する

セルには４方向とも１ピクセルのパディングが初期値として指定されていますが、文字が窮屈に見えるのでこれを編集します。

  1. セルのスタイル設定を起動
    ①挿入した表のセルの一つを選択
    ②［スタイルエクスプレス］ビューで［カーソル位置］パネルを表示
    ③ td タグを右クリックし、表示されるメニューから［ルールの新規作成］を選択
  2. セル（td タグ）へのスタイル設定であることと、スタイルの保存先を確認
    ①［ルールの追加］ダイアログで［追加するルール］が「タグ」で、そのボックスには「td」が入っていること
    ②［追加する場所］が外部 CSS ファイルであることを確認
    ③［OK］ボタンをクリック
  3. ［外部 CSS ファイルの更新確認］ダイアログで［はい］をクリック
  4. td タグにスタイルを設定
    ①[スタイルの設定 - td]ダイアログで[レイアウト]タブを選択
    ②[上方向]を選択し、パディングの単位を[ピクセル]にし、値に３を入力
    ③[下方向]を選択し、同じくパディング値を３ピクセルと設定
    ④[右方向]を選択し、パディングの値を５ピクセルと設定
    ⑤[左方向]を選択し、同じくパディングの値を５ピクセルと設定
    ⑥全て入力したら、[OK]ボタンをクリック
  5. ［ページ編集］画面でセル内の余白を確認し、［上書き保存］

CSSで表を中央に配置する

  1. ［スタイルエクスプレスビュー］の［カーソル位置］タブを表示する
  2. ［table］を右クリックし、［タグ（table）のスタイルを編集］をクリック
  3. ［外部 CSS ファイルの更新確認］ダイアログが出る場合は、［はい］をクリック
  4. table 要素に中央揃えのスタイルを設定
    ①［スタイルの設定］の［レイアウト］タブで［HTML］タグに「table」が入っていることを確認
    ②［レイアウト］タブを選択
    ③［左方向］を選択し、［マージン］の単位を「予約後」に変更し、値を「自動」にセット
    ［右方向］を選択し、同様にマージンの値を「自動」にセット
    ⑤［OK］ボタンをクリック
  5. 上書き保存する

行や列を追加する

  1. ３行目のセルをクリック
  2. メニュー［表→行の追加→下へ1行追加］を選択
  3. 追加した行に「教材」「勉強会資料」と入力
  4. 一番下のセルをクリック
  5. メニュー［表→行の追加→下へ1行追加］を選択
  6. 追加した行に「作品」「作品一覧」と入力
  7. 文字列「作品一覧」にリンクを設定
    ①文字列「作品一覧」を選択し、右クリック
    ②［リンクの挿入］を選択
    ③[リンク属性]でファイル名欄に「../../../index.html」と直接入力
    ④［OK］をクリック
  8. 上書き保存する

1列目に背景色をつける

  1. 1列1行目のセルをクリック
  2. ［スタイルエクスプレス］ビューの［カーソル位置］タブで、タグ td を右クリック
  3. ［ルールの新規作成］を選択
  4. ［ルールの追加］ダイアログボックスで、追加をする場所がxxx_style01.cssになっていること、追加をするルールがtdになっていることを確認
  5. ［追加するルール］の［クラス］ボタンを選択し、ボックスに 「iro」と入力
  6. ［OK］ボタンをクリック
  7. ［外部 CSS ファイルの更新確認］ダイアログで［はい］ボタンをクリック
  8. ［スタイルの設定－.iro］ダイアログで、［色と背景］タブを選択
  9. 背景色を水色に設定し、［OK］ボタンをクリック
  10. 1列2行目のセルをクリック
  11. ［スタイルエクスプレス］ビューの［カーソル位置］タブで、タグ td を右クリック
  12. クラスの設定から「iro」を選択
  13. 1列3行目及び1列4行目についても同様に処理

補足説明

  1. 外部スタイルシートへの書き出し
    誤って内部スタイルシートに設定した場合は、［スタイルエクスプレス］ビューで当該タグを右クリックし、スタイルの書き出しを選択し、［スタイルの書き出し］ダイアログで追加する場所を外部スタイルシートに指定して［OK］ボタンをクリック。上記で外部に書き出されるが、内部スタイルシートにも残るので、［スタイルエクスプレス］ビューで削除する。
  2. 手直し作業はダイアルボックスで実施
    HTMLソース又はCSSでの編集はスペルミス等の誤作業の可能性があるので避けること
  3. 表編集ツールバーの活用
    ［表示］→［ツールバー］→［表］で表に関する編集ツールバーを表示させておくと表の編集が簡易になる
  4. リンク文字の選択
    誤選択を防ぐため、リンク元の文字列はダブルクリックで選択する。
  5. 最初の行を見出しセルthにする
    最初の行を見出しセルthにするには、表の挿入ダイアログで、［最初の行を見出しセルにする］にチェックを入れる。一旦表を挿入した後からthにするには、表を選択しTABLEの属性から［表のデザイン］タブで［最初の行を見出しセルにする］にチェックを入れる。
  6. サイトの複製
    予習・復習を行うには、［サイト］→［サイト一覧/設定］からサイトの複製で、練習用サイトを作成しておくと便利