週刊Webテク通信

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

ネットで見かけた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 ウェブサイトのスピードテストサービスいろいろ

おすすめ記事

記事・ニュース一覧