https://isoflat.com/explore-isobuild/
アイコン画像を含めたWebサイトのダークモード対応を実現するCSSの話
1. ダークモード対応のCSSの基本 まずは、普通にダークモード対応のCSSを作成しましょう。 必要最小限のHTML(とCSS)のサンプルです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ダークモード対応</title> <style> body { background: #fff; padding: 20px; } h1 { font-size: 24px; color: #333; } h1::before { content: "ライト"; } @media (prefers-color-scheme: dark) { body { background: #333; } h1 { color: #fff; } h1::before { content: "ダーク"; } } </style> </hea
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説（ソース付き） - Qiita
こんにちは。UX＆フロントエンジニアしながら絵描きして遊んでいるゆき(@yuneco)です。この記事ではVue.jsを使ってCSSアニメーションを使った表現を自在に行うための基本的な部分をステップバイステップで解説します。目標は↓以下のようなアニメーションをJavaScriptで自在に構築できるようになることです。 ソースコードはこちら： https://github.com/yuneco/css-anime-tutorial 目次 この記事では最初にSVGを単純に表示するところから始め、Vueのコンポーネントを利用してそのSVGを自由に配置・変形させる方法を説明します。その上でCSS transitionを用いたアニメーションを取り入れます。最後に、複雑なアニメーションを抽象化・構造化してより複雑なシーンを構成するための方法を解説します。 SVGを作る Vueプロジェクトを作る SVGを
全て無料、本当は教えたくないフリーイラスト素材サイト116個まとめ【商用OK】
この記事では、商用利用かつ無料ダウンロードできるイラスト素材、サイトをまとめてご紹介します。 資料作成やサイト作成などあらゆる場面に重宝するフリー素材を揃えています。 国内と海外サイトに分けてまとめています、用途やデザインに応じて、お好みのイラスト素材を見つけてみてはいかがでしょう。 このリストは定期的にアップデートしており、現在5年目の大公開。ブックマークしておくと便利です。 コンテンツ目次 1. 国内の無料イラスト素材サイトまとめ（56個） 2. 海外の無料イラスト素材サイトまとめ（60個） 3. 当サイト紹介の人気イラスト素材まとめ 4. イラストを活用したデザイン参考例 5. イラスト素材編集のおすすめツール 国内の無料イラスト素材サイトまとめ ここでは、日本生まれのイラスト素材サイトをまとめています。 無料なのはもちろん、商用利用OKで高品質なイラスト素材が揃います。 商用利用可
アットコスメ共通のアイコン配布において最適なSVGを研究しました - istyle Tech Blog
デザイン部所属のフロントエンドエンジニア竹内美帆です。 アットコスメでは、グラフィカルなものよりUIを構成するのにアイコンを利用することが多いです。アイコンは、Retinaディスプレイでもガビガビにならずに表示できるSVGでの実装が主流です。 現在、開発効率アップとUI統一の基盤ということで、いろんなサービスで利用されるであろう共通アイコンを社内向けにパッケージ化して各サービスに配布する予定です。 各サービスは共通アイコンパッケージをインストールし、単体で利用、スプライトで利用、vue.js内でrequireするなど想定しています。 もちろん今までも気を付けてSVGは実装していましたが、1つ1つの要素や属性に対して何故こうなっているのか説明できるようにしないと、配布側としての責任があるなと考えました。 どのようなSVGファイルが、各サービスで利用されるのに最適かをSVGを復習しつつまとめて
SVGを使うときに知っておくといいことをまとめました - Qiita
アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。 ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんあります。正直まだ把握しきれていないところもあるんですが、社内への共有も含めてドキュメント化しています。 もし、「ここが間違ってるよ」とか「こうしたほうがいいよ」みたいなことがあれば、Qiitaのコメント欄やGitHubのIssueをいただけたらとても嬉しいです。 SVGの作成時に注意すること サイズ削減のためにすること 「オブジェクト」→「パス」→「単純化」でアンカーポイントの数を最小化する（見た目を損なわない程度に留めます） 非表示にしているレイヤーを削除する（非表示レイヤーも書き出されます） 1回しか使わないシンボル図形
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材
商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision
【2018年版】アイコンデザインの押さえておきたい流行トレンド8個と新作フリーアイコンまとめ - PhotoshopVIP
アイコンは、デザインの中でも重要な要素のひとつですが、同時によく見落とされがちな要素でもあります。ここでは、2018年のアイコンデザインの押さえておきたいトレンド8個を詳しく見ていきましょう。 これらのトレンド、ポイントを押さえることで、サイトやアプリの使いやすさ、ユーザビリティを改善するだけでなく、独自のデザイン性を表現し、プロジェクトをより魅力的に仕上げることができます。 後半では、実際にデザイン制作で利用できる新作フリーアイコン素材も一緒にまとめているので、こちらも参考にしてみてはいかがでしょう。 1. ラインスタイル・アイコンデザイン このアイコンスタイルは、流行り廃りがないデザイントレンドと言えます。その理由のひとつは、どんな背景デザインにも対応できる点で、人気のアイコンパックには通常、線画スタイルが一緒に収録されています。上記サンプル例のように、どんなサイズでも見やすく、分かり
SVG + Vueで有名なsdrasさんが日本に来るよ、という話 - No Regrets in Bathing
早いもので、Vue Fes Japanまで残すところ２週間程度となりました。 で。 何はおいてもsdrasさんですよ。来日です。 このブログの読者はSVG漬けの毎日を送っていると思うのですが、 SVGアニメーションといえば自分の中ではこの方です。 Sarah Drasner(sdras)さんは、VueConf 2017（katashinさんによるVueConf 2017 参加レポート）のトリでSVGアニメーションのプレゼンを行い、注目を浴びたことが記憶に新しいです。 この方がVue Fes Japan登壇のために来日します。SVG界震撼です。 www.youtube.com 発表では「なぜアニメーションが必要なのか。そしてどのように実装すればいいのか」が楽しく解説されています。 アニメーションの制御にはTweenMaxとVue.jsが利用されています。 私もこの発表に影響されてSVGを始め
もうアイコン素材に困らない！CC0でSVG完備、420種類のシンプルにデザインされたアイコン素材 -Evericons | コリス
シンプルなアイコン素材は、重宝しますよね。 Webサイトやブログ、スマホアプリなどにぴったりな、シンプルにデザインされた無料で利用できるSVG完備のアイコン素材を紹介します。 CC0なので、商用利用時のクレジット表記は不要、複製、改変、配布などもOKで、使い勝手がかなりよいと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IcoMoon App
WEBサイト制作に役に立つ！商用利用可＆無料で使える今オススメのSVGアイコン8選【ベクター/フリーアイコン素材】2021年度決定版
SVG Colorizer, colorize SVG icons and SVG vectors automatically
Remix Icon - Open source icon library
Ikonate – fully customisable & accessible vector icons
Potlab Icons — Animated SVG icons for web projects
Noun Project: Free Icons & Stock Photos for Everything
webフォントを120%活用するための基礎知識&最新動向 - Speaker Deck
商用利用無料！コリス限定、かわいいデザインの食べ物・飲み物のアイコン素材を配布します | コリス
