2021年7月第2週号 1位は、CSSグリッドを使って画像の上に文字やボタンを配置するテクニック、気になるネタは、GitHubがコーディングの提案を行う新しいAIツールをプレビュー

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2021年6月28日～7月4日の間に見つけた記事のベスト5です。

CSSグリッドを使って、画像の上に文字やボタンを配置するテクニックを解説しています。

以前よく使われていたposition:absoluteを使った絶対配置の手法に比べて、コードも少なく簡単に記述できて便利です。

以下の3つのパターンでのCSSグリッドでの記述方法を紹介しています。もちろんレスポンシブ対応です。

UI／UXのちょっとしたテクニックをまとめています。

Webサイトのナビゲーションの優れた例を7つ紹介した記事です。

構成／シンプル／使いやすさ／ビジュアル／モバイルフレンドリー／一貫性／一貫したブランディングの7つの特徴に分けて、それぞれ取り上げたサイトのナビゲーションの良さを解説しています。

アニメーションやトランジションを中心にCSSのテクニックをまとめた記事です。

JavaScriptを使わずCSSだけで実現した複雑なアニメーションや動きのあるUIなどを紹介しています。

D2C系のページ中心に優れた新しいWebサイトをまとめた記事です。コピー、ビジュアル、聴覚に焦点を当てて、実店舗とは違うアプローチで商品を訴求しているページを紹介しています。

紹介されているMama Joyce Peppa Sauceのサイトは、特定のエリアではカーソル自体が「BUY NOW（今すぐ購入⁠）⁠」ボタンになっていて面白いです。

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

今回は、Tailwind CSS関連のツールを2つ紹介します。

TailwindCSS ButtonsはTailwindCSSで記述したボタン集で、CSSのコードをコピーして利用できます。グラデーションやアニメーション効果を使ったものも多く、Tailwind CSSだけでこれだけのものが作れるんだと感心する人も多いと思います。ダークモード用ボタンもあります。

Foxtail CSSを使うと、BootstrapなどのCSSフレームワークを使っているページでもTailwind CSSを利用できるようになります。用意されたJavaScriptファイルを読み込ませるだけで、Tailwind CSSのユーティリティクラスを適応できます。

Tailwind CSSのCSSをすべて読み込んでいるわけではなく、ページ内で使われているものだけ読み込む仕組みのようです。Bootstrap、Bulma、UIkit、Foundationに対応していて、それぞれ違うJavaScriptを読み込む必要があります。

GitHubから発表された、AIを使ってコーディングを効率化するGitHub Copilotが話題です。AIと一緒にペアプログラミングしようというもので、AIがコードを提案してくれる夢のような機能です。

今のところPython、JavaScript、TypeScript、Ruby、Goとの相性が良いそうです。HTMLとCSSはどうかなと思いましたが、あまり推測して書ける部分は少ないのかもしれません。

とはいえ、AIが賢くなれば、サイトのデザインシステムに合わせてCSSを記述するように提案してくれたり便利になるのでしょう。コーディングそのものにはローカライズは関係ないので、最新の技術を日本でも使えるところもうれしいですね。