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

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

<対応ボタン>　メニューバーより[表示]→[スタイルシートマネージャー]

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

場所を決めよう//ビルダーでスタイルシートを設定するための基礎知識(1)

<図1>

[スタイルシート情報(S)]にある、一番上のファイル名をクリックして選択し、[追加]ボタンをクリックすると、ページ内にスタイルを記述します。

既に外部スタイルシートをリンクしている場合は、[スタイルシート情報(S)]にある、外部スタイルシート名をクリックして選択し、[追加]ボタンをクリックすると、外部スタイルシートにスタイルを記述します。

<図2>

既にスタイルを設定している場合は、[ルール情報(R)]内に表示され、どのようなスタイルを設定しているか確認できます。

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

1. スタイルシートマネージャーを開く。
2. [スタイルシート情報]箇所のファイル名をクリックして、[外部スタイルシートの追加]ボタンをクリック
   
3. [外部スタイルシートの選択]画面が表示されたら[参照]ボタンをクリックしてスタイルシートを保存する場所を選択
   
4. [ファイル名を開く]画面の[ファイル名]の個所にスタイルシートの名前を入力して[OK]。
   この時点で、白紙の外部スタイルシートが作成されます。
5. 続けて、スタイルを設定する場合、[スタイルシート情報(S)]内にリンクされた状態が表示されるので、その文字列をクリックして[追加]ボタンをクリック
   
6. すると、[スタイルの設定]画面が表示されるので、その画面からスタイルを設定していきます。
7. スタイルの詳細へ

外部スタイルシートにスタイルを追加する

1. [スタイルシート情報]にあるリンクしている外部スタイルシートをクリックして選択。(下図では、file:///の箇所が青く反転している所)
   
2. 次に、[追加]ボタンをクリックしてスタイルを設定していきます。

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

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

※<図3>

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

HTMLタグにスタイルを設定する

1. スタイルシートマネージャーを開く
2. <図1>を参考に、スタイルシートを記述する箇所をクリックし追加ボタンをクリックする
3. スタイルの設定画面が開く。[HTMLタグの候補]の▼をクリックして目的のタグを選択する。または、[HTMLタグ名]のところへ直接入力する。
4. スタイルを設定していく(スタイルの詳細へ)

名前を付けてスタイルを設定し、指定した個所に定義したスタイルを適用する

目印を探せ//ビルダーでスタイルシートを設定するための基礎知識(2)

1. スタイルシートマネージャーを開きます。
2. [スタイルシート情報]でスタイルを記述する場所を選択します。
3. 追加ボタンをクリック。すると、[スタイルの設定]画面が表示されます。
4. [スタイルの設定]画面左上にある、「クラスのスタイルを設定」をクリックしてクラス名を入力します。ID名を入力する際には、一番最初に「#」を。クラス名を入力する際には、一番最初に「.(ピリオド)」を付けるのを忘れないようにしてください。
5. スタイルの詳細へ

IDやclassのスタイルを適用する

1. スタイルを適用したい箇所を右クリックして表示された画面からスタイルの設定を選択します
2. スタイルの設定画面が表示されます。IDを適用したい場合は、画面下部にある[定義済みIDの指定(1)]個所の▼をクリックして、表示されたID名の中から選択します。
3. クラスを適用したい場合は、画面下部にある[定義済みクラスの指定(2)]個所の▼をクリックして、表示されたクラス名の中から選択します。

「スタイル　クラス」ボタンを利用してclassスタイルを適用する

1. メニューバーより、表示→ツールバー→スタイルクラスにチェックを入れて「スタイル　クラス」のボタンを表示します。
2. スタイルを適用したい箇所をクリックし、フォーカス枠で囲まれた状態にして「スタイル　クラス」ボタンの▼マークをクリックします。
3. 適用したいクラス名を選択します。

※図　「スタイル　クラス」ボタン

ページ内の限られた個所のみに適用させるスタイルシート

スタイルを設定したい箇所を選択して右クリック→[スタイルの設定]
または[属性の変更]からもスタイルを設定できます。(スタイルの詳細へ)

キーワード:

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