週刊Webテク通信

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

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

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

1. Building Website Headers with CSS Flexboxhttps://ishadeed.com/article/website-headers-flexbox/

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

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

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

図1 CSS Flexboxを使ったヘッダーの作り方

図1 CSS Flexboxを使ったヘッダーの作り方

2. Website Animation Types & Trends That Will Dominate Your Screen in 2020–2021 | by Dana Kachan | Design + Sketch | Aug, 2020 | Mediumhttps://medium.com/sketch-app-sources/website-animation-types-trends-that-will-dominate-your-screen-in-2020-2021-292cad930eed

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

  • 背景アニメーション
  • 動くロゴ
  • 液体の動き
  • 動くタイポグラフィー
  • 読み込み中のアニメーション
  • ホバー効果
  • アニメーションするギャラリー&スライドショー

図2 ウェブ上のアニメーションの種類とトレンド

図2 ウェブ上のアニメーションの種類とトレンド

3. Comparing Browsers for Responsive Design | CSS-Trickshttps://css-tricks.com/comparing-browsers-for-responsive-design/

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

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

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

図3 レスポンシブデザインの表示チェックツールいろいろ

図3 レスポンシブデザインの表示チェックツールいろいろ

4. Custom bullets with CSS ::markerhttps://web.dev/css-marker-pseudo-element/

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

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

図4 リストの各項目の先頭の記号をカスタマイズ

図4 リストの各項目の先頭の記号をカスタマイズ

5. 15 Amazing CSS Background Effects - 1stWebDesigner - Best of the best!https://1stwebdesigner.com/15-css-background-effects/

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

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

図5 CSSで作られた背景効果いろいろ

図5 CSSで作られた背景効果いろいろ

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

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

Shape - 26000+ Icons & Illustrations to SVG, Lottie, React.https://shape.so/

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

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

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

図6 カスタマイズできるアイコン・イラスト素材

図6 カスタマイズできるアイコン・イラスト素材

今週の気になるWebネタ

“偉い人は上座”も可能? Zoom,参加者を並び替えられる新機能 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2009/04/news070.html

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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