ホームページビルダーに付随している機能とツールで、スタイルの設定に関係するものを、4ページに亘って紹介します。
はじめは、現在編集しているページにスタイルを設定するのに使われるスタイルシートマネージャです。
現在編集しているページにスタイルを設定するときに活用します。
メニューバーの「表示」から「スタイルシートマネージャ」をクリックします。
あるいは、スタイルシートマネージャの表示/非表示アイコンをクリックします。
[スタイルクラス] ツールバー
表示させるには、ツールバーの 「表示」 から 「ツールバー」 をクリックし、「スタイルクラス」 にチェックを付けます。
編集中のページの中にある CSS ファイルのクラスを選択し、スタイルを設定することができます。
ページ内で使用している要素にスタイルを設定します。
HTML タグのスタイルを設定
クラスのスタイルを設定
ID のスタイルを設定
[新規スタイルとして保存] チェック ボックス
上で決められた対象への実際のスタイルを設定するには、それぞれのタブで行います。
A:VISITED、A:HOVER、A:ACTIVE に対して付けられたスタイル
HTML タグの候補リスト にある A:VISITED、A:HOVER、A:ACTIVE に対して付けられたスタイルは ページ編集画面 タブには影響しません。
クラス、ID を指定する場合の注意
クラス、ID を指定する場合、半角英数字を使用してください。また「! " # % & . _ 」などの記号を使用した場合、認識されない可能性がありますので注意が必要です。
このタブでは、フォント名、サイズ、文字飾り、文字の属性 (太さ、スタイル、変形、変換) を指定することができます。
[使用するフォント] ボックス font-family プロパティ
[フォントの候補]ボックス
「serif、sans-serif、monospace、cursive、fantasy」の指定
特定のフォント名を指定しても、Web ブラウザを使用して見る側のシステムに、そのフォントが存在しない場合があります。上の 「serif、sans-serif、monospace、cursive、fantasy」 が指定されていれば、もっとも適切なフォントが選択されて表示されます。
フォントファミリ一覧
Microsoft Typography - Fonts and products では、各Microsoft 製品に含まれるフォントのリストを参照できます。
[サイズ] スピンボックス font-size プロパティ
[文字飾り] ボックス text-decoration プロパティ
a { text-decoration: none; } のように a タグに [なし] を設定すれば、下線の無いリンクにすることもできます。
[文字の属性] ボックス
[文字の属性] ボックスで [変形] と [変換] を設定
[文字の属性] ボックスで [変形] と [変換] を設定した場合は、表示する Web ブラウザによっては認識されません。また、ページ編集画面でも表示されません。
サンプル
このタブでは、前景色、背景色、背景の画像、画像の表示位置、画像の繰り返し、画像の貼り込みかたを指定することができます。
[前景色] リスト ボックス color : プロパティ
[背景色] リスト ボックス background-color : プロパティ
[背景画像] グループ background-image : プロパティ
[水平方向] を設定すると [垂直方向] にも同じ値が設定されます
[水平方向] を設定すると [垂直方向] にも同じ値が設定されます。但し、[予約語] で指定されている場合は「中央」が設定されます。
[垂直方向] を設定すると [水平方向] にも同じ値が設定されます
[垂直方向] を設定すると [水平方向] にも同じ値が設定されます。但し、[予約語] で指定されている場合は「中央」が設定されます。
[垂直方向] あるいは [水平方向] の値を変更してもその値が反映されません。
この問題は HPB-1314 として報告されているのと似ています。報告はV8までとなっています。しかも今回は、固定かスクロールかに拘わらず発生していることと、ビルダー・バージョン14でも発生していることから、別な問題なのかもしれません。
回避策は、スタイルの設定をやり直すことのようで、最初に入力した値は反映されます。
[背景画像] と [背景色] を両方指定した場合、背景色が反映されない場合
[背景画像]を挿入し、また[背景色]も指定した場合、背景色がプレビュー (および Internet Explorer ブラウザ) で表示されないことがあります。この時展開されているスタイルシートでは、背景色の指定の記述 (background-color) が背景画像の指定の記述 (background-image) の前に記述されています。
回避策は、背景色の指定の記述 (background-color) を背景画像の指定の記述 (background-image) の後に記述します。
このタブでは、行間や字間、配置などを指定することができます。
[行間] スピン ボックス/リスト ボックス line-height : プロパティ
[文字間] スピン ボックス/リスト ボックス letter-spacing : プロパティ
[ワード間] スピン ボックス/リスト ボックス word-spacing : プロパティ
[インデント] スピン ボックス/リスト ボックス text-indent : プロパティ
[垂直方向の配置] スピン ボックス/リスト ボックス vertical-align : プロパティ
[水平方向の配置] ボックス text-align : プロパティ
[連続した空白文字] リスト ボックス white-space ; プロパティ
このタブでは、マージン、ボーダーの幅、スタイル、色、パディングを上、下、左、右の 4 方向に対して指定することができます (マージンとはボーダーまでの余白、パディングとはボーダーからコンテンツまでの余白です)。
[マージン] グループ margin プロパティ
[ボーダー] グループ border プロパティ
[パディング] グループ padding プロパティ
このタブでは、リストマークのタイプ、リストマークの位置、リストマークの画像を指定することができます。
[リストマークのタイプ] ボックス list-style-type ; プロパティ
[リストマークの位置] ボックス list-style-position : プロパティ
[リストマークの画像] テキストボックス list-style-image ; プロパティ
リスト関連プロパティを一括指定する list-style プロパティ
このタブでは、表示位置を決定するために必要な値を指定することができます。
[配置] グループ
[優先順位] グループ z-index : プロパティ
[属性] ボックス
display: block; の使い道
display: block; は、その要素をブロックレベルであるかのように表示させることができます。余白を含めて行全体をリンクの対象にする場合や、img (画像)を中央揃えにするときなどに使います。
まず、行全体をリンクの対象とする場合です。
次に、幅の違う画像を中央に揃える場合です。