週刊Webテク通信

2022年4月第4週号 1位は，CSSでのセンタリングの実用ガイド，気になるネタは，Zoom、新しいホワイトボード機能「Zoom Whiteboard」を発表

Webテク, Webデザイン, Web広告, CSS, センタリング, JavaScript, 背景アニメーション, Eコマース, アプリ, Zoom

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

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

1. A Practical Guide to Centering in CSS - Stack Diaryhttps://stackdiary.com/centering-in-css/

CSSでのセンタリングの実用ガイドです。テキスト，div要素を垂直方向や水平方向にセンター揃えする方法を紹介しています。

インライン要素とブロック要素（text-align）
  • 固定幅のブロック要素を中央に配置
  • インライン要素を固定幅で中央揃え
グリッドとフレックスボックス（現代的な方法）
  • 垂直＆水平（ユニバーサルソリューション）
  • Absoluteセンタリング（transform）

図1　CSSでのセンタリングの実用ガイド

図1　CSSでのセンタリングの実用ガイド

2. 8 Awesome Animated Backgrounds Built with CSS & JavaScripthttps://speckyboy.com/css-javascript-animated-backgrounds/

CSSとJavaScriptによる背景アニメーションの例を多数紹介しています。

グラデーションが動く背景，文字の中の模様が動く，図形が移動する背景など試してみたい効果がたくさんありました。

図2　CSSとJavaScriptによる背景アニメーションいろいろ

図2　CSSとJavaScriptによる背景アニメーションいろいろ

3. Typographic Scale Calculator - Pick the right font sizeshttps://www.layoutgridcalculator.com/typographic-scale/

見出しなどの文字サイズを，ベースの文字サイズを元に計算して導き出してくれるツールです。

サイズを変更する比率や段階などを細かくカスタマイズでき，完成したらCSSを生成できます。

図3　見出しなどの文字サイズを計算で生成

図3　見出しなどの文字サイズを計算で生成

4. 14 Best YouTube Channels for Designers in 2022 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/04/14-best-youtube-channels-for-designers-in-2022/

デザイナーにおすすめのYouTubeチャンネルを14個紹介した記事です。Webデザイン，ロゴデザイン，モーショングラフィックスなどを動画で学べます。

Adobe系のレクチャー動画がやはり多いなと思いました。

図4　デザイナーにおすすめのYouTubeチャンネル14選

図4　デザイナーにおすすめのYouTubeチャンネル14選

5. Tailwind Components and Templates for E-commercehttps://tailwind-ecommerce.com/

Tailwind CSSで作られたEコマース用のコンポーネント＆テンプレート集です。テンプレートを元にオンラインショップを簡単にレイアウトできそうです。もちろんレスポンシブに作られていました。

Gumroadで配布されていますが，金額は任意になっており無料でも入手できます。

図5　Tailwind CSSのEコマース用コンポーネント＆テンプレート集

図5　Tailwind CSSのEコマース用コンポーネント＆テンプレート集

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

先週の気になるツール／サービス

ClickUp™ | One app to replace them allhttps://clickup.com/

ClickUpは「One app to replace them all = すべてを置き換える1つのアプリ」のキャッチコピーの通り，タスク管理，共同ドキュメント，チャットなど数多くの機能を持ったサービスです。

Asana，Trello，AirTable，Basecamp，Todoistなど競合するツールとの比較を公式サイトに載せています。オンラインホワイトボード機能も追加されたそうで，Miroとも競合しますね。

プロジェクトマネージメントによりフォーカスしたNotionのようなイメージとも言えそうです。Notionのように簡単に親子関係を持ったドキュメントを作れて，Web共有による一般公開も可能です。Notionでは有料プランが必要なGoogleへのインデックスも無料プランで設定できました。

図6　タスク管理，共同ドキュメント，チャットなど数多くの機能を持つサービス

図6　タスク管理，共同ドキュメント，チャットなど数多くの機能を持つサービス

今週の気になるWebネタ

Zoom，新しいホワイトボード機能「Zoom Whiteboard」を発表 ～v5.10.3以降で利用可能 - 窓の杜https://forest.watch.impress.co.jp/docs/news/1404136.html

Zoomから新しいホワイトボード機能が登場しました。これまでのホワイトボードと違いミーティング中以外にも使える独立したツールとなっています。

また，機能も強化されてMiroなどのホワイトボードツールを意識したものになっています。Miroなどと肩を並べるところまでは行っていませんが，その分シンプルで必要最低限の機能は抑えている印象です。付箋機能が付いたことで，これで十分というユーザーも多いと思います。

なお，Zoomの無料／プロプランユーザーにはZoom Whiteboard機能を使う上での制限がありました。作れるボードは3つまでで，無料プランの場合はさらに25MBまでの容量制限付きです。月2.49ドル／年24.9ドルのZoom Whiteboardプランをアドオンすれば，制限なくボードを作れるようになります。

Webテク, Webデザイン, Web広告, CSS, センタリング, JavaScript, 背景アニメーション, Eコマース, アプリ, Zoom

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote