Web制作に役立つ情報一覧

実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック

2025/03/26(Wed) 09:01

CSSのborder-radiusで角丸を適用したボックスを拡大・縮小のアニメーションにするとき、最初は鋭角で、拡大したときには角丸になるようにしたいと思ったことはありませんか？

https://coliss.com/articles/build-websites/operation/css/smoothly-animating-border-radius.html

Illustratorの使い方を身につけたい人に！ センスのよいデザインを作りながら学べる解説書 -Illustratorおてがる入門

2025/03/24(Mon) 09:01

Adobe Illustratorをそろそろ学びたいな、と思っている人にお勧めの解説書を紹介します。「おてがる」とあるように本書では難しいと思われがちなIllustratorの使い方をお手軽に使いこなせるようになる一冊です。また、入門書にありがちなダサいデザインをつくって学ぶのではなく、センスのよいデザインが揃っているので、楽しく学ぶことができると思います。

https://coliss.com/articles/book-review/isbn-9784297147167.html

CSSでテキストの上下余白が調整可能に！text-box-trimの使い方

2025/03/21(Fri) 09:05

2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge 133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。

https://ics.media/entry/250319/

Cursorをこれから使用する人にお勧めの解説書、コードやテキストを書くときの効率アップにつながる方法を詳しく解説 -Cursor完全入門

2025/03/19(Wed) 08:55

AIコードエディタのCursorってどうなの？ エディタはテキスト編集にしか使わないけど役立つの？ HTMLやCSSにもAIが役立つの？ アプリ開発もAIでできるの？ Gitとかは大丈夫？そんな疑問を解決してくれるCursorの入門書を紹介します。入門書とは言っても内容はかなり濃く、非常に役立ちます。

https://coliss.com/articles/book-review/isbn-9784295021391.html

商用でも完全に無料！ ゲームだけでなく、UIデザインにもぴったりな1,440個のピクセルアイコン -Pixel Icon Library

2025/03/18(Tue) 08:54

HackerNoonのレトロなデザインにインスパイアされた、24ピクセルのグリッドで設計されたピクセルアイコンを紹介します。アイコンは1,440個以上あり、一貫性が確保されたかわいいデザインです。Webサイト、アプリ、プロダクトなど、さまざまなプロジェクトで無料で利用できます。

https://coliss.com/articles/freebies/pixel-icon-library.html#google_vignette

センスや感覚で判断するのではなく、使いやすさとクオリティに重視したロジカルなデザイン書 -ウェブデザインの思考法 第2版

2025/03/17(Mon) 08:57

Webサイトやスマホアプリの善し悪しや品質を感覚的に判断されてしまうことがあります。たとえば、デザイナーのセンスだったり、クライアントのフィーリングだったり、そういった経験はありませんか？

https://coliss.com/articles/book-review/isbn-9784839983000.html#google_vignette

【秒速編集】Photoshopの「カラーを調整」なら、色の置き換えがワンクリックで完了！

2025/03/17(Mon) 08:57

「フォトショップで色を置き換える方法は？」と聞かれたら、あなたならどう答えるでしょう。これまでにいろいろな方法を試してきましたし、数十秒で調整できる方法を知ったとき、その手軽さがとてもうれしかったのを覚えています。あれから2年がたち、AIがあらゆるツールに利用されている現代では、ほんの数クリック、数秒で色を置き換えることができるようになっています。

https://photoshopvip.net/163148

Photoshop 切り抜き革命！髪の毛までAIでワンクリック選択

2025/03/17(Mon) 08:56

従来のPhotoshopでは、複雑なパーツの切り抜きはほぼ不可能でした。しかし、最新の Photoshop Beta版 に搭載された「Select Subject（被写体を選択）」と「Remove Background（背景を削除）」の クラウドAI処理 により、驚くほど精密なマスク処理が可能になりました。

https://photoshopvip.net/163219#google_vignette

Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ

2025/03/14(Fri) 08:52

CSS GridやFlexboxで配置するプロパティや値は？ 最初の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。

https://coliss.com/articles/build-websites/operation/css/css-cheatsheets-2025.html#google_vignette

これは簡単で便利！ CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズの定義ができるツール -Type Scale Generator

2025/03/13(Thu) 09:04

フォントのサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィのテクニックです。CSSのclamp()関数を使用するとビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的に設定することができます。

https://coliss.com/articles/build-websites/operation/css/type-scale-generator.html#google_vignette