ホームページビルダー作成報告//スタイルシート編//ビルダーでスタイルを設定するための基礎知識

スタイルシートマネージャーを開く

<対応ボタン>　表示→スタイルシートマネージャー　

スタイルシートマネージャーの画面

ホームページビルダー中級者編/スタイルシートマネージャーの画面

外部スタイルシートの新規作成

ホームページビルダー中級者編/外部スタイルシートの利用

HTMLタグにスタイルを設定する(HTMLタグがわからない場合)

1. スタイルを設定したい箇所をクリックし、目的の場所をフォーカス枠が囲んでいるのを確認する。
2. ページ編集画面の右上に表示される[属性の変更]ボタンを見るとフォーカス枠で囲まれている所のタグが確認できる。※<図1>
3. フォーカス枠で囲まれたままの状態で[スタイルシートマネージャー]を開く
4. [追加]ボタンをクリックする
5. スタイルの設定画面が開く。[HTMLタグのスタイルを設定]の個所が「2.」で確認した要素名(タグ)になっているのを確認してスタイルを設定していく
6. スタイルの詳細へ

<図1>

フォーカス枠とは・・・ページ内の例えば画像や段落などをマウスでクリックすると、それを囲むピンク色の枠があります。それが「フォーカス枠」です。

要素名とは

HTMLタグを分解すると次のようになり、それぞれに名称があります。

ビルダーでは、スタイルの設定や編集画面において「要素名」という言葉は使わず、「HTMLタグ名」という呼名になっているようです。

スタイルの編集から設定する

右クリック→スタイルの設定。
または＜属性の変更＞からもスタイルを設定できます。(スタイルの詳細)

　ビルダー11では、この手順でスタイルを設定した場合、要素に直接スタイルが適用されます。下記にある「++詳細属性のスタイル設定++」画面は表示されません。

++詳細属性のスタイル設定++

編集（１）	同じページ内のタグにスタイルを設定します。
編集（２）	クラスにスタイルを設定します。
編集（３）	ＩＤにスタイルを設定します。
編集（４）	限られた部分にスタイルを設定します。

ページにテンプレートのスタイルを利用する

※テストモードでどのようなスタイルなのか確認することができます。
「サイト/素材ビュー」→スタイルシート→下部にある[設定]ボタンをクリック→スタイルシートテストモード→表示されている「***.css」をクリックする度、スタイルを確認することができます。

※ページにテンプレートのスタイルシートを挿入する場合
「サイト/素材ビュー」→スタイルシート→**.css(ファイルを選択)→挿入

※テンプレートのcssファイルを外部スタイルシートとしてリンクします。
何度も[挿入]ボタンをクリックすると、クリックした数のcssファイルをリンクしてしまうので注意してください。

外部スタイルシートのリンクを解除する場合は、スタイルシートマネージャーを開く→削除するスタイルシートを選択→削除

サイト全体にテンプレートのスタイルを利用する

サイト→サイト全体のスタイル→サイトにスタイルを適用→(ウィザードが開始されます)

※サイト全体に選択したcssファイルをリンクします。
解除するには、サイト→サイト全体のスタイル→サイトスタイルの解除

ページ全体のフォントや大きさ等を設定

※この方法で設定するスタイルは、【ページ毎に適用させるスタイルシート】として適用されます。

書式→ページのプロパティ→＜スタイル＞→＜詳細属性＞という画面が現れるので＜ＨＴＭＬタグにスタイルを設定＞の欄にBODYとなっているのを確認して、編集（１）をクリック。
(V7以降の場合は、編集→ページの属性→<スタイル>)
(テーブル内にあるフォントについてはTDに設定してください)
スタイルの設定画面が現れるのでそこで使いたいフォントを選択→追加。サイズも変更する場合はここで設定する。

スタイルシートマネージャーを直接開いて、＜追加＞→＜ＨＴＭＬタグ名＞のところが「ＢＯＤＹ」になっているのを確認してスタイルを設定してもＯＫです。

特定部分にスタイルを設定

※この方法で設定するスタイルは、【ページ内の限られた個所のみに適用させるスタイルシート】として適用されます。

スタイルを設定する箇所をフォーカス枠にして　右クリック→スタイルの設定→<編集(4)>→スタイルの設定画面が表示されるので設定する。

フォーカス枠とは・・・ページ内の例えば画像や表などをマウスでクリックすると、それを囲むピンク色の枠があります。それが「フォーカス枠」です。

限られた文字だけスタイルを使いたいとき

適用したい部分を選択して→書式→文字装飾→スタイル（ＳＰＡＮ）→＜現在のタグのみにスタイルを設定＞が（ＳＰＡＮ）になっているのを確認して編集（４）をクリック→スタイルを設定する

このように、直接タグに埋め込んでつかいます。

ここは縦書き

ここは、文字間２０ポイントです

特定のスタイルを定義し、指定した個所に定義したスタイルを適用する　<class>

クラスとは、タグに設定するのではなく　例えば「.a」などと名前をつけてスタイルを決めておくと、同じページ内に「.a」のスタイルをいくつも適用させることができます。
クラスと似ているのが「ＩＤ」での設定です。しかし、こちらは１ページ内に１つしか設定できません。

■スタイルシートマネージャーから進む場合・・・・・・・追加→クラスにスタイルを設定→クラス名→半角英数で名前をつける。この時に必ず、名前のまえにピリオドをつけてください。
（あらかじめ、クラスを指定したときにクラス名の欄に「.Class」とある場合はピリオドを削除しないようにして変更してください。）

■フォーカス枠を決めてスタイルの設定から進む場合・・・・スタイルの編集画面で＜クラスやＩＤによるスタイルの設定＞でクラス名を設定し、編集（２）をクリックして進みますが、この時につけるクラス名も半角英数なのですが、名前の前にピリオドはつけないで下さい。

スタイルの詳細はコチラ

classスタイルを適用する

適用したい箇所をフォーカス枠にして、右クリック→スタイルの設定→「クラス」部分の▼ボタンをクリックして選択

「スタイル　クラス」ツールバーを利用して適用する方法もあります。

キーワード:

キーワードは短めに。 スペースで区切って単語を並べるとヒットしやすくなります