レイアウトの仕上げ２

ページ全体（body）のスタイルを設定します。

  1. メニューバーの「スタイルシートマネージャーの表示ボタン」をクリックし、 「スタイルシートマネージャー」のダイアログで「追加」ボタンをクリックします。
  2. 「スタイルの設定」ダイアログの「HTMLタグの候補」で「body」を選択します。
  3. 「フォント」タブで「サイズ」を「小さい」に
    「文字のレイアウト」タブで「行の高さ」を「18ピクセル」に、「水平方向の配置」を「中央揃え」に設定し「OK」をクリックします。 結果

ヘッダ見出し１のスタイルを設定します。

  1. 「スタイルシートマネージャー」のダイアログに戻るので「追加」ボタンをクリックします。
  2. 「スタイルの設定」ダイアログで「IDのスタイルを設定」を選択し、「ID名」に「#header h1」と入力します。
  3. 「フォント」タブで「サイズ」を「大きい」に
    「色と背景」タブで「前景色」を「白」に
    「文字のレイアウト」タブで、「水平方向の配置」を「左揃え」に
    「レイアウト」タブで「上方向 パディング」を「5ピクセル」に、「左方向 パディング」を「10ピクセル」に、 設定し「OK」をクリックします。 結果

コンテンツ見出し２のスタイルを設定します。

  1. 「スタイルシートマネージャー」のダイアログに戻るので「追加」ボタンをクリックします。
  2. 「スタイルの設定」ダイアログで「IDのスタイルを設定」を選択し、「ID名」に「#cont h2」と入力します。
  3. 「フォント」タブで「サイズ」を「16ピクセル」に
    「レイアウト」タブで「上方向 」「ボーダ」を「1ピクセル」「実線」「緑」に、「パディング」を「5ピクセル」に、
    「左方向 」「ボーダ」を「10ピクセル」「実線」「緑」に、「パディング」を「10ピクセル」に、
    「右方向 」「ボーダ」を「1ピクセル」「実線」「緑」に、
    「下方向 」「ボーダ」を「1ピクセル」「実線」「緑」に、「パディング」を「5ピクセル」に、「マージン」を「15ピクセル」設定し「OK」をクリックします。 結果

コンテンツ見出し3のスタイルを設定します。

  1. 「スタイルシートマネージャー」のダイアログに戻るので「追加」ボタンをクリックします。
  2. 「スタイルの設定」ダイアログで「IDのスタイルを設定」を選択し、「ID名」に「#cont h3」と入力します。
  3. 「フォント」タブで「サイズ」を「12ピクセル」に
    「色と背景」タブで「前景色」を「白」に「背景色」を「緑」に
    「レイアウト」タブで「上方向 」「マージン」を「10ピクセルに、」「パディング」を「2ピクセル」に、
    「左方向 」「パディング」を「5ピクセル」に、
    「下方向 」「マージン」を「10ピクセル」に、「パディング」を「2ピクセル」に、設定し「OK」をクリックします。 結果

コラム見出し４のスタイルを設定します。

  1. 「スタイルシートマネージャー」のダイアログに戻るので「追加」ボタンをクリックします。
  2. 「スタイルの設定」ダイアログで「IDのスタイルを設定」を選択し、「ID名」に「#columu h4」と入力します。
  3. 「フォント」タブで「サイズ」を「やや小さい」に
    「色と背景」タブで「前景色」を「白」に「背景色」を「緑」に
    「レイアウト」タブで「上方向 」「パディング」を「3ピクセル」に、、設定し「OK」をクリックします。 結果

コラム段落（p）のスタイルを設定します。

  1. 「スタイルシートマネージャー」のダイアログに戻るので「追加」ボタンをクリックします。
  2. 「スタイルの設定」ダイアログで「IDのスタイルを設定」を選択し、「ID名」に「#columu p」と入力します。
  3. 「文字のレイアウト」タブで「左揃え」に
    「レイアウト」タブで「上方向 」「ボーダ」を「1ピクセル」「実線」「緑」に、「マージン」を「0ピクセル」に、「パディング」を「3ピクセル」に
    「左方向 」「ボーダ」を「1ピクセル」「実線」「緑」に、「マージン」を「0ピクセル」に、「パディング」を「10ピクセル」に
    「右方向 」「ボーダ」を「1ピクセル」「実線」「緑」に、「マージン」を「0ピクセル」に、「パディング」を「10ピクセル」に
    「下方向 」「ボーダ」を「1ピクセル」「実線」「緑」に、「マージン」を「0ピクセル」に、「パディング」を「3ピクセル」に設定し「OK」続いて「閉じる」をクリックします。
  4. 「ページ/ソース」画面のソース部分で、コラムの文字列を<p>と</p>で括り、項目ごとに<br>を入れ改行します。 結果

スタイルシート編集：コンテンツブロックの文字列の中央揃えを左揃えに変更します。

  1. メニューバーの「スタイルシートマネージャーの表示ボタン」をクリックし、 「スタイルシートマネージャー」のダイアログで「#cont」を選択し、「編集」ボタンをクリックします。
  2. 「文字のレイアウト」タブで、「水平方向の配置」を「左揃え」を指定して「OK」続いて「閉じる」をクリックします。結果

スタイルシート編集：画像を挿入し右に寄せます。

  1. 「div id="cont"」のh2の直下に画像を挿入します。
  2. メニューバーの「スタイルシートマネージャーの表示ボタン」をクリックし、 「スタイルシートマネージャー」のダイアログで「追加」ボタンをクリックします。
  3. 「スタイルの設定」ダイアログで「IDのスタイルを設定」を選択し、「ID名」に「#columu img」と入力します。
  4. 「位置」タブの「属性」で「回り込み 右」を選択します。
  5. 「レイアウト」タブで「右方向 」を選択し「マージン」を「５ピクセル」に設定し、「OK」続いて「閉じる」をクリックします。結果