CSSのみ

技術

gallery2026-09-119種

CSS フォトギャラリー 9選 — メイソンリーからライトボックスまで

CSS フォトギャラリーは、複数の写真をグリッドやウォーターフォール状に並べ、ホバーやクリックに反応させるレイアウト技法です。Pinterestで保存したあのギャラリーのように見えても、実際にコードに落とすとグリッドの数式や画像のクロップ

HUD デザインとは、ゲームやSF映画の照準器やレーダーのように、座標や状態の数値を画面に重ねて表示し、まるで自分が見つめ返されているような印象を与えるインターフェース手法です。この記事では、その監視カメラのような雰囲気をそのまま動くランデ

y2k webデザインとは、2000年代のCDやホログラム包装紙にあったクロムの輝きと虹色の反射を、CSSだけで蘇らせるスタイルです。CDの裏で虹色ににじんでいたあの光が、今度はボタンや見出しの中に入ってきました。

ネオブルータリズム UIとは、太い墨色の枠線とにじみのない直角の影、彩度の高い原色ブロックを飾らずにそのまま画面へ置くデザイン手法です。ボタンやカードによく使われます。

css スティッキーヘッダーとは、スクロールしてもページ上部のメニュー行が画面に貼り付いたまま残る機能で、position: stickyを一行書くだけで実現できます。ここで紹介する9個は貼り付くだけのヘッダーの一歩先で、スクロールする間に

css テキストエフェクトとは、見出しや文章が画面に現れる瞬間に文字そのものが動く演出のことで、コードが分からなくてもファイルをそのまま貼り付ければすぐ使えます。この9個はハッキング画面のように文字が解読される瞬間を狙い、16進コードや2

css カードホバーとは、商品カードやブログ記事カードにマウスを乗せたりキーボードでフォーカスを移したりした瞬間だけ、画像が拡大したり隠れていた説明が現れたりする短い動きのことです。商品・記事カードにそのまま貼り付けられる9種類を、実際に

css テキストアニメーションとは、見出しや文章が画面に現れるときに一緒に動く演出のことです。見出しを一気に引き立てる一瞬のつくり方を9つ集めました。そのうち1つは、暗号が解けるように文字がそろいます。

プロモ LP テンプレートは、カウントダウンヒーローから申込フォームまで、キャンペーンのランディングページに必要な構成要素をひとまとめにしたコード集です。LPにそのまま貼れる九つのうち一つは、実際の目標時刻まで毎秒減っていくカウントダウンを

ポートフォリオサイトテンプレートは、紹介ヒーロー・プロジェクトグリッド・ケース詳細・経歴タイムライン・連絡フォームなど、個人のポートフォリオページに使うセクションをまとめて配るコード集です。ランディングページ(LP)にそのまま貼れる紹介ヒ