cman.jp > パーツ作成メニュー > 文字のデザイン > 傾斜文字・斜体文字

傾斜文字・斜体文字のCSS作成

CSSの「font-style: italic;」を利用すると、斜体・イタリック体にの文字となります。ただし、文字の角度や左斜体などを指定することが出来ません。
「transform」を使用すると、色々な角度の文字を作成することが出来ますので色々とお試しください。

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

文字を傾けて見よう

角度

方角

横方向縦方向

傾斜文字

使用したhtml

<span class="skew">傾斜文字</span>

生成したCSS

.skew {
  display     : inline-block;       /* 奥行表示のためのブロック化 */
  font-size   : 48pt;               /* 文字サイズ */
  transform   : skewX(35deg);       /* 傾き角度 */
}

「transform」の使い方は以下を参照ください。
transform 「変形」

ページTOP

色々な傾斜文字・斜体文字

横と縦の両方の傾きを指定

横方向、縦方向の両方の角度を指定することもできます。

縦横傾き

<style type="text/css">
.sample1{
  display   : inline-block;
  font-size : 32pt;
  transform : skew(35deg, 15deg);  /* 横角度, 縦角度 */
}
</style>

ページTOP

画像やイラストでも同じ指定で傾斜文字・斜体文字が表示できます

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

<span class="sample21"><img src="neko.png" alt="原寸"></span>
<span class="sample22"><img src="neko.png" alt="横1.5倍"></span>
<span class="sample23"><img src="neko.png" alt="縦1.5倍"></span>

<style type="text/css">
.sample21{
  display   : inline-block;
  margin    : 15px;
}
.sample22{
  display   : inline-block;
  margin    : 15px;
  transform : skewX(45deg);
}
.sample23{
  display   : inline-block;
  margin    : 15px;
  transform : skewY(45deg);
}
</style>

ページTOP

アニメーション

CSSの「animation」を使用することで、傾斜文字を回転することもできます。

傾斜文字

<style type="text/css">
.sample3{
  display  : inline-block;
  font-size: 24pt;
  animation: sample3Anime 4s alternate infinite; /* アニメーション指定 */
}
@keyframes sample3Anime{
   0% { transform: skew(-88deg); color:blue}
  40% { transform: skew(0deg);   color:#000}
  80% { transform: skew(0deg);   color:#000}
 100% { transform: skew(88deg);  color:red }
}
</style>

文字の回転は以下を参照ください。
文字回転のCSS生成

ページTOP

注意事項

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

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

ページTOP

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