週刊Webテク通信

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

ネットで見かけた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 タスク管理、共同ドキュメント、チャットなど数多くの機能を持つサービス

おすすめ記事

記事・ニュース一覧