漢字を含む日本語全角文字を斜め斜体にする コピペで使えるHTML+CSS

スポンサーリンク

ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語フォントが斜体を用意していないためです。そこで、全く別の方法によって、全角文字を斜体化します。

font-synthesisを用いる方法もある。

font-synthesisプロパティ CSS+HTML完全ガイド 使い方から効かない理由まで徹底解説
font-synthesis プロパティは、ブラウザがフォントのスタイルやウェイトを合成するかどうかを制御します。特定のウェイトやスタイルがフォントファミリーに存在しない場合、このプロパティを使用して、ブラウザが自動で合成するかどうかを指定できます。 font-synthesis の値とその効果の一覧 none: フォ...
スポンサーリンク

HTML全角文字の斜体化メーカー

文章を入力→コードを取得でHTMLが表示されます。コードを手っ取り早く取得したいときはご利用ください。

文章
HTML

全角文字の斜体化の仕組みと解説

transformを用いる

transformプロパティを用いて、文字を斜体化しました。全角日本語文字を斜体化できていますね。
style属性で記述
transformプロパティを用いて、<span style="transform: skewX(-20deg); color: #ff0000; display: inline-block;">文字を斜体化</span>しました。全角日本語文字を斜体化できていますね。

斜めにしたい文字について、span要素で囲み、display:inline-blockとすることで、インライン要素であるspan要素をブロックレベル要素として振る舞わせます。そうすることで、transformが適用できるようになります。<span style=”transform: skewX(-20deg);”>だけでは文字を斜体化することはできません。インライン要素にはtransformが効かないからです。skewX(20deg)とした場合は左側に傾きます。

ただし、以下のように斜体部分が長くなる場合は、ブロックレベル要素としての振る舞いが優先されてしまいます。ブロックレベル要素について改行という概念がそもそもないからです。

transformプロパティを用いて、文字を斜体化しますが、残念ながら、inline-blockの特性上、文字が長い場合はこのように改行されてしまいます。全角日本語文字を斜体化できていますが、レイアウトが崩れてしまいました。

短い単語などに適用すると良いでしょう。

font-styleで斜体化はできないのか

font-styleプロパティのitalic指定で文字の斜体化を試します。次に、oblique指定で文字の斜体化を試します。
style属性で記述
font-styleプロパティのitalic指定で<span style="font-style: italic; color: #ff0000;">文字の斜体化</span>を試します。次に、oblique指定で<span style="font-style: oblique; color: #ff0000;">文字の斜体化</span>を試します。

残念ながら、いずれの方法も文字を斜体化することはできませんでした(もしかしたら環境によっては斜体表示されているかもしれません)。よってtransformを用いて文字を斜体化することとなります。

まとめ

  • 日本語フォントの斜体化
    • 斜体化したい文字列についてspan要素で囲む
    • 対象について、transform:skewX(-20deg)等で角度を指定する
    • display:inline-blockと指定する。

関連するCSS

transform 要素を変形するコピペで使えるHTML+CSS
要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
Amazonロゴ
   
ad.価格範囲を指定して商品を探せます。セールで助かる便利ツール
HTML&CSS
スポンサーリンク
このページをメモ、または、シェア