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

印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて

[mas-higa]

紙とはメディアが違うんだから、そのメディアに合ったデザインをお願いします。

[yakinikudaisuki]

良記事｜紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 @pressman_jpさんから

[wind_sky86]

iPad向けと割り切れば縦書き専用サイトを構築できそうな感じ。

[mnyo]

2行目インデント知らなかった

[ta192]

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

[hr07jp]

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

[inulab]

これを使う必要がある記事を書く自信がない

[yusk_y]

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

[dal]

こういうのおもしろい

[kyotaweb]

“圏点”は、初めて知った！

[sisicom]

レイアウト作成の時に参考にしよう

[unitro]

長体もできるのか、、、なるべく使いたくはないが

[kkeisuke]

CSS3 プロパティ テキストレイアウト

[z1a2nh]

文字レイアウト

[y2_naranja]

むむむ。どこまで使うかは判断次第か。紙っぽく出して欲しいというのは結構あるのだ…。

[AfroRay]

文字だいしゅき！

[poppun1940]

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

[tihata]

ルビ使ってみたいなー機会があったらやってみよう。

[sisya]

思ったよりfirefoxが対応してないことに驚き

[k_ume75]

「transform」を利用して長体・平体も可能

[i_mairy]

テキストを1文字下げる方法など

[aceraceae]

メモ

[hidesuke]

ここまでできるんかー

[ikea_dless]

これはいい