2020年7月第4週号 1位は、JavaScriptを使ったハンバーガーメニューの代替3案、気になるネタは、G Suite向けGmailがChat、Meet、Roomを統合

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

JavaScriptを使ったハンバーガーメニューの代替となる3つの案を紹介しています。

1は、メニューボタンを押すとメニューページにページ遷移するという意味です。閉じるボタンを押すと元のページに戻るためにJavaScriptが必要となる場合があります。

2はメニューの項目が多くない場合に、ハンバーガーメニューを使わず横スクロールでメニューを選べるようにする案、3はJavaScriptを使わずCSSだけでハンバーガーメニューを実装する案で、それぞれのコードの例も紹介しています。

CSS Gridを使ったレイアウトテクニックを10個紹介した記事です。ひとつだけFlexboxを利用しています。

タイトルにある「1行」は、CSSが全てで1行というわけではなく、ポイントとなっているプロパティが1行という意味でした。

ページ内のプレビュー部分は右下をつまんでサイズ変更できますし、CSSのコードは変更して確認できるようになっています。

各種CSSフレームワークのブレークポイントをまとめた記事です。

Bootstrap、Foundation、Tailwind CSSなどメジャーなフレームワークでのブレークポイントのサイズをピクセル数で確認できます。

レスポンシブデザインの複数サイズでの表示チェックがまとめてできるPolypaneが提供する記事です。Polypaneでフレームワークのブレークポイントに合わせた表示チェックができるための設定ファイルがダウンロードできます。

オープンソースのCSSボタンのライブラリです。CDNから読み込んで使うこともできます。

カスタマイズ性が高く、CodePen上でテストしてみることもできます。

ヒーローエリアで大きく目立つ文字を使うより、控え目に文字を配置するようにトレンドが変化してきているとのことで、そういった例を多数紹介しています。

テキストが主張しすぎないよう下の方に配置されている事例も多いようです。

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

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

今回は、ウェブサイトのスピードテストサービスをまとめた記事を紹介します。有料のものと無料のものがわかりやすく表記されています。

最も包括的で高度なツールのひとつと紹介されていたSpeedCurveでは、競合サイトとの比較ができます。画面がレンダリングされる様子がタイムラインに並んで、どちらが早く表示されるかを見られるのは新鮮でした。デバイス、ブラウザを選んでのテストも可能です。

無料のサービスではGTmetrixが人気のようです。Google PageSpeed Insightsは、Googleが提供している信頼感と日本語化されているのでわかりやすいメリットがあります。

G Suite版のGmailのアプリ／Webサービスが、Chat、Meet、Roomなどを統合したホーム画面的な位置付けになるそうです。SlackやMicrosoftのTeamsに対抗する動きなのでしょう。

Gmailが刷新されるというニュースで話題になっていましたが、メール機能に変化があるわけではないですね。また、G Suiteは日本では意外とマイナーなこともあり、G Suiteユーザーが対象と理解していない人も多いようでした。

G Suiteを使っていないGmailユーザーには関係ないわけでもなく、Meetを一般ユーザーに提供するようになったのと同じように、将来的にはこれらの機能を一般ユーザーに提供することを計画しているそうです。