段落単位の独自スタイルの適用

• 段落単位のスタイルの作成方法
• 段落単位のスタイルを簡単に設定するには
• IDとCLASSの違いは何？

段落単位のスタイルの作成方法

中級編ではスタイルシートをHTMLタグ単位で設定する方法をご紹介しましたが、ある特定の段落や文字列単位のスタイルの作成方法をこちらで解説していきます。
外部スタイルシートの作成方法については、「スタイルシートを使って一括処理しよう！ Part 2」をご覧ください。

1. スタイルシート(CSSファイル) を開きます。ない場合は新規作成します。
2. スタイルツールバーの[スタイル]をクリックします。
   
3. スタイルのダイアログボックスが表示されました。
   右下の[新規作成]ボタンをクリックします。
   
4. 名前(セレクタ)に任意の名前（セレクタ)を入力します。
   class属性の場合ははじめに「.」を、ID属性の場合ははじめに「#」をつけて、続けて任意の名前を付けてください。
   下の図ではclass属性のstyle1を作成するので、「.style1」と入力しました。
   スタイルの種類は「段落」単位、「文字」単位のいずれかを指定します。規定値は「段落」単位になっています。
   このままで結構です(^^;
   
   次に、左下の[書式設定]ボタンをクリックして、一覧から任意の設定をします。
5. このように設定が完了したら、説明部分に表示されます。[OK]ボタンをクリックします。
   
6. スタイルの指定が完了したら、[OK]ボタンをクリックします。
   
7. スタイルが作成されました。
   

▲Page TOP

段落単位のスタイルを簡単に設定するには

→これです(^^;

1. [書式]→[スタイルシートのリンク]コマンドで、スタイルシートのリンクを設定しておきます。
2. スタイルを設定したい段落内にカーソルを移動します。
3. 書式設定ツールバーのスタイルの右側▼印をクリックし、リストより設定したいスタイルの名前（セレクタ）を指定します。
   

▲Page TOP

IDとCLASSの違いは何？

IDは、スタイルシートでは # から始まる名前（セレクタ）であり、一つのWebページ内に1箇所だけ使用できます。
CLASSは、スタイルシートでは . から始まる名前（セレクタ）であり、一つのWebページ内の使用回数に制限はありません。

ちなみに、上の表のセルのスタイルでは、このように設定されています。
header1 というクラス名を頻繁に使ってます。。。
これはソースをご覧頂ければすべての<td>タグに <td class="header1"> になっていることがわかります（笑）

FrontPageの初期設定では新しい表を作成する際に自動的に固有IDを割り当てるように設定されています。
なぜなのか私にはわかりません(・・;)
※固有IDを割り当てないようにするには[ツール]→[ページオプション]にて、[全般]タブ内「新しい表に固有のIDを割り当てる」のチェックを外してくださいね。

私は頻繁にclassを使ってます。何度でも使い回しが利くからです。
別にIDを何度でも使ってもスタイル無効にはなりませんが（謎）

▲Page TOP

問題は解決しましたか？

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

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

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

▲このページのトップへ