サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】
ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。 任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。 フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。 コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧 万能CSSアニメーション Animista 基本となる
Web制作を変える！2021年の便利オンラインツール・ベスト100選
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に
VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に マイクロソフトは、コードエディタのVisual Studio Code（以下VS Code）とWebブラウザのMicrosoft Edgeを組み合わせて、Webアプリケーションの開発を効率的に行えるVS Codeの拡張機能「Microsoft Edge Tools for VS Code」正式版のリリースを発表しました。 Are you a fan of the browser developer tools but not a fan of switching from editor to browser to use them? We heard you! Today we moved the "Mic
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
任意のWebサイトのスクリーンショットを撮れるAPI・「ApiFlash」
ApiFlashは任意のWebサイトのスクショを撮れるシンプルなAPIです。使い方も非常に簡単です URLとAPIキー、任意のパラメーターのみで完結できる仕様となっていてレスポンシブWebデザインにも対応可能です レンダリングはChromeが使われており、パラメーターを自動で付与してくれる簡単なURL生成ツールも備わっています 使ってみる動作サンプルは記事冒頭のSSです。本記事のスクショはApiFlashで作ってみました 流れとしてはユーザー登録し、管理画面に入るとAPIキーが発行されるので以下のように使えばOK https://api.apiflash.com/v1/urltoimage?access_key=【APIキー】&url=https://example.com/更にパラメーターを付ける事も出来ます https://api.apiflash.com/v1/urltoimage
Figma（フィグマ）とは？初心者でも分かるWebデザインツールの使い方
UIデザインやワイヤーフレームの作成に便利なデザインツールがほしいと思ったことはありませんか？Adobe XDやSketchなどがメジャーなところですが、他にもインターフェースがわかりやすく、操作性と利便性の高いツールがいくつかあります。 今回紹介する「Figma（フィグマ）」は、それらに引けを取らず、さらに便利な機能も備えたツールです。Figmaがどのように役立つものなのか、使い方を初心者にもわかりやすいようにシンプルにまとめました。 ▼ディレクターとデザイナーで読みたい資料 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 Figma（フィグマ）と
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ
2015年4月1日 アクセシビリティ, 便利ツール, 色彩 以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。 ↑私が10年以上利用している会計ソフト！ アクセシビリティとは？ 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするの
荒れ果てたWordPressコードを美しく整形してくれるツールまとめ
WordPressには、いくつかのプログラム言語が利用されています。 具体的には以下のような言語です。 PHP HTML CSS JavaScript（jQuery） 細かなことを言えば、他にも使用されているものはありますが、ユーザーが編集するものと言えば大体はこの4つです。 今回は、これら4つの言語のコードを綺麗に整形してくれるツールの紹介です。 コード整形ツールとは コード整形ツールとは、書き方の定まっていないプログラムコードなどを、記法を統一して綺麗に書き直してくれるツールです。 WordPressテーマ作成や、カスタマイズで、コードをググッてよそからコピペ編集で使うときなどに、自分に合った記法に変換して使えます。 例えば、以下のようなことを、まとめて行いたい時に使うと、手動でやるより編集時間を大幅に短縮できます。 コードに適切なインデントを自動で設定する インデントをタブからスペー
非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの＋αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
Web制作者向け便利ツール・参考デザインなどLIGブログ記事まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも〜こんにちはぁ！最近カナダから日本に戻ってまいりましたライター、のび太です。いや〜やっぱり日本はいいですね～。なんといっても牛丼が安くてウマい！！ さて、LIGではこれまでWeb制作者にとって役に立つ様々な記事が公開されましたが、かなり数も増えてきたので、今回はそれらを分野別にまとめてみました。 時間のない方も、ぜひ一旦ブックマークなどをしておいて、週末なんかに一気に読んでもらえたらいいと思ってます。この機会にWeb力向上を目指しましょう！ Web制作者に役立つ記事ジャンル別のまとめ Web制作者にとって便利ツールは欠かせませんよね〜。作業時間が何十、何百分の一にも短縮されることもあると思います。場面によって適切に使い分け、どんどん効率化を図っていきましょう。 ■Windowsユーザー必見！普段使い＆制作に役立つ便利ツール5選 https://liginc.co.jp/web/too
[M]フリーランスWEB屋な私のデザイン制作環境公開！WEBデザインを完成させるまでのツールまとめました | miMemo(ミメモ)
[M]フリーランスWEB屋な私のデザイン制作環境公開！WEBデザインを完成させるまでのツールまとめました こんにちは！みう(@miu0512)です。現在フリーランスの私がWEBデザインを行うのに使っているツールをまとめました。制作環境は人によって違いますので、一番大切なのは自分に合った環境を整えること！それでは大公開です。 iMacを購入するまでの間、WinとMacを交互に使っています。 家にあるデスクトップは27インチのWindows。ずっとWinだけで制作を行ってきたのですが、MacBook Airを購入してからMacに使いやすいツールが多いことを知り、今ではWinとMacを使い分けて作業をしています。iMac購入予定！ デザインは王道のこのツール！手放せません 昔は高価で手が出せなかったAdobeですが、今では毎月3,000円〜5,000円と手軽に使用できるようになりました。 Ado
![[M]フリーランスWEB屋な私のデザイン制作環境公開！WEBデザインを完成させるまでのツールまとめました | miMemo(ミメモ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/25f5c1da4fd2ae3627a02ec81bd6fcf40cdcf15f/height=288;version=1;width=512/https%3A%2F%2Fweb-mimemo.com%2Fwp-content%2Fuploads%2F2013%2F11%2FNKJ56_fudetoparetto.jpg)
「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。
オープンソースの集まりで1度しか実際にお会いしていませんが、お願いがあります。 富士通アクセシビリティ・アシスタンスというサービスが、2013年8月20日で提供終了します。つまり、あと20日。このソフトは視覚障がい者や色覚障がい者の方がどのように色を見ているかを確認できるツールです。Webサイト制作をしている人なら、今は必要なくても、いつか必要になるソフトです。 8月20日までにダウンロードすれば、8月21日以降もローカル環境で普通に使えるので、なんとかメディアで紹介して頂き、提供終了するまでに、少しでも多くの人に知ってもらいたいと考えています。 紙媒体だと、とても間に合わないのですが、ネット媒体なら、なんとかなるかも！と思い、お願いしたいと思いました。 視覚障がい者や色覚障がい者という障がいに興味がないかもしれませんが、外見では判断できない障がいなので、気付いていないだけなのです。 よか
角丸の作成・修正の強力な武器になる機能拡張 -Corner Editor | コリス
Corner Editor Corner Editorの主な特徴 Corner Editorのインストール Corner Editorの使い方 Corner Editorの主な特徴 旧版の全ての機能が使え、更に多くの機能を備えています。 直線で作成された角に角丸作成・修正ができます。 角を一つだけでも、複数同時でも、複数別でも簡単に角丸を適用できます。 角の種類は角丸だけでなく、計4種類のスタイルに増えました。 多角形にも対応しました。 一度設定した内容をセーブできるようになりました。 パスがスムースになりました。 各コーナーにラベルを付与できるようになりました。 Corner Editorのインストール インストールは簡単です。 ※Win/Mac共通です。 ダウンロードして解凍した「Corner Editor.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/
CSS Sprite Generator
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
WEB屋にとって便利なジェネレーター色々！最近のオススメも、昔から使ってきた物もまとめてご紹介！ | バンクーバーのうぇぶ屋
WEB屋を名乗って仕事をする以上、作業効率を考える事は必要最低限の努力だと言うお話は何度かこのブログでもさせて頂いてきました。 まぁしかし、ぶっちゃけ何が自分にとって作業効率に繋がるかはやってみないと分からないですよね。作業時間の見直しをするだけで効率化に繋がるかもしれないですし、ツールをもっと使いこなすことだったりするでしょうし、コミュニケーションを円滑にすることで作業効率につなげたりと、何が一番効率化に直結するかは人それぞれだと思います。 ただ、何度かこのサイトでもWEBサイトを作る上で便利そうなジェネレーターの存在を共有させて頂いてきましたが、こういうツールは知ってるのと知らないのとでやはり大きな差が出てくることはやっぱり多いと思います。特に最近はWEBに強いクライアントの存在も目立ってきて、自分だけじゃなく、お客さんにとっても、もしかしたらプラスになるジェネレーターの類も多いんじゃ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3アニメーションをブラウザ上で簡単に作成・編集できる『bounce.js』 | 100SHIKI
http://soufflecode.net/website/
Responsinator
WampServer, the web development platform on Windows - Apache, MySQL, PHP
