2020年9月第2週号 1位は、CSS Flexboxを使ったヘッダーの作り方、気になるネタは、“偉い人は上座”も可能？ Zoom、参加者を並び替えられる新機能

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

CSS Flexboxを使ったヘッダーの作り方を解説した記事です。

Flexboxを使えばロゴとナビゲーションが横並びになったヘッダーを作るのは簡単ですが、さらに別の要素が加わった場合や並び順を変えたい場合などのコーディング例も紹介しています。

この記事の作者がgithubに公開しているheaders.cssの紹介もありました。たくさんのバリエーションのシンプルでレスポンシブなヘッダーが用意されていて役立ちそうです。

ウェブサイトに使われるアニメーションの種類とトレンドをまとめた記事です。

レスポンシブデザインのための、複数画面サイズでの表示チェックツールをまとめています。

インストールして使うデスクトップアプリもありますし、ブラウザ上で動くもの、ブラウザ拡張機能もあります。

Polypaneが最もよく考慮された機能が付いているとのことです。ほかにSizzy、Bliskもおすすめのようでした。

リストの各項目の先頭に表示される記号「バレット」を、CSSでカスタマイズする方法を解説しています。

ulまたはolタグのバレットの色や表示するものを変えるCSSの記述例が多数あります。ただし、ブラウザによって非対応のものもありました。

CSSで作られた背景効果をCodePenからまとめた記事です。

ゆっくり星が流れるもの、グラデーションがじわじわ変化するものなど15種類掲載しています。

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

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

Shapeはアイコンやイラストをカスタマイズしてダウンロードできるサービスです。基本有料のサービスですが、制限はありますが無料でも使えます。

アイコンはひとつのアイコンに5パターンのデザインがあり、色や線の太さを変更できます。色はあらかじめ用意された配色から変えられるのでお手軽です。イラストも同様に色や線の太さを変更でき、8パターンのデザインがあります。

無料で利用する場合は、商用利用は不可、ダウンロードできるのはPNGファイルのみです。年59ドルからのサブスクリプションで商用OK、SVGファイルでもダウンロードできます。また、有料版ではアニメーションするアイコン、イラストも利用できるようになります。

Zoomのギャラリービューで同じサイズで並んだ参加者の映像を、自由に並び替えられるようになりました。偉い人を上に表示できる「上座機能」と日本では呼ばれたりしています。

ビジネスマナーでの上座を意識したわけではないでしょうが、並べ替えはできないよりできた方が便利ですね。Zoomでの対談をライブ配信や動画収録する場合にも、並び順をコントロールできた方がいいはずです。

なお、Zoomは8月のアップデートでバーチャル背景としてプレゼンスライドを表示できるようになったり、周辺の音のノイズを消す機能がついたりしています。競合ツールも機能強化を進めていますが、Zoomの方が先を行っているように感じますね。