プライベッターで使えそうな見出し
@tuzura_ori
プライベッターで使えそうな見出しのサンプル・タグ・簡単な説明を
幾つかご紹介しますので、参考にして下さい。
※タグの＜＞は反映防止のため全角になってますので、半角に変更して下さい。
【ここで使用する主なタグ】
span style（行単位）・div style（ブロック単位）・color(色)・padding（余白）・border（ライン）
width（長さ）・solid double dashed dotted（線の種類）
シンプルな見出し
① 左に10pxの太線＋文字冒頭に10pxの余白
テキスト
【タグ】
＜span style="border-left:10px solid #343D55; padding-left: 10px;"＞テキスト＜/span＞
② 左に20pxの2重線＋文字冒頭に10pxの余白
テキスト
【タグ】
＜span style="border-left:20px double #343D55; padding-left: 10px;"＞テキスト＜/span＞
※2重線の場合、1本の線幅は指定したpxの3分の1になりますので
3px以上の指定が無難。
③ ①＋1pxの下線＋長さ80%を指定
テキスト
【タグ】
＜span style="display:block; border-left:10px solid #343D55; border-bottom:1px solid #343D55;width: 80%; padding-left: 15px;"＞テキスト＜/span＞
※②のような2重線を指定する場合は、solidをdoubleに変更（下線にも同じことが言えます）
又、%をpxで指定することもできます
（例）
テキスト【タグ】
＜span style="display:block; border-left:20px double #343D55; border-bottom:5px double #343D55;width: 400px; padding-left: 10px;"＞テキスト＜/span＞
【応用】 長さを指定せず、文字数＋paddingで余白を調整
テキスト
【タグ】
＜span style="border-left:10px solid #343D55; border-bottom:1px solid #343D55; padding: 5px 15px;"＞テキスト＜/span＞
※padding: 5px 15pxとは、上下の余白が5px、左右の余白が15pxってことです。
囲み枠
① 長さ80%＋上下5px 左右20pxの余白を指定
テキスト
【タグ】
＜span style="display:block; width: 80%; padding : 5px 20px; border:1px solid #999;"＞テキスト＜/span＞
※長さはpxでも指定できます。
②長さを指定せず、文字数＋余白で調整
テキスト
【タグ】
＜span style="padding : 5px 40px ; border:1px solid #999;"＞テキスト＜/span＞
※線の種類を変更したい場合は、solidをdouble(2重線) dashed(破線) dotted(点線)に変更。
px数を変える事で、線の太さ(点の大きさ)を変える事が出来ます(2重線の場合は3px以上を推奨)
（例）
3pxのsolid
3pxのdouble(2重線)
3pxのdashed(破線)
3pxのdotted(点線)
③文字色と背景色を指定（長さ80%・上下5px 左右20pxの余白を指定）
テキスト
【タグ】
＜span style="display:block; width: 80%;padding : 5px 20px ; background-color: #999; color:#fff;"＞テキスト＜/span＞
④長さを指定せず、文字色と背景色を指定（文字数＋余白調整）
テキスト
【タグ】
＜span style="padding : 5px 30px ; background-color: #999; color:#fff;"＞テキスト＜/span＞
※caution※
見出しなので１行を大前提とし、spanタグを使っていますが
複数行（ブロック）の場合は、divタグを使います。
複数行ならdiv（ブロック）で指定しますが
その際、長さを指定しないとこのように、囲み枠は端から端までとなります。
※背景色で指定する場合も同じ。
【↑のタグ】
＜div style="padding : 10px 40px ; border:1px solid #999;"＞囲み枠の場合、1行ならspan
複数行ならdiv（ブロック）で指定しますが
その際、長さを指定しないとこのように、囲み枠は端から端までとなります。
※背景色で指定する場合も同じ。＜/div＞
（例 長さ50%・上下5px 左右20pxの余白を指定）
テキスト
テキスト
テキスト
【タグ】
＜div style="display:block; width: 50%; padding : 5px 20px; border:1px solid #999;"＞テキスト
テキスト
テキスト
テキスト＜/div＞
（例 背景色＋文字色・長さ指定なし・上下5px 左右20pxの余白を指定）
テキスト
テキスト
テキスト
【タグ】
＜div style="padding : 5px 20px ; background-color: #999; color:#fff;"＞テキスト
テキスト
テキスト
テキスト＜/div＞
（例 背景色＋文字色・長さ50%・上下5px 左右20pxの余白を指定）
テキスト
テキスト
テキスト
【タグ】
＜div style="display:block; width: 50%; padding : 5px 20px ; background-color: #999; color:#fff;"＞テキスト
テキスト
テキスト
テキスト＜/div＞
アラカルト
サルワカさん（https://saruwakakun.com/）のリファレンスを参考にし
ベッターでも使えるよう、タグの一部を変更して幾つかご紹介。
※サルワカさんで詳しく説明されてますので、ここではタグのみ。
サンプル①
【タグ】
＜span style="background-color: #999;color:#fff;box-shadow: 0px 0px 0px 5px #666;border: dashed 1px #fff;padding: 0.5em 0.5em;"＞サンプル ①＜/span＞
サンプル ②
【タグ】
＜span style="padding: .5em .75em; background: -webkit-linear-gradient(top, #999 0%, #666 100%); background: linear-gradient(to bottom, #999 0%, #666 100%); color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);"＞サンプル ②＜/span＞
サンプル ③
【タグ】
＜span style="padding: .5em .75em; background: -webkit-repeating-linear-gradient(45deg, #666, #666 5px, #333 5px, #333 10px); background: repeating-linear-gradient(45deg, #666, #666 5px, #333 5px, #333 10px); color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);"＞サンプル ③＜/span＞
サンプル ④
【タグ】
＜span style="padding: .6em 1em; background: #999; background: -webkit-linear-gradient(top, #999 0%, #333 100%); background: linear-gradient(to bottom, #999 0%, #333 100%); border-top: 1px solid #ccc; border-right: 10px solid #333; border-bottom: 1px solid #ccc; border-left: 30px double #333; border-radius: 7px; color: #fff;"＞サンプル ④＜/span＞