www.wanichan.com

11. 見出しや段落のデザイン設定

Webページを見栄えよくするために、見出しの装飾、段落のマージンの設定方法をはじめ、特定の段落に背景画像を設定する方法について説明します。

1. 見出しに太さの異なる罫線をつける

見出しに罫線などの装飾を行うには、枠線とパターンの機能を利用すると便利です。

  1. 罫線を付けたい見出し全体をクイックタグセレクタで選択します。
  2. 【書式→枠線とパターン】をクリックします。
  3. [枠線とパターン]ダイアログが表示されました。
    [設定]オプションの中から「ユーザー設定」を選択します。
  4. [スタイル]オプションでは、「実線」を選択します。
  5. [色]にて、線の色を指定します。
  6. [幅]ボックスに、線の太さを指定します。
  7. その線をどこに引くか、プレビューにある各ボタンをマウスでクリックします。
  8. 続いて、違う太さの線を下に引きます。
    スタイル、色、幅を設定してから、引きたい枠線の場所を指定します。
  9. 最後に、左辺の5ピクセルの線と文字との間(padding)を3ピクセルの間隔をとるため、[間隔]設定オプションの[左]の値を「3」と入力します。
  10. [OK]ボタンをクリックします。
  11. 見出しに対して、「.style1」のクラススタイルが自動生成され、適用されました。
  12. [スタイルの適用]ウィンドウの「.style1」をポイントすると、そのCSSスタイルのコードが確認できます。

段落のマージン設定

見出しの上下のマージンを設定することも可能です。

クイックタグセレクタでタグを選択すると、マージン部分が斜線状で表示され、その境界線にマウスを重ねると、下の図のように上下矢印タイプに変わります。


そのままドラッグ操作することで、簡単にマージンの調整が可能です。

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

問題は解決しましたか?

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

▲このページのトップへ