ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語フォントが斜体を用意していないためです。そこで、全く別の方法によって、全角文字を斜体化します。
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セレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
programming-cafe.com