Advertisement

 

この記事では、ホームページの作成やウェブサイト制作のアイデアを増やす、コピペで使える最新HTML/CSSスニペットをまとめてご紹介します。

 

Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりです。

 

ブラウザ上でHTML,CSS,JavaScriptのコードを編集しながら、リアルタイムで表示を確認できるのもポイント。

 

画面右下にある「Return」キーをクリックすることで再読み込みでプレビューできます。

 

 

コピペで簡単!Webサイトを素敵にする最新HTMLスニペット23選

 

Liquid Transition Effect

マウスカーソルを合わせるとぐにゃりと歪み、クリックでグリッチ効果も演出したスライダー。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.

 

 

 

Wavy Text Effect

文字テキストの中をユラユラと揺れる様子を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.

 

 

 

CSS3D Turn Animation | GSAP

くるくると回転する文字テキストのつくり方、GSAPプラグインで実装中。

See the Pen
CSS3D Turn Animation | GSAP
by Sikriti Dakua (@dev_loop)
on CodePen.

 

 

 

iDKHOW Razzmatazz Cover CSS

アルファベットにカーソルを合わせると、立体的に飛び出す3DエフェクトをCSSで再現した面白コンセプト、ロゴや見出しタイトルなどに利用できそう。

See the Pen
iDKHOW Razzmatazz Cover CSS
by Carter Lovelace (@carterfromsl)
on CodePen.

 

 

 

Huge Header Journal

スクロールすると最初は右へスライドし、表示されたコンテンツが通常の縦スクロールできるCSSレイアウトテクニック。スマホでは通常の縦スクロールのみで対応。

See the Pen
Huge Header Journal
by kirsten allen (@kirstenallen)
on CodePen.

 

 

 

Color Wheel Satisfaction

直感的に配色をえらぶことができるカラーホイール、クリックしたときのグラデーションの変化が美しいです。

See the Pen
Color Wheel Satisfaction
by David A. (@meodai)
on CodePen.

 

 

 

Color Scaler

配色の数の他に、hslやlabカラーなどをつかったより複雑な色の組み合わせを自動で生成できるツール。

See the Pen
color scaler
by David A. (@meodai)
on CodePen.

 

 

 

Sidebar Interaction

使いやすいサイドバー向けナビゲーションメニューのコンセプトデザイン。ダークモードにも対応しており、パネル開閉もワンクリック。

See the Pen
Sidebar Interaction
by Aybüke Ceylan (@aybukeceylan)
on CodePen.

 

 

 

Animated BottomBar Experiment (CSS Transitions only)

スマホ向けナビメニューの動きをCSS Transitionのみでスタイリング、5つのデモが用意されています。

See the Pen
Animated BottomBar Experiment (CSS Transitions only)
by Chris Bautista (@chrisbautista)
on CodePen.

 

 

 

Skateboard-Like Preloader

何気ない読み込み画面と思いきや、見事なトリックを決めるプリローダー。見ていて飽きないデザインは、待ちのストレス軽減にも効果的。

See the Pen
Skateboard-Like Preloader
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

Loading Goes Off Track

脱線してピンボールのように跳ねてしまったプリローダー、どちらもCSSのみで表現されています。

See the Pen
Loading Goes Off Track
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

Pure CSS Mario 64 – 3D – No JavaScript!

JSなど使わずCSSのみで表現された人気キャラクター。マウスカーソルに追従した動きが素敵でs.

See the Pen
Pure CSS Mario 64 – 3D – No JavaScript!
by Ben Evans (@ivorjetski)
on CodePen.

 

 

 

Turbulent Buttons

クリックしようとすると、ユラユラと文字が乱気流のように動き出すボタン。

See the Pen
Turbulent Buttons
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

Sketch Button

七色にキラリと輝くボタンデザインは、ウェブサイトでもインパクトがありそう。

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

 

 

 

Fun Submit Button!

ボタンをクリックすると、、思わず見入ってしまうアニメーションでユーザーを飽きさせません。

See the Pen
Fun Submit Button!
by Matthew Greenberg (@mattgreenberg)
on CodePen.

 

ボタン系スニペットは別途まとめています、こちらも参考にどうぞ。

 

Webサイトにおける「ボタン」は、使いやすさと分かりやすさが重要です。このバランスがなかなか悩みどころで、いつも同じスタイルのボタンを色を変えて再利用、なんてことも
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。どのボタンをHTMLとCSSのみで作成されているので、手軽にコピペで利用でき

 

 

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.

 

 

 

Toggle 3D

立体的に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.

 

 

 

bot dots, stars

制限時間内に画面上に散らばった星マークを集めるミニゲーム。十字キーで移動でき、時間が経つにつれて移動できるマス目が消滅していきます。

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.