*

ドラッグの色を変更する。::selectionを使用する。

公開日: : 未分類

今回は、ドラッグした時に色の変更方法を書いてみました。

通常では、ドラッグをしたときは、白になりますが、これではふつうすぎて面白くないと思ったので、調べてみました。

調べてみたら、簡単にできたので、やってみました。

まずこちらをご覧ください。
デモ01

ドラッグした時に黒になっているのがわかりますか?

この方法は、cssで::selectionというものを使用するだけで、できます。

以下にソースを記載します。
cssファイル

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#FFF;
}
/* ドラックしたときの色指定 */
::selection {
	background:#000000; /* Safari */
}

::-moz-selection {
	background:#000000; /* Firefox */
}

#wrap{
	width:100%;
	height:768px;
	margin:0 auto;
	position:relative;
	background:url(Apple.jpg) no-repeat top;
}

#box01{
	width:300px;
	height:150px;
	margin:0 auto;
	position:relative;
	background-color: #008800;
	text-align: center;
}

15行目から21行目を記載するだけで、変更ができます。

是非簡単なので試してみてください。

ダウンロード


関連記事

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

海外サイトのかっこいいサイト集。

サイトを作成するにあたってもっとも大切なものは、想像力だとおもいます。 デザイナーの方などは特

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