RedlineMagazine::見出しを縦書きにして回りこみしてみるサンプル

●サンプル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>	

>>RedlineMagazine::見出しを縦書きにして回りこませたい・元記事へ