Advertisement

 

この記事では、ウェブデザインの仕上がりをワンランクアップする最新HTML/CSSスニペットをまとめてご紹介します。

 

掲載しているほとんどの作品が、レスポンシブ対応となっており、コードを直接コピペできるのも特長です。

 

CSSのあまり知られていない小技テクニックから、2022年のWebデザイントレンドを意識したスニペットや、魅力的なアニメーションなどがずらり揃います。

 

昨年人気の高かったベスト・スニペット100や、一発コピペできるCSSボタンすごいCSSアニメーションなどと一緒にチェックしてみてはいかがでしょう。

 

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気

 

 

コピペできる!Webサイトがかっこよくなる最新HTMLスニペットまとめ

 

ホバーで文字テキストが分割されるエフェクト

See the Pen
Split animation on hover with single element
by Gautam Singla (@ggsingla)
on CodePen.

 

 

数字がぐにゃっと曲がるカウントダウンタイマー

See the Pen
Cpc-timekeeping: Gooey countdown svg
by Fabio Ottaviani (@supah)
on CodePen.

 

 

ロゴをストローク線のアニメーションで見せるエフェクト

See the Pen
Stroke Logo Animation
by Jon Kantner (@jkantner)
on CodePen.

 

 

パスに沿ってカラフルなドットが爆発するエフェクト

See the Pen
Random dots along path – CodePen Challenge
by Louis Hoebregts (@Mamboleoo)
on CodePen.

 

 

クリックするたびにうさぎの広場が変更されるスニペット

See the Pen
Hippity Hop
by Kit Jenson (@kitjenson)
on CodePen.

 

 

CSS Transformプロパティのさまざまな使い方

金額表を作成しながら、transformプロパティの具体的で、効果的な使い方テクニックが披露されています。

See the Pen
CSS Transforms: Pricing table
by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

手持ちの写真と名画を合成するAIテクノロジー

See the Pen
AI Art Generator
by Yannick Brandt (@Coderesting)
on CodePen.

 

 

ランダムに動く、溶けたようなラインのアニメーション

See the Pen
melty line goodness
by Andy Fitzsimon (@andyfitz)
on CodePen.

 

 

ミニマルなノーティフィケーションパネルのつくり方

See the Pen
Lotsa Notifications
by Jon Kantner (@jkantner)
on CodePen.

 

 

某人気ゲームのタイムライン機能

マウスカーソルを下に移動させると、ジャンプをしながらキャラクターが進んでいくタイムライン。

See the Pen
Super Mario Scrollable Timeline
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

クレイモーフィズム+グラスモーフィズムのエフェクトセット

See the Pen
Claymorphism + Glassmorphism
by MOZZARELLA (@TheMOZZARELLA)
on CodePen.

 

 

右クリックを自由にカスタマイズする方法

See the Pen
Custom Right-Click (Context) Menu
by Mert Cukuren (@knyttneve)
on CodePen.

 

 

閲覧環境によってアニメーションを非表示にする方法

トグルをオフにするとすべてのアニメーションが停止し、アクセシビリティを考慮したデザインに。

See the Pen
Reduced-motion toggle
by Michelle Barker (@michellebarker)
on CodePen.

 

 

アルファベット順の検索インデックス

ABC順に単語を並べたリストで、スクロールに合わせてアルファベットのみ固定されるCSSテクニック。

See the Pen
Sticky Definition List
by Chris Coyier (@chriscoyier)
on CodePen.

 

 

クリックすると青白く光るボタン

See the Pen
Sketch Button
by Aaron Iker (@aaroniker)
on CodePen.

 

 

超立体的なラジオボタン

クリックのたびにダイナミックな動きが目を引くラジオボタン、CSSオンリーでスタイリングされています。

See the Pen
FlipBoxes
by Amit Sheen (@amit_sheen)
on CodePen.

 

 

クリックすると紙幣で支払いをするボタン

See the Pen
Pay Button
by Aaron Iker (@aaroniker)
on CodePen.

 

 

グラデーションが立体的に動く3Dボタンエフェクト

See the Pen
3D Hover Buttons
by smpnjn (@smpnjn)
on CodePen.

 

 

ホバーするといろいろ飛び出すマウスエフェクト

See the Pen
Gentle button ‘explode’
by Cassie Evans (@cassie-codes)
on CodePen.

 

 

