レイアウト線を色々なところに活用する

スタイルシートをクラスとして使うのですが、
このスタイルシートの効果をつけると下記の様な感じになります。

下記の場合はIEなら見えると思いますが、右では緑色の破線が付いています。

下記の表に効果をつける前

文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です。

効果をつけた後

文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です文章です。

こういう風に表や、文字などに線をつけることができます



スタイルシートマネージャーをクリックします。すると左のような画面がでます。

「追加」をクリックします。


この画面今まで「左上の設定」が「HTMLタグのスタイル」だっとのを「クラスのスタイルを設定」に変えましょう。

そして変えたら「必ず! クラス名」を決めましょう。


「レイアウト」というタブを選び、「ボーダー」の欄の「線の・・・幅、スタイル、色」を決めていきましょう。

決めたら「OK」をクリックします。

できあがったらこのクラスの効果を「文字」または「表」などなんでもいいです

このクラスの効果をふりかけてみましょう



だいたい下記の様な感じになるはずです。

文字の場合、

表の場合

画像の場合

入力部品の場合

入力部品の場合2

あいうえお

 ああ

  ああ

  ああ

  ああ

フォームの始まり

フォームの終わり

フォームの始まり

フォームの終わり




「上方向、下方向、左方向、右方向」という風に別々に決める事も出来ます。

場所の設定で、4方向を別々に線の種類や色などをきめることができ、「1方向だけ設定」という事も出来ます。

基本設定は「4方向とも同じ値」です。こっちのほうが下線をつけるには楽かもわかりません。

たとえば「下方向だけ赤い破線1ピクセル」とすると、下記の様なことができます。

文字の場合、

表の場合

画像の場合

入力部品の場合

入力部品の場合2

あいうえお

 ああ

  ああ

  ああ

  ああ

フォームの始まり

フォームの終わり

フォームの始まり

フォームの終わり