CSSボタンの作成

→サンプルページ

ここでは,CSSを使用したマウスアクションのあるボタンの作成について記述します.
イメージとしては上記のサンプルを参照して下さい.マウスホバーでリンクに背景と文字色を変更します.
以下のコードの bodyタグ内のsiteheader, nav, ul, aタグにボタンアクションをCSSで付けていきます.
まずは,HTMLの確認.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
	<header id="siteheader">
		<h1>GRAPHIC DESIGN</h1>
		<nav>
			<ul>
				<li><a href="http:www.google.com" target="_blank">NEWS</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">WORK</a></li>
				<li><a href="#">PUBLICATION</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

つづいてCSSです.記述はボタン部分の処理のみです.

#siteheader nav ul li a{
	text-decoration:none;
	color:#FFF;
	padding: 5px 300px 5px 50px;
}
/*未訪問のリンク*/
#siteheader nav ul li a:link{
	color:#FFF;
}
/*訪問済みのリンク*/
#siteheader nav ul li a:visited{
	color:#FFF;
}
/*マウスホバー時*/
#siteheader nav ul li a:hover{
	background-color:#FF0;
	color:#0F0;
}
/*マウスクリック*/
#siteheader nav ul li a:active{
	background-color:#F00;
	color:#FFF;
}

idを付けているターゲットとなるsiteheader nav ul li aに上記のようにそれぞれにアクションを付けます.上記の記述,a, a:link, a:visited, a:hover, a:activeの5種類は使用しなくとも記述するようにしましょう.

a リンクのデフォルト表示の指定.text-decorationはリンクデフォルトの下線などを消します.
a:link 未訪問状態のリンクの表示設定です.
a:visited 一度訪問したリンクの表示設定です.
a:hover マウスホバーの際のリンクの表示設定です.
a:active マウスをクリックした際のリンクの表示設定です.

上記では,初期表示の際テキストカラーを白(color:#FFF)に設定し,マウスホバーの際にテキストカラーを緑(color:#0F0)に変更と背景色を黄(background-color:#FF0)にしています.マウスクリックの際に文字色を白(color:#FFF)に背景色を赤(background-color:#F00)にしています.

それぞれにカラーや背景色を入力・変更し状態を確認した上で,使用してみて下さい.

カテゴリー: ALL, CSS, メモ パーマリンク