このFAQは、サポート対象外の操作を含む、上級者向けの内容です。お客様の責任のもと、ご利用ください。
スタイルシート（CSS）を使用することによって、文字のサイズや行間を固定することができます。ブラウザー側で文字の大きさ（最大/中/小など）を変更しても、文字サイズが固定されるようにしたい時や、行間を広くとって読みやすくしたい時などに使用します。
スタイルシートの設定は大きく３つに分けられます。HTML タグに設定する方法、クラスや ID を使用して設定する方法、選択されているタグのみに設定する方法です。このFAQでは、「クラスを指定してスタイルを設定する方法」を使用して、文字サイズや行間を調整します。
※〔かんたん〕 では、以下の操作はできません。編集スタイルを 〔スタンダード〕 または、〔エディターズ〕 に変更してから操作を行ってください。
※以下の画面はホームページ・ビルダー17のものですが、ホームページ・ビルダー18以降のバージョンでも、ほぼ同様の操作で行うことができます。
※このFAQは「標準モード」の場合の説明をしています。「どこでも配置モード」で作成している場合は、以下のFAQを参照してください。
→スタイルシートを使用して文字サイズや行間を調整する −「どこでも配置モード」−
▼注意
- 以下の手順でスタイルを設定しても、ブラウザーの種類やバージョンによっては意図したとおりに表示されない場合があります。また、ブラウザーがスタイルシートに対応していなかったり、スタイルシート機能を無効にしている場合には、設定したスタイルは反映されません。
- スタイルの設定方法はいろいろありますが、細かな設定を行う場合には HTML や CSS の知識が必要になります。HTML タグに対してスタイルの設定を行う際には、どのタグに対してスタイルの設定を行うのかを把握しておく必要があります。
- 表にスタイルを設定する際には、表の挿入時に［表にスタイルを適用する］の設定を行わないでください。スタイルの設定が重複してしまい、設定がうまく反映されない場合があります。
- ホームページ・ビルダーではCSS（スタイルシート）の編集についてはサポートしておりません。お客様の責任で行っていただくようお願いいたします。
I スタイルを設定する方法
- クラスを指定して設定する方法
- 「クラスの作成」と「クラスの適用」の２段階の操作が必要です。
■操作
１ クラスの作成を行う
- スタイルシートを適用したいページを開きます。プレビュー画面で見ると以下のようになっています。
- メニューバーから［表示-スタイルシート マネージャ］を選択します。
［スタイルシート マネージャ］ダイアログボックスが表示されます。
- ［スタイル構成］タブをクリックします。
- ［追加］をクリックして表示されるメニューで［スタイル］を選択します。*1
*1お使いのバージョンによっては、［追加］をクリックします。
［スタイルの設定］ダイアログボックスが表示されます。
- 左端上にある［クラスのスタイルを設定］を選択し、［クラス名］を任意の半角英数で入力します。
※［クラス名］は、ピリオド（.）で始まる半角英数を指定してください。（例 ：「.mojisize」）
※［IDのスタイルを設定］は［クラスのスタイルを設定］とほとんど同じ機能を提供しています。ID がクラスと違う点は、同じページ内に１つしかそのスタイルを適用できないことです。したがって通常は、ID ではなく、クラスを使ってください。
ページ全体のタグに適用したい場合は［HTML タグのスタイルを設定］を選んで設定すると、ページ全体のタグに適用されます。 - ［フォント］タブをクリックし、［サイズ］で任意の大きさを指定します。(この例では、「10 ピクセル」に設定しました。)
- ［文字のレイアウト］タブをクリックし、［行間］で任意の大きさを指定します。（この例では［行間］を「200 パーセント」に設定しました。）設定が終わったら［OK］をクリックします。
※ポイントやパーセント以外にピクセルやインチなどでも指定できます。実際にページを見ながら調整してみてください。
再編集の方法は、II 設定したスタイルを確認/再編集/削除する方法をご参照ください。 - ［スタイルシート マネージャ］ダイアログボックスの［ルール情報］に作成したクラスが表示されます。［OK］をクリックし、［スタイルシート マネージャ］ダイアログボックスを閉じます。
２ クラスの適用を行う
- ページ編集画面で、スタイルを設定したい部分をクリックします（ピンクの枠で囲まれます）
※表の中の文字に対してはそのままではスタイルを設定することができません。スタイルを設定する前に行間を設定したい文章をドラッグで反転させ、メニューバーから［挿入-段落-標準］を選択します。（この作業で、段落タグ <P> を挿入されます）
- メニューバーから［編集-スタイルの設定］を選択します。
［スタイルの設定］ダイアログボックスが表示されます。
- ［定義済みクラスの指定］の右端の▼をクリックし、先ほど設定したクラス（例：mojisize）をクリックして
にし、［OK］をクリックします。 - プレビュー画面で確認します。
II 設定したスタイルを確認/再編集/削除する方法
■操作
- スタイルを設定したページが開いている状態で、メニューバーから［表示-スタイルシート マネージャ］を選択します。
スタイルシート マネージャが表示されます。
- 下記に記載された必要な操作を行います。
- 設定を確認する
- ［ルール情報］でクラスを選択し、［プロパティ]、［値］欄で確認できます。
- 設定を再編集する
- ［ルール情報］でクラスを選択し、［編集］から編集します。［スタイルの設定］ダイアログボックスが表示され、設定を再編集できます。
- 設定を削除する
- ［ルール情報］でクラスを選択し、［削除］をクリックします。
III 関連情報
■関連情報