スタイルシートマネージャーの使い方

外部スタイルシートを作る

●外部スタイルシートファイルの作成

スタイルシート設定前の素のhtml
  1. スタイルシートマネージャーを起動
  2. リンクの右の下矢印をクリックして「外部スタイルシートの新規作成/リンク」を選択
  3. フォルダを指定してファイル名を指定する。
外部スタイルシートの新規作成/リンク

●見出し1の指定

見出し1の字と背景の色の指定
  1. 追加を選択してH1を選ぶ。
  2. カラーと背景を選ぶ。カラーを白に背景を青にする。ここではとりあえず大まかに選択しておく。
  3. 文字のレイアウトを選び、水平方向の配置で中央揃えを選ぶ。
  4. レイアウトで左マージン、右マージンともに10%を指定。
  5. ボーダーで4方向ともに実線で4ピクセル、濃紺と指定。

●見出し2の指定

見出し2の字の色の指定
  1. 追加を選択してH2を選ぶ。
  2. カラーで緑を選ぶ。
  3. レイアウトで左マージン、右マージンともに10%を指定。
  4. ボーダーの左20ピクセル、下4ピクセル、スタイルを実線、色をオレンジに指定する。
見出し2のボーダーの指定

●見出し3の指定

見出し3の字の色の指定
  1. 追加を選択してH3を選ぶ。
  2. カラーで茶を選ぶ。
  3. レイアウトで左マージン12%を指定する。

●項目(リスト)の指定

項目の左マージンの指定
  1. 追加を選択してLIを選ぶ。
  2. レイアウトで左マージン15%を指定する。
  3. 行間を140%に指定する。

●段落の指定

  1. 追加を選択してPを選ぶ。
  2. レイアウトで左マージン、右マージンともに12%を指定する。
  3. 行間を150%に指定する。
  4. パッディングを4方向とも5ピクセルに指定する。

●段落

これは段落です。ちょっと前まで段落って何のことか良く解っていませんでした。段落というのはあるまとまりのある文章の集まりのことです。

●引用

リンクの設定に次いで多く利用されているスタイル定義が、文章の行間設定でしょう。通常スタイルを定義していない場合、ほとんどのブラウザでテキストの行間は設定されていません。行間を調節するだけでテキストの読みやすさは格段に向上します。
スタイルシート+エイチエムエルリサイクルブック 翔泳社 より

●水平線

ホームページビルダーでは標準となっていても段落とは限りません。段落にするには一度見だし1とかを選んでおいてから標準を選び直せば段落になります。というかこういう場合はソースをいじくる方が確実で早いです。水平線は私はこの色が好きです。理由は内緒です。(゜o゜)\バキ

●微調整

後は配色辞典なんかを見ながら色の指定を細かくやりなおしてください。キャプチャー画像を取ったのですが小さくしすぎてしまいました。今日はもうやる気がしないです。たったこれだけで随分きれいなページが作れるでしょう?スタイルシートの良さをご理解いただけましたか?


©Henrry Oates All Rights reserved. E-mail:oates@henrry.net
<BACK> <TOP>