週刊Webテク通信

2021年2月第2週号1位は、いまならCSSだけでできること、気になるネタは、Twitterの音声チャットルーム「Spaces」日本でいち早く体験--Clubhouse対抗になりうるか

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

1. Things You Can Do With CSS Today — Smashing Magazinehttps://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/

いまならCSSだけでできることをまとめた記事です。CSSの新しいプロパティと便利な利用法を紹介しています。

レンガ組みレイアウト、テキストのアンダーラインの太さや色、ページ内リンクでスクロールしたときの上マージンなど、CSSだけでこんなこともできるようになったんだという発見があります。

:isセレクタやclamp()関数の利用法も興味深いです。

図1 いまならCSSだけでできること
図1 いまならCSSだけでできること

2. 3 Essential Design Trends, February 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/02/3-essential-design-trends-february-2021/

Webデザインのトレンドを3つ紹介しています。

  • 伝統的ではないナビゲーション
  • 手書きのサインのようなマーク
  • 流体のような形状
図2 3つのデザイントレンド
図2 3つのデザイントレンド

3. z-index by examples | juliu.ishttps://juliu.is/z-index-by-examples/

z-indexの使い方について、段階を追って細かく解説した記事です。CSSの設定による上下関係の変化を図で確認できます。

意外と思ったとおりにならないことも多い、z-indexについての理解を深められるはずです。

図3 z-indexの使い方を細かく解説
図3 z-indexの使い方を細かく解説

4. Sketch App Sources - Free design resources and plugins - Icons, UI Kits, Wireframes, iOS, Android Templates for Sketchhttps://www.sketchappsources.com/

Sketch用の無料素材を配布しています。素材はユーザーの投稿によって集めているようです。素材を提供するユーザーにとっては自分のPRの場となり、このサイトは有料のコンテンツへの誘導などで利益を得ているようです。

UIキット、ワイヤーフレーム、モックアップ、アイコンなどカテゴリ別に大量の無料素材があります。Sketch形式のファイルしかありませんが、SketchファイルはFigma、Adboe XDでも開けるので、ほとんどの人が利用できるはずです。

図4 Sketch用の無料素材の配布サイト
図4 Sketch用の無料素材の配布サイト

5. Glassmorphism CSS Generatorhttps://glassmorphism.com/

グラスモーフィズムのジェネレーターです。くもりガラスをかぶせたような効果をつくり、CSSをコピーできます。

ぼかし、透明度、色をカスタマイズできます。

図5 グラスモーフィズムのジェネレーター
図5 グラスモーフィズムのジェネレーター

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

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

SVG Waves - Instantly generate waveshttps://www.svgwaves.io/

Webページ内のセクションを区切る曲線をSVGで作るジェネレーターです。一見シンプルなUIですが、カスタマイズ性はかなり高くて驚きました。

曲線の谷となる部分は直接ドラッグして位置を変えられます。谷、あるいは山となる頂点の部分はいくつでも増やせるので、だいたい思い通りの形が作れるはずです。横幅に合わせてレスポンシブに変化します。

曲線ではなく直線でギザギザな形も作れます。そのままdivの領域に適用したい場合には、生成されたCSSをコピーして使うだけです。反転や回転させるためのCSSの記述例も載っていました。

図6 SVGで作る曲線ジェネレーター
図6 SVGで作る曲線ジェネレーター

おすすめ記事

記事・ニュース一覧