CSS初心者のために「CSSで初心者マーク」を作ってみた

#どうも7noteです。

WEB制作初心者の方向けに記事を書いているのですが、だれでも初心者マークくらいはちゃんと作れたほうがいいかなという謎の理由から、CSSで初心者マークを作ってみました。

われこそはCSS初心者だと思う方はぜひ挑戦してみてください。

ソース

index.html

<div class="mark">
  <div class="left"></div>
  <div class="right"></div>
</div>

style.css

.mark {
  width: 100px;
  height: 110px;
  display: flex;
  margin-top: 30px;
}

.mark div {
  width: 50%;
  height: 100%;
  border: 10px solid #000;
}

.mark .left {
  background: #F3E72B;
  border-radius: 25px 0 3px 5px;
  border-right: none;
  border-left-width: 7px;
  transform: skewY(45deg);
}

.mark .right {
  background: #18A094;
  border-radius: 0 25px 5px 3px;
  border-left: none;
  border-right-width: 7px;
  transform: skewY(-45deg);
}

解説

まぁ、解説するまでのことは何もしていないですが、基本的なところだけさらっと解説。

border-radiusは4方向（左上・右上・右下・左下）別々に指定ができるので、これを利用して左右に四角形を2つ並べて適度に角丸を設定。左の箱なら左上を、右の箱なら右上の角丸を強い目に設定。

borderもデフォルトの太さを左右共通のCSSとして記述しておき、左の箱、右の箱それぞれ別々で指定していきます。
今回はtransform: skewY()を使って平行四辺形にしているのでborderの太さが上下と左右で変わってしまうので、左右のborderの太さを個別でそれぞれ調整しています。

こんな感じですかね。アイデア自体は簡単なのであとはどのプロパティをつかってどういう設計にするかがわかれば初心者でも簡単に作成できますね。

まとめ

初心者マークって認知されているわかりやすいデザインでいいですよね。誰が見ても初めてだと自覚している人はまずそこに目が止まるようなデザイン。これってwebデザインでも重要なポイントなのかなって思ったり。ユーザーがひと目で何かわかるものを作るのって、とても重要だと思います。

そんなところでまた思いつきでいろいろなものをCSSで作ってみたいなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