Printing music with CSS grid
Printing music with CSS Grid Too often have I witnessed the improvising musician sweaty-handedly att …続きを読む
2024/5/1 01:41
サイト制作関連はてブサイト制作に関連するはてブ記事をタグで抽出しただけ
SVG
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTM …続きを読む
2024/4/23 09:46
Layer Cake
Layer Cake is a graphics framework for Svelte. It uses the measurements of your target div and your …続きを読む
2024/4/18 00:29
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
PHPカンファレンス小田原2024 の発表資料です。 https://phpcon-odawara.connpass.com/event/296492/ https://fortee.jp/phpco …続きを読む
2024/4/14 07:38
コピペで楽々、CSSでできるボーダーアニメーション５選
CSSでボーダーをアニメーションさせるのは意外と難しいもの。幅や色のような単純な動きは別として、より複雑なアニメーションは他の選択肢を必要なケースがしばしば。 この記事ではCSSのborderプロパテ …続きを読む
2024/4/6 04:40
これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてし …続きを読む
2024/3/13 08:05
SVG Flag Icons
Powered by Nucleo: Icon Manager for Mac/Windows SVG Flag Icons Explore over 200 optimized SVG countr …続きを読む
2024/2/28 10:32
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時 …続きを読む
2024/2/27 02:01
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" …続きを読む
2024/2/21 13:06
Illustratorでアイコンなどを余白も含めた正方形サイズでSVG書き出しするベストプラクティス｜DTP Transit 別館
池原さんが問題提起されていた「アイコンなどを余白も含めた正方形サイズでSVG書き出し」する方法について考えてみます。 Illustratorで、アイコンなどを余白も含めた正方形サイズでSVG書き出しし …続きを読む
2024/2/4 16:31
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計さ …続きを読む
2024/1/23 09:43
ゲームパッド・キーボードなどの入力ボタンアイコンが800種以上詰まった『Input Prompts』、Webサイト「Kenney」で無料公開
入力ボタンのアイコンパック『Input Prompts』、Webサイト「Kenney」で無料公開 各種コンシューマー機のゲームパッド、キーボード・マウスといった入力ボタンのアイコンが収録されている S …続きを読む
2024/1/23 08:57
作り続けるための仕組みづくり｜ARTICLES｜The Graphic Design Review
グラフィックデザインの環境はいまや完全にビッグ・テックが提供するアプリケーションに囲いこまれてしまったようにみえる。しかし近年、デザイナーたちはそのような枠組みにとどまらない自由なアプローチを探究し続 …続きを読む
2024/1/16 13:58
CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。みみほくろです。 Webデザインでアイコンをつけたいとき、何を使いますか？ 画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹 …続きを読む
2024/1/15 12:21
Making noisy SVGs — Daniel Immke
Addendum Dec 7, 2023 One of my ongoing fixations with the web is how improvements in technology info …続きを読む
2023/12/8 10:34
SVG Tutorial - Learn how to code images in HTML with SVG
How to Draw a Clock with SVG and JavaScript that Shows the Actual Time …続きを読む
2023/12/8 09:10
これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズで …続きを読む
2023/12/6 09:55
AI text prompt to SVG
Use text-to-svg to create unique SVG cut files with our AI Generator tool. 100% FREE, no signup. …続きを読む
2023/11/30 08:56
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHT …続きを読む
2023/11/28 09:38
アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか
本記事は<svg>要素のみを持つ<button>要素（アイコンボタン）にアクセシブルな名前（accessible name）を持たせる方法について調査した結果と、WCAG 2. …続きを読む
2023/11/20 11:35