左側にスクロールバー

通常右にあるスクロールバーを左側に持ってくる、なんの役に立つのか不明のテクニックです。 たまにはこんなのもいいでしょ？

テクニック使用前

テクニック使用後

HTMLはこんな感じになります。

<div class="wrap">
<div class="sample2">
<p>
なんとスクロールバーが左側に！
だから何だよって感じですね。
まぁ良いじゃないですか。新鮮味があって。
スタイルシートでこんなこともできます！って紹介するのがうちのサイトですから。
</p>
</div>
</div>

スタイルシートはこんな感じになります。

div.wrap{
    width:20em;
    direction:ltr;
}
div.sample2{
    height:6em;
    border:solid 1px #663300;
    background-color:#ffffff;
    overflow:auto;
    direction:rtl;
}
.sample2 p{
    direction:ltr;
}

今回のポイントは、何と言ってもdirection:rtl;です。
他の解説サイトでは、まずお目にかからないこのプロパティ。 役割はテキストの方向を指定することです。

アラビア語とかは右から左に書いていきますよね。そんなときに使うプロパティです。 これを使うと、文字が右寄せになったり、今回のようにスクロールバーが左に来たりします。

そのままだと文章が読めなくなってしまうので、pにdirection:ltr;を指定して左から右に書くようにしています。

wrapボックスはfirefox用に作ってあります。これが無いとfirefoxでは右寄せで表示されてしまいます。

残念ながらオペラでは効果がありません。

---

使いこなすための＋α

う〜む。今回のは使い道から思い浮かばないしなぁ。

ナイスな使い方あったら教えてください。お待ちしております。

---