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. マリーゴールドのゴム手袋(バスルーム)
  2. クリスマスエスプレッソロースト
  3. シーザーチキン 石窯カンパーニュ
  4. スキャルプ&ヘア リファイニング トリートメント オイル R
  5. ポーレックスの手動ミル
PAGE TOP