紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個

印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。
どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。

DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。

今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。

※IE以外のブラウザは、2014年7月4日現在の最新版にて確認を行っています。

段組み
縦組み（縦書き）
行末揃え（両端揃え）
先頭文字スタイル（ドロップキャップ）
段落先頭1字下げ
2行目から1字下げ（ぶら下げインデント）
行頭禁則文字
ふりがな（ルビ）
圏点（傍点、脇点）
大文字と小文字の変更
スモールキャップス（スモールキャピタル）
長体、平体（水平比率、垂直比率）
HTML＋CSSで作る文字レイアウトまとめ

段組み

CSS3の「multi-column」を使用すると、float等による段組みとは異なり、Illustratorのテキスト流し込みのような自然な段組みレイアウトが可能です。

multi-columnによる段組みの表示例：

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

#sample-text{
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;
}

対応ブラウザ：
IE10〜、Firefox、Chorme、Safari、Opera

縦組み（縦書き）

IEとWebkit系のブラウザでは、CSS3の「writing-mode」の指定により文章の縦書き表示が可能です。

writing-modeによる縦組みの表示例：

今は昔、竹取の翁といふ者ありけり。

#sample-text{
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
}

対応ブラウザ：
IE5.5〜、Chorme、Safari

行末揃え（両端揃え）

文章を両端で揃えるには、CSS3の「text-justify」を使用します。Windows版のChormeの場合、半角・全角文字が混在する文章だと行末が揃わないようです。

text-justfyによる両端揃えの表示例：

うとうととして目がさめると女はいつのまにか、隣のじいさんと話を始めている。このじいさんはたしかに前の前の駅から乗ったいなか者である。発車まぎわに頓狂な声を出して駆け込んで来て、いきなり肌をぬいだと思ったら背中にお灸のあとがいっぱいあったので、三四郎の記憶に残っている。じいさんが汗をふいて、肌を入れて、女の隣に腰をかけたまでよく注意して見ていたくらいである。女とは京都からの相乗りである。乗った時から三四郎の目についた。第一色が黒い。三四郎は九州から山陽線に移って、だんだん京大阪へ近づいて来るうちに、女の色が次第に白くなるのでいつのまにか故郷を遠のくような哀れを感じていた。それでこの女が車室にはいって来た時は、なんとなく異性の味方を得た心持ちがした。この女の色はじっさい九州色であった。

#sample-text{
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
}

対応ブラウザ：
IE5〜、Firefox、Chorme、Safari、Opera

先頭文字スタイル（ドロップキャップ）

段落の先頭の文字だけ装飾したい！というときはCSSの疑似要素である「:first-letter」を使用します。下記の表示例では、先頭の1文字のみサイズとフォントを変更し「float」でテキストを回り込ませています。

:first-letterによる先頭文字スタイルの表示例：

ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。やがて御釈迦様はその池のふちに御佇みになって、水の面を蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河や針の山の景色が、丁度覗き眼鏡を見るように、はっきりと見えるのでございます。

#sample-text:first-letter{
	font-size: 54px;
	font-family: 'Hiragino Mincho Pro','HGS明朝E','ＭＳ Ｐ明朝',serif;
	float: left;
}

対応ブラウザ：
IE5.5〜、Firefox、Chorme、Safari、Opera

段落先頭1字下げ

Webデザインでも、挨拶文など堅い文章の場合に段落の先頭の字下げをお願いされることがあります。CSSの「text-indent」にてインデント幅を1文字分に指定することで字下げを行います。

text-indentによる段落先頭1字下げの表示例：

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。

#sample-text{
	text-indent:1em;
}

対応ブラウザ：
IE4〜、Firefox、Chorme、Safari、Opera

2行目から1字下げ（ぶら下げインデント）

Wordの「ぶら下げインデント」のように、注意書きなどで段落の2行目から1文字下げたい場合も「tex-indent」を使用します。段落全体に1文字分の余白を設定し、CSSの「text-indent」にてマイナス1文字分インデントを行うことで表示が可能です。

text-indentによるぶら下げインデントの表示例：

※この文章は注意書きのサンプルテキストですこの文章は注意書きのサンプルテキストですこの文章は注意書きのサンプルテキストです。

#sample-text{
	padding-left: 1em;
	text-indent: -1em;
}

