ログイン
問題32

rotateを使ったCSSデザイン

CSSのあるプロパティを使うと要素の角度を指定することができます。 この問題ではその仕組みを使ってバツ印を作成していきます。ハンバーガーメニューなどでもよく見られるデザインなので是非挑戦してみてください。

アイコン画像

問題32:rotateを使ったCSSデザイン

ハンバーガーメニューなどにある「×」をCSSで表現してみましょう!
見本画像を参考にしてCSSに記述し実装してください。

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <span></span>
¥HTML¥
            
              body {
    padding: 64px;
}
span::before,
span::after {
  display: block;
  content: ";
  width: 50px;
  height: 1px;
  background: #000;
}
span::before {
	transform: rotate(-45deg);
}
span::after {
	transform: rotate(45deg);
}
¥CSS¥
            

コメントのアイコン解説

beforeとafterを上手く使って実装します。

transform: rotate(-45deg);とtransform: rotate(45deg);
を指定する事でクロスになります。
ログインして解答を見る

コメントのアイコン補足

CSSで値に角度を指定する場合は、degという単位を使用します。
degとは、Degree(角度)を略したものです。
数値には、マイナスの値を入れることもできます。

プラスの値の場合は時計回りとなり、マイナスの値だと反時計回りに回転します。
CSSにはこのように水平な1本線を回転させて斜線にしたり、正方形の箱をX軸・Y軸・Z軸に回転させることもできます。
さらに回転させる動きにtransitionプロパティを使えば、ゆっくり回転させることができます。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる