週刊Webテク通信

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

Webテク, Webデザイン, Web広告, CSS, UI, UX, ナビゲーション, Tailwind CSS, AI, コーディング

この記事を読むのに必要な時間：およそ 2.5 分

ネットで見かけた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グリッドでの記述方法を紹介しています。もちろんレスポンシブ対応です。

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

図1　CSSグリッドを使って画像の上に文字やボタンを配置するテクニック

図1　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. 文字サイズを適当に選ばずタイプスケールを使う

図2　UI／UXのちょっとしたテクニック

図2　UI／UXのちょっとしたテクニック

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

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

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

図3　ナビゲーションの優れた例を7つ

図3　ナビゲーションの優れた例を7つ

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

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

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

図4　CSSで実現したアニメーションやトランジションいろいろ

図4　CSSで実現したアニメーションやトランジションいろいろ

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（今すぐ購入⁠）⁠」ボタンになっていて面白いです。

図5　新しいWebサイトを多数紹介

図5　新しいWebサイトを多数紹介

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

先週の気になる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を読み込む必要があります。

図6　TailwindCSSで作ったボタン集TailwindCSS Buttons

図6　TailwindCSSで作ったボタン集TailwindCSS Buttons

図7　Bootstrapなどを使ったページにTailwind CSSを追加するための仕組みFoxtail CSS

図7　Bootstrapなどを使ったページにTailwind CSSを追加するための仕組みFoxtail CSS

今週の気になるWebネタ

GitHubがコーディングの提案を行う新しいAIツールをプレビュー | TechCrunch Japanhttps://jp.techcrunch.com/2021/06/30/2021-06-29-github-previews-new-ai-tool-that-makes-coding-suggestions/

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

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

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

Webテク, Webデザイン, Web広告, CSS, UI, UX, ナビゲーション, Tailwind CSS, AI, コーディング

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote