[B! webデザイン] gerakomaのブックマーク

gerakoma id:gerakoma

webデザインに関するgerakomaのブックマーク (6)

2024年のCSSの書き方、ワークフローとツールについて
CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにデザインの制約 2024年のCSS お勧めのCSSツール終わりにはじめに 2024年のCSSは、素晴らしいの一言に尽きます。
gerakoma 2024/01/18
css

css

webデザイン
リンク
シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。そこで、2023年において﹁シンプルで手軽に使いやすいボタン﹂というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。この記事で紹介するボタンaタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成コピペしやすい各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。アウトラインのボタン︵枠線をグラデーションで再現する︶サンプルを別ウインドウで開くソースコー
gerakoma 2023/07/01
webデザイン

デザイン
リンク
もうこれでSVGアイコンを探すときに困らない！無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes
当ブログでもたくさんのSVGアイコンのライブラリを紹介してきましたが、それらのほとんどがひとまとめに閲覧・検索できる便利なサイトを紹介します。複数のアイコンライブラリから探せるだけでなく、異なるライブラリのアイコンをまとめてアイコンフォントにもできます。矢印アイコンはMaterial Iconsで、ホームアイコンはBootstrapで、ということもできます。
gerakoma 2023/06/01
webデザイン
リンク
これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
gerakoma 2023/02/20
アイコン

SVG

webデザイン
リンク
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
CSSの数学関数と言えば、calc()が便利ですよね。しかし、便利な数学関数はcalc()だけではありません！先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの比較関数の
gerakoma 2020/05/28
webデザイン

css
リンク
ひたすらWebサイトを見るのが趣味な私が独断と偏見で選ぶ今年「良い！」と思ったWebサイト16選 - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2019の18日目の記事を担当します、フロントエンドエンジニアのたがみです。普段はwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。去年は私のその時の推しライブラリだったVuetifyについてこのブログを通じて布教したのですが、今年も今の推しライブラリの話をするぜ！・・・と、意気込んでいたのですが。﹁というか日頃からWebサイト事例収集しまくってるから、今年の素敵だと感じたサイトを振り返るか﹂と思いついちゃいましたので今年は推しのWebサイトの話をしようと思います。というのも、私は去年入社してからデザインや演出や作りが素敵なWebサイトを見つけては自分のツイッターに﹁このWebサイトが良い！﹂というのをひたすら垂れ流すというのを日常的にやっ
gerakoma 2019/12/19
デザイン

webデザイン

表現
リンク
1