2021年2月第1週号

2021年2月第1週号　1位は，Clubhouseのアイコンにも使われている「スーパー楕円」のボタンの作り方，気になるネタは，いらすとや、2月より毎日更新を一時停止‐「ここ数年、ほとんど休みがなかった」

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

ラメ曲線を使ったスーパー楕円によるボタンの作り方を解説しています。ラメ曲線やスーパー楕円という言葉にはなじみがない人が多いと思いますが、今話題のClubhouseのユーザーアイコンの形といえばピンと来るかもしれません。

この記事でのCSSによるスーパー楕円ボタンの作り方は、角丸を作った上で ::before と ::after を使って塗り足しています。

スーパー楕円についてはこんな記事もありました。

図1　スーパー楕円によるボタンの作り方

Flexboxの各プロパティの値を変えることで表示がどうなるかを確認できるページです。できたコードをコピーできます。

下の方にある「flex items」からアイテム数を増減させたりアイテムの高さを変更できます。アイテムの幅も変更したいところですが、それはできません。

図2　Flexboxの表示を確認できるガイドページ

SVGアイコンをコーディングする方法を詳しく解説した記事です。

以下の形状を描く方法をレクチャーしています。