リンクボタンの忘備録～回答編～

3月に入って3日目。

今日はひな祭りですね！

また、寒さ到来ですが…

体調には気を付けてください！

さてと、話題を取り戻して…

リンクボタンの忘備録～回答編～

リンクボタンのコーディング方法は分かりましたでしょうか？

インライン要素とブロックレベル要素の使い方は理解していますか？

<a;>のタグの部分はインライン要素なので、ブロック要素に変換する必要があります。

HTMLの表示部分は割愛させていただきます。

次に、CSSでデザインする方法をここに乗せておきますね。

.btn {
	margin:0 auto 50px;
	padding: o;
}

.btn a {
	background: #999;
	border-radius: 5px;
	color: #FFF;
	display: block; /* インライン要素からブロックレベル要素に変換 */
	height: 60px;
	line-height: 60px; /* 上下揃え */
	margin: 0 auto; /* センター揃え */
	padding: 0 20px;
	text-decoration: none;
	width: 260px;
}

.btn a:hover {
	background: #CCC;
}

これで、リンクボタンの作成で完了です。

インライン要素からブロックレベル要素に無事に変換したので、無事にリンクボタンの作成完了です。

リンクボタンの可変サイズを適用したい場合はcssに追加をしておいてください。

.btn {
	margin:0 auto 50px;
	padding: o;
}

.btn a {
	background: #999;
	border-radius: 5px;
	color: #FFF;
	display: block; /* インライン要素からブロックレベル要素に変換 */
	height: 60px;
	line-height: 60px; /* 上下揃え */
	margin: 0 auto; /* センター揃え */
	min-width: 260px; /* 可変サイズを使い時は記述 */
	padding: 0 20px;
	text-decoration: none;
}

.btn a:hover {
	background: #CCC;
}

最小サイズが合計300pxまで可変サイズとして適用されます。

（min-width: 600px + padding: 0 20px）=横幅の合計が300pxになります。

ご理解できましたでしょうか？

リンクボタンを作るときは必ず、ブロックレベル要素に変換しておいてくださいね。

ではまた！