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

10の新しいフリーのフォント前のページ

WordPressでアイキャッチ画像にキャプションを表示させる設定方法次のページ

関連記事

  1. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  2. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  3. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  4. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  5. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

  6. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP