週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 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デザイナー&ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール(ソフトウェア)の案内,デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote