《CSS》HTMLでテキストを箱打ちしたい→印刷の文字組みまで遡る。

投稿日：2015年9月11日

活版印刷からCSSにまで。

Webデザインをイラストレーターで感覚的に作業をつづけていて、「さてHTMLにするか」ってコーディングに入るときに、「おや？デザインしたはいいけど、これってCSSでどうやってやるんだっけ？？」てことがあります。

イラストレーターで箱打ちで入れた文章を、HTMLコーディングするときにどうするのか、ちょいと迷いました(;´д｀)

イラストレーター上で、箱打ちでテキストボックスに流し込んだ文章がこちら

箱打ちというのは、四角に区切られた中に文章をぴったり入れることをいいます。

HTML上でCSSになにも指示を入れずにテキストを入れてみます。

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>テキストの箱打ち</title>
</head>

<body>
<p>あのイーハトーヴォのすきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。</p>
</body>
</html>

こんな感じでコードをいれて、ブラウザで見てみると…

だららら〜..んと、よこに流れてっちゃいます。

これを箱打ちにしたいのですが、至極単純なことです。
CSSで横幅を指定してあげればいいだけでした。
<style>
p {
width:230px;
text-align:justify;
}
</style>

ブラウザでみるとこんな感じ。

できましたヽ(´３`)ﾉﾜｰｲ

わたくしが大人になった時には、すでにDTPが一般化しており、箱打ちしたいときはテキストボックスを作成してその中に文字を流し込めば、はいOK、てなもんでしたが、昔はちがったようです。

この方、Modesty M. Poloさんがとても興味深い記事を書かれております。

活版印刷→写植→DTPと技術が進歩していく中で、必要とされなくなる職人芸。ちょっと寂しい気もします。

ちなみにこの文字のH（は）という単位で行う文字組み。最新のイラストレーターCC2015でも設定で使えます。名残りですね。

活版印刷には現代の印刷には出せない、独特の風合いがあってとても好きです。いつか活版印刷をやりたいなぁとも思ってます。

ここでちょいと衝撃の事実が！Modesty M. Poloさんも、本文最後で同じことをおっしゃっておりますが、「箱打ち」ではなく正しくは「箱組み」だそうです。
…ずっと箱打ちで教わってきたはずなんだけどなぁ。。。