www.wanichan.com

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

表を使わずに枠線をつけたい

はじめに~スタイルシートの詳細

私のサイトの各ページの上部にあるナビゲーションには、段落自体に枠線をつけています。
かつてTABLEタグを使って表の罫線に色をつけていましたが、TABLEタグを使わずにできるだけスタイルシートで再現しようと思い立ったのです(^^;

このページのソースをご覧ください。

HOME > FrontPage 2003でホームページ作成 (上級編) > 表を使わずに枠線を付けたい

という部分は<p>タグで囲まれていますね。
それにheader1というクラス名が指定されています。

<p class="header1">
<a href="../" target="_top">HOME</a> &gt; <a href="./">FrontPage 2003でホームページ作成 (上級編)</a> &gt; 表を使わずに枠線をつけたい</p>

ちなみに、このスタイルを設定している外部スタイルシート (style.css) には以下の記述があります。

.header1 { border: 1px solid #8080C0; padding: 3; margin-top:0; margin-bottom:0 }

  • border: 1px solid #8080C0 → 枠線を1ピクセルの実線(solid)で、色は #8080C0 に設定
  • padding: 3 → 間隔を上下左右ともに3ピクセル
  • margin-top: 0 → 上部マージンは0ピクセル
  • margin-bottom: 0 → 下部マージンは0ピクセル

別に手打ちでスタイルシートを記述してもいいんですけどね(^^;
私はFrontPageで設定しました(笑)

これを<div>タブ内にスタイル設定すれば、そのdivタブに囲まれている部分全体を枠線で囲まれるということになります。
ためしに、上の箇条書き全体に<div>タグで囲み、header1 というクラス名を指定してみました♪
これはクイックタグセレクタで <ul> タグを選択して、一覧から「タグを囲む」方法で操作しましたので、
別にコードビューに切り替えなくてもOKです。
クイックタグセレクタを使おう > 選択範囲をタグで囲むには を参照

▲Page TOP

枠線を作成し、間隔を設定するには

  1. スタイルシート(CSSファイル) を開きます。ない場合は新規作成します。
  2. スタイルツールバーの[スタイル]をクリックします。
    スタイル
  3. スタイルのダイアログボックスの[新規作成]をクリックします。
  4. [新しいスタイル]ダイアログボックスが表示されたら、[名前(セレクタ)]に任意の名前(セレクタ)を入力します。
    ここでは「header1」を指定します。スタイルの種類は「段落」のままでOKです。
    新しいスタイル:書式設定→枠線
    [書式設定]ボタンをクリックして、一覧から[枠線]をクリックします。
  5. [枠線とパターン]ダイアログボックスの[枠線]タブを開きます。
    設定は「ボックス」、[間隔]を上下左右すべて「3」と入力します。

▲Page TOP

枠線の色を変えるには

  1. スタイルの[色]を設定します。現在「自動」になっていますので、右側の▼印をクリックして、色を設定します。
    一覧にないので[その他の色]をクリックします。
    枠線とパターン>枠線の色をその他の色から選択
  2. [その他の色]のダイアログボックスの[値]に「8080C0」を入力して、Enterキーを押すと、
    Hex={80,80,C0} になります。[OK] ボタンをクリックします。
    その他の色
  3. すると、指定された色に変更されました。[OK]ボタンをクリックします。
    枠線の色が設定されたダイアログボックスの画面

▲Page TOP

マージンを設定するには

  1. [書式設定]ボタンをクリックし、一覧から[段落]をクリックします。
    新しいスタイル:書式設定→段落
  2. 段落の[スペース]の[段落の前]、[段落の後ろ]をそれぞれ数値を設定します。
    margin-top が「段落の前」、margin-bottom が「段落の後ろ」になります。
    ちなみに「行間」を設定すると、line-height が設定できます。
    段落
    [OK]ボタンをクリックします。
  3. [OK]をクリックします。
    新しいスタイルにスタイルが設定されたので、OKボタンをクリック
  4. スタイルに「.header1」が登録されました。
    スタイルが生成された

▲Page TOP

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

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

2012年12月21日(日本時間)をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。 なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。

* Expression Web 4 無料版をダウンロード

▲このページのトップへ