商用利用無料！さまざまなUIデザインに適した、SVG完備の美しく精密なアイコン素材 -SWM Icon Pack
企業サイト、オンラインショップ、アプリ、ブログ、プレゼンなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるSWM Icon Packを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。また、スタイルは3種類（アウトライン・ブロークン・デュオトーン）で、美しく精密にデザインされたアイコンです。 Freebie SWM Icon Pack アイコンの特徴 アイコンのダウンロード ダウンロードできるアイコンの種類 アイコンの特徴 SWM Icon Packは、WebサイトやスマホアプリのUIに使用されるSVGアイコンのセットです。アイコンは24pxのグリッドに基づいたピクセルパーフェクトで、ベクターで作成されています。 Freebie SWM Icon Pack アイコンは8つのカテゴリに、全296種類。
Google、すべてのリッチリザルトの構造化データでSVGとWebPをサポート
[レベル: 上級] リッチリザルト用の構造化データで設定する画像ファイルには、画像検索がサポートする画像フォーマットをすべて利用できます。 これには、SVG や WebP も含まれます。 画像検索がサポートする画像フォーマットはすべて構造化データで利用可能 AMP 記事と組織ロゴで設定する画像に関しては、SVG や WebP をしばらく前からサポートするようになっています。 サポートする画像フォーマットは、Google 画像検索がサポートする画像フォーマットです。 次の 6 種類になります。 BMP GIF JPEG PNG WebP SVG 現在はロゴに限定されることなく、どのリッチリザルトで設定する画像でもこれらの画像フォーマットを利用できるようになりました（おそらく以前からサポートしていたと思われるが、公式にドキュメント化された）。 Product（商品）や Recipe（レシピ）な
組織ロゴの構造化データとAMP記事ロゴの構造化データのガイドラインは異なる、AMPのロゴにSVG画像は使えない
[レベル: 中級] 組織のロゴ向け構造化データのガイドラインと AMP 記事で指定するロゴの構造化データのガイドラインは異なります。 たとえば、SVG と WebP を、組織のロゴの構造化データは サポートしますが AMP 記事のロゴの構造化データはサポートしません。 【UPDATE (2020/07/03)】 AMP 記事のロゴでも SVG と WebP を利用できます。詳しくはこちらの記事を。 組織ロゴとAMP記事ロゴを区別するように注釈を追加 組織ロゴ用の構造化データとAMP記事ロゴ用の構造化データを区別するようにとの注釈が記事構造化データのガイドラインに追加されました。 Note: These logo guidelines apply to the Article structured data placed on individual AMP pages. For guidel
Become a Front-End Master in 2020 With These 10 Project Ideas | CSS-Tricks
Become a Front-End Master in 2020 With These 10 Project Ideas This is a little updated cross-post from a quickie article I wrote on DEV. I’m publishing here ‘cuz I’m all IndieWeb like that. I love this post by Simon Holdorf. He’s got some ideas for how to level up your skills as a front-end developer next year. Here they are: Build a movie search app using React Build a chat app with Vue Build a w
100 Tiny CSS Tools & Apps for Web Designers
Each of these free web-based tools and apps have been built by web designers for web designers. They all offer a time-saving solution to some of those monotonous or even complex CSS tasks you may need to perform from time to time. Without needing to install anything, all you have to do is bookmark, and save them for that day when required. From assessing your website’s accessibility to generating
Weekly News for Designers № 421
Get FullStory for Free, Forever. 10 Bootstrap 4 Code Snippets – A collection of some of the coolest examples to showcase what BS4 has to offer. Bye bye Material Design – A look at why Material Design isn’t the best solution. Gestalt principles in UI design. – How to become a master manipulator of Visual Communication. CSS Gridish – Build a Sketch file and CSS Grid code from your project’s specs. G
CSS Arrows From CodePen - Freebie Supply
A neat collection of various CSS arrows using different styles. See the Pen CSS Arrow by andgatjens (@andgatjens) on CodePen. Animated – ‘Back To Top’ Arrows Two ‘Back To Top’ CSS arrows that look great animated. See the Pen Animated – ‘Back To Top’ Arrows by EricPorter (@EricPorter) on CodePen. Animated CSS Arrows An animated hard left arrow done with only CSS animations. See the Pen Animated CSS
2016年人気が高かった！CSSの制作、確認、検証に便利なオンラインツール厳選20個のまとめ
Webサイトのデザインもコーディングもやるべきタスクがどんどん増えてきました。それらの手間がかかる面倒な事は、楽にできるツールやサービスを利用することで効率化がはかれます。 CSSの制作、確認、検証に役立つ便利なオンラインツールやサービスを紹介します。
データビジュアライゼーション・ツール20選 – lab.sugimototatsuo.com
この記事はThe top 20 data visualisation toolsの原著者許諾済みの日本語訳です。 By Brian Suda on September 17, 2012 Translated by Tatsuo Sugimoto 2014年4月28日更新：オリジナル記事が以前のサイトから移転したため発生していた画像の非表示に対応しました。 わたしがもっともよくきかれる質問のひとつが、データビジュアライゼーションを始める方法についてです。このブログの先へ進むには、練習し、さらに実践し、利用できるツールを理解する必要があります。この記事では、シンプルなチャートから複雑なグラフ、地図、インフォグラフィックスまで、ビジュアライゼーションを作成するための20種類のツールを紹介しようとおもいます。ほとんどのツールは無料で利用でき、そのうちいくつかはすでにインストール済みかもしれません。
ちょっと新しい見せ方、CSSなどで実現する今っぽいエフェクトまとめ
作成：2016/05/23 更新：2016/06/29 Webデザイン > CSSで実現する今っぽく新しいエフェクトをまとめました。2016年のトレンドをおさえてピックアップ。クリックしたときや既存の画像に面白いフィルターや動きを加えたり、今までにない効果を出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 10種のSVGフィルタ SVGフィルタは、ぼかし・色相・モノクロ・明度などの視覚効果をかける機能です。 こちらはSVGフィルタを使った10種類のボタンエフェクト。SVG内で作ったフィルターをCSSで適用しています。下のコードの例だと、feGaussianBlurはぼかし、stdDeviationはぼかし幅・半径（x軸 y軸）を指定しています。feColorMatrixに変えると色変換をするので、彩度・色相・セピア・グレーなどのフィルターが可能です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用無料、UIデザイン用のSVGアイコンが558種類！デザインに合わせたカスタマイズも簡単な優れもの
The non-world non-wide non-web – Brendan Eich
How to Check Browser Compatibility via Command Lines
Optimization of the Angular 2+ App Download Speed
The SVG 2 Conundrum | CSS-Tricks