CSS3の基本 - レベルアップCSS

縦書き

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストの書字方向を指定するには、writing-modeプロパティを使います。ここでは、writing-modeプロパティの使い方について紹介します。
講師:
04:24

字幕

テキストの書字方向、縦書き横書きといった書く方向を指定するにはwriting-mode プロパティを使います。このレッスンでは writing-mode プロパティの使い方について紹介します。画面では左側に HTML と CSS の編集画面、右側にその結果を表示するウェブブラウザを表示しています。ここでは writing-mode プロパティを使ってこのウェブページの書字方向、縦書き横書きといった指定を縦書きに変更してみましょう。なお writing-mode プロパティはまだウェブブラウザでのサポートが少ない状態です。また全くサポートしていないウェブブラウザもありますので十分注意してください。ここではウェブページ全体 body 要素に対してwriting-mode プロパティを指定してみます。bosy 要素に対して writing-mode プロパティを使います。writing-mode プロパティでは3つの値が使えます。デフォルト値では horizontal-tbつまり横書きが指定されています。この値を縦書きに変更してみましょう。縦書きにするにはまず vertical と書いた後に縦書きの方向、つまり右から左に流れるのか、左から右に流れるのかという方向を指定します。 ここでは日本語の縦書きのように右から左に文字が流れるようにしたいため- を入れて rlつまり right から left に文字が流れるように指定します。現状 writing-mode の仕様としてはこの書式で正しいのですが現在プレビューに使っているGoogle Chrome ではまだ writing-mode プロパティに対応していません。そのためベンダープレフィックスを使って対応してみましょう。Google Chrome ベンダープレフィックスはwebkit ですので-webkit-writing-mode と書いてプロパティを使います。値は同じように vertrical-rl です。ウェブブラウザを見るとウェブページの内容がすべて縦書きになりました。そして書字方向は右から左になっています。反対側も試してみましょう。rl ではなく lr にすると左から右に流れていることが確認できます。Internet Explorer も writing-modeプロパティに対応しています。ただしバージョンによって対応の度合いが異なりますので注意してください。そして Internet Explorer も Google Chrome等と同じようにベンダープレフィックスを付けてこのプロパティを利用します。 Internet Explorer 用のベンダープレフィックスは ms ですのでms-writing-mode プロパティを使います。そしてここで注意が必要です。Internet Explorer のベンダープレフィックスを使って writing-mode プロパティを使う場合その値に指定できるキーワードはウェブ標準のものとは違う値を指定しなければいけません。この点に注意してください。ウェブ標準の vertical-rl にあたる値はInternet Explorer の対応する値としてはtb-rl という値になります。このようにまだ writing-mode プロパティに対するサポートはあまり手厚くなりませんが一方でこれまでにないおもしろい効果を得ることができます。このレッスンではテキストの書字方向、縦書き横書きの指定を行うwriting-mode プロパティの使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。