2022年11月23日水曜日

blogger : 文字(段落)を枠で囲む

目的:

blogger で 文字(段落)を枠で囲む。

内容:

記述の途中で
線の幅       : 1px
上側余白     : 5px
右側余白     : 350px
下側余白     : 5px
左側余白     : 50px
線の内側余白 : 5px
の様に、文章を枠で囲む。

方法:

HTMLビュー で線で囲みたい文章の前後を
<div style="border: 1px solid rgb(128, 128, 128); margin-bottom: 5px; margin-left: 50px; margin-right: 350px; margin-top: 5px; padding: 5px;"> (2022/11/26 修正)
<div style="border: 1px solid rgb(128, 128, 128); margin: 5px 350px 5px 50px; padding: 5px;">

</div>
で挟む。margen は 上側,右側,下側,左側の順 *1
上の例 ("内容:"で記載の例) では 各パラメータは

線の幅 : border: 1px 上側余白 : margin-top: 5px 右側余白 : margin-right: 350px 下側余白 : margin-bottom: 5px
左側余白 : margin-left: 50px 線の内側余白 : padding: 5px

とし、更に 文章を<tt> と </tt>で囲っている。(等幅フォント)
尚、この例 ("方法:"で記載の例) では、" 行の途中で文字の先頭を揃える " と組み合わせて記載している。

*1
4方(上下左右) 全て指定する場合、
<div style="border: 1px solid rgb(128, 128, 128); margin-bottom: 5px; margin-left: 50px; margin-right: 350px; margin-top: 5px; padding: 5px;">
の様に書いても良いが、
<div style="border: 1px solid rgb(128, 128, 128); margin-bottom: 5px; margin-left: 50px; margin-right: 350px; margin-top: 5px; margin: 5px 350px 5px 50px; padding: 5px;">
の様に margin 設定が 自動で追加される。
後から margin-right の値等を修正しても margin 設定には反映されず 混乱の元となる。
4方全てでなければ、個別に指定しても問題ない。


0 件のコメント:

コメントを投稿