縦書き用スタイルシート : 縦書きWebページプロジェクト

- スタイルシートで縦書きページを作ろう

縦書き用スタイルシート [ 旧版 ] のサンプル

割と重要なお知らせ

2010年10月、縦書き用スタイルシートの新版を掲載しました。
　　→ 縦書き用スタイルシート[ 新版 ]
特にこだわりが無い場合は、新版のほうを使ってみてください。
　　→ 新旧スタイルシートの違い

見出しです

縦書きのサンプルです

。

太字です

。

斜体です

。

括弧などは縦書き字形で

。

↓

﹁

か

っ

こ

﹂

フ

ォ

ントを大きく

してみる

あかあかと

日は難面

︵

つれなく

︶

も

あきの風

松尾芭蕉

とまあ

、

こんな具合なのですよ

。

いかがでし

ょ

⼁

か

。

縦書き部分のソース

<div class="tate" style="height:20em;">
	<div class="midashi_2">見出しです</div>
	<div class="gyo">縦書きのサンプルです<div class="kuto">。</div></div>
	<div class="gyo"></div>
	<div class="gyo"><b>太字</b>です<div class="kuto">。</div><i>斜体</i>です<div class="kuto">。</div></div>
	<div class="gyo">括弧などは縦書き字形で<div class="kuto">。</div><div>↓</div><div>﹁</div>か<div class="komoji">っ</div>こ<div>﹂</div></div>
	<div class="gyo"><div style="font-size:16pt;line-height:1.1em;">フ<div class="komoji">ォ</div>ントを大きく</div>してみる</div>
	<div class="gyo"></div>
	<div class="gyo"></div>
	<div class="gyo">あかあかと</div>
	<div class="gyo"><div>　</div><div>　</div>日は難面<div>︵</div>つれなく<div>︶</div>も</div>
	<div class="gyo"><div>　</div>あきの風</div>
	<div class="gyo" style="padding-top:10em;">松尾芭蕉</div>
	<div class="gyo"></div>
	<div class="gyo"></div>
	<div class="gyo">とまあ<div class="kuto">、</div>こんな具合なのですよ<div class="kuto">。</div></div>
	<div class="gyo">いかがでし<div class="komoji">ょ</div><div>⼁</div>か<div class="kuto">。</div></div>
</div>