WEBサイト内のテキストを選択した時の背景色や文字色をCSSで変更する方法をご紹介いたします。 テキスト選択時の背景色や文字色をCSSで変更する方法 どのブラウザでも大体テキスト選択時は、背景色が青色、文字色が白色になり…
テキスト選択時の背景色や文字色をCSSで変更する方法
30秒で理解できるCSSのコードスニペットがまとめられている「30 Seconds of CSS」
30 Seconds of CSSは、30秒で理解できるCSSのコードスニペットがまとめられているサイトです。 アニメーションするローダーやホバーアニメーション等、豊富なスニペットがまとめられています。 30 Secon…
直感的に操作できるCSSグラデーションジェネレーター「GradPad」
GradPadは、直感的な操作でグラデーションが作成できるCSSグラデーションジェネレーターです。 GradPadの使い方 GradPadにアクセスして、開始色・終了色などを指定していきます。下側にあるメモリでは透過度を…
短いページでもフッターをブラウザの最下部に表示させる方法
コンテンツの量が少ないページでは、フッター部分が浮き上がって表示され、フッターの下に余白ができてしまいます。これを回避するために、コンテンツの量が少なくてもフッターがブラウザの最下部に表示されるようにする方法をご紹介いた…
CSSだけで全画面の背景動画を実装する方法
CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。 なお、動画は別途ご用意いただく必要があります。 CSSだ…
CSSで文字を縦書きにする方法
何も指定しなければ、HTMLで記述した文字列は横書きになります。和風のサイトなどでは、文字を縦書きにしたい時もあるかと思います。 画像を使うという方法もありますが、今回はCSSを使って文字を縦書きにする方法をご紹介したい…
CSSだけでひし形(ダイヤモンド)を作る方法
画像を使わずに、CSSだけでひし形(ダイヤモンド)を作る方法をご紹介いたします。 要素を傾けることで、簡単にひし形を実現することが可能です。 CSSだけでひし形(ダイヤモンド)を作る方法 CSSだけでひし形を作成するには…
ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法
ボタンをクリックした際に全画面に表示される、モーダルウインドウ風のメニューを実装する方法をご紹介いたします。 簡単なデモページを用意したので、挙動についてはデモページをご確認いただければと思います。 デモページを見る ボ…
スマホで背景画像を固定させる方法(background-attachment:fixed;の代替案)
背景画像を固定して中のコンテンツだけをスクロールさせるページを作成していたところ、スマートフォンでは「background-attachment:fixed;」が効かないことに気付きました。 スマートフォンでも背景画像を…
CSSで背景画像に半透明のレイヤーを重ねて背景のみを暗くする方法
背景画像の上にテキストを重ねた場合に、背景画像だけを少し暗くして上に重ねた文字を際立たせたいことってあるかと思います。 画像自体を編集しても良いのですが、CSSだけでも背景画像の上に半透明のレイヤーを重ねることはできます…