Web制作に役立つ情報一覧

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/

まずはここから！Photoshopの生成AI機能を試してみよう！

2024/05/17(Fri) 09:01

デザイナーのみなさん、話題のAIは使いこなせているでしょうか？興味はあるけど何から始めればいいかわからない、試してみたけど結局うまく使えない、なんて声も聞こえてきます。

https://www.webcreatorbox.com/webinfo/photoshop-firefly

令和のHTML / CSS / JavaScriptの書き方まとめ

2024/05/15(Wed) 09:08

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。

https://zenn.dev/necscat/articles/bc9bba54babaf5