【CSSチャレンジ第１回】レインボーの線を使ったカードデザイン

こんにちは。
リラックマと森にある赤い屋根のお家でのんびり暮らしたい系デザイナーのみみ🐰です♡
リラックマと一緒にオムライスが食べたいです(๑╹ω╹๑ )

今回からCSSチャレンジという、自分1人の企画を寂しくはじめてみたいと思います！ 

CSSチャレンジとは
コーディングが苦手なみみ🐰がCSSで色んなデザインを実装する企画です。
CSSで実装するのが目的なので、HTMLの文法的に間違ってるところがあると思いますが、ご了承ください。

第１回目の今回は、以前Twitterで投稿した7色の線を実装した時のコードを公開したいと思います。

目次
1.レインボーの線を作る
2.応用編♡カードデザインとレインボーの線を組み合わせる

1.レインボーの線を作る

今回はspanタグを使って、作ってみました。

○見た目

○HTML

<div class="color7_bd">
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

○CSS

.color7_bd span {
	float   : left;
	height  : 0.3em;
	margin  : 0;
	padding : 0;
	width   : calc(100% / 7);
}
.color7_bd span:nth-of-type(1) {
	background : #E2173A;
}
.color7_bd span:nth-of-type(2) {
	background : #FF7D08;
}
.color7_bd span:nth-of-type(3) {
	background : #FFE20D;
}
.color7_bd span:nth-of-type(4) {
	background : #4FC149;
}
.color7_bd span:nth-of-type(5) {
	background : #20BEE2;
}
.color7_bd span:nth-of-type(6) {
	background : #154ECC;
}
.color7_bd span:nth-of-type(7) {
	background : #7F09D3;
}

線の太さは、「.color7_bd span」のheightで指定。

2.応用編♡カードデザインとレインボーの線を組み合わせる

今回のメイン、カードデザインと組み合わせたパターンです。
レインボーの線は、1と同じくspanで作成しています。

○見た目

カードデザインは両端が角丸になっているので、レインボーの線も併せて角丸にしています。

画像はGIRLY DROPさんにお借りしました💗

おしゃれなフリー写真素材｜GIRLY DROP(ガーリードロップ)｜おしゃれなフリー写真素材：GIRLY DROPおしゃれなフリー写真素材｜GIRLY DROP(ガーリードロップ) | GIRLY DROP(ガーリードロップ)

○HTML

<div class="color7_bd-card">
  <div class="color7_bd">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <img src="#">
  <div class="color7_bd-card-inner">
    <h2>タイトル</h2>
    <P>本文</P>
  </div>
</div>

○CSS

.color7_bd-card {
	background    : #fff;
	border-radius : 0.25em;
	box-shadow    : 0 0.2em 0.3em #ccc;
	margin        : 0 auto 5em auto;
}

.color7_bd-card .color7_bd span:first-of-type {
	border-radius : 0.25em 0 0 0;
}

.color7_bd-card .color7_bd span:last-of-type {
	border-radius : 0 0.25em 0 0;
}

.color7_bd-card img {
	width : 100%;
}

.color7_bd-card-inner {
	padding : 2em 3em;
}

.color7_bd-card-inner h2 {
	color       : #331101;
	font-size   : 1.5em;
	font-weight : bold;
	margin      : 0 0 0.5em 0;
}

.color7_bd-card-inner p {
	color     : #331101;
	font-size : 1em;
}

1のレインボーの線のCSSに上記CSSを追加します。
「.color7_bd-card .color7_bd span」の:first-of-typeと:last-of-typeの部分が角丸を指定しているところです。

誤りがある場合やこうした方が良いなどのアドバイスがあれば、コメントまたはTwitterなどでご教示いただけますと幸いです。
 動作確認は、Mac版Chromeの最新版のみです。他のブラウザ、OSでは正常に表示されない可能性がございます。あらかじめご了承ください。