*

ドラッグの色を変更する。::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

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

本日からblogを書きます。

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

HP作成に必要なもの。

今週は、ブログの更新が遅くなりました。 今作業している内容では、ネタがないという理由で更新がな

記事を読む

no image

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

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

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

htmlの書き方について。

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

記事を読む

Message

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

PAGE TOP ↑