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