週刊Webテク通信

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

Webテク, Webデザイン, Web広告, JavaScript, CSS, Google, メール

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

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

1. Three CSS Alternatives to JavaScript Navigation | CSS-Trickshttps://css-tricks.com/three-css-alternatives-to-javascript-navigation/

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

  1. メニューを別ページで用意する
  2. 水平スクロールするメニュー
  3. CSSのみのハンバーガーメニュー

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

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

図1　JavaScriptを使ったハンバーガーメニューの代替3案

図1　JavaScriptを使ったハンバーガーメニューの代替3案

2. 1-Line Layoutshttps://1linelayouts.glitch.me/

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

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

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

図2　CSS Gridを使ったレイアウトテクニック

図2　CSS Gridを使ったレイアウトテクニック

3. CSS breakpoints used by popular CSS frameworks | Polypane browser for developershttps://polypane.app/blog/css-breakpoints-used-by-popular-css-frameworks/

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

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

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

図3　各種CSSフレームワークのブレークポイントまとめ

図3　各種CSSフレームワークのブレークポイントまとめ

4. Knopf.css - Open source button system leveraging CSS variableshttps://knopf.dev/

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

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

図4　CSSボタンのライブラリ

図4　CSSボタンのライブラリ

5. Design Trend: Strong Hero Images With Subtle Text | Design Shackhttps://designshack.net/articles/trends/strong-hero-images-with-subtle-text/

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

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

図5　強力なヒーローイメージと控え目な文字の組み合わせの例いろいろ

図5　強力なヒーローイメージと控え目な文字の組み合わせの例いろいろ

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

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

lets you ‘see how real people experience the speed of your website’. Trusted by somehttps://joetechreviews.com/the-best-tools-for-checking-your-websites-speed/

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

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

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

図6　ウェブサイトのスピードテストサービスいろいろ

図6　ウェブサイトのスピードテストサービスいろいろ

今週の気になるWebネタ

G Suite向けGmailがChat，Meet，Roomを統合 | TechCrunch Japanhttps://jp.techcrunch.com/2020/07/17/2020-07-15-gmail-for-g-suite-gets-deep-integrations-with-chat-meet-rooms-and-more/

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

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

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

Webテク, Webデザイン, Web広告, JavaScript, CSS, Google, メール

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote