Web制作に役立つ情報一覧

地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました

2023/11/16(Thu) 09:04

フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。

https://coliss.com/articles/build-websites/operation/work/select-element-with-horizontal-rules.html

Webデザインで意識したい3つの錯視効果

2023/11/13(Mon) 08:57

「錯視」と言えば、かの有名なエッシャーの立体錯視によるだまし絵や、あるはずの無い色が見えてしまう錯視や直線が曲がって見える錯視などなど、世の中には数多くの錯視効果が存在します。この錯視ってやつ、見た目を狂わせてくるのでデザイナーとしては非常に厄介なもの。錯視による小さな違和感がグッドなデザインを台無しにすることも珍しくありません。

https://note.com/chot_designer/n/n3128ae2086a7

CSSの記述はこれで大きく変わる！ セレクタの適用範囲を設定できる、CSS @scopeの基礎知識と使い方を解説

2023/11/10(Fri) 08:52

CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。

https://coliss.com/articles/build-websites/operation/css/css-scope-at-rule.html

デザイナー必見！AIで作業が「10倍」速くなる！Figmaプラグインまとめ

2023/11/09(Thu) 09:17

WebデザイナーやUIデザイナー、クリエイターのみなさんは、日々デザイン作業に追われています。アイデア出し、レイアウト、アニメーションなど、さまざまな作業に時間と労力を割かなければなりません。さらに常に変化するデザインの流行や新しい知識、技術を身につける時間も必要。「できるだけ効率よく作業時間を短縮したい」と思っている人も多いでしょう。そんな悩みを解決するのが、AIを活用したFigmaプラグインです。

https://photoshopvip.net/153089

ロゴデザインのプレゼンは「すべて」を見せれば、うまくいく。

2023/11/08(Wed) 09:05

ロゴデザインのプレゼンテーションでお客様に喜んでもらえると本当に嬉しいですよね。僕はロゴデザインのプレゼンテーションでは、完成したロゴだけではなく、制作時に行なった様々な検証もお客様にお見せするようにしています。

https://note.com/grizzlly_design/n/n393868b9db98

Google Fontsからちょっと面白いフォントがリリース！ 商用利用無料、折れ線グラフや棒データを描くためのフリーフォント

2023/11/07(Tue) 08:49

折れ線グラフを描画するためのフォント「Linefont」、波形・スペクトル・ダイアグラム・ヒストグラムなどの棒データを描画するためのフォント「Wavefont」が、Google Fontsで利用できるようになったので紹介します。

https://coliss.com/articles/freebies/linefont-and-wavefont.html

商用でも完全に無料！ 読みやすくシンプルにデザインされた、美しいサンセリフフォント、コーディング向けフォントも揃ってます -Geist Font

2023/11/02(Thu) 09:42

見出しやロゴ用に読みやすくシンプルにデザインされたGeist Sans、エディタなどのコード表示用にデザインされたGeist Monoがセットになった新しいフォントファミリ「Geist」を紹介します。

https://coliss.com/articles/freebies/geist-font.html#google_vignette

レトロな雰囲気がかわいい新作日本語フリーフォントがリリース、デザインやイラストに使いたい！ -ビルの谷間と高架下

2023/10/27(Fri) 08:58

「はんなり明朝」「こころ明朝体」をはじめ、最近では「海と山のろごごち」「うさぎと満月のサンセリフ」などのフォントをリリースされているTyping Art様から、完全新作となる日本語のフリーフォントが昨日リリースされました！

https://coliss.com/articles/freebies/free-font-buildings-tracks.html

これでもう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