ホームページやウェブサイトを制作するなかで、「この作業は苦手」「いつも〇〇でつまづく」など日々格闘しているひとも多いでしょう。 この記事では、そんな面倒なWeb制作を楽にするお役立ち最新オンラインツールをまとめてご紹介します。 頭を抱える配色えらびから、おしゃれイラストのダミー生成ツールや、商用利用もできるHTMLテンプレートなど、時間のかかっていた作業を時短できる新サービスがぞくぞく増えています。 自分だけの最強ワークフロー術として、この機会に活用してみてはいかがでしょう。 カテゴリごとに整理しています、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新
この記事では、ウェブデザインの仕上がりをワンランクアップする最新HTML／CSSスニペットをまとめてご紹介します。 掲載しているほとんどの作品が、レスポンシブ対応となっており、コードを直接コピペできるのも特長です。 CSSのあまり知られていない小技テクニックから、2022年のWebデザイントレンドを意識したスニペットや、魅力的なアニメーションなどがずらり揃います。 昨年人気の高かったベスト・スニペット100や、一発コピペできるCSSボタン、すごいCSSアニメーションなどと一緒にチェックしてみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 コピペできる！Webサイトがかっこよくなる最新HTMLスニペットまとめ ホバーで文字テキストが分割されるエフェクト See the Pen Split animation on hover with
UI Interactions
copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transform 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-
コピペで簡単！ボタンやテキストリンク、アイコンで使えるCSSのさまざまなアニメーション -CSSeffectsSnippets
ボタンやテキストリンク、アイコン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 CSSのエフェクトはスニペットに登録しておくと、すぐに使えて便利です。
コピペで簡単に使用できる、HTMLとCSS（複雑なものはSVG）で実装されたWebサイトやスマホアプリ用のローディングアニメーションを紹介します。 さまざまなローディングやスピナーが揃っていますが、画像は一切使用されていません。必要な時にさくっと実装できるので、スニペットに登録しておくと便利です。 下記は静止画ですが、もちろん全部アニメーションで動きます。 Loaders -UI Ball Loaders -GitHub ほかにもCSSで実装されたローディングをチェックしたい人は、下記もどうぞ。 CSSで実装されたローディング・スピナーのアニメーションのまとめ UI Ballのローディングはすべて1Kb未満の超軽量で、依存関係はゼロなので、HTMLとCSSをコピペするだけで簡単に使用できます。カラー・サイズ・アニメーションの速度などはCSSで簡単にカスタマイズできます。 MITライセンスで
Web制作者におすすめ！ Win, Mac対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
Web制作者・デベロッパー向けに、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャーを紹介します。 macOS, Windows対応のアプリで、Web制作のさまざまな言語をサポートしています。日本語の入力など、日本語環境でも問題なく利用できます。エディタにはAceが使用されており、非常に快適で、高速に動作します。 massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 11.0+, Windows 10,11をサポート、Linuxも近日サポート予定です。 2年ほど前にv1.0がリリースされたときに紹介
ホームページを制作するときに、何度も繰り返し利用するコードは、スニペットとして整理しておくのがオススメです。 スニペットとは「切れ端」「断片」という意味で、コピペで簡単に再利用できるテンプレートのようなもの。 この記事では、コピペで使える便利な最新HTML／CSSスニペットをまとめてご紹介します。 ブラウザ上でHTMLやCSSのコードを編集しながら、リアルタイムでプレビューを確認できるのもポイント。 画面右下にある「Return」キーをクリックすることで、再読み込みでプレビューできます。 コピペできる、保存しておくと便利なHTMLスニペットまとめ 水平方向に無限スクロールするアニメーション 左右どちらへもスクロールするCSSアニメーションで、両サイドはグラデーションでフェードアウトしています。 See the Pen Infinite Scroll Animation by Yoav Ka
Webデザインをするとき、どんなデザインや仕掛けを採用したらよいか、迷うというひとも多いのではないでしょうか。 今回は印象に残るウェブデザインを表現できる、最新のHTMLスニペットをまとめてご紹介します。 CSSで表現できる最新テクニックから、複雑であっと驚くデザインまで、CodePenで話題のスニペットを中心にセレクト。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、まずはやりたいことを試してみませんか。 コピペで簡単！他と差のつくHTML/CSSスニペットまとめ キラキラに輝く立体的なクレジットカード クレジットカードの向きを変えることで、キラリと輝くグリッターデザインを施した素敵スニペット。 See the Pen Responsive, Glittery Bank Card by Simon Goellner (@simeydotme) on CodePen.
この記事では、HTMLとCSSを中心にデザインされた、思わず押したくなる最新ボタンエフェクト用コードスニペットをまとめてご紹介します。 コンテンツに注目を集めたいときに最適なテクニックが中心で、CSSのみでスタイリングできるアニメーションエフェクトも手軽にコピペで利用できます。 ウェブがますます進化し、ネット回線も高速になってきたことで、これまではむずかしかった多彩なアニメーションなど、スタイリングの幅がグッと広がっています。先日紹介した「ニューモーフィズム」の新トレンドも参考にしてみると良いでしょう。 ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ コピペで簡単実装！押したくなるボタンエフェクト用HTMLスニペットまとめ Button Hover Effect 疑似要素を左右に配置し、アニメーションで合体させるCSSを使ったテクニック。
HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。 HTML5基本テンプレート 新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無名のドキュメント</title> <meta name="description" content="メタディスクリプションを記述します。"> <link rel="stylesheet" type="text/css" href="theme.css
Ready-to-use Tailwind CSS blocks
ある日の弊社 社長「お〜い、やめ太郎」 ワイ「なんでっか、社長？」 社長「今度作るショッピングサイトの件なんやけど」 社長「ドラッグ＆ドロップ機能を実装することになったから」 社長「それをやめ太郎にお願いしたいんや」 社長「やめ太郎、やったことあるか？」 ワイ「どどどドラッグ！？」 ワイ「あるわけないやないですか・・・！」 ワイ「そんなもの販売して万が一・・・」 ハスケル子「やめ太郎さん、違いますよ」 ハスケル子「ドラッグ＆ドロップでしょ」 ハスケル子「マウスで掴んで移動させるやつです」 ワイ「ああ、そっちか」 社長「やめ太郎、できるか？」 ワイ「もちろんですわ」 ワイ「前職でもドラッグやってましたから、余裕ですわ」 社長「よ、よろしく頼むわ」 レッツJavaScript ワイ「確かドラッグ＆ドロップを実装するときは」 ワイ「マウスを動かしたときにマウスポインタの座標を取得できるようにして
配色はデザインにおいて欠かせない重要な要素です。しかし、配色がなかなか決まらずに悩んでしまったという経験は、誰しも一度はあるのではないでしょうか。 今回は、Webデザイン制作で便利な配色カラーパレットに関するHTML/CSSスニペットをまとめてご紹介します。 美しいグラデーションやクリックするだけで配色をコピーできたり、配色が苦手なひとでもボタンひとつで作成できる自動生成ツールなど、色に困ったときに使いたい便利なHTMLスニペットが揃います。 よ手軽な配色ツールをお探しのひとは、以下の記事も参考にしてみてはいかがでしょう。2020年の最新ツールも追加アップデートしています。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ Webデザイン配色は怖くない！制作で便利なHTML/CSSカラースニペットまとめ Gradients Collection Pr
Google、検索結果のスニペットを制御するための新しいrobots metaタグとHTML属性を導入
[レベル: 上級] 検索結果に表示されるスニペットをより細かく制御する仕組みを提供することを Google は発表しました。 専用の robots meta タグおよび HTML 属性の 2 とおりの方法を利用できます。 スニペット制御用の robots meta タグ robots meta タグでスニペットをページレベルで制御できます。 以下の 3 種類のコンテンツに利用できます。 テキスト 画像 動画 nosnippet nosnippet タグは、テキストのスニペットを検索結果に表示させません。 なおこの robots meta タグは新しくありません。 以前から利用できます。 <meta name="robots" content="nosnippet"> max-snippet:[number] max-snippet タグは、テキストスニペットの文字数を指定します。 [num
Please log in (or register) to post a dweet (copy-paste the code somewhere safe to save it meanwhile) u(t) is called 60 times per second. t: Elapsed time in seconds. S: Shorthand for Math.sin. C: Shorthand for Math.cos. T: Shorthand for Math.tan. R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5) c: A 1920x1080 canvas. x: A 2D context for that canvas.
[レベル: 上級] 強調スニペットに引用されたウェブページを通常検索に繰り返し表示しないようにGoogle は先日変更を加えました。 ただし、この仕様変更は検索結果の 1 ページ目だけに適用されていました。 検索結果の 2 ページ目以降であれば、強調スニペットに引用されていたとしても、そのウェブページの URL が再度検索結果に出てくることがありました。 ところが、昨日あたりからさらに仕様が変わったようです。 強調スニペットに引用された URL は 2 ページ目であろうが 3 ページ目であろうが 4 ページ目であろうが、通常の検索結果には完全に出てこなくなりました。 このさらなる仕様変更は、Yahoo! 検索で悲劇をもたらすことがあります。 ヤフーでは出てこない強調スニペット Yahoo! は Google の検索システムを利用して検索サービスを提供しています（提携が決まってからもう 10
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかも、CSSのみで表現できるスニペット多数で、コピペで利用できます。 今後のプロジェクトに魅力的なWebテクニックを活用してみましょう。 CSSで実装できる、最新HTMLテクニック・スニペットまとめ iPhone 15 Pro紹介ページのCTAボタン コンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。 See the Pen Apple Style CTA Reveal with CSS
vue-interactive-paycardはVue.jsを使ったクレジットカード情報入力フォームです。上は動作サンプルです クレカのカード会社自動認識も可能で、スムーズでインタラクティブに動作します。カード情報は一部伏せられる親切設計です よく見るUIですが、動きが好みでユーザーにも分かりやすい印象だったので備忘録。MITライセンスの元、ソースコードが公開されています vue-interactive-paycard
CodeSpeedyはVisual Studio Codeで使うコードスニペットを管理できるデスクトップアプリです。WindowsとMac用が用意されています。 最初から備わっているスニペットコードマネージャはJSONで管理しにくいので簡単に同期できて管理しやすい軽量アプリを作成したのだそうです。 使い方も機能も極めてシンプルで使いやすく、標準のスニペット管理のGUIアプリ的な感覚で使えるのではないかと思います。需要が分からないため、まだOSSにはしていないそうです。 CodeSpeedy
SmolCSS
\n","html_pre_processor":"none","css":"\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n/* Remove default margin */\nbody,\nh1,\nh2,\nh3,\nh4,\np {\n margin: 0;\n}\n\n/* Set core body defaults */\nbody {\n min-height: 100vh;\n text-rendering: optimizeSpeed;\n line-height: 1.65;\n padding: 2rem;\n background-color: #f5f2f7;\n color: #29344B;\n font-family: -apple
Ankerさんありがとう。デスク配線が片付く12 in 1モニタースタンドがほぼ1万円引きはおかしい #楽天5のつく日
GitHub - bradtraversy/design-resources-for-developers: Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vue.jsでできること8選。凄さが分かる実用例スニペット集 - Workship MAGAZINE(ワークシップマガジン)
最もよく使われているJavaScriptのフレームワークのひとつに、Vue.jsがあります。 Vue.jsを使えば複雑なユーザーインターフェイスも比較的簡単に構築でき、すでにHTML/CSSやJavaScriptの知識があるならばそれほど学習コストもかかりません。 Vue.jsは一枚板なフレームワークとは違い、部分ごとに少しずつ適用でき、また他のライブラリと組み合わせて使用できます。高い柔軟性をもち、インターフェイスを構築する上での可能性を広げてくれるのです。 ではこのオープンソースフレームワークを使うことで、どんなことができるのでしょうか。この記事ではCodePenのアーカイブから厳選した、パワフルで思わず目を引く8つの実用例をご紹介します。 1. カーソルで線を描く 以下のスニペットのように、Vue.jsを使えば通常のボタンクリックを超えたインタラクティブなUIが作成できます。 スクリ
2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 世界でもっとも話題となった作品がこちら HTMLなどのコードを、ブラウザ上で確認ができ、公開や共有もできる開発サービスCodepen（コードペン）。 この記事では、2022年に特に人気の高かったHTMLスニペットを、ランキング形式でまとめた The Most Hearted of 2022の中から、特に印象に残った、実用性の高い作品をご紹介。 CSSのみで表現されたお手軽なHTMLスニペットから、オドロキのユーザー体験を提供したり、CSSアニメーションなどにも注目が集まっています。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Click To Z
[レベル: 上級] 強調スニペットとして引用されたウェブページを通常の検索結果 1 ページ目に繰り返し表示しないように Google は仕様変更しました。 これまでは、強調スニペットに引用されているページが、同じ検索結果にもう一度表示されることがありました。 If a web page listing is elevated into the featured snippet position, we no longer repeat the listing in the search results. This declutters the results & helps users locate relevant information more easily. Featured snippets count as one of the ten web page listings we
Beeftext - Windows用のスニペット管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 仕事中、繰り返し使う文面であったり、よく使う関数があります。それらをメモしておくと便利です。そして必要な時に検索してコピー&ペーストすれば仕事の効率が大幅にアップするはずです。 今回紹介するBeeftextもそんな短文、スニペットを管理するソフトウェアです。 Beeftextの使い方 新しいスニペットを記載します。 スニペット一覧です。グループ管理できます。 設定です。 Beeftextはショートカットキー操作が基本で、さっと立ち上げて検索し、そして文字列をコピーするといった一連の操作をショートカットキーでできます。Webベースでなく、GUIアプリケーションなのも使いやすい点です。 BeeftextはC++製、Windows用のオープンソース・ソフトウェア（MIT License）
スタイリッシュなデザインのハンバーガーメニューのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 ハンバーガーメニュー（三本線のメニュー）はメニュー表示の定番となっていて実装することも多いと思います。モバイルファーストの時代になり限られたスペースを有効活用するために生まれたデザインです。本記事ではフォームの中でも「ハンバーガーメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 ハンバーガーメニューアイコンの多彩なデザイン・動作がよく分かるCSSデザイン例。シンプルな三本線のハンバーガーメニュー。クリック時の多彩なアニメーション。See the Pen CSS Menu Icons by Naoya (@
開発をしていてプロジェクトをまたいで繰り返し使うようなコードはスニペットとして登録しておくと便利です。ライブラリ化するまでもないコードだったり、Webブラウザの開発者ツールで頻繁に実行するコードもスニペットにしておくと便利です。 今回紹介するmassCodeはマルチプラットフォームで使えるスニペット管理となっています。 massCodeの使い方 メイン画面です。3ペインの画面構成になっています。 言語を選んでハイライトもできます。 フラグメントを使って、一つのスニペットに複数のコードを登録できます。 検索はハイライト機能付きです。 massCodeはスニペットのフォルダ管理、お気に入り登録ができます。コードはクリック一つでクリップボードにコピーできます。Gistに登録するのもいいですが、社内用のコードであればローカルにあった方が安全ですし、すぐに使えるのが便利です。 massCodeはVu
表示させたい記事の合計件数を指定 先頭固定した記事を表示 先頭固定した記事数を表示させたい記事の合計件数から差し引き→通常のループへ 通常ループから先頭固定した記事を省き、残りの数の記事を表示 <?php $list_cnt = 6; //表示させたい記事の合計件数 $sticky = get_option('sticky_posts'); //先頭固定の記事 if ( !empty($sticky) ) $list_cnt -= count($sticky); //先頭固定の記事がある場合は、その件数を「$list_cnt」の値から引く if ( count($sticky) > 0 ): $the_query = new WP_Query(array( 'post_type'=> 'post' , 'cat'=> 4, 'post__in' => $sticky, ));?> <?ph
最近はギガ単位のデータをダウンロードすることもさほど珍しくはなくなってきましたが、ネット上の大容量のデータを受信してサービスが動作するまでに欠かせないのがローディング・アニメーションだったりします。 今回はこのローディング・アニメーションについて良さそうなものをピックアップしてみましたので、ぜひともチェックして使ってもらえればです。 関連：使える！CSSアニメーション 20選 ちょっとクール CSS loading animation 12 CSSだけで描かれたものです。 ゲームで見かける Rotate / Pulse Loading Animation ゲームで見かけそうなローディングです。 ヘキサゴンアニメーション overwatch loading by css3 ローディングでなぜか見かけることの多いような気がする六角形のアニメーションです。 CSSのみ Cube Flipping
スタイリッシュなデザインの区切り線・水平線（hrタグ）のCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 文章やコンテンツの区切りでつかわれるhrタグ。文章をたくさん扱うサイトなどでは、利用するユーザにとってもひと目で区切りがわかるので、とても重要です。 一方でhrタグは仕様上シンプルになりがち。カッコいいデザインにするために、hrタグ以外を使って水平線を表現しているサイトも多く見受けられます。本記事ではフォームの中でも「区切り線・水平線」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 まずは基本！シンプルでわかりやすいhrタグ要素のCSSデザイン例。基本的なhrタグのバリエーション一覧 その①See the
Yoast SEOプラグインのスニペット変数ドキュメント
スニペット変数を使ったメタディスクリプションの詳しい設定方法はこちらの記事をご参照ください。 ディスクリプションに使えるスニペット変数まとめ表 snippet variables Yoast SEOプラグインが予め下記のようなスニペット変数を用意してくれています。 変数名 （英・日） かんたんな説明
A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units. One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t have a vertical scrollbar. If it does have a vertical scrollbar, then 100vw is t
Alfred 4のスニペットで使えるプレースホルダー機能
以前スニペット機能に関しての基本的な解説はしたのですが、今回はスニペット内で使えるプレースホルダー（正式名称：Dynamic Placeholders）についてまとめておきます。 スニペット追加時の「Snippet:」内に波括弧{}で囲まれた特定の文字列を入れておくことで、日付やクリップボードなどの情報を入れた状態でスニペットを発火できるようになります。 プレースホルダーの追加は左下にある{}アイコンをクリックして選択します。 日付関連「Date and Time」内のプレースホルダーは、日付や時間に関するプレースホルダーがまとめられています。
SmolCSSはモダンなCSSを使ったレイアウトのコードスニペットを紹介するプロジェクトサイトです。 古いCSSをモダンなCSSに置き換えるヒントを紹介するModern CSS Solutionsの運営者の方が始められたプロジェクトで、短いCSSコードでよく採用されるレイアウトを書く方法を伝授してくれます。 まだ数はそう多くありませんが、これからも更新し続ける予定だそうなので今後が楽しみですね。尚、Githubでもコードは公開されています。 SmolCSS
CodeSpeedy
CodeSpeedy is a simple tool to manage your code snippet and sync to your Visual Studio Code immediately.
thiscodeWorksは任意のスニペットコードを手軽に保存、共有、管理できるWebサービスです。ブラウザ拡張を併用する事でより管理が捗ります。拡張機能を使う事を前提のサービスとも言えそうです。 ユーザー登録は必要ですが、拡張機能を使う事で任意のWebサイトのコードやStockoverflow、Githubなど様々なWebページ内のコード部分に保存ボタンが出現し、簡単に登録できるようになります。 登録したコードは管理画面でタグ付けなどの管理が出来る他、VSCodeに登録したり他者と共有したり画像化してエクスポートしたりembedしたりできます。 ユーザー登録は勿論、現在は全ての機能が無料で提供されておりクレジットカード等の設定も不要です。 開発者はプログラミングを独学で学んだパキスタンの方(Twitter)のようです。どんなビジネスモデルか分からないのは気になりますがスニペットコードマネ
VSCodeでスニペットを作成する
VSCodeでよく使う文があるならスニペットを使用するのが便利です。 標準で用意されていたり拡張機能をインストールすることで使用できますが、 ユーザー独自でもスニペットを作成できるのでそれについての説明をしていきます。 スニペットファイルを用意する。 VSCode左下の歯車アイコンからユーザースニペットを選択し、スニペットを登録したい言語のjsonファイルを選択すると初期では以下のようなファイルが開かれます。 { // Place your snippets for cpp here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body wil
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
めっちゃ楽！面倒なWeb制作から救う最新オンラインツール44個まとめ
コピペできる！Webサイトがかっこよくなる最新HTMLスニペット38選
これならコピペで簡単！ HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball
コピペできる、保存しておくと便利なHTMLスニペットまとめ
コピペで簡単！他と差のつくHTML/CSSスニペット30選まとめ
コピペで簡単実装！押したくなるボタンエフェクト用HTMLスニペット44個まとめ
コーディング作業が爆速に！ すぐ使える便利なHTML5スニペット15個まとめ
Tailblocks — Ready-to-use Tailwind CSS blocks
マルチカーソルで、VSCodeのスニペットをもっと便利に。 - Qiita
Webサイト配色のお悩み解決！制作で便利なHTML/CSSカラースニペット21個まとめ
Top dweets by u/KilledByAPixel | Dwitter
強調スニペットと通常検索の重複解消の余波、ヤフーからの検索トラフィックがゼロになる😱
CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版
Vue.jsを使ったクレジットカード情報入力フォーム・「vue-interactive-paycard」
Visual Studio Codeで使うコードスニペットを管理できるデスクトップアプリ・「CodeSpeedy」
定型文を登録・共有。文書作成を快適にするchrome機能拡張 | ライフハッカー・ジャパン
2022年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
Google、強調スニペットと通常検索結果の同一URLの重複掲載を廃止。ただし検索結果1ページ目に限る
ハンバーガーメニューをおしゃれにするCSSスニペット9選。アイコンからすぐ実用できるサンプルまで | KodoCode
massCode - マルチプラットフォームで使えるスニペット管理 MOONGIFT
「先頭に固定表示」を指定した記事→その記事を除いてループ表示【WordPress】 ｜ ホームページ制作覚書
イケてるローディング・アニメーション25選 | SONICMOOV LAB
区切り線・水平線をおしゃれにするCSSスニペット10選。hrタグ要素だけじゃない！ | KodoCode
【コピペで簡単実装】アニメーションがカッコイイ！送信ボタン用アニメーションCSS 9選【HTML/CSS/submitボタン】
CSS fix for 100vh in mobile WebKit | CSS-Tricks
モダンなCSSを使ったレイアウトのコードスニペットを紹介する・「SmolCSS」
任意のスニペットコードを手軽に保存、共有、管理できる・「thiscodeWorks」
【コピペで簡単実装】jQueryを使ったフルスクリーン表示メニュー【レスポンシブ/アニメーション/オーバーレイ】
