週刊Webテク通信

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

ネットで見かけた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 画面操作を動画で撮影できる無料サービス

おすすめ記事

記事・ニュース一覧