ホームページビルダー/スタイルシート編
スタイルシートの利用例
- 指定したサイズでテキストを表示させる(インラインフレームのように表示させる)
- 壁紙(背景画像)を繰り返さないで表示
- 背景画像を固定して表示
- リンクの下線を表示しない
- リンクを設定した文字にマウスを乗せると文字の位置がズレるようにする
- リンクを設定した文字にマウスを乗せると上下の線が表示される
- リンクを設定した文字にマウスを乗せると背景色と前景色が変わる
- リンクのスタイルを特定箇所だけ別のスタイルにしたい
- カーソル表示を変更する
- テーブル枠の表示<基本編>
- ウィンドウ内の余白を無くす
- ウィンドウを囲むような枠線を表示する
- 行間隔、文字間隔を調整する
- 縦書きにする
- フィルタを使って半透明にする
- フィルタで出来ること
- 色付きスクロールバー<小技編>
カーソル表示を変更する
これは、ビルダーで設定出来るカーソル表示のサンプルの一部です。
赤いボタンの上にカーソルを乗せるとカーソルの表示が変わります。
| 十字 | 移動 | 右端 | 左端 | 上端 | 下端 | 処理中 | ヘルプ |
「スタイルの設定画面」のうち、今回使用するのは「その他」の項目です。
この中に「属性・・・カーソル」とあります。その下には上のサンプルで紹介した、「十字」や「移動」「上端」などがあるので表示したいカーソル表示にチェックをいれます。
ウィンドウ内の余白を無くす
スタイルシートを利用してウィンドウの隅の空白を無くすことができます。
[スタイルシートマネージャー]を開く→[HTMLタグ名(M)]に「 body 」と入力→[レイアウト]タブをクリック→「マージン」と「パディング」の値を「0ピクセル」に設定します。
※スタイルの設定画面
サンプル
スタイルの設定を行わない場合(普通どおりの作成)
スタイルの設定を行った場合(マージンの設定を行った)
ページのプロパティから設定する方法
V11以降のビルダーでは、スタイルシートの設定方法が以前とは少し変わっているようで、以下の方法でスタイルを設定した場合はインラインスタイルとして挿入されます。
V10以前の場合
[編集]→[ページの属性](V6.5以前のビルダーでは、[書式]→[ページのプロパティ])→[スタイル]→[編集(1)]→[レイアウト]→[マージン/0ピクセル][パディング/
0ピクセル]
※この操作方法は、ページ毎にスタイルを設定する時の操作です。サイト全体に適用するスタイルを設定する場合は、外部スタイルシート内の「body」タグに対してマージンとパディングの設定を行います。
ウィンドウを囲むような枠線を表示する
[スタイルシートマネージャー]を開く→[HTMLタグ名(M)]に「 body 」と入力→[レイアウト]タブをクリック→「ボーダー」の項目にある[幅][スタイル][色]を設定します。
ページのプロパティから設定する方法
V11以降のビルダーでは、スタイルシートの設定方法が以前とは変わっているようで、以下の方法でスタイルを設定した場合はインラインスタイルとして挿入されます。
V10以前の場合
[編集]→[ページの属性](V6.5以前のビルダーでは、[書式]→[ページのプロパティ])→スタイル→編集(1)→レイアウト→「ボーダー」の項目を設定する
サンプル(スクロールバーの外側に枠線があることに注目。)
※この操作方法は、ページ毎にスタイルを設定する時の操作です。サイト全体に適用するスタイルを設定する場合は、外部スタイルシート内の「body」タグに対して「ボーダー」の設定を行います。
行間隔、文字間隔を調整する
以下は読みづらいと思いますが、サンプルとして「行間200%」 「文字間1em(文字の高さ)」を設定しています。
スタイルの設定では、「文字のレイアウト」項目がこの操作に当たります。
ビルダーで自動的に挿入される段落は<P>タグです。
例として、現在この段落(Pタグ)にスタイルを設定しています。
縦書きにする
「スタイルの設定」画面からは設定できないので、HTMLソースに直接書き込みます。
<例> クラス名を tate にした場合。
<style type="text/css">
<!--
.tate{
writing-mode : tb-rl;
}
-->
</style>
このように表示されます。
縦書きが表示されるのは、IE5.5以上です。他のブラウザでは表示できません。