カテゴリー別アーカイブ: cssについて

“トップへ戻る”ボタンを途中から表示させる方法

サイトを見ていると、下の方にスクロールした時に
トップへ戻れるボタンが現れることがありますよね!

それを実装するには以下のようにすれば大丈夫です!

まずは、ボタンを作ります。

<div id="page-top">
<a href="#header">トップへ戻る<span style="font-size: 14px;"></a></span>
</div>

そのあとcssでデザインを固定化します。

/*ボタンを固定する*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
/*ボタンをデザインする*/
#page-top a {
	background: #ccc;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #aaa;
}

最後にheader内に下記コードを読み込ませる。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var topBtn = $('#page-top');
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});
</script>

これでばっちりOKです!

画像のマウスオーバーを簡単に行うCSS設定

画像のマウスオーバーっていろいろと方法がありますが、
結構めんどくさかったりしますよね。

そんな時はこいつをCSSにぶち込んでみましょう!

a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}

たったこれだけで画像にマウスオーバーと、
なんだかいい感じに仕上がります♪

ただ、マウスオーバーで色を変えたり、
(ex:カラ― → モノクロ)
画像自体を変えたりしたい場合は、
JsやJQueryなどなどを駆使したり、
そもそもhtmlの入力で

<img 
onmouseover="this.src='マウスオーバー画像URL'" 
onmouseout="this.src='元画像URL'" 
alt="" 
src="元画像URL" />

を使うとマウスオーバーできちゃったりします。

けど、タブレットやスマホでタッチすると
画像が消えっぱなしになったりと
なんかいまいちなので、JsやJQueryもしくは
今回の方法でやっちゃいましょう!