1. まとめトップ

3行以内!差がつくお手軽CSS小ワザ集

コーダー、WEB担当者、ネットショップ店長に伝えたい。意外と知らない、知ると便利なCSS小技まだまだあります。

更新日: 2016年07月08日

1 お気に入り 876 view
お気に入り追加

この記事は私がまとめました

blessUさん

◆ 背景色だけを透かして文字はそのまま

背景だけ透かしたいのに文字まで半透明になってしまう

すべてに透明度が適用されると、文字が見難くなったりします。そんなときは、RGBaで背景にのみ適用する方が見やすくなります。

#testRgba {
background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0~255)で指定、不透明度を0~1.0で指定 */
}

rgbaなら背景だけ透かしで文字はそのまま!

◆ テキスト選択時(マウスでドラッグ時)の背景色をカスタマイズ

コードをCSSファイルのわかりやすい箇所にコピペしてお使い頂ければ完成!
カラーはお好みのものに差し替えるだけです。

とっても簡単なのに、文字の可視性がグンとアップします!

◆ borderつけてもwidthを計算し直さなくて済むようにする

width や height と同時に border や padding を指定しているときに,
少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか?

そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます.

box-sizing: border-box;
「border-box」を指定した場合、
“paddingとborderを含めた幅”を指定できるようになります。

補足とおすすめジェネレーター

一応モダンブラウザはひと通り対応していますが ベンダープレフィックスを指定しないと反映されませんのでご注意を!

※古いブラウザにも対応させるためにはベンダープリフィックスを要確認してください

覚えきれないかたの強い味方、CSS3ジェネレーターはこちら

1