Web制作に役立つ情報一覧

FigmaでUIのアイコンを使うならコレ！ 高品質でシンプルにデザインされた1100種類のアイコン素材 -Untitled UI Icons

2022/06/14(Tue) 08:55

WebサイトやスマホアプリのUIデザインにぴったり、Figma用の高品質でシンプルにデザインされたアイコン素材を紹介します。たとえば、アローだけでも90種類以上、ホーム・サーチ・カート・メールなども複数のデザインで用意されており、UIにぴったりなのが見つかると思います。

https://coliss.com/articles/build-websites/operation/work/untitled-ui-icons-for-figma.html

新しさを感じさせる和のデザイン手法！ 伝統文様から最近のトレンドまで解説されたデザイン書 -和モダンデザイン

2022/06/13(Mon) 09:01

和を感じるモダンなデザイン、日本の魅力を伝えるとっておきのデザインアイデアとその作り方がまとめられたデザイン書を紹介します。「新しさ」や「新鮮さ」を感じさせる和のデザインがたくさん収録されており、伝統文様などの定番素材の使い方から最近のトレンドをおさえたデザインテクニックまで、さまざまなアイデアが収録されています。

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

おしゃれ英語フォント本命！商用OKな無料セリフ書体おすすめ40選

2022/06/10(Fri) 08:56

セリフフォントは、時代を超えて愛され続ける、歴史のあるクラシックな書体。文字のストロークの端に小さな飾りが特長のセリフ書体は、より文字を認識しやすく、そして読みやすくしてくれます。

https://photoshopvip.net/135376

簡単！CSSで日本語フォントの文字間隔調整【font-feature-settings】

2022/06/10(Fri) 08:54

グラフィックデザインやDTP、いわゆる紙媒体のエディトリアルデザイナーさんにとっては当たり前の文字間隔の調整。Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは？実は、「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整（カーニング）ができます。

https://liginc.co.jp/595446

覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法

2022/06/09(Thu) 08:55

CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。

https://coliss.com/articles/build-websites/operation/css/css-conic-gradient-border.html

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/08(Wed) 09:00

CSSの単位px、em、remは、どれをどこで使用するのがよいか。font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。

https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html

フォトショップで写真を映画風レタッチ加工！おすすめ素材25選

2022/06/08(Wed) 08:57

フォトショップの基本でもある写真加工。その中でも映画風のレタッチ加工は、覚えておきたい人気スタイルのひとつです。どこか味わいのある深みのある色合いや、ビデオテープに撮影されたような見た目など、写真を映画風に一発で加工できるフォトショップおすすめ素材を今回はご紹介。

https://photoshopvip.net/135337

簡単・便利・時短！おすすめ最新オンラインツール35選

2022/06/07(Tue) 09:13

ウェブデザインだけで、あらゆるクリエイティブな場面で活躍しそうな、「あったら便利。」を実現した驚きの新しいツールを中心にセレクト。これまで時間のかかっていた面倒なことも、ウソのように簡単にこなす便利な機能や素材などずらり揃います。

https://photoshopvip.net/135298

Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js

2022/06/07(Tue) 09:12

Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。

https://coliss.com/articles/build-websites/operation/javascript/lightweight-parallax-effect-pushin.html

コーディングが少し楽になる、意識したい命名規則とCSS設計。

2022/06/06(Mon) 08:55

今回はHTMLに付けるclassの名前について考えてみたいと思います。classに付ける名前によってタグの組み方もコーディングの速さも変わってきますし、拡張性の高さも変わってきます。classの命名についてちょっと知識をつけていただいたら、コーディング時間が短くなってもっと楽しく開発できるようになりますよ！ というわけでいってみましょう。

https://liginc.co.jp/595341