CSSのみ

技術

プレスキットテンプレート付きプレスルームセクション9選

プレスルーム・メディアページのセクションテンプレートは、プレスリリース一覧・メディアキット・問い合わせ先といった要素をひとまとめにしたプレスキットテンプレート集です。LPにそのまま貼れるヒーローから購読フッターまで、9つのうち1つは実際に

カンファレンス LP セクションテンプレートは、ヒーロー・スケジュール・登壇者紹介のようなイベントランディングページ用ブロックを、LPにそのまま貼れる形でまとめたコード集です。9つのうち1つは、実際の目標時刻まで秒単位で減っていくカウントダ

カードフリップアニメーションとは、マウスを乗せたりクリックしたりするとカードがくるっと回転したり半分に折れたりして、裏側の内容が現れる効果のことです。コードが分からなくても、下のデモにマウスを乗せてみれば何が起きているか一目で分かります

メッシュグラデーションは、暗い背景の上で複数のぼかした色の塊がオーロラのようににじみ合い、その上にフィルムグレインを重ねる背景スタイルです。AIっぽさを消すために、デザイナーはあえてこのグレインを残します。このスタイルから、9つのパーツをそ

クレイモーフィズムとは、太い角丸と明るいハイライト・暗い影を同じ面に重ねることで、粘土を指で押したような柔らかい質感を作るUIデザインの手法です。ボタンやカードによく使われます。

キネティックタイポグラフィとは、見出しの文字サイズが画面幅に合わせて変わり、単語が順番に浮かび上がり、数字がオドメーターのように上がっていくデザイン手法のことです。最近のランディングページはどれもファーストビューがこれなので、実際にコードを

今、Pinterestで保存され続けているダークモードデザインシステムは、開発者向けツールLinear.appの画面をきっかけに広まった配色のルールで、濃いインク色の背景に青いグローや枠線のハイライトだけで階層を表現します。この記事では同

css カルーセルスライダーとは、写真やカードを何枚か並べて画面の中で順番に切り替えて見せる部品のことです。指でめくったりボタンを押したりすると次の一枚が現れ、JavaScriptを書かなくてもCSSだけで動かせます。スクロールからラジオ

css リンク下線アニメーションとは、マウスを乗せたりキーボードで focus を移したときだけリンクの下線が動いて現れる効果のことで、今どのリンクを指しているかが一目でわかるようになります。9種類まとめて用意しました。どれも一行コピペ

トップへ戻るボタンとは、ページを下まで読んだあとにワンクリックで一番上へ戻してくれる小さなボタンのことです。この記事では「トップへ戻るボタン css」でよく探される9つの動きを、AOS・GSAPなしでそのまま使えるコードとしてまとめました。