テキストの書字方向に合わせて罫線や余白を挿入する--FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-07-11 10:35:02
  • このエントリーをはてなブックマークに追加

テキストの書字方向に合わせてリストの余白を調節する

 罫線や余白をテキストの書字方向に合わせて挿入する設定にしておけば、テキストの書字方向が変わってもスタイルシートの設定を書き換える必要がなくなる。そのため、border-startといったプロパティは、リストのデザインの設定などに利用することが想定されている。

 リストではテキストの文頭の側に標準で余白が挿入されるため、デザインする際に余白サイズを調節することが多い。たとえば、テキストの書字方向が上のリストのように「左から右」の場合は左側に、下のリストのように「右から左」の場合は右側に余白が挿入される。

Firefoxでの表示。Safariでも同じように表示される。 Firefoxでの表示。Safariでも同じように表示される。
  • こんにちは
  • おはよう
  • おやすみ
  • こんにちは
  • おはよう
  • おやすみ
ブラウザで表示を確認する

 この余白サイズを調節しようとした場合、これまではテキストの書字方向ごとに、リストの左側の余白サイズはmargin-leftで、右側の余白サイズはmargin-rightで調節する必要があった。たとえば、余白サイズを60ピクセルに設定する場合は次のように指定する。

Firefoxでの表示。Safariでも同じように表示される。 Firefoxでの表示。Safariでも同じように表示される。
ul#ltr{
margin-left: 60px;
}

ul#rtl{
margin-right: 60px;
}
ブラウザで表示を確認する

 しかし、margin-startプロパティを利用すれば、margin-leftとmargin-rightを使い分けなくても、リストの文頭の側の余白サイズを調節することが可能だ。

Firefoxでの表示。Safariでも同じように表示される。 Firefoxでの表示。Safariでも同じように表示される。
ul{
-moz-margin-start: 60px;
-webkit-margin-start: 60px;
}
ブラウザで表示を確認する

標準規格でのサポート

 border-startといったプロパティはXSL 1.1の勧告で定義されているもので、現時点ではCSS 3の規格には取り入れられていない。XSLは「Extensible Stylesheet Language」の略で、XMLで記述されたドキュメントの見た目のデザインをコントロールするための言語だ。

 なお、XML 1.1ではmargin-startとmargin-endは定義されておらず、同様の設定はspace-startとspace-endというプロパティで行うことになっている。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]