●サンプル1
見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。
・・・文字位置が合わない(泣)
平仮名、カタカナ、漢字の位置を合わすのは無理なんだろうか。助けて。
んじゃ今度は漢字だけで試してみる。
●サンプル2
見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。
今度はうまくいった。でもこれも多分漢字の文字幅次第なんだろうな・・・。
んじゃ次は四角にしてみる。
●サンプル2
見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。
フォントがメイリオのボールドとかならキレイそう。
しかし・・・やっぱり実用的なのは縦書きじゃなくてこっちのパターンか。
●サンプル3
もはや縦書きではないという罠。もはや縦書きではないという罠。もはや縦書きではないという罠。もはや縦書きではないという罠。もはや縦書きではないという罠。もはや縦書きではないという罠。もはや縦書きではないという罠。もはや縦書きではないという罠。もはや縦書きではないという罠。
・・・楽に縦書き見出しを作る夢、撃沈。
●サンプル1
h2.sample01{
float:left;
width:1em;
background:#900;
font-size:1em;
color:#fff;
padding:5px;
margin:0px 5px 0px 0px;
}
●サンプル2
h2.sample02{
float:left;
width:4em;
background:#900;
font-size:1em;
color:#fff;
letter-spacing:3px;
padding:5px 3x 5px 10px;
margin:0px 3px 0px 0px;
}
●サンプル3
h2.sample03{
float:left;
background:#900;
font-size:1em;
color:#fff;
letter-spacing:2px;
padding:5px;
margin:0px 3px 0px 0px;
}
<h2 class="sample01">早寝早起</h2>
<p>見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。見出しタグを縦書き左寄せにして本文を回りこませてみる。</p>