【はてなブログ】いろいろなタイトル付き枠の作り方

【はてなブログ】文章を囲ういろいろな枠の作り方では枠そのものについて説明しましたが、
今回はその枠をさらにいじってみたいと思います。

タイトル付きの枠

<fieldset style="border: 1px solid #fc4a1a;
 padding: 10px;">こんな感じになるよ
<legend>タイトル
</legend></fieldset>

上のコードを使うことで下のようなタイトルが付いた枠が作れます。

こんな感じになるよ

タイトル

<legend></legend>を<fieldset style=""><fieldset>で挟む感じですね。

<fieldset style=""><fieldset>の部分は本文、<legend></legend>にはタイトルを入力します。

文字を改行するときは<br>を使います。

<fieldset style=""><fieldset>のstyle=""の部分は
【はてなブログ】文章を囲ういろいろな枠の作り方で説明した枠のコードが設定できます。

個別に文字を装飾したい場合

・タイトルと枠の中の文字を両方装飾したい場合

<fieldset style="">の方にコードを追加すれば、タイトルと枠の両方の文字が装飾されます。

・タイトルの文字だけ装飾したい場合

<legend>の部分を<legend style="">に変えてコードを入力します。

こんな感じになるよ

タイトル

<fieldset style="border: 3px double #fc4a1a;
 padding: 10px;">こんな感じになるよ
<legend style="font-weight: bold;">タイトル
</legend></fieldset>

ちなみに<legend style="">にすれば、
枠の指定などもできてタイトルを枠で囲んだりもできます。

こんな感じになるよ

タイトル

<fieldset style="border: 3px double #fc4a1a;
 padding: 10px;">こんな感じになるよ
<legend style="background-color: #ff0000;
 border-radius: 5px;
 padding: 10px;
 font-weight: bold;
 color: #ffffff">タイトル
</legend></fieldset>

・枠の中の文字だけ装飾したい場合

<fieldset style=""></fieldset>にコードを追加するとタイトルと枠の中の文字、
<legend style=""></legend>にコードを追加するとタイトルの文字のみが
装飾されます。

じゃあ、枠の中の文字だけ装飾したい場合はどうするの？となりますよね。

その場合は<span style=""></span>を使います。

枠の中の文字の装飾したい部分を<span style=""></span>で囲む感じです。

こんな感じになるよ

タイトル

<fieldset style="border: 3px double #fc4a1a;
 padding: 10px;">こんな<span style="font-weight: bold;
 color: #ff0000">感じになるよ
</span>
<legend>タイトル
</legend></fieldset>

タイトルにも枠を付ける

タイトルの文字だけ装飾するで<legend style=""><legend>を使って
タイトルに枠を付けましたが、タイトルにも枠を付けたい場合は
こちらを使う方がいいと思います。

こんな感じに
なるよ。
タイトル

<div style="position: relative;
 margin: 46px 0 16px 0;
 padding: 16px;
 border: 5px solid #ff0000;">こんな感じに<br>なるよ。
<span style="position: absolute;
 top: -30px;
 left: -5px;
 line-height: 30px;
 padding: 0 16px;
 background: #ff0000;
 border-radius: 5px 5px 0 0;
 color: #ffffff;
 font-size: 120%;
 text-shadow: 2px 2px 5px #555;">タイトル
</span></div>

もちろん、文章の枠だけでなくタイトルの枠も
コードの組み合わせによって様々な枠にすることができます。

こんな感じになるよ。
タイトル

<div style="position: relative;
 margin: 72px 16px 32px;
 padding: 16px;
 border: 5px double #000;
 background: #ffffff;">こんな感じになるよ。
<span style="position: absolute;
 top: -55px;
 left: 0;
 border: 5px dotted #ff0000;
 line-height: 40px;
 padding: 0 16px;
 border-radius: 5px 5px 0 0;
 color: #ff0000;
 font-weight: bold;
 font-size: 120%;">タイトル
</span></div>

これでタイトルに枠を付けることができますが、ここで重要なのがpositionです。

positionには以下の二つが指定できます。

relative : 相対的な位置
absolute : 絶対的な位置

メインの要素（親要素）にrelative、サブの要素（子要素）にabsoluteを設定すると、
子要素が親要素を基準にして移動するようになります。

文章の枠にposition: relative;を、タイトルの枠にposition: absolute;を設定することで
タイトルの枠が文章の枠を基準として移動させることができるようになります。

もう一つ重要なのがmarginです。

枠の外側に見えないバリアを張って壁を作るってやつですね。
【はてなブログ】文章を囲ういろいろな枠の作り方では枠を単体でしか使わなかったので
いまいちmarginの意味が分からなかったかもしれません。

そこで試しの上のコードのmargin: 72px 16px 32px;の部分、72pxを0にしてみましょう。

文章が被っちゃってます。

こんな感じに
なるよ。
タイトル

タイトルの枠がその上の文章にかぶってしまいますね。

