初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML CSS 文字を縦書きにする

HTMLは英語圏で作成されたものになります。
文章は左上を起点に左から右に書かれてきます。

日本の文章は右上から上から下に向かって書かれています。

HTMLで日本語を表示する方法を記述します。

注意点はFirefoxでは縦書きが表示されないところです。
逆にいつもネックになるIEでが問題なく表示することが可能です。f:id:bellsmarket:20150428010308p:plain

<body>
<p>村雨の<ruby><rp></rp><rt>きり</rt><rp></rp></ruby>もまだ干ぬ<br>
<ruby><rp></rp><rt>まき</rt><rp></rp></ruby>の葉に<br>
霧立ちのぼる秋の夕暮れ<br>
<span>藤原定長</span></p>
</body>
body {
	background:url(img/autumn.jpg) no-repeat left top;
	width:100%;
}
p {
	padding:20px;
	width:350px;
	margin:150px auto;
	line-height:3;
	letter-spacing:0.3em;
	font-size:30px;
	color:#FFF;
	border-radius:3px;
	background:rgba(0,0,0,0.3);
	-webkit-writing-mode:vertical-rl;/*縦書きにする(右から左)*/
	-ms-writing-mode:tb-rl;/*IE用の記述*/
	font-family:日本語っぽい感じにしたい時にはこの記述で決まり
	"ヒラギノ明朝 ProN",
	"HG明朝E",
	"MS P明朝",
	"MS 明朝",
	serif;
}
span {
	padding-top:273px;
}
topへ戻る