ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置に配置するやり方です。横方向に開くアコーディオンのメニューなんかにも使えそうですね。transformプロパティのrotateを活用して実装しています。
[ads_center]
transformのrotateを使う
以下のようにHTMLを記述します。
1 2 3 | <div style="position: relative;"> <div class="sample">サンプルテキスト</div></div> |
続いてCSSです。以下はwebkitでの実装。必要に応じて-moz-や-ms-も加えてあげて下さい。
1 2 3 4 5 6 7 | .sample { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left top 0; transform-origin: left top 0; float: left;} |
これだけです。簡単ですね。こんな感じで文字が縦に配置されます。
というわけで、CSSでテキストを縦にするやり方でした。
参考サイト
