pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。BLOGなにかの役には立つかもしれない。pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。縦書きWEB上でも、小説や論文・記事など、日本語の長い文章はやはり縦書きで閲覧したいですよね。WEB上で文章を縦書きで表示するには、竹取JSやnehanというjavascriptがあります。どちらも非常に優秀なjavascriptですが、まず第一に動作が重いというデメリットがありました。動作をできるだけ軽くし、どの環境でも縦書きを表現するために、pixivの小説縦書き表示機能を参考にしました。pixivの小説縦書き表示では、縦書き部分にjavascriptは利用せず、縦書きをCSS3で表現し、ページめくりやスクロールの部分をjQueryで補うという方法を採用しているようです。小説の縦書き表示IE、firefox、Chrome、Operaで動作確認済みです。※2015年11月現在、firefoxでもwriting-modeプロパティが利用できるようになりました。auto;をつけておくと、本文が指定した横幅以上の長さになった時、スクロールバーが表示されます。weiting-modeプロパティで縦書きを設定しています。明朝体・ゴシック体で綺麗に見えるようにfont-familyのサンプルを記載していますので、必要な場合は利用してください。以上のようにして、まずはdiv#honbun要素内の文章を縦書き表示するようにできました。これだけでは利便性が良いとはいえません。文章を表示しているdiv要素内をマウスのホイールでスクロールできるようにしたり、ページめくりを実装するのに、jQueryを利用しています。今後、それらの機能についても解説しようと思います。関連記事pixiv小説のように縦書き表示をした時の小説部分のスクロールを調整してみる。pixiv小説のように左右へのページめくりをjQueryでつくってみる。pixiv小説のように縦書き・横書きを切り替えるjQuerypixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。pixiv小説のように明朝体・ゴシック体を切り替えるjQuerypixiv小説のように小説を表示する方法まとめ▲ページ上部へTweetこの記事のURLコメント(0)トラックバック(0)記事移動html画面を読み込み完了するまでローディング画像を表示するjQuerypixiv小説のように縦書き表示をした時の小説部分のスクロールを調整してみる。【CSS3】word-wrap:break-word;とword-break:break-allで文字を折り返して表示する方法pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。Formコメントを入力してください。半角で入力してください。NETsince:2014.01.01東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。