書字方向の指定縦書き指定 コンテンツの挿入引用符の設定 書字方向 他css ﾘﾌｧﾚﾝｽ へ
書字方向を指定する(CSS)
direction: ltr; unicode-bidi: embed;
　direction および unicode-bidi は、全ての要素に適用できます。
　direction は基本書字方向を、unicode-bidi は Unicode の双方向の書字方向を制御するプロパティです（アラビア語やヘブライ語などの場合は、右から左へ記述します）。
　div { direction: rtl; unicode-bidi: normal; }
　【directionプロパティ】
　ブロックレベル要素の基本書字方向を指定します。
プロパティ名値説　　明
direction ltr左から右へ（初期値）
rtl右から左へ
※ この設定内容をインライン要素に適用させる場合は、次の unicode-bidi プロパティで embed または bidi-override を指定します。
　【unicode-bidiプロパティ】
　Unicode の双方向の書字方向を制御します。（書字方向の組み込み、または上書きを指定できます）
プロパティ名値説　　明
unicode-bidi normal制御しない（初期値）
embeddirectionプロパティの指定内容を組み込む
bidi-overridedirectionプロパティの指定内容で上書きする
normal ： Unicode の双方向の基本書字方向がそのまま適用されます。
embed ： 指定した要素がインライン要素の場合は、direction プロパティの指定内容を新たに組み込みます。（文字の並び方は変わりません）
bidi-override ： 指定した要素がインライン要素、またはインライン要素のみを含むブロックレベル要素の場合は、direction プロパティの指定内容で上書きします。（文字の並び方も上書きします）
　★ 使用例とブラウザでの表示 (c5-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c5-1 { direction: rtl; }   #c5-1embed { unicode-bidi: embed; color: purple; }
#c5-1over { unicode-bidi: bidi-override; color: blue; }
使　用　例   ブラウザの表示
<div class=c5-1>テキストの「書字方向。」、右→左。</div>
テキストの「書字方向。」、右→左。
<div class=c5-1>テキストの<span id=c5-1embed>
「書字方向。」、</span>右→左。</div>
テキストの「書字方向。」、右→左。
<div class=c5-1 id=c5-1over>テキストの「書字方向。」、
右→左。</div>
テキストの「書字方向。」、右→左。
<div class=c5-1>テキストの<span id=c5-1over>
「書字方向。」、</span>右→左。</div>
テキストの「書字方向。」、右→左。
※ unicode-bidi: embed; を指定すると、句点の表示位置のみが変わります。
一方、unicode-bidi: bidi-override; は、指定した箇所全体の「書字方向」が変わります。
関連するページ
HTML タグページ 文字の表示方向：言語の指定、文字の表示方向
書字方向の指定縦書き指定 コンテンツの挿入引用符の設定 書字方向 他css ﾘﾌｧﾚﾝｽ へ
縦書きを指定する(CSS)
writing-mode: tb-rl;
　writing-mode は、全てのタグ（要素）に適用できます。
　writing-mode は書字方向（縦横）を指定するプロパティです。このプロパティの値に tb-rl を指定すると、文字（テキスト）を縦書きで表示できます。
　div { writing-mode: tb-rl; }
プロパティ名値説　　明
writing-mode lr-tb横書きにする
tb-rl縦書きにする
※ このプロパティは、Internet Exp.の独自拡張機能です。CSS 2 では定義されていません。
　★ 使用例とブラウザでの表示 (c5-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c5-2lr { writing-mode: lr-tb; border: 1px blue solid;
padding: 6px; margin: 0px; }
.c5-2rl { writing-mode: tb-rl; border: 1px purple solid;
padding: 6px; margin: 0px; }
使　用　例   ブラウザの表示
<div class=c5-2rl>なつくさや<br>
つわもの共の<br>ゆめのあと<br>
      松尾 芭蕉<br>
<p class=c5-2lr>やせがえる<br>
まけるな一茶<br>ここにあり<br>
      小林 一茶</p>
A rolling stone gathers no moss. </div>
なつくさや
つわもの共の
ゆめのあと
      松尾 芭蕉

やせがえる
まけるな一茶
ここにあり
      小林 一茶

A rolling stone
gathers no moss.
☆ このプロパティは、Internet Exp.の独自拡張機能です。
※ border: 1px blue(or purple) solid; は、縦書き（or 横書き）の設定範囲を枠で囲う働きをしています。 padding:6px; margin:0px; は、余白の設定です。
書字方向の指定縦書き指定 コンテンツの挿入引用符の設定 書字方向 他css ﾘﾌｧﾚﾝｽ へ
要素の前後に内容（コンテンツ）を挿入する(CSS)
content: ***;
　content は、:before疑似要素、:after疑似要素に適用できます。
　content は、要素の前後に内容（文字列や画像等）を挿入するプロパティです。このプロパティは、疑似要素の :before または :after と組み合わせて使用します。
　span:before { content: "【注意】"; }   span:after { content: url(notice.gif); }
　q:after { content: attr(cite); }
プロパティ名値説　　明
content "文字列" 指定した文字列を挿入する（文字列は引用符で囲む）
url(URI)指定した画像等を挿入する
attr(属性名) 指定した属性の値を表示する
　【:before と :after について】
:before … 要素の直前に文字列や画像等を挿入する指定
:after … 要素の直後に文字列や画像等を挿入する指定
Internet Exp.は表示モードが「標準モード」の場合のみ機能するようです（Internet Exp.7 以前は未対応）。
　★ 使用例とブラウザでの表示 (c5-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .c5-3ins:before { content: "注："; color:red; font-weight:bold; }
.c5-3ins:after { content: url(notice.gif); }
.c5-3att:after { content: "（" attr(title) "）"; color:blue; }
使　用　例   ブラウザの表示
◆前後に文字と画像を挿入
<span class=c5-3ins>文字と画像を挿入</span>		 文字と画像を挿入
◆属性の値を挿入
<span title="World Wide Web" class=c5-3att>
WWW</span>		 WWW
☆ Internet Exp.7 以前は、content、:before、:after に未対応です。
書字方向の指定縦書き指定 コンテンツの挿入引用符の設定 書字方向 他css ﾘﾌｧﾚﾝｽ へ
引用符を設定する(CSS)
content: ***; quotes: ***;
　content は、:before疑似要素、:after疑似要素に適用できます。quotes は、全てのタグ（要素）に適用できます。
　content は内容（文字列や画像等）の挿入を、quotes は引用符の種類を設定するプロパティです。この2つのプロパティを組み合わせて使用すると、要素の前後に引用符を挿入できます。
　q { quotes: "「" "」"; }  q:before { content: open-quote; }  q:after { content: close-quote; }
　【quotesプロパティ】（引用符の指定）
プロパティ名値説　　明
quotes "開始" "終了" 開始引用符と終了引用符をペアで指定
（文字列は引用符で囲む）
none引用符を表示しない
＊ 開始引用符と終了引用符は、半角スペースで区切って記述します。
　■引用符の入れ子
　引用の入れ子の深さに応じて、引用符のペアを複数設定できます。（引用符のペアを半角スペースで区切って記述していきます）
q { quotes: "「" "」" "『" "』"; } … 一段目を "「 」" で括り、二段目を "『 』" で括ります。
例） 教科書には「クラーク博士が『少年よ大志を抱け』と言った」と書いてある。
　■二重引用符（ " ）の指定
　二重引用符（ " ）の中で二重引用符自体を指定する場合はエンサイン（ \ ）と組み合わせて指定します。または、一重引用符（ ' ）で囲みます。
q { quotes: "\"" "\"" "'" "'"; } または q { quotes: '"' '"' "'" "'"; }
例） 教科書には"クラーク博士が'少年よ大志を抱け'と言った"と書いてある。
quotes は、Internet Exp.では表示モードが「標準モード」の場合のみ機能するようです（Internet Exp.7 以前は未対応）。
　【contentプロパティ】（引用符の挿入）
プロパティ名値説　　明
content open-quote開始引用符を挿入する 入れ子の深さに応じた
引用符が使用される
close-quote 終了引用符を挿入する
＊ このプロパティは、疑似要素の :before または :after と組み合わせて使用します。
　■要素の前後に引用符を挿入する
　次のように、:before で要素の直前に開始引用符を指定し、:after で要素の直後に終了引用符を指定します。
q:before { content: open-quote; } … 要素の直前に開始引用符を挿入
q:after { content: close-quote; } … 要素の直後に終了引用符を挿入
content :before :after は、Internet Exp.では表示モードが「標準モード」の場合のみ機能するようです（Internet Exp.7 以前は未対応）。
　★ 使用例とブラウザでの表示 (c5-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： q { quotes: "「" "」" "『" "』"; }
q:before { content: open-quote; }   q:after { content: close-quote; }
使　用　例   友達から、<q>山田君は<q>CSSを勉強中</q>と言っていた</q>とメールが来た。
ブラウザの表示 友達から、山田君はCSSを勉強中と言っていたとメールが来た。
☆ Internet Exp.7 以前は、quotes、content、:before、:after に未対応です。
関連するページ
HTML タグページ 引用文(短文)：引用文を示す(短文)
書字方向の指定縦書き指定 コンテンツの挿入引用符の設定 書字方向 他css ﾘﾌｧﾚﾝｽ へ