CSSの進化が止まらない！ 自分でオリジナルの関数を定義できるようになります、Chrome 139で新しく追加された6個のCSSの機能
昨日アップデートされたChrome 139に追加された、CSSの新しい機能を紹介します。 今回のアップデートの目玉は、CSSでオリジナルの関数を定義できるカスタム関数、角を自由にスタイルできるcorner-shapeプロパティ（アニメーションもできます！）など、Web制作者は要チェックです！ New in Chrome 139 Chrome 139 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのカスタム関数 var()とattr()の短絡 CSSのcaret-animationプロパティ 角をスタイルできるcorner-shape 初期値に切り替えても、実行中のトランジションを継続する svg要素の幅と高さをプレゼンテーション属性としてサポート はじめに 8/
商用利用無料、UIデザイン用のSVGアイコンが3000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルなデザインで洗練されたSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 MingCute Iconのアイコンの特徴は、小さなサイズでもくっきり見えること。3,000種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなって
これは朗報！ ついにCSSでif else文が使えるようになります、Chrome 137で新しく追加された7個のCSSの機能
Chrome 137で追加された、CSSの新しい機能7個を紹介します。 今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制御できる新しいプロパティもサポートされるなど、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New in Chrome 137 Chrome 137 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if else文の条件付きでCSSの値を設定できるif()関数 reading-flowとreading-order
商用でも完全に無料！ UIデザイン用にシンプルなラインでデザインされたSVGアイコン素材 -Lineicons
WebサイトやスマホアプリのUIデザイン用に長期的な使いやすさを実現するために、シンプルなラインで構成されたSVGアイコンを紹介します。 アイコンは細部までデザインにこだわりがあり、24x24のユニバーサルグリッドとキーライン、スタンダードなストロークサイズとコーナーを備えており、さまざまなデザインに利用できると思います。 Lineicons Lineicons -GitHub Lineiconsはデザイナー・デベロッパー向けに、シンプルで飽きのこない、長く使えるデザインのアイコン素材です。ここで紹介するのは1,315種類も揃っている無料版ですが、有料版（数が多く、スタイルも豊富）も用意されています。 アイコンはMITライセンスで、個人でも商用プロジェクトでも無料で利用でき、再配布も可です。ただし、ソースファイルの再販や再配布は禁止です。
商用でも完全に無料！ ゲームだけでなく、UIデザインにもぴったりな1,440個のピクセルアイコン -Pixel Icon Library
HackerNoonのレトロなデザインにインスパイアされた、24ピクセルのグリッドで設計されたピクセルアイコンを紹介します。 アイコンは1,440個以上あり、一貫性が確保されたかわいいデザインです。Webサイト、アプリ、プロダクトなど、さまざまなプロジェクトで無料で利用できます。 Pixel Icon Library Pixel Icon Library -GitHub Pixel Icon Libraryは、HackerNoonの特徴であるクラシックなピクセルアイコンのコレクションです。Webサイトやアプリをはじめ、プロダクトなど、さまざざまなプロジェクトで無料で利用できるようになりました。 400種類以上のピクセル化されたベクターアイコン。 軽量のSVGファイル。 PNGファイルは12px, 16px, 24px, 48pxで、ライト・ダークモード対応。 ライセンスはMITライセンスで
メッシュグラデーション完全ガイド：魅せるデザインの新常識
最近グラフィックやWebデザインでよく見かけるようになり、注目を集めているテクニックがあります。 それが 「メッシュグラデーション」 です。 メッシュグラデーションは、通常のグラデーションとは異なり、複数の色が溶け合っているような、幻想的なビジュアル効果を持つデザイン手法です。 かつてはIllustratorの「メッシュツール」などを駆使しないと作れなかったこのエフェクトですが、Mesh Gradient Generatorというオンラインツールを使えば、誰でも手軽に生成できます。 この記事では、メッシュグラデーションの５つの魅力を紹介しながら、デザインに取り入れるためのヒントをまとめています。 1. どんなブランドにもマッチする「万能性」 「メッシュグラデーションが適用できないブランドはない」 メッシュグラデーションの最大の魅力のひとつが、その 「適応力の高さ」 です。 たとえば、以下の
商用利用も完全無料！ UIデザインに最適、シンプルなデザインでパフォーマンスに影響を与えない超軽量のSVGアイコン素材 -Next Icons
アイコンの主な特徴は、 使いやすい 初心でも簡単にアイコンを使用できるよう設計されています。 カスタマイズも簡単 アイコンのカラーやサイズなどをカスタマイズして使用できます。 シンプルで一貫性のあるデザイン すべてのアイコンはシンプルなデザインで、一貫性があるよう設計されています。 商用プロジェクトでも無料 MITライセンスのオープンソースで、商用プロジェクトでも無料で利用できます。 超軽量 アイコンは非常に軽量なので、サイトのパフォーマンスに影響を与えません。 積極的な開発 このプロジェクトに積極的に取り組んでいるため、新しいアイコンが頻繁にアップデートされます。 アイコンの利用は、簡単です。
簡単に実装できる！ SVGアニメーションで気持ちよく動くスピナー、超軽量サイズでカスタマイズも簡単 -SVG Spinners
コピペで簡単に使用できる、ローディング用のアニメーションにぴったりなSVGベースのスピナーを紹介します。 さまざまなデザインのスピナーが揃っており、画像は一切使用されていません。アニメーションも快適で、くるくる気持ちよく動きます。カラーやサイズなどのカスタマイズも非常に簡単！ <svg fill="hsl(228, 97%, 42%)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="3" r="1"><animate id="spinner_7Z73" begin="0;spinner_tKsu.end-0.5s" attributeName="r" calcMode="spline" dur="0.6s" values="1;2;1" keySplines=".27,.42,.3
気軽にSVGを使う（ちょっと良いUIおれおれAdvent Calendar 2024 – 21日目） | Ginpen.com
ちょっと良いUIおれおれAdvent Calendar 2024 – 21日目 簡単な図形を描くのに CSS 使うことってよくあると思うんですが、簡単な図形なら SVG 使うのもありです。簡単なものは割と簡単なので。 デモ： https://codepen.io/ginpei/pen/LEPyWWG 簡単に図形を描く SVG のコードは直接 HTML に埋め込んで書くことができます。 <p> 詳しくは <svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">…</svg> ボタンを押してみてね。 </p> <svg> 要素の viewBox 属性で表示範囲を指定します。描画される大きさとは別物です。適当に viewBox="0 0 100 100" とかにしておけばいいでしょう。 currentC
コピペOK！ SVGフィルターを使った画像加工の作例集 - ICS MEDIA
ウェブサイトに欠かせない画像コンテンツ。Adobe Photoshopなどで加工し書き出すことも多いですが、SVGフィルターを使用すると同じように複雑な効果を表現できます。 本記事では、SVGフィルターを使っていろいろな雰囲気の画像加工の作例を紹介します。数値を変えると雰囲気もガラリと変わりますのでコピペして色々とお試しいただき、ぜひ取り入れてみてください。 SVGフィルター実装方法の概要 作例紹介の前に、今回の実装方法について概説したいと思います。SVGフィルターの適用にはCSSのfilter: url()を使用します。 コードで画像加工を行う簡易的な方法として、CSSのfilterプロパティを使う方法が挙げられます。filterプロパティに指定できるCSS関数はいくつか用意されており、blur()関数でぼかしたり、contrast()でコントラストを強めたりと簡単な加工が行えます。 こ
UI用にデザインされた、かなり珍しいアイソメトリックのアイコン素材！ 商用利用無料、SVGやFigmaも揃ってる -Isocons
当ブログでもこれまでにSVGのアイコン素材はたくさん紹介してきましたが、アイソメトリックのアイコン素材は初めてです。 アイソメトリックのイラストは見かけますが、アイコンはほんと珍しいですね！ 商用利用、改変、再配布も可で、アイコンのフォーマットはSVGとPNGが揃っています。また、カスタマイズも可能で、アイコンのサイズ、ラインの太さ、角丸、塗りなどに対応しています。 Isocons アイソメトリックとは対象物を俯瞰して立体的に描いたもので、IsoconsにはUI用とソーシャル用のアイコンが揃っています。 ライセンスはCC BY 4.0で、個人でも商用でも無料で利用でき、改変や再配布も可です。ただし、適切なクレジット表示が必要です。 アイコンは、カテゴリとフィルタから一覧でき、カテゴリで見てましょう。
無料で人気ブランドのロゴなど3000個以上のSVGアイコンをダウンロードできるサイト「Simple Icons」
「Simple Icons」は多数のブランドのアイコンをSVG形式でダウンロード可能なサイトとのことなので、どんなサイトなのか実際に確かめてみました。 Simple Icons https://simpleicons.org/ サイトにアクセスするとこんな感じ。 そのままでも特に問題なく使えそうですが、日本語バージョンが用意されているので変更します。右上の言語変更ボタンをクリックし、「日本語」をクリック。 サイトのUIが日本語化されました。記事作成時点で3198個のアイコンが利用可能とのこと。 検索欄に探しているアイコンに関連する言葉を入力することである程度の絞り込みが可能。並べ替えでは「アルファベット順」「色順」「関連度順」を切り替えられます。 UIのモード選択では「ライトモード」「ダークモード」「システムと同期」を切り替えることができ、ダウンロードではアイコンのダウンロードマークをクリ
地味に役立つ！ 手描きでさまざまな形状がいい感じ、200種類以上の矢印・アローのSVG素材 -Handy Arrows
Webサイトやスマホアプリをはじめ、プレゼン・スライド・インフォグラフィックなど、さまざまなプロジェクトで無料利用できる矢印・アローのSVG素材を紹介します。 矢印・アローは200種類以上あり、すべて手描きです。直線でデザインされたのもいいですが、手描きもなかなかいい味をだしますよね。 Handy Arrows Handy Arrows -GitHub Handy ArrowsはDaryaKroによる手描き矢印のギャラリーです。SVGコードを1クリックでコピー、Reactコンポーネントに即時に変換、SVGファイルを1クリックでダウンロードできます。 ライセンスはCC BY 4.0で、個人でも商用プロジェクトでも無料で利用できます。ただし、クレジットの表示が必要となります。
UIデザインに最適！ シンプルなデザインで使いやすく、商用でも無料で利用できるSVGのアイコン素材 -Lucide
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
【解決】svgの色が変わらない！CSSorSCSSで変更したいのに！ | 武骨日記
この記事はPCからみてください。。 背景 知り合いの、フロントエンドの、私の師匠である、名前は伏せますが、村上さんが「svgの色変わらない！記事がない！」と騒いでいたので書こうと思いました。「svgの色が変わらない！CSSで変更したい」方のための記事です。ここで解決されているのはsvgファイルの色を外部CSSから変更したい。scss内で同じsvgをdataとして色だけを変えながらCSS出力したい等です。 同じことで悩んでいる方は世界にたくさんいます→ ここ 方法 ・maskを使う(background-imageとして読み込み、色を変えたい場合) ・svgの中でstyle属性を定義する ・svgをHTMLElementでラップして参照、変更する ・scssでsvgのfill属性値を変数にして変更する などです。 あとはJSを使うとかありますが一旦それはしない方向で。。 方法1.maskを使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今すぐ使える！Web制作に役立つ最新ツール・リソースまとめ【2025年8月版】
これどうやるの？2024年Codepenベスト100発表 コピペできるHTMLスニペットまとめ
Isocons
WebサイトやスマホアプリのUIに！ 抽象的で美しいSVGの背景デザインを簡単に作成できる無料ツール -Mossaik.app
これでもうロゴのSVGを探さないで済む！ SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl
