TOP > FrontPage > FrontPage 2003 (上級編) > スタイルシート TIPS

見出しを飾りたい

Page 1 » Page 2 » Page 3 » Page 4 » Page 5

はじめに

見出しが単なる文字だけだったりすると味気ないですよね。
スタイルシートを使って見出しの周りに罫線などで飾ってみてはいかがでしょう？
※以下のサンプルは通常の段落に個々に設定しています。[書式]メニューの[枠線とパターン]で設定しました(^^;

このように見出しの上下に罫線を引きたい場合や・・・

上下に色つきの点線も引いたりなんかしちゃって。。。

こんな感じのスタイルもFrontPageでつくれちゃいます♪

▲Page TOP

上下に罫線を引くには

  1. スタイルシート(CSSファイル) を開きます。ない場合は新規作成します。
  2. スタイルツールバーの[スタイル]をクリックします。
    スタイル
  3. スタイルを設定したい見出しタグを選択して、[変更]ボタンをクリックします。
    スタイル
  4. [スタイルの変更]ダイアログボックスが表示されたら、[書式設定]ボタンをクリックし、一覧から[枠線]をクリックします。
    スタイルの変更
  5. 枠線と文字列の感覚を上下3ピクセルにして、OKボタンをクリックします。
    枠線とパターン＞パターン
  6. 最後にOKボタンをクリックします。

▲Page TOP

点線にしたい

  1. [設定]を「ユーザー設定」、[スタイル]を「点線」に合わせてから、
    色、幅（太さ）を決めて、プレビュー画面にて上下の枠線をオンにします。
    枠線とパターン：上辺と下辺に点線を適用
  2. [スタイルの変更]ダイアログボックスの[OK]ボタンをクリックします。
    スタイルの変更

3ピクセルの太さの上下点線スタイル、8080C0の色を指定し、上下3ピクセルの間隔の記述は以下のようになりました。

h1 { border-top: 3px dotted #8080C0; border-bottom: 3px dotted #8080C0;
padding-top: 3px; padding-bottom: 3px }

▲Page TOP

一部に太さの違った線を引くには

枠線とパターンダイアログボックスにて、以下の操作を行ってください。
一部分に異なる罫線スタイルを引くには、「ユーザー設定」を選んで、ひとつずつ設定していくのがポイントです。

  1. [設定]オプションにて「ユーザー設定」を選択
  2. スタイルには任意の線を選択
  3. 色、幅を指定してから、そのスタイルを引きたい部分を[プレビュー]設定オプションの罫線ボタンをONにする
    枠線とパターン
  4. 以下、手順2、3を繰り返す
    枠線とパターン：枠線の場所を選択
  5. [OK]ボタンをクリック
  6. [スタイルの変更]ダイアログボックスの[OK]ボタンをクリック

h1 { border-left: 10px solid #8080C0; border-bottom: 1px solid #8080C0; padding:
3px }

▲Page TOP

Page 1 » Page 2 » Page 3 » Page 4 » Page 5
TOP > FrontPage > FrontPage 2003 (上級編)

▲このページのトップへ

Contents Menu

Site Search by Google


Web サイト内

Microsoft MVP

Microsoft Most Valuable Professional
Microsoft MVP - Expression Web
(April 2009 - March 2011)
/ Expression
(April 2008 - March 2009)
/ FrontPage
(April 2005 - March 2008)
MVP Profile

Ads