|    | 11  12  13  14  |

ホームページビルダービルダーに付随している機能とツール

ホームページビルダーに付随している機能とツールで、スタイルの設定に関係するものを、4ページに亘って紹介します。

スタイルシートマネージャスタイルシートのアイコン

はじめは、現在編集しているページにスタイルを設定するのに使われるスタイルシートマネージャです。

スタイルシートマネージャ

現在編集しているページにスタイルを設定するときに活用します。

起動の方法

メニューバーの「表示」から「スタイルシートマネージャ」をクリックします。

あるいは、スタイルシートマネージャの表示/非表示アイコンスタイルシートマネージャの表示ボタンをクリックします。

スタイルシート情報

ルール情報

ページトップへ戻る

「スタイルの設定」ダイアログ

ページ内で使用している要素にスタイルを設定します。

HTML タグのスタイルを設定

クラスのスタイルを設定

ID のスタイルを設定

[新規スタイルとして保存] チェック ボックス

上で決められた対象への実際のスタイルを設定するには、それぞれのタブで行います。

ヒントのアイコン

A:VISITED、A:HOVER、A:ACTIVE に対して付けられたスタイル

HTML タグの候補リスト にある A:VISITED、A:HOVER、A:ACTIVE に対して付けられたスタイルは ページ編集画面 タブには影響しません。

注意アイコン

クラス、ID を指定する場合の注意

クラス、ID を指定する場合、半角英数字を使用してください。また「! " # % & . _ 」などの記号を使用した場合、認識されない可能性がありますので注意が必要です。

ページトップへ戻る

「フォント」タブ

このタブでは、フォント名、サイズ、文字飾り、文字の属性 (太さ、スタイル、変形、変換) を指定することができます。

[使用するフォント] ボックス font-family プロパティ

[フォントの候補]ボックス

[サイズ] スピンボックス font-size プロパティ

[文字飾り] ボックス text-decoration プロパティ

[文字の属性] ボックス

サンプル

ページトップへ戻る

「色と背景」 タブ

このタブでは、前景色、背景色、背景の画像、画像の表示位置、画像の繰り返し、画像の貼り込みかたを指定することができます。

[前景色] リスト ボックス 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 (画像)を中央揃えにするときなどに使います。

まず、行全体をリンクの対象とする場合です。

  • CSSソース:
    • a.broad_link {
    •    display: block;
    •    width: 100%;
    • }
    • a.broad_linlnk:hover {
    •     background-color : #ffff99;
    •     color: red;
    • }
  • XHTMLソース:
    • <p><a href="#" class="broad_link">リンク<</p>/a>

次に、幅の違う画像を中央に揃える場合です。

  • CSSソース:
    • img {
    •    display: block;
    •    margin: 5px auto;
    • }
  • XHTMLソース:
    • <img src="images/image1.jpg" width="279" height="130" border="0" />
    • <img src="images/image2.jpg" width="260" height="67" border="0" />
    • <img src="images/image3.jpg" width="200" height="66" border="0" />

ページトップへ戻る

|    | 11  12  13  14  |