何度も押したくなるソフトボタン

クリック速度にも反応するボタンは、何度も押したくなるようなエフェクトが特長。

See the Pen
#codeVember #4/2021: soft buttons (hover/ focus and press – keep pressed, release, click fast, play with it )
by Ana Tudor (@thebabydino)
on CodePen.

 

 

進捗プログレスバーが表示されるボタンエフェクト

See the Pen
Morphing Submit Button
by Jon Kantner (@jkantner)
on CodePen.

 

 

Web3スタイルのボタンコレクション6種

ホバーで背景が光ったり、半透明だったり、グラデーションのボーダー付など、人気の高いCSSボタンデザインがセットに。

See the Pen
Web3 Styles: Buttons
by Trisha Lim (@trishalim)
on CodePen.

 

 

クリックすると紙飛行機が飛んでいくボタン

ボタン系スニペットは他にもたくさんあります。コピペできるボタン用CSSコードを一覧にした記事も参考にどうぞ。

See the Pen
Cool send button
by (@Timeto)
on CodePen.

 

 

ボーダーラインをつかったホバーエフェクト

See the Pen
CSS only Border hover effect
by Temani Afif (@t_afif)
on CodePen.

 

この記事では、CSSでできるクリエイティブなリンクホバーエフェクト6個をご紹介します。 数行のCSSをコピペするだけで実装でき、ウェブサイトをより魅力

&mbsp;

 

CSS Transformプロパティで実現するホバーエフェクト

See the Pen
Image hover effect #5
by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

要素にホバーすると、立体的に分解されるアニメーション

See the Pen
Explode A Node: 3D Box Model
by Adam Argyle (@argyleink)
on CodePen.

 

 

七色に絶えず変化を続ける背景グラデーションの描き方

See the Pen
Ripples
by Liam Egan (@shubniggurath)
on CodePen.

 

 

奥行き感たっぷりに切り替わるパララックス系スライダー

See the Pen
Parallax Slideshow
by Bruno Carvalho (@bcarvalho)
on CodePen.

 

 

商品を魅力的にみせる画像カルーセル・スライダー

See the Pen
Product Showcase UI
by Aysenur Turk (@TurkAysenur)
on CodePen.

 

 

立体的なキューブ状にくるくる切り替わるスライダー

See the Pen
Cards Carousel on 3D Cube – CSS Only
by MOZZARELLA (@TheMOZZARELLA)
on CodePen.

 

 

縦横無尽に移動できる無限スクロール

WebGLテクノロジーを駆使した、なめらかな動きが特長のグリッドレイアウト。

See the Pen
Infinite scrollable and draggable (WebGL)grid
by jesper landberg (@ReGGae)
on CodePen.

 

 

どんなデザインにも合わせやすいシンプルなスライダー

See the Pen
Slideshow Vanilla JS w/ CSS Transition
by Riley Adair (@RileyAdair)
on CodePen.

 

 

本のようにクリックで左右に見開くアニメーション

See the Pen
page flip
by Jake Albaugh (@jakealbaugh)
on CodePen.

 

 

CSS transition各プロパティ早見チートシート

プロパティの違いによって、どのように動きに変化が出るのかリアルタイムで確認プレビューできます。右下の「Compare」ボタンで比較してみましょう。

See the Pen
Twisting
by Adir (@Adir-SL)
on CodePen.

 

 

SNS向けサムネイルをAIが自動で生成するまで

See the Pen
Generative + Customisable SVG Social Images!
by George Francis (@georgedoescode)
on CodePen.

 

 

美しいグラデーションをアニメーションさせる方法

ほんのおわずかなCSSの記述で表現できるアニメーションテクニック。

See the Pen
Pure CSS Gradient Background Animation
by Manuel Pinto (@P1N2O)
on CodePen.

 

 

ユーザー離脱を防ぐフォーム入力向けスニペット

See the Pen
Focusss
by Hakim El Hattab (@hakimel)
on CodePen.

 

 

CSS flexboxで区切り線を実装する方法

レスポンシブ対応の区切り線を描くCSS小技テクニック。

See the Pen
Flexbox Dynamic Line Separator
by Ahmad Shadeed (@shadeed)
on CodePen.

 

 

サムネイル@ : Stand with Ukraine by Halo Lab – Dribbble