文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 横長・縦長の文字を作成

文字の横幅・高さを変更するCSS作成

CSSの「transform」を利用すると、文字を横に広げたり縮めたり、縦に広げたり縮めたりすることは簡単にできます。
「横に2倍の文字（2倍角）」や「縦長の文字」など色々とお試しください。

当ページでは、簡単な操作でCSSを自動で作成できます。

文字を横長・縦長させて見よう

文字の横幅
文字の高さ
文字の横縦
使用したhtml
<span class="scale">文字の横縦</span>
生成したCSS
.scale {
  display     : inline-block;    /* 変形するためのブロック化 */
  font-size   : 24pt;            /* 文字サイズ */
  line-height : 1em;             /* 行の高さ */
  transform   : scale(1.7, 0.7);   /* 変形 横,縦 */
}
「transform」の使い方は以下を参照ください。
transform 「変形」
ページTOP
広告
広告

色々な拡大・縮小

画像やイラストでも同じ指定で拡大・縮小します

画像やイラスト、DIVなどのブロック要素などでも違いはありません。

原寸 横1.5倍 縦1.5倍 
<span class="sample11"><img src="neko.png" alt="原寸"></span>
<span class="sample12"><img src="neko.png" alt="横1.5倍"></span>
<span class="sample13"><img src="neko.png" alt="縦1.5倍"></span>

<style type="text/css">
.sample11{
  display   : inline-block;
  margin    : 15px;
}
.sample12{
  display   : inline-block;
  margin    : 15px;
  transform : scaleX(1.5);
}
.sample13{
  display   : inline-block;
  margin    : 15px;
  transform : scaleY(1.5);
}
</style>
ページTOP

アニメーション

CSSの「animation」を使用することで、文字の縮小・拡大を動かすこともできます。

文字回転＋大小 
<style type="text/css">
.sample2{
  display  : inline-block;
  animation: sample2Anime 4s alternate infinite; /* アニメーション指定 */
}
@keyframes sample2Anime{
   0% { transform: scale(1, 1);   }    /* 大きさ */
 100% { transform: scale(2, 0.5); }    /* 大きさ */
}
</style>
ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの？
生成コードに利用制限はある？
生成コードに保証はある？
jQueryで生成できない？

広告
ページTOP

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧
sample
CSSで
透かし文字

CSS背景文字
CSS
blink

CSSブリンク
CSSで改行位置を指定する。

CSS改行位置
先頭文字を大きくするCSS

先頭文字
フォントサイズ
10 12 14

文字サイズ
文字の
影付け

影付け
文書先頭のインデントをCSSで指定

インデント
言語切り替え

言語切換え
CSSで
縁取り

CSS文字縁取り
SVGで縁取り

SVG文字縁取り
文字重ね

画像文字重ね
NEW,UPのマーク付け

NEW,UP
文字を
遠近表示

遠近・奥行
1文字回転縦軸回転

文字の回転
縦長横長

縦長・横長
文字スクロール

スクロール
マウスで文字選択の色をCSSで変更

マウス選択色
左斜体文字右斜体文字

斜体文字
文字をマーカーなどで強調する

文字の強調

縦書き

CSSで文書を縦書きにする

縦書き
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン