スタッフブログ

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

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

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

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

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

段組み

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

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

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

#sample-text{
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;
}
対応ブラウザ:
IE10〜FirefoxChormeSafariOpera

縦組み(縦書き)

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

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

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

#sample-text{
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
}
対応ブラウザ:
IE5.5〜ChormeSafari

行末揃え(両端揃え)

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

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

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

#sample-text{
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
}
対応ブラウザ:
IE5〜FirefoxChormeSafariOpera

先頭文字スタイル(ドロップキャップ)

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

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

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

#sample-text:first-letter{
	font-size: 54px;
	font-family: 'Hiragino Mincho Pro','HGS明朝E','MS P明朝',serif;
	float: left;
}
対応ブラウザ:
IE5.5〜FirefoxChormeSafariOpera

段落先頭1字下げ

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

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

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

#sample-text{
	text-indent:1em;
}
対応ブラウザ:
IE4〜FirefoxChormeSafariOpera

2行目から1字下げ(ぶら下げインデント)

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

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

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

#sample-text{
	padding-left: 1em;
	text-indent: -1em;
}
対応ブラウザ:
IE4〜FirefoxChormeSafariOpera

行頭禁則文字

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

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

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

#sample-text{
	word-break: normal;
	word-wrap: break-word;
}
対応ブラウザ:
IE5.5〜FirefoxChormeSafariOpera

ふりがな(ルビ)

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

rubyタグによるふりがな(ルビ)の表示例:

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

昔、<ruby>男初冠<rp>(</rp><rt>うひかうぶり</rt><rp>)</rp></ruby>して、<ruby>平城<rp>(</rp><rt>なら</rt><rp>)</rp></ruby>の京春日の里に、しるよしして、狩にいにけり。
対応ブラウザ:
IE5〜ChormeSafari

圏点(傍点、脇点)

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

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

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

#sample-text{
	text-emphasis-style: filled sesame;
	-webkit-text-emphasis-style: filled sesame;
	text-emphasis-position: over;
}
対応ブラウザ:
ChormeSafari

大文字と小文字の変更

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〜FirefoxChormeSafariOpera

スモールキャップス(スモールキャピタル)

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

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

Font-Variant

#sample-text{
	font-variant: small-caps;
}
対応ブラウザ:
IE4〜FirefoxChormeSafariOpera

長体、平体(水平比率、垂直比率)

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;
}
対応ブラウザ:
IE9〜FirefoxChormeSafariOpera

HTML+CSSで作る文字レイアウトまとめ

こうして改めて見ると、文字のCSSに関しては、意外にもIEが先行採用していたり独自拡張で昔から対応しているものが多くて驚きます。

本当は「縦中横」や「約物半角」などのCSSもご紹介したかったのですが、まだ対応ブラウザが1つも無かったり条件によって大きく表示が崩れるため、今回は見送りました。

プレスマンは元印刷会社でもありますので、紙のデザインの良さとWebデザインの良さ、双方を活かしたサイト作りを心がけていきたいと思います。

※2024年8月15日追記:
「約物半角」はモダンブラウザで実装されたため、紹介記事を追加しました。

Webデザインでも約物半角&文字詰めしたい!CSSのみで実装する方法とおすすめWebフォント紙のデザインと異なり、Webサイトのテキストでは約物半角などの細かい文字調整がされておらず、句読点やカギカッコなどの記号が混在していると...

AIの導入に躊躇されている企業様は、まずは1つのツールだけでも利用してみてはいかがでしょうか?EC×ChatGPTをはじめとしたAI企画から導入・運用まで、経験豊富な弊社プロ人材が手厚くサポートいたします。

AI企画&導入事例

AIを活用したい企業様はこちら

ABOUT ME
日野 夕奈
Webマーケティング部のスタッフです。主にデザインとコーディングを担当しています。見やすさ&わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。
関連記事