5. スタイルを活用したCSSの設定

3. 見出しスタイルの設定

Webページに見出しスタイルを設定してバランスを確認していきましょう。

1. ［スタイルの適用］ウィンドウで、［新しいスタイル］をクリックします。
   もしくは、メニューから【書式→新しいスタイル】をクリックします。
2. まず、h1タグから順番に設定していきます。
   ［新しいスタイル］ダイアログの［セレクタ］ボックスの一覧から「h1」を指定します。
   ［フォント］カテゴリにて、フォントサイズを指定します。
   ここでは、標準フォントサイズを1emとした相対フォントサイズで指定します。左の図のようにfont-size欄に、「1.5」と数値を入力し、単位を「em」と指定します。すると、プレビュー画面でその大きさが反映されますので、大きさを確認し、［OK］ボタンをクリックします。
   
3. 見出し1（<h1>）のフォントサイズが変更されました。
   
   ※通常のh1の大きさは2emです。1.5emは上の図のように、実際のh2と同じ大きさになります。標準文字サイズはh4と通常の段落<p>になります。
4. 同様に、h2タグにもフォントサイズを指定します。ここでは1.25emのフォントサイズに指定します。
5. 指定された要素は、下図の左下に表示されている［CSSのプロパティ］作業ウィンドウにて確認できます。設定後に変更したい場合は、［スタイルの変更］ダイアログを開かなくても、この部分の値を直接変更するだけで、変更した値に変更されます。
   

問題は解決しましたか？

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

▲このページのトップへ