文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > マウス選択時の色

文書をマウス等で選択時の色を指定するCSS生成

html内の文書をマウスで選択したとき反転されます。この反転時の文字色・背景色をCSSで変更することが出来ます。
当ページでは簡単操作で作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

選択時の色を変更してみよう

影は上下左右の方向に指定することが出来ます。影のぼかしや色なども指定できますので是非お試しください。
FireFox用にベンダープレフィックスを付けています。

文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
ここをマウス選択すると
色を確認できます
使用したhtml
<span class="strselect">ここをマウス選択すると<br>色を確認できます</span>
生成したCSS
.strselect {
  color            : #000000;           /* 文字の色 */
  font-size        : 18pt;              /* 文字のサイズ */
}
 
.strselect::-moz-selection {
  color            : #ffffff;           /* 選択時の文字色 */
  background-color : #66ff66            /* 選択時の背景色 */
 
.strselect::selection {
  color            : #ffffff;           /* 選択時の文字色 */
  background-color : #66ff66            /* 選択時の背景色 */
}
ページTOP
広告
広告

色々な文字選択時の動き

CSSの疑似要素セレクタ「::selection」には、「color」「background-color」「background」「text-shadow」を指定することできます。

文字をマウス選択すると影が付く

IEは「::selection」で「text-shadow」を指定しても無視されます。

マウス選択で影
<span class="sample1">マウス選択で影</span>
<style type="text/css">
.sample1{
  font-size   : 30pt;
}
.sample1::-moz-selection {
  text-shadow : 5px  5px 5px red;
}
.sample1::selection {
  text-shadow : 5px  5px 5px red;
}
</style>
ページTOP

文書ををマウスで選択できないようにする

「user-select : none;」を指定すると、文書をマウス等で選択できなくなります。

選択できない文書
<span class="sample2">選択できない文書</span>
<style type="text/css">
.sample2{
  font-size          : 30pt;
  -ms-user-select    : none;
  -webkit-user-select: none;
  user-select        : none;
}
</style>
ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン