Expression Web 4 Beginner's Guide

Expression Web初心者向けガイド。ステップバイステップで解説していきます。

セクション用のDIVのスタイルを適用するには

Section 3 トップページと基本スタイルの作成
最終更新日時: 2020/07/20 13:38:01
  • このエントリーをはてなブックマークに追加

セクション用のDIVのスタイルが作成できたら、それぞれのDIVにスタイルを適用していきます。ボックススタイルにおいて、左右にpaddingを使うとボックスから要素がはみ出てしまう場合があるので、その中にDIVを挿入し、そのDIVにmarginを設定して余白を調整するのがポイントです。

セクションスタイルを適用する

  1. 対象となるDIVを選択します。
  2. [スタイルの適用]パネルから適用したいCSSスタイルを選択します。
  3. スタイルが適用されました。
  4. そのほかのDIVも同様にスタイルを適用していきます。ただし、下の図のように、#page_contentと#sidebarはDIV内のDIVに適用します。

段組みを囲むためのスタイルを適用する

この時点で、まだ段組みを囲むためのスタイル(.wrapper)を作成していないので、これから作成して適用します。

  1. [スタイルの適用]パネルの[新しいスタイル]をクリックして、[新しいスタイル]ダイアログボックスを開きます。
  2. [セレクタ]ボックスに「.wrapper」と入力します。
    ※注:既定では「.newStyle1」が代入されますが、2文字目から選択された状態になります。続けて「wrapper」と入力します。
  3. [定義先]を[既存のスタイルシート]にし、一覧から「style.css」を選択します。
  4. 必要に応じてスタイルを指定します。ここでは、フォントサイズなどを指定して[OK]ボタンをクリックします。
  5. #page_content と #sidebar を囲むDIVを選択して、[スタイルの適用]パネルの[.wrapper]を選択します。

記事エリアとサイドバーに余白を適用する

最後に、#page_content のDIV内に .article スタイルが適用されたDIV、#sidebar のDIV内に .aside スタイルが適用されたDIVを挿入します。

  1. #page_content のDIV内にカーソルを移動して、DIVを挿入します。
  2. [スタイルの適用]パネルより[.article]を選択します。
  3. #sidebar のDIV内にカーソルを移動して、DIVを挿入します。
  4. [スタイルの適用]パネルより[.aside]を選択します。

  • このエントリーをはてなブックマークに追加

コメント

▲このページのトップへ