七鍵＠楽天

ページを彩るアイテムの中で欠かせないのが「線」ですよね。
今回は味気の無い区切り線から、文字を彩る下線まで
いろいろな線を紹介したいと思います(〃⌒▽⌒)

では、早速味気の無い区切り線から（笑

例）
<hr>

表示結果）

---

なんて簡単なんでしょう(￣▽￣人)
英語はよく分かりませんが、Horizontal Rule（水平な罫線）の略らしいです。
なにはともあれ「HR」と言うタグを使えば味気の無い水平線が引けるってことですね。

次はこの味気のない線を少し工夫して、ちょっとだけおしゃれな使い方を紹介します。

例）
<center>
<hr width="300">
私のＨＰへようこそ！
<hr width="300">
</center>

表示結果）

---

私のＨＰへようこそ！

---

ちょっと複雑ですがちょっとおしゃれな使い方でしょ(〃⌒▽⌒)
画像でも出てきましたが、「width」は幅を表します。
今回は線の幅（長さ）を表しているんですねー。
ただ、線の高さは画像のときと違って「height」では指定できません。
線の場合は高さと言うよりは、太さとでも言うべきでしょうかね。
線の太さを指定する場合は次のようにします。

例）
<hr width="30" size="30">

表示結果）

---

線と言うよりはくぼんだ四角ですね(´･ω･`)
何はともあれ、線の太さを指定する際には「size」を使うってことです。
文字の大きさを指定する際にも出てきましたよね(〃⌒▽⌒)

では、次に線に色をつけてみましょう。
例で挙げた上の二つで試してみますね。

例）
<center>
<hr width="300" color="#0000ff">
私のＨＰへようこそ！
<hr width="300" color="#0000ff">
</center>
<hr width="30" size="30" color="#00ff00">

表示結果）

---

私のＨＰへようこそ！

---

---

これも簡単ですよね(〃⌒▽⌒)
色の指定の仕方は「タグを覚えよう【第３回目】　-　文字の色いろいろ 」と同じです。
忘れてしまった方は復習に戻りましょう（笑

ここまでは単体の線の使用方法（記述方法）を紹介しましたが、
次からは文字の下（周り）をいろいろな線で囲む方法を紹介します。
まずは昨日次回予告ってことで紹介した下線から(〃⌒▽⌒)

例）
<span style="border-bottom: dotted 4px #ff00ff;">ここに文字入力</span>

表示結果）

ここに文字入力

少し難しいですかね。
ただ、なんとなく今までの知識で意味が分かる部分もあるのではないでしょうか。
まず、「#ff00ff」の部分。
ここが点線の色を表しているのは見ての通りですよね(〃⌒▽⌒)
ってことは・・・
線の色を変えたい場合はこの「#ff00ff」の部分を書き換えればよさそうです。

例）
<span style="border-bottom: dotted 4px #00ff00;">例えばこんな感じ</span>

表示結果）

例えばこんな感じ

次に線の太さですが、これはどうも数字の部分が怪しいですよね。
いや、当然私は答えを知っていますので・・・
怪しいといえばそれが正解なのですが（笑
やっぱり簡単に正解を言ってしまったらつまらないでしょ(〃⌒▽⌒)

例）
<span style="border-bottom: dotted 1px #ff00ff;">例えばこんな感じ（１）</span>
<span style="border-bottom: dotted 5px #ff00ff;">例えばこんな感じ（５）</span>
<span style="border-bottom: dotted 9px #ff00ff;">例えばこんな感じ（９）</span>

表示結果）

例えばこんな感じ（１）

例えばこんな感じ（５）

例えばこんな感じ（９）

更に、英語が分かる方はお気づきかもしれませんが、
「border-bottom」の「bottom」
これが下線を表しているのです。
これを変えると次のようになります。

例）
<span style="border-top: dotted 4px #ff00ff;">例えばこんな感じ（上）</span>
<span style="border-left: dotted 4px #ff00ff;">例えばこんな感じ（左）</span>
<span style="border-right: dotted 4px #ff00ff;">例えばこんな感じ（右）</span>
<span style="border: dotted 4px #ff00ff;">例えばこんな感じ（指定なし）</span>

表示結果）

例えばこんな感じ（上）

例えばこんな感じ（左）

例えばこんな感じ（右）

例えばこんな感じ（指定なし）


最後に残った「dotted」ですが、これは線の種類を表しています。
今までは全部「点線」でしたよね。
これは「dotted」が「点線」を表していたからです。
以下に、ほかにどのような種類の線があるかを紹介しておきます。

例）
<span style="border:solid 1px #ff00ff;">例えばこんな感じ（一本線）</span>
<span style="border: double 1px #ff00ff;">例えばこんな感じ（二本線）</span>
<span style="border: dashed 1px #ff00ff;">例えばこんな感じ（破線）</span>
<span style="border: groove 1px #ff00ff;">例えばこんな感じ（くぼみ）</span>
<span style="border rigde 1px #ff00ff;">例えばこんな感じ（隆起）</span>

表示結果）
例えばこんな感じ（一本線）

例えばこんな感じ（二本線）

例えばこんな感じ（破線）

例えばこんな感じ（くぼみ）

例えばこんな感じ（隆起）

今回は少し難しかったでしょうか。
最初はまねっこでもかまいません。
どうぞ、上の例をコピーしてお使い下さい(〃⌒▽⌒)
だんだんと上達してくるにつれて、上のような例では満足いかなくなるかもしれません。
そのような場合にはこの文章を参考に、あなただけのアレンジを加えてみて下さい。
単体で引く線はもちろんのこと、文字を囲んだり文字に下線をつけたりなどなど、
ちょっとした気配りがＨＰに彩をそえることとなります。
それがあなただけのオリジナルのものであったなら、
いっそう見る人の目を惹くことでしょうね(〃⌒▽⌒)

さて、例のごとく次回予告ですが・・・
なんにしましょう（笑
実は何も考えていません(´･ω･`)
ってなわけでリクエストなどありましたらじゃんじゃんとご意見くださいませm（_ _）m
もちろん、一度に全部紹介することはできませんが、
順番に解説していきますので遠慮なくお願いします(〃⌒▽⌒)
では、また明日お会いしましょう(ﾟ▽^*)ﾉ⌒☆