Web制作に役立つ情報一覧

これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons

2023/10/26(Thu) 08:50

WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。

https://coliss.com/articles/freebies/blendicons.html

CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる

2023/10/25(Wed) 08:56

CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。

https://coliss.com/articles/build-websites/operation/css/get-screen-size-and-font-size-with-just-css.html

斜め上を行く最新Webオンラインツール、素材50選

2023/10/23(Mon) 08:59

「ほったらかしで、デザインの作成が完了」「配色に悩んだときの救世主」「時間のかかっていたデザイン作業が一瞬で終了」そんな噓のようなツールが、AIの進化によって日々、世界中で公開されています。このまとめでは「これはやられた！」と思わずうなってしまう、最新オンラインツールや素材55個をご紹介。

https://photoshopvip.net/152597

赤色は何種類ある？色見本・カラーコード60選【事例・デザイン素材も】

2023/10/20(Fri) 09:07

赤色は「行動」や「情熱」、「攻撃性」といった意味合いを持つ色です。この記事では、赤色のもつ意味や効果や、40種類の赤色を集めた色見本をHEXカラーコード付きでご紹介します。赤色の効果的な使い方を学ぶ事例や、すぐに使えるデザイン素材と一緒も参考として活用してみましょう。

https://photoshopvip.net/152484

Webサイトやスマホアプリで注目されているUXデザインの知識やテクニックが網羅された解説書 -UXデザイン100の原則

2023/10/16(Mon) 08:56

Webサイトやスマホアプリをデザイン・実装するときに取り組むべきUXデザインにどのように対応していくのか、必要な知識を一通り身につけることができるオススメの解説書を紹介します。

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

たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！ CSSのサブグリッド（subgrid）の基礎知識と使い方

2023/10/13(Fri) 08:38

CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。

https://coliss.com/articles/build-websites/operation/css/about-css-subgrid.html

商用でも完全に無料！ レトロで温もりのあるかわいい日本語フリーフォント「しっぽり太ゴシック」「しっぽり太ゴチック」

2023/10/12(Thu) 08:56

「しっぽり明朝」「しっぽりアンチック」など、人気のフリーフォントをリリースされているフォントダスさんから、読みやすくて目に優しい太ゴシック体と太ゴチック体の2つのフリーフォントがリリースされました！

https://coliss.com/articles/freebies/shippori-gothic-and-gochic-b2.html

CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更

2023/10/11(Wed) 08:49

今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。

https://coliss.com/articles/build-websites/operation/css/auto-resizing-text-input-with-form-sizing.html

その一手間で、デザインはかなりよくなる！ ロゴのアイデアやテクニックが詳しく解説された良書 -イメージをカタチにするロゴデザイン

2023/10/10(Tue) 09:02

こういうロゴデザインの解説書を待っていた人も少なくないと思います。自分が考えたものをカタチにしたい、クライアントの要望をカタチにしたい、そんなイメージが伝わるロゴの作り方を解説したデザイン書を紹介します。

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

古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset

2023/10/06(Fri) 08:36

モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！

https://coliss.com/articles/build-websites/operation/css/a-more-modern-css-reset.html