ネットと副業

副業が本業の収入を大きく超えたので会社やめました

CSS Illustrator

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

投稿日:

f:id:nekonkeo:20150911085657j:plain

活版印刷からCSSにまで。

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

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

 

テキストの箱打ちをHTMLで実現

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

f:id:nekonkeo:20150911082144j:plain

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

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

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

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

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

f:id:nekonkeo:20150911083049j:plain

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

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

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

f:id:nekonkeo:20150911083251j:plain
できましたヽ(´3`)ノワーイ

文章の箱打ちとは

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

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

d.hatena.ne.jp

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

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

f:id:nekonkeo:20150911083918j:plain

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

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

-CSS, Illustrator

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

《はてなブログ》記事のタイトルのマウスオーバー時の下線をなくしたいのでCSS改修します。

前々から気がついてはいたものの、まぁいいかと放置してたのです。 このはてなブログ、記事のタイトルがリンク仕様になっててマウスオーバーすると下線でるのがあんま好かんです(;´Д`) 記事のタイトルがそこ …

no image

《はてなブログ》超簡単 記事の見出しを飾り付けてみるCSS

記事の途中で出てくる見出しがちょっと寂しいので、飾ってみたいと思います。自分でデザイン考えてCSSをいじくりたおすのも楽しい作業ですが、今回は簡単にできそうな方法で進めてみます。 サンプルを探します。 …

no image

AdobeCC 3アプリ、CC2015にアップグレードしましたが起動画面がいやだ…

アップグレードしますた。 とりあえず、常時使う3アプリ。Illustrator、Photoshop、Dreamweaverを2015CCにアップグレードしました。 使って1週間くらいですが使用感 私の …

no image

Adobe CC2014 アップデートしたらIllustratorの起動画面がきもい

  Macを起動するたびに、画面右上のAdobeのCreativeCloudがアップデートしろと、メッセージを出してくる。 ので、いい加減うっとうしいのでアップデートしました。 マイナーアップデート? …

no image

CreativeCloud 2アカウント目を追加するときに悩んだグループ版

社内で私一人が、紙媒体のデザインや・WEB媒体の外注とのやりとりに関わり、月数回の会議にも参加し、などなどやってると、「一人じゃまわせませんわい!」 ということで、おかげさまでアシスタント的な人に入社 …