Web制作をやっていると、以下のようなやり取りをすることってないでしょうか。 制作者「サイト変更したから確認してねー」 クライアント「変わってないよ・・・」 制作者「キャッシュが原因だからブラウザのキャッシュをクリアして…
EC-CUBEでCSSの変更をキャッシュさせない方法
CSSで水玉模様(ドット柄)の背景パターンを作成する方法
画像を一切使わずに、CSSのみで水玉模様の背景パターンを作成する方法をご紹介いたします。 CSSで水玉模様の背景パターンを作成する方法 CSSで水玉模様を作るには、グラデーションを活用します。例えば、以下のように指定する…
縦横比を維持したまま背景画像を横幅いっぱいに表示させる方法
背景画像を指定する際、例えば1000*600pxの画像であれば、以下のように指定するのが一般的なやり方かと思います。 ですが、上記のやり方だとレスポンシブ対応をする場合、細かい調整が必要になり結構面倒です。 というわけで…
レスポンシブサイトでテーブルがはみ出てしまう場合にCSSでテーブル部分だけ横スクロールさせる方法
レスポンシブ対応のサイトを制作していると、テーブルの扱いに悩まされることが多いです。PCで見た時は問題なくても、スマホで見ると以下のように縦に伸びてしまい、非常に見難くなってしまったという経験はないでしょうか。 これを解…
チェックボックス選択時のアニメーションを追加することができる「Checkbox.css」
Checkbox.cssは、チェックボックスを選択した時にアニメーションをつけることができるCSSファイルです。先日紹介したRadiobox.cssはラジオボタンにアニメーションを追加するCSSでしたが、今回はチェックボ…
ラジオボタン選択時にアニメーションを追加することができる「Radiobox.css」
Radiobox.cssは、ラジオボタンを選択した時にアニメーションをつけることができるCSSファイルです。 実際の動きについては、以下よりご確認いただけます。 デモページを見る Radiobox.cssの使い方 1. …
写真にフィルタを加えるためのCSSを出力できるWEBサービス「cssFilters」
cssFiltersは、写真にフィルタを加えるためのCSSを出力することができるWEBサービスです。プレビューを見ながら写真をフィルタ加工し、プレビュー通りのフィルタをかけるCSSコードを出力することができます。 css…
Flexboxの各プロパティを試すことができるWEBサービス「Flexbox Playground」
Flexbox Playgroundは、Flexboxのプロパティの値を変更して、どういうレイアウトになるのかを試すことができるWEBサービスです。 Flexbox Playgroundの使い方 1. Flexbox P…
CSSのみで全画面に動画を設置して、その上に文字などを重ねて表示する方法
jQueryなどを使わずに、背景動画を設置して、再生される動画の上にテキストなどのコンテンツを表示する方法をご紹介いたします。 デモページを用意したので、以下のリンクよりご参照いただければと思います。 デモページを見る …
ゲームで遊びながらCSSのセレクタを学習することができる「CSS Diner」
CSS Dinerは、ゲームで遊びながらCSSのセレクタについて学ぶことができるサイトです。 CSSを勉強し始めたばかりという方は、ぜひチャレンジしてみてください。 CSS Dinerの遊び方 CSS Dinerにアクセ…