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

1. Positioning Overlay Content with CSS Grid | CSS-Trickshttps://css-tricks.com/positioning-overlay-content-with-css-grid/

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

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

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

• メインビジュアルで画像の中央に文字を重ねる方法
• メインビジュアルをカルーセルにした場合にボタンを配置する方法
• 画像の上に文字と複数のボタン類を配置する方法

2. UI & UX Micro-Tips: Volume Six. | Marc Andrewhttps://marcandrew.me/ui-ux-micro-tips-volume-six/

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

1. モバイルアプリでは常にタブバーを表示し続ける
2. 文字の太さの違いだけで強調や上下関係を作れる
3. モバイルではタップできる領域を大きくする
4. 可能な限り一貫性のあるナビゲーションにする
5. コンテンツの多いサイトでは検索機能を目立たせる
6. 文字サイズを適当に選ばずタイプスケールを使う

3. 7 Website Navigation Examples That Will Inspire Your Designhttps://www.webfx.com/blog/web-design/website-navigation-examples/

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

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

4. 26 CSS Techniques Free Code - Twibbrhttps://twibbr.com/css-techniques/

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

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

5. 20 Best New Sites, June 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/06/20-best-new-sites-june-2021/

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

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

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

• 広告ゼロのサブスク型検索エンジン登場 米スタートアップが提供，月4.95ドル - ITmedia NEWS
  Medium，Quoraの記事作成者に収益を配分する仕組みもあるんですね
• Slack，立ち話感覚の「ハドルミーティング」など複数の新機能 - CNET Japan
  Discordのように音声で会話できる機能が登場するようです
• Facebook，ニュースレター配信サービス「Bulletin」を提供開始 - CNET Japan
  「⁠Bulletinのライターは，サブスクリプション収益の全額を受け取ることが可能」とのこと

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

TailwindCSS Buttonshttps://devdojo.com/tailwindcss/buttons
Foxtail CSShttps://foxtailcss.com/

今回は，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を読み込む必要があります。