今回は初めてのCSSネタです。

CSSだけで、css3shapresのサイトをみて、
かなりの事ができるようなので、私も挑戦してみました。

挑戦してみたものは、STEPナビです。
これをSTEPナビというのがいいのかわかりませんが、どうしても名前がみつからなかったので、そう名付けました。
(知っている方がいたら、名前を教えてください。)

完成のイメージです。

まずは、1つだけをどう作るかです。

div.step{
	position: relative;
	width: 70px;
	height: 50px;
	background: #666666;
	text-align: center;
	padding-left: 10px;
	float: left;
	border-left: 2px solid #ffffff;	/* 間隔になる */
}
/* 右のでっぱり三角 */
div.step:after{
	content: "";
	position: absolute;
	left: 80px;
	top: 0;
	width: 0;
	border-top: 25px solid transparent;	
	border-bottom: 25px solid transparent;
	border-left: 10px solid #666666;
}
/* 左のひっこみ三角 */
div.step:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 10px solid #ffffff;
}	
div.step span{
	line-height: 50px;
	color: #ffffff;
	padding-left: 10px;
	padding-right: 10px;
}

これで出来上がりです。
何をやっているかと言えば、右側には右に出ている四角と同じ色の三角を配置し、
左にも右に出ている背景と同じ色の三角を配置しています。

では、これを4つ並べてみましょう。
Naviっぽく、「選択」「決済」「配送」「完了」としてみました。

<div class="step-navi">
	<div class="step"><span>選択</span></div>
	<div class="step"><span>決済</span></div>
	<div class="step"><span>配送</span></div>
	<div class="step"><span>完了</span></div>
</div>

何となくそれっぽいですが、明らかにへこみの部分がおかしいです。
これは、下に書いた方が上に来る訳ですから、へこみも上にかぶってしまいます。

で、これを解消するために、

div.step{
	float: right;
}

のようにして、右から配置していくようにします。

これで、形的にはおかしくなくなりましたが、処理が逆になってしまいましたので、
記述を以下のように逆にしてしまいます。

<div class="step-navi">
	<div class="step"><span>完了</span></div>
	<div class="step"><span>配送</span></div>
	<div class="step"><span>決済</span></div>
	<div class="step"><span>選択</span></div>
</div>

いちおう、形と文言的には問題がなくなりました。
でも、これでは、今がどのSTEPにいるのかわかりませんから、
色を変えていきます付けていきます。
既に終わったものは、「青」
今は「赤」
まだの処理は「グレー」
というようにしたいと思います。

そのために、それぞれにその状態のクラスを指定します。

<div class="step-navi">
	<div class="step"><span>完了</span></div>
	<div class="step"><span>配送</span></div>
	<div class="step current"><span>決済</span></div>
	<div class="step done"><span>選択</span></div>
</div>

で、doneとcurrentは別の色にするので、

div.done{
	background: #0055AA;
}
div.done:after{
	border-left: 10px solid #0055AA;
}
div.current{
	background: #CC0000;
}
div.current:after{
	border-left: 10px solid #CC0000;
}

とこんな感じです。
これで、最初のイメージとなります。


後は、doneとcurrentを指定する場所を変えれば、現在の状況の表示を変えられるという訳です。

最後に、出来上がった完成ソースをのせておきます。

<style>
div.step{
	position: relative;
	width: 70px;
	height: 50px;
	background: #666666;
	text-align: center;
	padding-left: 10px;
	float: right;
	border-left: 2px solid #ffffff;	/* 間隔になる */
}
/* 右のでっぱり三角 */
div.step:after{
	content: "";
	position: absolute;
	left: 80px;		/* div.step#width + div.step#padding-left = 80px */
	top: 0;
	width: 0;
	border-top: 25px solid transparent;	  /* div.step#heightの半分 */
	border-bottom: 25px solid transparent; /* div.step#heightの半分 */
	border-left: 10px solid #666666;	/* とんがり具合 */
}
/* 左のひっこみ三角 */
div.step:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 10px solid #ffffff;
}	
div.step span{
	line-height: 50px;
	color: #ffffff;
	padding-left: 10px;
	padding-right: 10px;
}

div.done{
	background: #0055AA;
}
div.done:after{
	border-left: 10px solid #0055AA;
}
div.current{
	background: #CC0000;
}
div.current:after{
	border-left: 10px solid #CC0000;
}


div.step-navi{
	margin: 20px;
}
</style>
<div class="step-navi">
	<div class="step"><span>完了</span></div>
	<div class="step"><span>配送</span></div>
	<div class="step current"><span>決済</span></div>
	<div class="step done"><span>選択</span></div>
</div>

ちょっと、HTMLを反対に書くのが許せない気もするのですが、
このあたりはjQueryのプラグインなんかを使ってしまって、

$('.step-navi').stepnavi(2);

みたいに記述するとこれらのHTMLの操作を行うようにすれば、
それほど違和感はなくなるのでは無いかともいます。

お仕事のご依頼・相談を承ります
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら

Leave a Reply

お仕事のご依頼・相談
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら
ソフトウェア&ライブラリ




ライブラリ
airxmail(en)
AIR版メール送受信ライブラリ
airxzip
AIR版ZIP圧縮・解凍ライブラリ
執筆書籍
本、雑誌等

WEB記事:CodeZine
執筆記事はこちら
カレンダー
2012年8月
« 7月   9月 »
 12345
6789101112
13141516171819
20212223242526
2728293031  

カスタム検索
RSS
Add to Google < !–adsense–>
アーカイブ
カテゴリ
にほんブログ村 IT技術ブログへ