週刊Webテク通信

2020年12月第1週号 1位は，CSSでのレイアウトの実装についての考え方，気になるネタは，Googleから新しい映像デバイス「Chromecast with Google TV」登場 従来のChromecastとは何が違う？

Webテク, Webデザイン, Web広告, CSS, Figma, サイドバー, 動画撮影, Zoom, Chromecast

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

ネットで見かけた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コーディングをしている人は納得のいく内容だと思います。レイアウトを実現する前にいろいろなケースを考えることを，「⁠たくさんの質問をする」と表現し，実際にヒーローイメージについての質問を列記していました。

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

図1　CSSでのレイアウトの実装についての考え方

図1　CSSでのレイアウトの実装についての考え方

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

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

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

図2　Figmaでレイアウトグリッドを設定する方法

図2　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関数を使って計算することで対策していました。

図3　固定サイドバーの作り方とよくある問題とその修正方法

図3　固定サイドバーの作り方とよくある問題とその修正方法

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

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

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

図4　インスピレーションの刺激になるウェブサイトいろいろ

図4　インスピレーションの刺激になるウェブサイトいろいろ

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

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

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

図5　ページネーションデザインのコーディング例いろいろ

図5　ページネーションデザインのコーディング例いろいろ

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

先週の気になる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ドライブに保存できます。

図6　画面操作を動画で撮影できる無料サービス

図6　画面操作を動画で撮影できる無料サービス

今週の気になるWebネタ

Googleから新しい映像デバイス「Chromecast with Google TV」登場 従来のChromecastとは何が違う？【比較】 - Fav-Log by ITmediahttps://www.itmedia.co.jp/fav/articles/2011/25/news112.html

Googleの「Chromecast with Google TV」は従来のChromecastとどう違うかを解説した記事がありました。付属のリモコンを使って自ら動画や音楽を再生できるようになったのが違いとのことです。

スマートフォンなどから再生の指示を出すのではなく，Amazon Fire TV， Apple TVのようにその端末だけで完結するようになったということですね。Android TV向けアプリもインストールできます。

見たい番組を検索するための文字入力はスマホでやった方が早いと思いますが，Chromecast with Google TVはGoogleアシスタント搭載なので音声での検索もできますね。

Webテク, Webデザイン, Web広告, CSS, Figma, サイドバー, 動画撮影, Zoom, Chromecast

著者プロフィール

芦之由（あしのよし）

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター＆ライター。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては，以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URL：http://www.rgs680.com/dwt/