スタイルシート (CSS) を使用することによって、文字のサイズや行間を固定することができます。Web ブラウザ側で文字の大きさ (最大/中/小など) を変更しても、文字サイズが固定されるようにしたい時や、行間を広くとって読みやすくしたい時などに使用します。
スタイルシートの設定は大きく３つに分けられます。HTML タグに設定する方法、クラスや ID を使用して設定する方法、選択されているタグのみに設定する方法です。このFAQでは、「クラスを指定してスタイルを設定する方法」を使用して、文字サイズや行間を調整します。

※〔かんたん〕 では、以下の操作はできません。編集スタイルを 〔スタンダード〕 または、〔エディターズ〕 に変更してから操作を行ってください。

※以下の画面はホームページ・ビルダー12のものですが、ホームページ・ビルダー13以降でも、ほぼ同様の操作で行うことができます。

※このFAQは「どこでも配置モード」の場合の説明をしています。「標準モード」で作成なさっている方は、手順が異なりますので以下のFAQを参照してください。

→スタイルシートを使用して文字サイズや行間を調整する

▼注意

• スタイルを設定する方法
• 設定したスタイルを確認/再編集/削除する方法
• 関連情報

I スタイルを設定する方法

クラスを指定して設定する方法

「クラスの作成」と「クラスの適用」の２段階の操作が必要です。

■操作

１ クラスの作成を行う

1. スタイルシートを適用したいページを開きます。プレビュー画面で見ると以下のようになっています。

   

2. ページ編集画面で、メニューバーから「表示」→「スタイルシート マネージャ」を選択します。

   「スタイルシート マネージャ」ダイアログが表示されます。
   [追加] ボタンをクリックします。

   

   「スタイルの設定」ダイアログが表示されます。

3. 左端上にある [クラスのスタイルを設定] を選択し、[クラス名] を任意の半角英数で入力します。

   

   ※[クラス名] は、ピリオド （.) で始まる半角英数を指定してください。（例：「.mojisize」）

   ※[IDのスタイルを設定] は [クラスのスタイルを設定] とほとんど同じ機能を提供しています。ID がクラスと違う点は、同じページ内に 1つしかそのスタイルを適用できないことです。したがって通常は、ID ではなく、クラスを使ってください。ページ全体のタグに適用したい場合は [HTML タグのスタイルを設定] を選んで設定すると、ページ全体のタグに適用されます。

4. [フォント] タブをクリックし、[サイズ] で任意の大きさを指定します。(この例では、「10 ピクセル」に設定しました。)

   

5. [文字のレイアウト] タブをクリックし、[行間] で任意の大きさを指定します。(この例では [行間] を 「200 パーセント」に設定しました。) 設定が終わったら [OK] ボタンをクリックします。

   

   「スタイルシート マネージャ」ダイアログに戻ります。

   ※ポイントやパーセント以外にピクセルやインチなどでも指定できます。実際にページを見ながら調整してみてください。再編集の方法は、II 設定したスタイルを確認/再編集/削除する方法を参照してください。

6. 「スタイルシート マネージャ」ダイアログの [ルール情報] に作成したクラスが表示されます。[閉じる] ボタンをクリックし、「スタイルシートマネージャ」ダイアログを閉じます。

   

２ クラスの適用を行う

1. スタイルを設定したいテキスト ボックス全体をドラッグで反転させます。

   ※表の中の文字に対してはそのままではスタイルを設定することができません。スタイルを設定する前に行間を設定したい文章をドラッグで反転させ、メニューバーから「挿入」→「段落」→「標準」を選択し、段落タグ <P> を挿入します。

2. メニューバーから「編集」→「スタイルの設定」を選択します。

   

   「スタイルの設定」ダイアログが表示されます。

3. [定義済みクラスの設定] 欄の右にある ▼ ボタンをクリックし、先ほど設定したクラス名にチェック マークを付け、[OK] ボタンをクリックします。

   

   選択した文字に、スタイルが適用されます。

4. プレビュー画面で確認します。

   

▲ページの先頭へ戻る

II 設定したスタイルを確認/再編集/削除する方法

■操作

1. スタイルを設定したページが開いている状態で、メニューバーから「表示」→「スタイルシート マネージャ」を選択します。

   「スタイルシート マネージャ」ダイアログが表示されます。

2. 下記に記載された必要な操作を行います。

   設定を確認する

   [ルール情報] でクラスを選択し、[プロパティ]、[値] で確認します。

   設定を再編集する

   [ルール情報] でクラスを選択し、[編集] ボタンから編集します。 「スタイルの設定」ダイアログが表示され、設定を再編集できます。

   設定を削除する

   [ルール情報] でクラスを選択し、[削除] ボタンをクリックします。

   

▲ページの先頭へ戻る

III 関連情報

■関連情報

→スタイルシートを使って文字の大きさを固定するときの注意事項について

▲ページの先頭へ戻る