今回はラインを引く話。
黄色枠の中をコピペしてHTML編集ができるシートに貼ったら、線を引くことができます。
今回は2パターンご紹介。
1. style で指定
基本
↑↑↑これがひける。
<p style="border-bottom: solid;"> </p>
これだけで黒いラインを引くことができます。
solid の部分を以下のように変えたら、点線なども作ることができます。
例えば、dotted にしたら、↑ こんな感じの点線になります。
: solid; 線を実線に。
: dotted; 線を点線に。
: dashed; 線を破線に。
: double; 線を二重線に。
↑
なお、この一番下の行は、
<p style="border-bottom: dotted;"> : double; 線を二重線に。</p>
として下線をひいています。
太さを変える
↑↑↑
<p style="border-bottom: 10px solid;">
<p style="border-bottom: ■px solid;"> </p>
色を変える
↑↑↑
<p style="border-bottom: solid orange;">
<p style="border-bottom: solid 色;"> </p>
上の例のように「orange」などでも指示を出すことが出来ますが、
この色の部分は、バリエーションが豊富な、カラーコードを使うのがおすすめです。
(＃FF0000 みたいなもの ▶ カラーコードの話)
長さを変える
↑↑↑
長さはピクセル値か%で指定します。
個人的には%が好み🙂
<p style="border-bottom: solid; width: 50%;">
<p style="border-bottom: solid; width: ■%;"> </p>
配置を変える★できない…( ﾉД`) 誰か教えてください…
例えば中央寄りにしたい時は……
…。
<div style="text-align: center;">
とかを使ったらできるかなと思っていたのですが、うまくいきませんでした。
他にも試してみたけど、なんかうまくいかない…。
分かったら更新します。(_ _)
まとめ
<p style="border-bottom: ■px solid 色; width: ■%;"> </p>
２. hr タグを使う
<hr>は、HTML5以前は 水平線を描画する という定義でしたが、
HTML5では テーマや話題の区切りを示す要素 として
使われるようになっているそうです。
なので、以下に示す通り、今現在hrタグで水平線を引くことはできるのですが、
そのうち水平線は反映されなくなることがあってもおかしくないかも。。
ちなみに、
align属性 や size属性、noshade属性、width属性 は、
HTML5から全て廃止されているとのことですが、まだ反映できるブラウザは結構あると思います。
でも 反映されないことがあるかもしれません。
例えば、"色"は何度やっても反映されませんでした。
掲載時点で、
”太さ”も反映されないブラウザがありました (一応記載はしていますが)。
下の例も、もしかしたら反映されていないものがあるかもしれません。。(•ㅿ•̀๑)
基本
↑↑↑これがひける。
<hr>
これだけで黒いラインを引くことができます。
太さを変える
↑↑↑
<hr size="10px">
※ 指定しない時は2pxらしいです。
<hr size="■px">
上の影を消す
↑↑↑
<hr size="10px" no shade>
<hr size="■px" no shade>
長さを変える, 位置を変える
↑↑↑
長さはピクセル値か%で指定します。
個人的には%が好み🙂
<hr width="50%">
hr タグの場合は、
見ての通り、自動的に真ん中に配置されるようです。
例えば左寄りにしたい時は
↑↑↑
<hr width="50% align="left">
とします。
右寄りにしたい時は "right" です。
<hr width="■%" align="▲▲">
色を変える
…できないので省略。
それでは、このへんで。(*'▽')/
