ものマガ

HTML編集のメモ書き(破線の区切り線・ボックスなど)

2016/10/06 17:47 投稿

  • タグ:
  • HTML編集
  • 区切り線
  • hr
  • HTML
  • ブロマガ
  • ブロマガ編集
たまに罫線(┥とか├とか)でボックスを作っていたり、- - - - -のようにハイフンで破線の区切り線を作っている記事を見かけるので、こんなタグを使うといいと思うよ、というものをまとめてみました。
すきなように使っていただいてかまいませんのでどうぞ

>ボックス

ボックス
<div style="border:1px solid #000; padding:10px; margin:10px">文章</div>
ボックスの太さと色とボーダースタイルの値を変えたもの
<div style="border:2px dashed #87CEEB; padding:10px; margin:10px">文章</div>
簡単に説明をすると、「border:1px solid #000」ではどんな線にするか、
「padding:10px」では線の内側の空白、「margin:10px」では線の外の空白を指定しています。

こんな感じ。線の種類については、ブロマガで使えるのは以下のようです。

solid:直線
dashed:破線
dotted:点線
ridge:立体的に凸
groove:立体的に凹む
inset:上と左が暗く表示される
outset:下と右が暗く表示される
none:初期値
hidden:表示されない

色についてはカラーコードかカラーネームをつっこめばOK。
参考:HTMLカラーコードとは(ニコニコ大百科)

>区切り線









これもボックスの方と同じことをやっているだけです。

タグは順に
<hr>
<hr style="border:2px solid #87CEEB;">
<hr style="border:1px dashed #000000;">
<hr style="border:2px dotted #000000;">
<hr style="border:5px groove #000000;">
<hr style="border:5px ridge #000000;">
<hr style="border:5px inset #000000;">
<hr style="border:5px outset #000000;">

コメント

コメントはまだありません
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事