極意(37)余白調整プラグイン(#br)

haikテーマを導入して、よく分からない機能の一つが余白調整プラグイン(#br)です。
特に、#br(-30)のように余白指定の数値にマイナス値を指定する意味がよく分からない。
分からないのなら、試してみるいつもの性格が良いのか悪いのか。
今回も試行錯誤の繰り返しで結果オーライとなり報告できるようになりました。


プラグインの一般形

#br(数値)

数値はピクセル(px)単位で指定します。


使用例

// 上に 30pxの余白を設けます。
#br(30)
// 上に -30px 押し上げます。
#br(-30)

「上に -30px 押し上げます」とは、どう言う意味でしょうか? 
疑問がつのるばかりです。


1.改行記号(&br;)の余白は、何ピクセル空くのか?

通常よく使っている改行記号(&br;)は、一体全体、何ピクセルの余白になるのか調べてみました。調べた結果、改行記号(&br;)の余白は約50ピクセルでした。(下記)

1111111111


2222222222

1111111111
&br;
2222222222

3333333333

4444444444

3333333333
#br(40)
4444444444

5555555555

6666666666

5555555555
#br(50)
6666666666


2.#br()と&br; は、ほぼ同じ余白が空きます。

それでは、#br()と&br; の余白の大きさは如何ほどなのか?
#br()と&br; は、 #br()の方が若干間隔が大きいみたいですが、ほぼ等しく約50ピクセルと考えて差支えないみたいです。(下記)

3333333333


4444444444

3333333333
&br;
4444444444

5555555555

6666666666

5555555555
#br()
6666666666

7777777777

8888888888

7777777777
#br(50)
8888888888


3.#br(-40) の余白で行間無しになる?

#br() の余白が約50ピクセルであることを前提に、マイナス数値の意味を解明してみました。
その結果、#br(-40) で行間無しになり、#br(-50) で文字が重なり、#br()の50ピクセルが正しかったことが分かります。(下記)

7777777777

8888888888

7777777777
#br()
8888888888

9999999999

0000000000

9999999999
#br(-40)
0000000000

1111111111

2222222222

1111111111
#br(-50)
2222222222


戻る


上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 15  
    役に立たなかった 0  


ご意見箱