2016この記事は、インターネット・アカデミー「縦書きレイアウト実践セミナー」(2015年10月20日)で使用されたテキストを編集したものになります。各ブラウザのCSSプロパティの実装は、掲載時の時点のものです。最新の実装状況とは異なる可能性があります。サイトだけではなく、電子書籍、デジタルサイネージなど様々です。ここでは縦書きレイアウトのポイントを解説します。ここに解説する記述方法は最新の書式であり、ブラウザによっては未対応の場合があります。縦書き、横書きの方向を指定するCSSプロパティです。値には、行や列を並べる方向を指定します。指定しない場合や、値を「horizontal-tb」と指定した場合は横書き表示となります。これに対して「vertical-rl」と指定すると縦書きで表示することができます。type="text/css"></head><body><h1>本日の内容</h1><p>縦書きレイアウトのWebコンテンツ実践セミナーです。vertical-rl;}1-2.text-orientationtext-orientationは、縦書きの中の文字を回転させます。縦書きに設定しただけでは、文章中のアルファベットは横向きのまま表示されてしまいます。使用することで、文字も縦向きにすることができます。縦書きの中の文字を縦に回転させる前述のCSSを以下のように書き換えると、縦書きの中で表示されているアルファベットの文字が縦に回転した状態で表示されます。利用すると、1文字分のスペースに複数の文字を表示できるようになります。これを利用すると、縦書きの中に横書きの文字を入れ、縦中横(たてちゅうよこ)と呼ばれるレイアウトを作成することができます。文字分のスペースに2桁の数字が縦に表示させることができます。type="text/css"></head><body><h1>本日の内容</h1><p>縦書きレイアウトのWebコンテンツ実践セミナーです。class="combine">19</span>日のお知らせです。要素は、ルビ注記を伴ってマークアップします。ルビテキストは、ベーステキストのどちらか一方の側に、ときには両側に現れることもあります。使って位置を調整することが可能です。