対応ブラウザ：
IE4〜、Firefox、Chorme、Safari、Opera

行頭禁則文字

行頭文字の禁則処理については、ブラウザ側がデフォルトで句点や読点が行頭に来ないように処理してくれていることが多いのですが、バージョンによっては日本語の処理がうまくいかないときもあります。そんな場合は、CSSにより強制的に禁則処理を有効にすることが可能です。

word-breakによる禁則処理の表示例：

｢一体あなたの所の御主人は何ですか」「あら御主人だって、妙なのね。御師匠さんだわ。二絃琴の御師匠さんよ」「それは吾輩も知っていますがね。その御身分は何なんです。いずれ昔は立派な方なんでしょうな」「ええ」君を待つ間の姫小松……………障子の内で御師匠さんが二絃琴を弾出す。「宜い声でしょう」と三毛子は自慢する。

#sample-text{
	word-break: normal;
	word-wrap: break-word;
}

対応ブラウザ：
IE5.5〜、Firefox、Chorme、Safari、Opera

ふりがな（ルビ）

文章にふりがな（ルビ）をふる場合は、HTML5から採用された「ruby」タグが便利です。また、「rp」タグを使用することにより、非対応ブラウザでも見た目を整えることができます。

rubyタグによるふりがな（ルビ）の表示例：

昔、男初冠（うひかうぶり）して、平城（なら）の京春日の里に、しるよしして、狩にいにけり。

昔、<ruby>男初冠<rp>（</rp><rt>うひかうぶり</rt><rp>）</rp></ruby>して、<ruby>平城<rp>（</rp><rt>なら</rt><rp>）</rp></ruby>の京春日の里に、しるよしして、狩にいにけり。

対応ブラウザ：
IE5〜、Chorme、Safari

圏点（傍点、脇点）

まだ対応ブラウザは少ないのですが、文章の強調表現として使われる圏点も、CSS3の「text-emplasis」で表示できるようになりました。

text-emplasisによる圏点の表示例：

みずのえだのかのとだの、八朔だの友引だの、爪を切る日だの普請をする日だのと頗る煩いものであった。

#sample-text{
	text-emphasis-style: filled sesame;
	-webkit-text-emphasis-style: filled sesame;
	text-emphasis-position: over;
}

対応ブラウザ：
Chorme、Safari

大文字と小文字の変更

CSSの「text-transform」を使用すると、アルファベットの大文字・小文字を自動で変換して表示することができます。

text-transformによる表示例：

1. tRanCeForm　2. tRanCeForm　3. tRanCeForm　4. tRanCeForm

#sample-text-1{
	text-transform: none; /* 記述された通りに表示 */
}
#sample-text-2{
	text-transform: capitalize; /* 先頭文字を大文字に変更 */
}
#sample-text-3{
	text-transform: uppercase; /* 全て大文字に変更 */
}
#sample-text-4{
	text-transform: lowercase; /* 全て小文字に変更 */
}

対応ブラウザ：
IE4〜、Firefox、Chorme、Safari、Opera

スモールキャップス（スモールキャピタル）

小文字と同じ大きさで作られた大文字を使って行う組み方を「スモールキャップス」または「スモールキャピタル」といいます。CSSの「font-variant」を使用し、スモールキャップスを適用したい箇所を小文字で記述することで表示が可能です。

font-variantによるスモールキャップス表示例：

Font-Variant

#sample-text{
	font-variant: small-caps;
}

対応ブラウザ：
IE4〜、Firefox、Chorme、Safari、Opera

長体、平体（水平比率、垂直比率）

CSS3の「transform」を利用して変形させることで、長体・平体のように文字の幅や高さを変えることができます。

transformによる長体、平体の表示例：

1. 春はあけぼの　2. 春はあけぼの

#sample-text-1{
	transform: scaleX(0.7);
	-moz-transform: scaleX(0.7);
	-webkit-transform: scaleX(0.7);
	-o-transform: scaleX(0.7);
	transform-origin: left top;
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-o-transform-origin: left top;
}
#sample-text-2{
	transform: scaleY(0.7);
	-moz-transform: scaleY(0.7);
	-webkit-transform: scaleY(0.7);
	-o-transform: scaleY(0.7);
	transform-origin: left top;
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-o-transform-origin: left top;
}