I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > CSS > pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

WEB上でも、小説や論文・記事など、日本語の長い文章はやはり縦書きで閲覧したいですよね。

WEB上で文章を縦書きで表示するには、竹取JSnehanというjavascriptがあります。
どちらも非常に優秀なjavascriptですが、まず第一に動作が重いというデメリットがありました。
動作をできるだけ軽くし、どの環境でも縦書きを表現するために、pixivの小説縦書き表示機能を参考にしました。

pixivの小説縦書き表示では、縦書き部分にjavascriptは利用せず、縦書きをCSS3で表現し、ページめくりやスクロールの部分をjQueryで補うという方法を採用しているようです。

参考URL

IE、firefox、Chrome、Operaで動作確認済みです。
※2015年11月現在、firefoxでもwriting-modeプロパティが利用できるようになりました。

サンプルはこちら

HTML例
<div id="honbun" class="mincho">
    <p>縦書きにしたい文章</p>
</div>
CSS例
#honbun{
    font-size: 1.2em;
    line-height: 1.8em;
    height: 24em;
    overflow: auto;
    margin: 30px 2%;
    width: 86%;
    padding: 30px 0;
    float: left;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    /writing-mode: tb-rl;
    _writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;            /* IE用      */
    -moz-writing-mode: vertical-rl;     /* firefox用 */
    -webkit-writing-mode: vertical-rl;  /* chrome用  */
    -o-writing-mode: vertical-rl;       /* opera用   */
}
.gothic{font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'Meiryo UI', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;}
.mincho{font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'HGS明朝E', 'HG明朝E', 'MS 明朝', 'MS Mincho', serif;}

#honbunはoverflow: auto;をつけておくと、本文が指定した横幅以上の長さになった時、スクロールバーが表示されます。
weiting-modeプロパティで縦書きを設定しています。
明朝体・ゴシック体で綺麗に見えるようにfont-familyのサンプルを記載していますので、必要な場合は利用してください。

参考URL

HTML5 & CSS3 リファレンス|CSS3: writing-mode プロパティ - 文字表記の方向

以上のようにして、まずはdiv#honbun要素内の文章を縦書き表示するようにできました。
しかし、これだけでは利便性が良いとはいえません。

文章を表示しているdiv要素内をマウスのホイールでスクロールできるようにしたり、ページめくりを実装するのに、jQueryを利用しています。
今後、それらの機能についても解説しようと思います。

関連記事

記事移動

関連記事

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

【CSS3】word-wrap:break-word;とword-break:break-allで文字を折り返して表示する方法

pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。

欲しいアイコンだけ選んでWEBフォント化してくれる便利サイト【Fontello】

WEBデザイナー必見!CSSジェネレータ集

CSS3でマウスオン(:hover)時に画像を拡大・縮小する方法

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed