ホームページビルダー/スタイルシート編
スタイルシートの利用例
- 指定したサイズでテキストを表示させる(インラインフレームのように表示させる)
- 壁紙(背景画像)を繰り返さないで表示
- 背景画像を固定して表示
- リンクの下線を表示しない
- リンクを設定した文字にマウスを乗せると文字の位置がズレるようにする
- リンクを設定した文字にマウスを乗せると上下の線が表示される
- リンクを設定した文字にマウスを乗せると背景色と前景色が変わる
- リンクのスタイルを特定箇所だけ別のスタイルにしたい
- カーソル表示を変更する
- テーブル枠の表示<基本編>
- ウィンドウ内の余白を無くす
- ウィンドウを囲むような枠線を表示する
- 行間隔、文字間隔を調整する
- 縦書きにする
- フィルタを使って半透明にする
- フィルタで出来ること
- 色付きスクロールバー<小技編>
リンクの下線を表示しない
[スタイルの設定画面]の[HTMLタグの候補]で「A」を選択する。
| スタイルを設定するHTMLタグ | チェック項目 | |
|---|---|---|
| ●リンクした文字に下線を付けたくない場合 | A (リンク) | 文字装飾 「なし」にチェックを入れる |
| ●マウスが上に来たときだけ文字色を変えたい | A:HOVER (マウスが上にあるリンク) | カラーと背景→前景色→色を指定 |
リンクを設定した文字にマウスを乗せると文字の位置がズレるようにする
[スタイルの設定画面]の[HTMLタグの候補]で「A:HOVER」を選択する。
位置タブをクリック→属性 「相対的」にチェックを入れる→配置を設定する。
配置個所については下の例を参考にしてください。また、配置個所設定の数値を大きくすることで、文字の移動も大きくなります。
選択リンク色を変更させたくないときは、スタイルシートマネージャーの「カラーと背景」→前景色で表示したい色を選択する方法もあります。
| 例 | 配置個所設定 |
|---|---|
| 上へ移動 | 上 -5 |
| 下へ移動 | 上 5 |
| 右へ移動 | 左 5 |
| 左へ移動 | 左 -5 |
| 左上へ移動 | 上-5 左-5 |
| 右下へ移動 | 上 5 左 5 |
リンクを設定した文字にマウスを乗せると上下の線が表示される
[スタイルの設定画面]の[HTMLタグの候補]で「A:HOVER」を選択する。
フォント→文字飾り→下線と上線にチェックを入れる。
リンクを設定した文字にマウスを乗せると背景色と前景色が変わる
[スタイルの設定画面]の[HTMLタグの候補]で「A:HOVER」を選択する。
カラーと背景→前景色と背景色を設定する。
下の例であれば前景色を「白」、背景色を「濃紺」というように反転して設定する。
リンクのスタイルを特定箇所だけ別のスタイルにしたい
スタイルシートマネージャーから進み、クラスを設定しますが、「クラス名」を設定する箇所とタグの挿入が必要になります。
LINKに対して設定する場合、A.クラス名:LINK{属性 : 値;} というふうになり、クラスを適用させたい箇所に class="クラス名" を追加します。
【まとめ】 (例)A:HOVER(マウスが上にあるリンク)に対して設定する場合 (クラス名は .test とします)
スタイルシートマネージャーを開く→追加ボタンをクリック→「クラスのスタイルを設定」を選択→クラス名に A.test:HOVER と入力→後はスタイルシートマネージャーを使い、好きなスタイルを設定します。→リンクの挿入を行います
クラスのスタイルを適用する(スタイルクラスのツールバーを利用する場合)
表示→ツールバー→「スタイルクラス」をチェック。図のようなツールバーが表示される。
リンクを設定した文字列をクリックし、その部分がフォーカス枠で囲まれたら▼ボタンをクリックし、クラススタイルを選択する。
※ 上記の方法ではクラス名のみの挿入はできないとのご報告を頂きました。この方法を試された方、ご迷惑をお掛けいたしました。
クラス名のみ挿入するには、下記にご紹介する「スタイルの編集」ダイアログを利用する方法をお試しください。
クラスのスタイルを適用する(スタイルの編集ダイアログを利用する場合)
リンクを設定した文字列をクリックし、その部分がフォーカス枠で囲まれた状態で、右クリック→[スタイルの設定(Y)]→[クラスやIDによるスタイルの設定]項目にある[クラス(C)]の個所にクラス名を入力し[OK]ボタンをクリックします。
クラスのスタイルを適用する(HTMLソースを操作する場合)
設定したスタイルを適用させる箇所をHTMLソースで見つけ、 class="test" と追加します。(標準画面で設定したい箇所にカーソルを置き、HTMLソースタブをクリックするとその場所のソース箇所にカーソールがあります。)
こんな感じです→<A href="***.htm" target="_***" class="test">