ログイン

問題32 CSSのみで×を表現してみよう

HTML_CSSの問題

HTML_CSS

CSSを使ってブラウザ上に「×」を出現させます。 斜線が引けるようにンなるとデザインの幅が少し広がると思いますので是非チャレンジしてみましょう。

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!!