css だけで文字を回転させる

2023年6月13日

ホームページ屋にとって、スタイルシートを極めることはとても重要です。
なぜならば、レスポンシブに対応するためにはHTMLコーディングを簡略化する必要があるためです。

HTMLコーディングを簡略化することで、PC表示にも、スマホ表示にも変化させやすくなります。
HTMLコーディングを簡略化する分、スタイルシートが複雑になります。

なのでスタイルシートを極めることが重要なのです。

今回はスタイルシートの話ですが、どうすれば良いか試行錯誤した事案がありましたので忘備録として記録いたします。

今回やりたいこと

テキストを縦書きで表現する必要があり、その際にダブルクォーテーションで文字をかこっていました。横書きの時は気になりませんでしたが、縦書きだとダブルクォーテーションの向きが気になりました。

気にしなければそれでよいのかもしれません。
正確には、このままでよいのかもしれません。

ですが、絵的にダブルクオーテーションの向きが気になったので、CSSで文字回転できないかググって調べて、対処してみたいと思いました。

文字回転をさせるCSSの記述方法

文字回転は1行のCSSを付け足すだけで実現できます。
それがこちらです。

意味としては、180度回転させるという意味です。
このtransformは、回転以外に左右反転、上下反転など様々な指定ができます。
詳しくはこちらをご参照ください。

全体のソース

「display: inline-block」を付け足しているのは、spanタグが「inline」タグのため、回転指定させても有効にならないためです。

inline-blockにすることで、回転できるようになります。

これで表示すると以下のようになりました。

もじは回転しましtが、左右の位置が逆です。
これを調整できれば、見栄え的に美しくなりそうです。

でもどうすればよいのでしょうか?

文字の左右位置もtransformで調整できます

左右位置の調整もtransformで指定できます。
次のように記述します。

translateX()はX軸（左右位置）を指定できます。
translateY()はY軸（上下位置）をしていできます。

この例だと右に30ピクセル上に4ピクセル移動し、180度回転させるという意味になります。

これを踏まえてコーディングを直したものがこちらです。

見た目はこのようになりました。

意図した位置にダブルクォーテーションを配置できました。

ちなみにCSSで縦書きにするやり方はこちら

CSSだけで縦書きを実現する

ホームページを縦書きにすること自体あまりありませんが、写真位置を移動させたり、レイアウトを調整したりなどはよくあります。

いままでabsoluteで調整していたものの、transformでもできそうです。

また本記事がお役に立てば幸いです。