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

1. Thinking Like a Front-end Developerhttps://ishadeed.com/article/thinking-like-a-front-end-developer/

CSSでのレイアウトの実装についての考え方を紹介した記事です。フロントエンド開発者がどう考えるかをわかりやすく解説しています。

まず細部は一旦脇に置いて，大きなレベルのコンポーネントにわけて考えてコーディングします。そのあと，詳細部分について細かく掘り下げます。たとえば，要素の数が可変する場合やレスポンシブでどう変化させるかなどです。

考え方としてはスタンダードな感じで，CSSコーディングをしている人は納得のいく内容だと思います。レイアウトを実現する前にいろいろなケースを考えることを，「⁠たくさんの質問をする」と表現し，実際にヒーローイメージについての質問を列記していました。

こういう「質問」は頭の中だけで考えがちですが，テキスト化してまとめておくのもよさそうだと気付かされました。

2. Making layout grids work for you – Figmahttps://www.figma.com/community/file/908391866828928884

Figmaでレイアウトグリッドを設定する方法を説明するチュートリアルです。このチュートリアル自体がFigmaで作られているところが面白いと思ったので紹介します。

Figma上で解説を読みながら，実際に操作して確認できます。関連情報へのリンクも入れらますし，こういった形でのチュートリアルの提供は今後増えそうだと感じました。

3. Dynamically-Sized Sticky Sidebar with HTML and CSS | CSS-Trickshttps://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css/

固定されるサイドバーの作り方と，よくある問題とその修正方法を解説しています。

問題点とは，サイドバーの高さがウィンドウサイズより大きい場合，サイドバーの下部の要素に一時的にアクセスできなくなることです。このケースでは高さをCSSのcalc関数を使って計算することで対策していました。

4. Inspirational Websites Roundup #20 | Codropshttps://tympanus.net/codrops/2020/11/25/inspirational-websites-roundup-20/

インスピレーションの刺激になるウェブサイトをまとめています。

リンナイのマイクロバブルバスのサイトが紹介されていました。日本語の日本向けのサイトなのですが，リンナイの他のページと違い，やけに凝っていて驚きました。

5. 12 Free CSS Paginationshttps://twibbr.com/css-paginations/

ページネーションデザインのコーディング例を，CodePenよりまとめた記事です。

この記事，CodePenの埋め込み方が通常とは違ってますね。コードは表示されていませんが，その分シンプルで見やすいですし，操作もできていい感じです。

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

• 国会議員と霞が関職員のミーティングに「Zoom」を導入 Web会議を本格化 - ITmedia NEWS
  Zoomのエンドツーエンド暗号化の提供が始まったからかと思ったら関係ありませんでした
• Amazonかたる詐欺SMSに注意 「⁠Amazonがロックされました」「⁠異常ログインの可能性があります」など - ITmedia NEWS
  この手のメールはよく来ますが，詐欺SMSも増加してるんですね
• 流行語部門賞に「Zoom⁠」⁠ コロナ禍で検索数が激増 Yahoo!検索大賞2020 - ITmedia NEWS
  「⁠Zoom」で検索した人の中には，レコーダーやマイクなどで有名なメーカーのZoomを検索した人も含まれているはずですね

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

Screenity - Screen Recorder & Annotation Tool - Chrome ウェブストアhttps://chrome.google.com/webstore/detail/screenity-screen-recorder/kbbdabhdfibnancpjfhlkhafgdilcnji

Screenityは画面操作を動画で撮影できるサービスで，Chrome拡張機能で提供されています。ユーザー登録不要で完全無料です。

この分野のツールではLoomが有名ですが，Loomと同様にWebカメラを使って自分の映像を同時に記録できます。撮影中にペンツールでの描画やテキスト，矢印の追加ができるのはLoomにはない機能です。

撮影したあと簡単な編集ができるのですが，いらないシーンを部分的に削除できるのが便利そうです。動画はmp4，gif，webmとしてエクスポートするか，Googleドライブに保存できます。