11/27

区切り線は大事だよね！ここまでが一つのセクションだと示すのは読者の負担軽減にもなるし、カワイイ区切りがあればなおよし。

今回は区切りです。hrではなくてdivを使います。理由は見出しの時と同じです。hrでもいいのですけど、打消しが面倒だったり。

さて、区切り線。

HTML5ではhrは【テーマ・話題の区切りを表す要素】として用いられます。

hrは閉じタグは不要です。

<hr>で区切り線を引くことができます。

PC版のCSSはブラウザで設定されているデフォルトが適用されます。

スマホ版では

hr {

border: 1px solid #333333;

clear: both;

}

が適用されます。

普通はこのhrにスタイルを適用させて区切り線とするのですが、魔改造する場合はdivを使って実装します。

CSSを改造出来たら簡単でよかったのですが、使えないので仕方ないです。

あ、でも単純に色を変えるだけならhrにstyleを適用させて実装するのがいいと思います。

まぁ私は混同すると混乱するので全部divで実装しますが。

- - - ✂切り取り✂- - -

さて、普通の使い方も終わったので、割烹での使い方を説明します。

border-topを指定して区切りを作ります。

太さ、色、線の種類を指定可能です。

これにmarginを指定したり、widthを指定すると幅を調節できます。

例：

色変更

太さ変更

種類変更

幅変更　

方側に寄らす(右寄せ)

中央な感じ

ブロック要素を寄せるにはmargin autoを使うと便利です。隙間を開けたい方向にautoを指定すると、寄せることができます。全体にautoをかけると中央寄せになります。

ただ、幅が親要素よりも小さくないとだめです。（当たり前ですが、余白が存在しない状態で寄せることはできません）

応用として、borderを追加して鍵括弧的な感じにもできます。左とか。逆もしかり。

注意点は、中身に全角スペースを入れることですね。

まぁここまでの例は単純なので、hrに変更してもいいと思います。

hrにすると若干文字数削減できます。

またborder-topでなくてもbottomでも可です。私は文字数削減のためtopを使ってますけど、bottomでも可です。

お好きな方をお選びください。

- - - ✂切り取り✂- - -

さて次は中に文字を入れます。

中に文字を入れられると装飾の幅が広がります。

これはmarginの-を使って実現します。

構造としては

</div>

となります。wrapperで文字サイズ、色、背景色を指定します。位置ぞろえで中の文字の位置を変えることができます。letter-spacingで文字幅を大きくしてもいいでしょう。

contentに中に入れたい文字を書き、背景色を変えることで線を部分的に打ち消します。ここのmarginはなくてもいいです。そろえ位置を右、左にした場合に重なる部分の調整用に設けているだけで、特に必須ではないです。

最後のborderで線を引きます。ここでミソなのが、margin-topで位置をずらすことです。真ん中に移動させたいので(線幅+文字サイズ)/2だけ上に移動させています。

中の文字とborderの設定で個性的な区切り線を実現可能です。

いくつか例を出しておきます。

線の種類を変える

<div style="font-size:16px;line-height:1;text-align:center;"><span style="color:#000000;background:#ffffff;margin:10px;">✂キリトリセン✂<div style="margin-top:-8.5px;border-top:1px dashed #000000;">　</div></div>

色を変える

文字を左寄せ

wrapperのtext-alignを変えると寄せ方向を指定できます。

なお、sopanのmarginを変えることで位置を調節可能です。

背景を変える。

</div>

全体の背景を変えて、その背景色に合わせて、spanの背景色を変えます。

若干面倒ですが、スキンで背景色を変えている場合は調整しないとちょっと見た目が悪くなります。

まぁ、色々といじってみて下さい。

区切りは以上です。

単なる水平線でよければhrだけでいいのですが、中に文字を入れたりするならdivで実装するのがよいでしょう。

ちなみに、普通のCSSではafter beforeを使って実装します。

hr {

border: none;

border-top: 3px double #333;

color: #333;

overflow: visible;

text-align: center;

height: 5px;

}

hr:after {

background: #fff;

content: '§';

padding: 0 4px;

position: relative;

top: -13px;

}

この場合はafterを使って、hrの後ろにcontentを用意してtopの位置をずらす感じで実装しています。

やっていることは本文と同じですね。ただ、なろう活動報告では使えないのでdivで実現しているだけです。

魔改造をする場合は最初に普通のやり方を知って、それを制限の中でどのように実装するのか考えるのが大事です。何事も普通のやり方を知らないと改造はうまくいきません。基礎を知っているからこそ改造ができるのです。守破離と同じですね。