超超初心者向け漫画サイトのつくり方【メニューを装飾してみる】

メニューを装飾してみよっかなと思います。

マウスホバーで反応する、という効果も付けます。

このスマホ時代に、マウスホバー…。道楽の域っすね。

メニューをボタンっぽくしてみる

ついでに、現在の状態は↓です

◆ブラウザ表示は、こんな感じ

◆htmlは、こんな感じ

メニューを装飾するために、style.cssをテキストエディタ（サクラエディタ）で開いてください。

一気にコードを書きます。あとで解説します。

a {
	background: #777777;
	color: #fdfdfd;
	text-decoration: none;
	display: block;
	width: 150px;
	padding: 10px;
	margin: 20px;
}

ブラウザ表示は、こんなになりました～

なんか押せそうな雰囲気になりました。

あ、センスについての言及はナシですよ。とりあえずそれっぽく出来ればいいんです。

上から順に解説していきます。色とか変えたいひとは該当箇所を書き換えてください。

★background: #777777;

背景色を濃い灰色にしてね。という記述です。背景色を変えたいひとはここの数値を変更してください。

★color: #fdfdfd;

文字色をうっすい灰色にしてね。という記述です。

★text-decoration: none;

アンダーライン（下線）を消してね。という記述です。

★display: block;

ブロック要素にしてね。という記述です。

★width: 150px;

横幅を150pxにしてね。という記述です。幅を変えたいひとは、ここの数値を変更してください。

★padding: 10px;

ギチギチ感を解消するためのすき間を作ってね。という記述です。

★margin: 20px;

メニューとメニューのすき間を作ってね。という記述です。変更するときは、数値を書き換えてください。

スマホで見るだけなら、これで終了です。

次、PCで見る時にしか役に立たない記述をしていきます。

PCのポインタ（矢印）が上に乗っかった時に登場する効果です。

めっちゃ簡単です。

a:hover {
	opacity: .5;
	transition: .5s;
}

a:hover→aタグの部分にマウスポインタが乗っかった時に適用してね。

opacity: .5;→半透明にしてね。

transition: .5s;→半透明にするの、0.5秒じらしちゃって。

…という記述です。

真面目に解説すると、opacityは「透明度」です。.5＝0.5＝透明度半分。です。もっと薄くしたい場合は、数値を大きくしてください。反対に控えめにしたい場合は、数値を小さくしてください。

transitionは、「それ」をするまでの時間。今回で言うと「透明度を50％に」するまでの時間です。.5ｓ＝0.5ｓ＝0.5秒です。これも数値を変えられます。せっかちさんは、数値を小さく、のんびりさんは、数値を大きくしてください。

意外と簡単ですよね！お疲れさまでした