| 便利な横罫線 |
何か段落的なことを視覚的に表現したいとき、あなたはどうしますか？
行と行の間にスペースを空けたり、段落のはじめに文字の大きさや色を変えてタイトルを作ったり。
そして何と言っても便利なのが横罫線です。
こんな具合です。
これは次のように記述します。＜ｈｒ＞
ここまでは誰でもやっています。
ところで、この横罫線は「幅」「色」「長さ」を自由に変えることが出来ます。
また、テキストと同じように「左寄せ」「センタリング」「右寄せ」などができます。
| まず、色と幅を変えてみましょう |
ちょっと緑色の罫線を引いてみましょう。
これは次のように記述します。＜ｈｒ ｃｏｌｏｒ＝ｇｒｅｅｎ＞
ソースを見れば、なあんだ、とおもうでしょう。
単にタグの中に色の指定をしているだけです。
ここではｇｒｅｅｎとかきましたが、もちろん＃＊＊＊＊＊＊と、６桁の数字で表現しても構いません。
次に幅を変えてみましょう。
こんなのはいかがですか？
これは次のように記述します。＜ｈｒ ｃｏｌｏｒ＝ｏｒａｎｇｅ ｓｉｚｅ＝４＞
| 長さはどうやって帰るの？ |
まず実際に三種類の罫線を見ていただきましょう。
ソースは上から順に
＜ｈｒ ｃｏｌｏｒ＝ｂｌｕｅ ｓｉｚｅ＝５ ｗｉｄｔｈ＝３０％＞
＜ｈｒ ｃｏｌｏｒ＝ｂｌｕｅ ｓｉｚｅ＝５ ｗｉｄｔｈ＝６０％＞
＜ｈｒ ｃｏｌｏｒ＝ｂｌｕｅ ｓｉｚｅ＝５ ｗｉｄｔｈ＝１００％＞
となっています。
※ｗｉｄｔｈ＝１００％を指定すると、本当は画面の左右いっぱいに広がりますが、ここでは見やすさを考慮して、画面の左右にスペースを設けています。（＜blockquote＞タグ）
ここで新しく増えた記述はｗｉｄｔｈですね。これは％でも、ピクセルでも指定することが出来ます。
％は、ディスプレイの幅に対する割合です。つまり、長さそのものはディスプレイの大きさに左右されますが、デザイン的にはディスプレイの大きさに寄らず、イメージ通りのものが作れる、と言うこともできるでしょう。
表示位置は何も指定しなければご覧のように「センタリング」されます。
では、左に寄せてみましょう。
では、右に寄せてみましょう。
左寄せの記述は次のようになります。
＜ｈｒ ｃｏｌｏｒ＝ｂｌｕｅ ｓｉｚｅ＝５ ｗｉｄｔｈ＝１００％ ａｌｉｇｎ＝ｌｅｆｔ＞
右寄せの記述は次のようになります。
＜ｈｒ ｃｏｌｏｒ＝ｂｌｕｅ ｓｉｚｅ＝５ ｗｉｄｔｈ＝１００％ ａｌｉｇｎ＝ｒｉｇｈｔ＞
| というわけで、デザイン的に遊べますよね。 |
ただ単に横線を引く、というのではなくて、これだけのバリエーションが使えれば、デザイン的にそれなりに遊べます。
ＨＰ上でインパクトを付けたり、目を楽しませたりするのに、画像を用いますが、画像はどうしても重たくなってしまいます。
そう言うときに、横罫線を色々工夫してみてはいかがでしょうか？
もちろん画像の代わりにはなりませんが、横罫線はテキストですから、軽い割に目を引くデザインが作れると思います。
僕のプータロー日記
僕のプータロー日記
[「読者によって成長するｗｅｂ・しないｗｅｂ」「ｗｅｂコンテンツの弱点」に戻る]
[続きは未定です]（工事中）