CSSでバツの描き方

はじめに

以前、解説サイトからほとんどそのままパクってきた「CSSでバツを描く」コードを、いま一度理解するため、備忘録的に仕組みをここで書いていきたい。

著者について

• プログラミングを（本格的に）始めては半年ほど
• HTML/CSSは別に得意でもない

「×」で削除ボタン作りたいけど、どうやるんだ？

あるページの要素の削除機能を実装している時に「削除」ボタンだと、なんかかっこわるいなー、と思うようになり、「×」ボタンにすればいいのでは？と思いついたものの、実装方法がわからない。

そこで案としてパッと思いついたのが

• "×" を文字として入力する
• フリーのアイコンを表示する

だった。ただ、それぞれ

• 位置がずれてカッコ悪い
• 見た目の調整に制限がある

という難点があったので、調べていたらCSSで作れるらしい

とりあえずそのまま使ってみた

その時は時間がなくて、とりあえずこちらのコードを少し調整して使っていたのだが、改めてみるとよくわからない。

HTML

<span class="batsu"></span>

CSS

.batsu {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
}
 
.batsu::before, .batsu::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  background: #333;
}
 
.batsu::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.batsu::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

擬似要素について

まず ::before がよくわかっていなかった。
そこでMdnの記事を読むと、

「CSS において ::before は、選択した要素の最初の子要素として擬似要素を生成します。よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。」

とある。要するに、この::beforeと::afterでspanタグ内に新しく小要素を設定しているみたいだ。そこで

CSS

.batsu::before, .batsu::after {
 content: "";
 }

で空の要素をいれているということらしい。

「×」部分の書き方

CSS

.batsu {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
}

これで親要素の大きさを設定し、positionプロパティをrelativeにして、これから作る小要素の描画領域を設定。

CSS

.batsu::before, .batsu::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  background: #333;
}

• positionプロパティをabsoluteにして描画領域を設定
• top, leftプロパティを50%にして、親要素のど真ん中に小要素の左上を設定
• width, heightプロパティで小要素の大きさを設定（長方形になる）
• backgroundプロパティで小要素を#333で塗りつぶす

この段階だと、ただ親要素の中心から下に伸びていく黒い長方形ができただけなので、

CSS

.batsu::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.batsu::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

• transformプロパティのtranslate()メソッドでそれぞれの起点を「小要素に対して」-50%左上（つまりxが-2.5px、yが-15px）にする（結果的に親要素の中央に黒い長方形ができる）
• transformプロパティのrotate()メソッドでそれぞれ45度左右に回転させる

ということらしい。

まとめてわかったこと

• 小要素のtransformのtranslateは親要素ではなく、小要素の大きさで表されている
• そもそも塗りつぶしということがわかっていなかった

おわりに

あらためて自分でコードを触ってみて、描画を確認しながらやると理解が進んでよかった。
だいぶ初歩的な部分だが、逆に検証しやすくて、振り返る重要性に気づけた。