• TOP
• Expression
• FrontPage
• Forum
• Resources
• Archive

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

• はじめに～スタイルシートの詳細
• 枠線を作成し、間隔を設定するには
• 枠線の色を変えるには
• マージンを設定するには

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

私のサイトの各ページの上部にあるナビゲーションには、段落自体に枠線をつけています。
かつて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 }

別に手打ちでスタイルシートを記述してもいいんですけどね(^^;
私は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]をクリックします。
   
4. スタイルに「.header1」が登録されました。
   

▲Page TOP

▲このページのトップへ

Contents Menu

Site Search by Google

Microsoft MVP

Ads

Copyright ©1999-2010 wanichan. All Rights Reserved.

• Web
• PC
• Beginner
• Book
• Travel
• Profile
• English