この記事では、ホームページの作成やウェブサイト制作のアイデアを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。
Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりです。
ブラウザ上でHTML,CSS,JavaScriptのコードを編集しながら、リアルタイムで表示を確認できるのもポイント。
画面右下にある「Return」キーをクリックすることで再読み込みでプレビューできます。
コピペで簡単！Webサイトを素敵にする最新HTMLスニペット23選
マウスカーソルを合わせるとぐにゃりと歪み、クリックでグリッチ効果も演出したスライダー。Kinetic Sliderプラグインを利用しています。
See the Pen
Liquid Transition Effect by Aysenur Turk (@TurkAysenur)
on CodePen.
Three.js — product configurator & glass material
立体的に回転するガラスコップに透けて文字テキストが表示される、Three.JSプラグインを利用したスニペット。
See the Pen
Three.js — product configurator & glass material by Ksenia Kondrashova (@ksenia-k)
on CodePen.
文字テキストの中をユラユラと揺れる様子をCSSで表現しています。
See the Pen
Wavy Text Effect by Ale (@pokecoder)
on CodePen.
9-Tipps: #8 pseudo element for fancy text-decoration
文字テキストにギザギザ下線をCSSのみで追加できるお手軽テクニック。
See the Pen
9-Tipps: #8 pseudo element for fancy text-decoration by Nils Binder (@enbee81)
on CodePen.
くるくると回転する文字テキストのつくり方、GSAPプラグインで実装中。
See the Pen
CSS3D Turn Animation | GSAP by Sikriti Dakua (@dev_loop)
on CodePen.
アルファベットにカーソルを合わせると、立体的に飛び出す３DエフェクトをCSSで再現した面白コンセプト、ロゴや見出しタイトルなどに利用できそう。
See the Pen
iDKHOW Razzmatazz Cover CSS by Carter Lovelace (@carterfromsl)
on CodePen.
スクロールすると最初は右へスライドし、表示されたコンテンツが通常の縦スクロールできるCSSレイアウトテクニック。スマホでは通常の縦スクロールのみで対応。
See the Pen
Huge Header Journal by kirsten allen (@kirstenallen)
on CodePen.
直感的に配色をえらぶことができるカラーホイール、クリックしたときのグラデーションの変化が美しいです。
See the Pen
Color Wheel Satisfaction by David A. (@meodai)
on CodePen.
配色の数の他に、hslやlabカラーなどをつかったより複雑な色の組み合わせを自動で生成できるツール。
See the Pen
color scaler by David A. (@meodai)
on CodePen.
使いやすいサイドバー向けナビゲーションメニューのコンセプトデザイン。ダークモードにも対応しており、パネル開閉もワンクリック。
See the Pen
Sidebar Interaction by Aybüke Ceylan (@aybukeceylan)
on CodePen.
Animated BottomBar Experiment (CSS Transitions only)
スマホ向けナビメニューの動きをCSS Transitionのみでスタイリング、５つのデモが用意されています。
See the Pen
Animated BottomBar Experiment (CSS Transitions only) by Chris Bautista (@chrisbautista)
on CodePen.
何気ない読み込み画面と思いきや、見事なトリックを決めるプリローダー。見ていて飽きないデザインは、待ちのストレス軽減にも効果的。
See the Pen
Skateboard-Like Preloader by Jon Kantner (@jkantner)
on CodePen.
脱線してピンボールのように跳ねてしまったプリローダー、どちらもCSSのみで表現されています。
See the Pen
Loading Goes Off Track by Jon Kantner (@jkantner)
on CodePen.
Pure CSS Mario 64 – 3D – No JavaScript!
JSなど使わずCSSのみで表現された人気キャラクター。マウスカーソルに追従した動きが素敵でｓ．
See the Pen
Pure CSS Mario 64 – 3D – No JavaScript! by Ben Evans (@ivorjetski)
on CodePen.
クリックしようとすると、ユラユラと文字が乱気流のように動き出すボタン。
See the Pen
Turbulent Buttons by Adam Kuhn (@cobra_winfrey)
on CodePen.
七色にキラリと輝くボタンデザインは、ウェブサイトでもインパクトがありそう。
See the Pen
Sketch Button by Aaron Iker (@aaroniker)
on CodePen.
ボタンをクリックすると、、思わず見入ってしまうアニメーションでユーザーを飽きさせません。
See the Pen
Fun Submit Button! by Matthew Greenberg (@mattgreenberg)
on CodePen.
ボタン系スニペットは別途まとめています、こちらも参考にどうぞ。
Plucky: a standing wave underline
ボヨンとした独特な動きのリンクホバーアニメーション。
See the Pen
Plucky: a standing wave underline by Noah (@noleli)
on CodePen.
Checkbox Animations With Indeterminate State
チェックボックスに印を入れると、しゅるしゅると素早いアニメーション付きで分かりやすく表示されるマイクロインタラクション。
See the Pen
Checkbox Animations With Indeterminate State by Jon Kantner (@jkantner)
on CodePen.
立体的にOn/Offの切り替えができるトグルスイッチ、アイデアに脱帽です。
See the Pen
Toggle 3D by Adir (@Adir-SL)
on CodePen.
Infinite scrollable and draggable (WebGL)grid
上下左右どちらにも無限でスクロールとドラッグができるグリッドレイアウト、こちらもGSAPをつかったデモ。
See the Pen
Infinite scrollable and draggable (WebGL)grid by jesper landberg (@ReGGae)
on CodePen.
Dan Flashes Complicated Shirt Generator
クリックするたびに全く新しいパターン柄のシャツを表示する、AIテクノロジーを駆使した未来のツール。
See the Pen
Dan Flashes Complicated Shirt Generator by Adam Kuhn (@cobra_winfrey)
on CodePen.
制限時間内に画面上に散らばった星マークを集めるミニゲーム。十字キーで移動でき、時間が経つにつれて移動できるマス目が消滅していきます。
See the Pen
bot, dots, stars by Tom Miller (@creativeocean)
on CodePen.
Scrolling rainbow – GSAP ScrollTrigger & ScrollSmoother
マウススクロールに合わせてレインボーカラーの3Dシェイプが画面中央を駆け巡るアニメーション。
See the Pen
Scrolling rainbow – GSAP ScrollTrigger & ScrollSmoother by Fabio Ottaviani (@supah)
on CodePen.
