縦書きWebページプロジェクト HOME

| 縦書きHOME | 縦書きJavaScript | 縦書きスタイルシート | 青空文庫 | tateEdit | ブログ |

Webページを縦書きに！

縦書きのホームページを作ってみたい…と思ったことはありませんか。
このページでは、ふたつの異なったアプローチで「縦書きWebページ」を実現する方法をご紹介します。

スタイルシートを用いる方法

拙作「縦書き用スタイルシート」を使って、縦書きレイアウトを実現する方法です。

• ご自分でhtmlをガシガシ書く人。
• あまり派手なテキスト装飾をしない人。

…などは、こちらのやり方で充分かもしれません。

詳しくはこちらからどうぞ。作成支援のための横書きテキスト→縦書きhtml変換スクリプトも用意しています。

JavaScriptとスタイルシートを用いる方法

そしてこちらが、縦書きレイアウト実現のための新アイテム。普通に（横書きで）作られたページ内の縦書きにしたいエリアを選べば、そのエリアを自動的に縦書きレイアウトに変換するJavaScriptを作ってみました。

詳しくはこちらをご覧ください。

スタイルシートのみで縦書きを実現するのと比べると、

• 作成が簡単。
• 過去に作成したページを縦書きにしたい場合に、作業が圧倒的に少なくて済む。

…という利点があります。
さらに、スタイルシートのみを使用する方法から進化した点として、

• より柔軟なスタイル指定が可能。
• 半角英数文字を横倒しにしてステキにレイアウト。
• 縦書き-横書きをクリックひとつで切り替え可能
  　ここをクリックすると、縦・横が交互に切り替わります

巷のブログサービスなどにも設置できるのではないかなぁ。そのうち試してみよう。

ということで、お役に立てますかどうか。