CSS a番目とb番目の間を選択 同じ要素の中で、指定された番目の要素から、指定された番目の要素までだけ、選択するセレクタのサンプルです。 同じデザインの連続した要素の中で、一部分だけスタイルを反映したときがあります。 そんな時のサンプルです。 以下のサンプルは3番目から6番目だけ色を... 2022-01-23 20:12:47
CSS 要素の伸縮加工とアニメーション 画像や要素をCSSで伸縮して加工するサンプルです。 伸縮の開始位置やアニメーションへの応用を実装してみました。 通常の画像はこちら CSSで縦に要素を伸ばすとこのようになります。 [[ .de... 2021-12-16 16:33:17
CSS ダークモードをCSSで出し分け OSでダークモードの時、CSSで検知し、スタイルを変更するサンプルです。 OSで暗いところ用のダークなモードの切り替えは、だいぶ浸透してきました。 サイト側でも個別でダークモードを用意していたサイトもあるかもしれません。... 2021-06-03 00:38:01
CSS 背景画像をマスクして左右に動かす 縦長の四角形の中に横長の画像を入れ、左右にアニメーションさせるサンプルです。 横幅を狭いエリアに、横長の画像を配置すると全体に小さくするしかありません。 そんな時、サイズは大きなまま画像の全体を表示するために、アニメーショ... 2021-05-28 13:55:39
CSS インプットスライダーの加工 スライドして入力するインターフェースのデザインやデータの取得するサンプルです。 HTMLのinputタグのtypeをrangeにすると、ブラウザのデフォルトのスライドUIが使えます。 ブラウザに依存するUIなので、そのまま使う方何かと安全ではあります... 2021-02-23 17:34:49
CSS 背景が波打つボタン ボタンのエフェクトとして、文字の背景の色のついた部分が上下にアニメーションするサンプルです。 ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。 ボタンの背景にGifアニメを置... 2021-02-23 13:43:13
CSS ボタンのホバーアニメ ボタンにマウスを合わせた時の斜めに色がつくアニメーションのサンプルです。 CSSのhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。 デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。... 2021-01-01 23:05:09
CSS アニメーション付きモーダル作成 CSSだけでアニメーションのエフェクト付きのモーダルウィンドウを作成するサンプルです。 JavaScriptが苦手、あるいは使えない状況でも、モーダルの表現が可能です。 探すと素っ気ないモーダルはあるのですが、アニメーションの演出が付いているもの... 2020-06-23 23:59:09
CSS 幅固定レイアウト gridを使って横幅を固定した要素と、残りを可変で埋めるレイアウトのサンプルです。 例えば、画像とテキストを横に並べたい時にfloatやflexを使うことがありますが、gridでも簡単に表現できます。 floatやflexを使うと結構悩むのが次のようなレ... 2020-03-16 23:26:20
CSS tableを使わないgridの表 display:gridを使って、テーブルを使わない表組みを作るサンプルです。 グリッドはレスポンシブ対応などでよく耳にしますが、表を作る時にも便利です。 静的に書かれたtableタグの場合、列を消したり、人マス消すのは一苦労です。... 2020-03-11 23:27:24