これを回避するためにタイトル枠の分、
文章を囲っている枠の外側に見えない壁を作って上の文章を離す、
これがmarginの役割です。

タイトル枠の大きさ、位置に応じて、marginの値も設定しましょう。

なお、前回出てきませんでしたが、line-height: ～pxでタイトルの枠の高さを指定します。

タイトルの位置を変える

position: absoluteの後ろにあるtop: ～px; left: ～pxの数字を変えることで、
枠を好きな位置に表示することができます。

topは上から～pxの位置に表示、leftは左から～pxの位置に表示です。

指定したpx分、空白で押し出す感じでしょうか。

わかりにくいですが、
topのpxの値を負の値にすると上に、leftのpxの値を負にすると左に
現在の位置から移動します。

例えば、top: -5px;left 5pxの場合、現在の位置から上に5px、右に5px移動します。

同様にbottom: ～px（下から～pxの位置に表示）、
right: ～px（右から～pxの位置に表示）も使用できます。

・枠の中にタイトル枠を入れる

こんな感じになるよ。
タイトル

<div style="position: relative;
 margin: 16px 16px 32px;
 padding: 51px 16px 16px;
 border: 5px solid #ff0000;
 background: #ffffff;
 color: #555;">こんな感じに<br>なるよ。
<span style="position: absolute;
 top: -5px;
 left: -5px;
 line-height: 40px;
 padding: 0 16px;
 background: #ff0000;
 border-radius: 0 0 5px 0;
 color: #ffffff;
 font-weight: bold;
 font-size: 120%;
 text-shadow: 2px 2px 5px #555;">タイトル
</span></div>

タイトルの枠を枠の中に入れる場合に気を付けるのが、枠のpaddingです。

タイトル枠を枠の中に入れるので、
調整しないと下のようにタイトル枠と文章が重なってしまいます。

こんな感じになるよ。
タイトル

そこで、タイトル枠の高さline-heightの40px分上に余白を設定すればいいです。

ただ、タイトル枠は枠の太さ（border: 5px solid #ff0000;の5px）分
上に移動させている（top: -5px;）ので、タイトル枠の太さから移動分をプラスします。

タイトル枠の高さ（40px)＋移動した距離（-5px）で35px余白を作れば
タイトル枠と重ならなくなるということです。

でも、このままだとタイトル枠にぴったりくっついてる感じになるので、
実際はデフォルトのpadding値をプラスしてあげるといいと思います。

設定するpadding値は
タイトル枠の高さ（40px)＋移動した距離（-5px）＋デフォルトのpadding値（このブログの場合16px）=51px
となるわけですね。

となるとpaddin: 51px;としたくなるところですが、
これだと下にあるように上下左右に適用されてしまうので
上だけ51pxに指定する必要があります。

こんな感じになるよ。
タイトル

paddingは上のpx 右のpx 下のpx 左のpxと上から時計回りに指定していくので
padding: 51px 16px 16px 16px;となります。

最後の左の16pxは右の16pxと同じなので省略できます。

同じようにタイトル枠を左や右、下に配置することもできます。

・枠の左にタイトル枠を入れる

こんな感じになるよ。
タ
イ
ト
ル

<div style="position: relative;
 margin: 16px 0 32px 32px;
 padding: 16px;
 border: 5px solid #ff0000;
 background: #ffffff;>こんな感じになるよ。
<span style="position: absolute;
 top: -5px;
 left: -37px;
 line-height: 18px;
 padding: 0 16px;
 background: #ff0000;
 border-radius: 5px 0 0 5px;
 color: #ffffff;
 font-weight: bold;
 font-size: 100%;">タ<br>イ<br>ト<br>ル
</span></div>

・枠の下にタイトルを入れる

こんな感じになるよ。
タイトル

<div style="position: relative;
 margin: 16px 0 72px 0;
 padding: 16px;
 border: 5px solid #ff0000;
 background: #ffffff;">こんな感じになるよ。
<span style="position: absolute;
 bottom: -42px;
 right: -5px;
 line-height: 40px;
 padding: 0 16px;
 background: #ff0000;
 border-radius: 0 0 5px 5px;
 color: #ffffff;
 font-weight: bold;
 font-size: 120%;">タイトル
</span></div>

・枠の右にタイトルを入れる

こんな
感じに
なるよ。
タ
イ
ト
ル

<div style="position: relative;
 margin: 0px 32px 32px 0;
 padding: 16px;
 border: 5px solid #ff0000;
 background: #ffffff;">こんな<br>感じに<br>なるよ。
<span style="position: absolute;
 top: -5px;
 right: -37px;
 line-height: 30px;
 padding: 0 16px;
 background: #ff0000;
 color: #ffffff;
 font-weight: bold;
 font-size: 120%;">タ<br>イ<br>ト<br>ル
</span></div>

このようにtop: ～px; left: ～pxの数字を変えることで、
枠を好きな位置に表示することができますが、あまり見た目はよくないですね。

設定を変更する箇所もたくさんありますし…

紹介しておいてなんですが、素直に左上がいいですね。