CSSでテキストを縦にするやり方

CSS

CSSでテキストを縦の位置にするやり方

ちょっと便利そうだったのでメモがてらご紹介。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でテキストを縦にする

というわけで、CSSでテキストを縦にするやり方でした。

CSS Vertical Text

関連記事

  1. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  2. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  3. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  4. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  5. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  6. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる

アーカイブ

PAGE TOP