「文字を縦にしてスタイリッシュにしたい!」CSSで文字や画像を90度、45度回転する方法を注意点と共に解説します。rotate(○○deg)」を指定します。「○○」には角度の数字が入ります。rotate(45deg)」です。数値は0度を基準に指定した角度だけ右回りします。マイナスを指定すると左回りです。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。【注意点1】回転する要素はブロック要素transform:rotateはspanやaタグなどのインライン要素には効きません。(imgは効ききます)divで囲うか、display:blockを指定してブロック要素にしましょう。display:inline-blockでも効きます。【注意点2】上下のスペースを確保すること下記は3行あるうちの中央のテキストを回転させた例です。みごとに重なってしまっています。上のテキスト回転させるテキスト下のテキストtransform:rotateで回転させても、その分の空白が自動で広がるわけではありません。paddingやheight等で余白を確保する必要があります。rotate」で要素を回転させるとき、その要素の真ん中を軸に回転します。要素の幅が100%で文字が左端にあるときに回転させると、文字が思わぬ方向へ行きます。(シーソーのイメージ)widthで横幅を指定するか「transform-origin」で回転軸を変えるかしましょう。「右のスペースが無駄だから文字数に合わせて幅を狭くしたい!」htmlやCSSで枠の幅(width)を文字数や中身に合わせる方法を解説します。rotateを使うことで回転させ、斜めを表現することができます。rotateいったいどこが中心軸なのか?回転transform:rotateの中心軸とその変更方法について説明します。【90度回転】transform:rotate(90deg)下記は「テキスト」を回転させた例です。rotate(90deg)」の数値(角度)だけ変更しています。以上、CSSで文字や画像を90度、45度回転する方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。