ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットを、定期的にまとめてご紹介しています。SVGを使ったアッと驚くアニメーションから、普段使いがしやすくなる小技テクニック、現在利用するデザイナーが増えているCSS Gridの可能性を探る実践向けスニペットまで、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。
2018年大本命！HTML/CSSコピペできる、参考にしたいスニペットまとめ
オークション落札と同時にシュレッダーをかけられた、Banksyアートのパロディ作品。額縁をクリックすると、お好みの画像をアップロードできます。
See the Pen Banksy Shredder by Lee Martin (@leemartin) on CodePen.
カラフルなポリゴンスタイルの動物型SVGロゴが、爆発しながら変化していくエフェクト。
See the Pen Low poly animals by Mikael Ainalem (@ainalem) on CodePen.
静止画のはずがマウスをホバーさせると犬の視線が動き出す、フェイク3Dテクニック。
See the Pen Fake 3D effect with depth map by Robin Delaporte (@robin-dela) on CodePen.
再生ボタンをクリックするとさまざまな組み合わせのグラデーションが変化するアニメーション。
See the Pen Experimental Gradient Editor by David A. (@meodai) on CodePen.
ランダムで表示される美しいグラデーションに、HEXカラーコードと色の名前が表示されています。
See the Pen “Random” color harmonies by David A. (@meodai) on CodePen.
How Many Steps Does It Take To Get From Me To You?
特定の2色を選択したら、お好みのステップ数に色を分けたグラデーションを作成でき、各色のHEXカラーコードもコピペ可能な便利ツール。
See the Pen How Many Steps Does It Take To Get From Me To You? by Jase (@jasesmith) on CodePen.
テキストリンクにホバーすると、グラデーションがアニメーションするCSS小技。
See the Pen Underline gradient animation by NickNoordijk (@NickNoordijk) on CodePen.
How do I get a custom colored underline that will span multiple lines?
鮮やかなグラデーションカラーを使ったリンク用ホバーエフェクトで、複数行にまたがる文字テキストにも対応できます。
See the Pen How do I get a custom colored underline that will span multiple lines? by Will King (@Wking) on CodePen.
リンクにホバーすると波線ウェーブが動き出すCSSアニメーションエフェクト。
See the Pen Link Effectz – Squiggle by Geoff Graham (@geoffgraham) on CodePen.
表示されたカードをクリックすると、これまでに走破した歩行数が、立体的な棒グラフで表示されます。
See the Pen 3D step counter card by Steve Gardner (@ste-vg) on CodePen.
瞬時に切り替わるテキストエフェクトだけでなく、まるで生きているようなマウスカーソルの動きにも注目です。
See the Pen Ink Cursor by Ricardo Mendieta (@mendieta) on CodePen.
カードを重ねた状態で、質問を進めていくユニークなレイアウトアイデア。
See the Pen Card stack tutorial animation by Brandon Ward (@brandondward) on CodePen.
3D CSS Grid Mondrian Compositions
ドロップシャドウをつかい奥行きをうまく表現した要素は、マウスホバーすると立体的に回転をはじめます。
See the Pen 3D CSS Grid Mondrian Compositions by Peter Barr (@petebarr) on CodePen.
CSSとSVGでゆらゆらと画面上を漂うラバエフェクトを演出しています。
See the Pen CSS / SVG Blobby Background by Cassie Evans (@cassie-codes) on CodePen.
スイッチをオンにすると、背景のSVGアイコンがアニメーションを開始するユニークなアイデア。
See the Pen SVG Cosmos Pattern by agathaco (@agathaco) on CodePen.
マジックペンで手書きした文字をSVGにし、アニメーションさせるCSSテクニック。
See the Pen Masking Path Animation by Envato Tuts+ (@tutsplus) on CodePen.
マウスホバーに応じて変化するテキストエフェクト8連発。
See the Pen Letter Hover Animations by Ryan Mulligan (@hexagoncircle) on CodePen.
Black Mirror Cracked Text Effect
See the Pen Black Mirror Cracked Text Effect by George W. Park (@GeorgePark) on CodePen.
シュルシュルと蛇のような動きをCSSアニメーションで表現したテキストエフェクト。
See the Pen Snakes – POP.svg by Steve Gardner (@ste-vg) on CodePen.
ぐるぐると回転する文字テキストエフェクト。
See the Pen Only CSS: Screw by Yusuke Nakaya (@YusukeNakaya) on CodePen.
Cascading text effects w/ Splitting + ScrollOut ✍️
フェードアウトやスライド、スワップなど各種テキスト用アニメーションエフェクトをまとめたコレクション。
See the Pen Cascading text effects w/ Splitting + ScrollOut ✍️ by Jhey (@jh3y) on CodePen.
SVGストロークをつかったアニメーションエフェクトを採用したロゴデザイン。
See the Pen SVG/Stroke Animation. by Mansoour (@Mansoour) on CodePen.
グリッチエフェクトを文字テキストに採用したサンプル例。
See the Pen glitch hello world by sean_codes (@sean_codes) on CodePen.
ページ送りボタンをクリックすると、下から雪男が、、。
See the Pen Yeti Hand Pagination by Darin (@dsenneff) on CodePen.
犬から猫へとぬるりとしたモーフィングアニメーションで変化します。
See the Pen HyperMorph 3000™ by Andreas Borgen (@Sphinxxxx) on CodePen.
Apple Watch Scroll Border | @keyframers 1.20.0
スクロールすると画像コンテンツが拡張されながら表示される、Apple公式ページで採用されたテクニックを再現しています。
See the Pen Apple Watch Scroll Border | @keyframers 1.20.0 by @keyframers (@keyframers) on CodePen.
Flexboxとならんでよく利用されているCSS Gridをつかい、立体的なレスポンシブ対応のショッピングギャラリーページを作成します。
See the Pen Isometric eCommerce CSSGrid by Andy Barefoot (@andybarefoot) on CodePen.
ポップアップで表示されるシンプルなギャラリー、随所に魅せるアニメーションエフェクトが素敵。
See the Pen Magnific Gallery V2 by Michal Niewitala (@mican) on CodePen.
先日リニューアルされたUberのオフィシャルサイトで利用されている、ナビゲーションメニューを完全再現したスニペット。
See the Pen Uber-like Navigation by creme (@creme) on CodePen.
CSSとSVGのみで表現できる、シンプルだけど有効的なアニメーションが満載のナビゲーションメニュー8連発。
See the Pen Flippin’ burgers by Mikael Ainalem (@ainalem) on CodePen.
Hamburger menu button w/handwriting effect
筆記体で書かれたOpenの文字が、クリックするとスルスルとCloseへと変化していくアニメーション。
See the Pen Hamburger menu button w/handwriting effect by Craig Roblewsky (@PointC) on CodePen.
メールアドレスの登録をさり気なくすすめるボタンエフェクト。
See the Pen Notify me by bertdida (@bertdida) on CodePen.
クリックするとふわりと浮かび上がり、消え去ってしまうボタンエフェクト。
See the Pen Hover Over Me Button by Harmandeep Singh (@hsdua2304) on CodePen.
Realistic 3D Image Flip Box, Flip Card, 3d Image hover, Kallyas WordPress Theme
マウスホバーで立体的に回転するカード型ホバーエフェクト、文字テキスト以外にもボタンなども設置できます。
See the Pen Realistic 3D Image Flip Box, Flip Card, 3d Image hover, Kallyas WordPress Theme by Nicola Mihaita (@nicolamihaita) on CodePen.
Star Wars Imperial Army’s Product Slider!
ドロップシャドウを使い、奥行き感たっぷりに要素をレイヤー状に重ねたイメージスライダーで、今後注目のデザイントレンド。
See the Pen Star Wars Imperial Army’s Product Slider! by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
サークル円を画面の中心に、マウスドラッグで遷移するイメージスライダー。
See the Pen Masked Circle Slider by Fabio Ottaviani (@supah) on CodePen.
中央にロゴを固定した、画面全体で展開するイメージスライダー。
See the Pen Owl Carousel stage slider by Clark Wimberly (@clarklab) on CodePen.
レスポンシブ対応でフレキシブルに開閉展開するイメージスライダー。
See the Pen Expanding flex cards by Zed Dash (@z-) on CodePen.
左横に設置されたボタンをクリックすると、ストレッチして伸びながら変化するイメージスライダー。
See the Pen Stretch Scroll by Nathan Taylor (@nathantaylor) on CodePen.
ブログを想定した、レスポンシブにも対応のイメージスライダー。新着エントリーの表示などにも最適です。
See the Pen Responsive Blog Card Slider by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
赤と青の水面に浮かんだマーブル模様が、絶えずアニメーションしながら変化するフィルタエフェクト。
See the Pen dynamic filters by Jesper Lauridsen (@justjspr) on CodePen.
右下のChangeボタンをクリックすると、ビデオ動画の上に重なったSVGレイヤーをアニメーションさせます。
See the Pen SVG Morphing by Fabio Ottaviani (@supah) on CodePen.
SVGを重ねてアニメーションさせることで、リアルな波の奥行き感を演出できるCSSテクニック。
See the Pen CSS & SVG Waves Animation by Ted McDonald (@tedmcdo) on CodePen.
水面がゆらゆらと揺れる様子を３Dで表現した作品で、マウスカーソルで水面を触ることができます。
See the Pen Ripple Mouse (with plasma) by Liam Egan (@shubniggurath) on CodePen.
スクリーン全体にカラフルなドット柄が飛散するアニメーションを、CSSのみで表現しています。
See the Pen Seeding by yuanchuan (@yuanchuan) on CodePen.
Vertically center in 3 lines of CSS
display: grid;プロパティを利用し、たった3行で要素の天地中央揃えできるテクニック。
See the Pen Vertically center in 3 lines of CSS by SMHutch (@Scott-Hutcheson) on CodePen.
まるで霧が出ているようなアニメーションをCSSのみでスタイリングしたテクニック。
See the Pen Pacific Northwest Fog by Thomas Vaeth (@thomasvaeth) on CodePen.
Opening screen for a banking app
指紋認証システムをモチーフにしたアニメーションエフェクト。
See the Pen Opening screen for a banking app by Kirill Kiyutin (@kiyutink) on CodePen.
CSS Reveal animation text and image
非表示のコンテンツがアニメーション付きで展開しながら表示される、最近良く見かけるテクニックのひとつ。
See the Pen CSS Reveal animation text and image by Anthony Fessy (@antho-fsy) on CodePen.
クレジットカード番号の入力をよりスムーズに行うことができるテクニック。
See the Pen Credit Card Payment Form by Adam Quinlan (@quinlo) on CodePen.
スライダーを調整することで、家の大きさや高さなどが、アニメーション付きでリアルタイムに変化していくSVGデザイン。
See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.
暗闇で震える雪男が、懐中電灯を照らしたその先で見つけたものは、。
See the Pen Yeti 404 Page by Darin (@dsenneff) on CodePen.
Periodic Table of Elements – HTML/CSS
科学の授業などで見かける、元素の周期表をCSS Gridプロパティを用いて見事に再現したスニペット。
See the Pen Periodic Table of Elements – HTML/CSS by Mike Golus (@mikegolus) on CodePen.
The handbook download animation
立体的に並べられた参考書やeブックのレイアウトにいかがでしょう。
See the Pen The handbook download animation by Yancy Min (@yancy) on CodePen.
ホバーするとブックマークできる、本をめくるようなさりげないエフェクト。
See the Pen Books Hover Animation by Yancy Min (@yancy) on CodePen.
世界的に人気のボードゲーム Monopoly を、CSS Gridプロパティを用いてそのまま再現したCSSテクニック。
See the Pen Monopoly board by John Coppola (@johnnycopes) on CodePen.
CSS-only directionally aware hover
マウスホバーに合わせてホバーエフェクトが変化するエフェクトを、CSSのみで実現したテクニック。
See the Pen CSS-only directionally aware hover by Giana (@giana) on CodePen.
トグルスイッチを飛行機のウィンドウ窓で表現した、CSSアニメーションを使った作品。
See the Pen Airplane window toggle by Comehope (@comehope) on CodePen.
Pure CSS Toggle Buttons | ON-OFF Switches
CSSのみでスタイリングされた、各種トグルボタン用エフェクトをまとめたコレクション。
See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.
こちらもCSSのみで表現された、立体的な3Dトグルスイッチ。
See the Pen 3D toggle – click it! by Ana Tudor (@thebabydino) on CodePen.
あの人気キャラクターをCSSで作成したトグルスイッチ。
See the Pen Totoro Toggle by Adam Kuhn (@cobra_winfrey) on CodePen.
鉛筆でチェックを入れた感覚をそのまま表現したユニークな作品。
See the Pen Pencil and Paper Checkboxes by Jon Kantner (@jkantner) on CodePen.
検索ボタンをクリックすると、スムーズでなめらかなアニメーションをつかって、入力フォームが出現します。
See the Pen Fancy input, CSS animation by Stanko (@stanko) on CodePen.
ToDoリストで完了したタスクを消去すると、スライスされるアニメーションエフェクトが。
See the Pen Slice list items by Aaron Iker (@aaroniker) on CodePen.
シンプルなコードのみでスタイリングされた、CSSローディングアニメーション8種類セット。
See the Pen 1 Element CSS Spinners by Paolo Duzioni (@Paolo-Duzioni) on CodePen.
Elite Dangerous Inspired Loader – Pure CSS
薄暗い暗闇にランプが点灯しているようなエフェクトをCSSで表現しています。
See the Pen Elite Dangerous Inspired Loader – Pure CSS by James Panter (@jpanter) on CodePen.
液体がドリップする様子をローディング読み込みにつかうアイデア。
See the Pen SVG Drip Loader by Chris Gannon (@chrisgannon) on CodePen.
SVGアイコンをつかい、パスに沿ってアニメーションさせるテクニックは、いろいろな用途に応用できそうです。
See the Pen Infinitely drawing icons by Mikael Ainalem (@ainalem) on CodePen.
スライドするオブジェクトを、他のオブジェクトがジャンプしながら避けているようなアニメーションが素敵。
See the Pen Jump and Slide by Steve Gardner (@ste-vg) on CodePen.
パンケーキをフライパンで焼いている様子を表現したCSSアニメーション。
See the Pen ‘Making pancake’ loader by Pawel (@pawelqcm) on CodePen.
カラフルなブロックをつかった、見ていて飽きないローディングアニメーションの好サンプル例、
See the Pen LEGO Loader by Chris Gannon (@chrisgannon) on CodePen.
レインボーカラーに並ぶドット柄が、伸縮ストレッチしながら、ハート型を描いています。
See the Pen Love is Love by yumeeeei (@yumeeeei) on CodePen.
ハロウィンシーズンに合わせてCSSのみでデザインされたイラストアニメーション。
See the Pen Happy Halloween by Mohan Khadka (@khadkamhn) on CodePen.
CSSのみでデザインされた、ピタゴラスイッチのような複雑な機械。
See the Pen Al Boardman’s The Machine by kittons (@airnan) on CodePen.
デートに行った彼女にメールするけど返信がない、そんな状況をCSSでスタイリング。
See the Pen She’s Ghosting You by Cassidy Williams (@cassidoo) on CodePen.
画面をクリックしようとすると、お店の外にいる屈強なバウンサーが、通路をふさぎます。
See the Pen The Bouncer at 403 by Cassidy Williams (@cassidoo) on CodePen.
CSSと絵文字飲みを使ってデザインされた、アニメーション付きのタウンマップ。
See the Pen 3D Emoji Town (Pure CSS) by George W. Park (@GeorgePark) on CodePen.
レトロなシューティングゲームを再現したHTMLスニペット。クリックで玉を発射できます。
See the Pen RetroFighter Gunship by Rainner Lins (@rainner) on CodePen.
