Web制作に役立つ情報一覧

iPhoneでの撮影もこれでばっちり！ スマホやデジカメで被写界深度がどのように変化するかが分かる無料ツール -Depth Of Field Simulator

2024/05/30(Thu) 09:32

iPhoneで焦点距離を選べるけどどれがいいの、カメラのF値はどうすればいいの、そんな時はこの記事で紹介する被写界深度シミュレーターが役立ちます。スマホ、Webカメラ、デジタルカメラなどの被写界深度がどのように変化するか、近距離および遠距離での撮影の限界はどこにあるかなどが分かる被写界深度シミュレーターを紹介します。

https://coliss.com/articles/build-websites/operation/work/depth-of-field-simulator.html

【フォトショップ】写真加工ちょっとずるい無料エフェクトPSD素材まとめ

2024/05/30(Thu) 09:31

「できるだけ手間をかけず、写真を魅力的に加工したい」という方へ。ここでリストアップした素材を使うだけで、誰でもプロのような写真加工を楽しむことができます。無料ダウンロードできるフォトショップ素材を過去3年にさかのぼり調査、まとめました。2024年のデザイントレンドを意識したエフェクトが中心で、ほんの数クリックするだけでクリエイティブな作品に生まれ変わります。

https://photoshopvip.net/157831#google_vignette

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

2024/05/29(Wed) 08:51

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

https://coliss.com/articles/build-websites/operation/css/css-cheatsheets-for-web-development.html

【初心者でも簡単】画像生成AI「Adobe Firefly」の使い方を丁寧に解説します

2024/05/28(Tue) 08:54

今回は、IllustratorやPhotoshopなどAdobeツールとの連携が充実していて、経験やスキルを問わず誰でも簡単に画像生成ができる「Adobe Firefly」についてご紹介いたします。画像生成AIをまったく触ったことがない方でもわかるように、Adobe Fireflyの始め方から使い方、また使用する際のコツを丁寧に解説いたします。ぜひ最後までご覧ください！

https://liginc.co.jp/644222

誤解しているかも！ CSSの詳細度について、よくある誤解を解説

2024/05/27(Mon) 08:57

CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。

https://coliss.com/articles/build-websites/operation/css/misconceptions-about-css-specificity.html#google_vignette

これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）

2024/05/23(Thu) 09:21

このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。

https://photoshopvip.net/157774#google_vignette

CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning

2024/05/23(Thu) 09:19

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。

https://coliss.com/articles/build-websites/operation/css/css-only-magnetic-link-effect.html

こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版

2024/05/22(Wed) 08:54

目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。

https://photoshopvip.net/157760

UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors

2024/05/22(Wed) 08:54

WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。

https://coliss.com/articles/build-websites/operation/work/the-good-colors.html#google_vignette

少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集

2024/05/20(Mon) 09:02

少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。

https://www.tak-dcxi.com/article/html-css-techniques-to-improve-usability-and-accessibility-with-minimal-code/