3Dアニメーションが手軽に実装できるVanta.jsというJavaScriptのライブラリがあります。Webサイト上で色や表示方法をカスタマイズして、コピペするだけで完成です。今回はこのJavaScriptライブラリを紹介します！
続きを読む

Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！
続きを読む

メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！

基本の円形グラデーション

まずは基本的な円形グラデーションの指定方法です。background-image プロパティーで radial-gradient() のカッコ内に開始色と終了色をカンマで区切って指定します。

background-image: radial-gradient(開始色, 終了色);

この時、色を transparent とすると、透明色が指定でき、後述する複数の色を重ねる時に利用できます。ついでに background-attachment: fixed; を合わせて指定すれば要素いっぱいに色を広げられます。

See the Pen
CSS radial-gradient Basic by Mana (@manabox)
on CodePen.

複数のグラデーションカラーを指定

続いて複数のグラデーションカラーを重ねる方法です。上記の radial-gradient() をカンマで区切って指定するだけ！

background-image:
  radial-gradient(色1, transparent),
  radial-gradient(色2, transparent);

See the Pen
CSS multiple radial-gradient by Mana (@manabox)
on CodePen.

ただ、初期値だとどちらの色も要素の真ん中に表示されるので（これはこれでキレイですが）、少し位置をずらしてメッシュっぽくしていきます。

グラデーションの位置を指定

位置の指定には radial-gradient() のカッコ内に at 横の位置 縦の位置 で指定できます。横の位置が 0 なら左端、100% なら右端。縦の位置は 0 なら上、100% なら下です。単位は % 以外にも px などで指定可能です。

background-image: radial-gradient(at 横の位置 縦の位置, 開始色, 終了色)

以下の例では左上に#ff0、右から60%・最下部に#ff0を指定しました。

See the Pen
CSS radial-gradient position by Mana (@manabox)
on CodePen.

四隅に色を入れるとなかなか幻想的です！

See the Pen
CSS multiple radial-gradient 4 colours by Mana (@manabox)
on CodePen.

ちなみに上に記述した色が前面に表示されるので、重なり具合を見ながら調整するといいでしょう。

グラデーションが広がる大きさを指定

円形グラデーションはグラデーション光線の中心点と末端までを0〜100%で構成されています。指定する色が始まる地点を指定すれば、グラデーションの広がり具合を調整できます。指定方法は色の指定の後に半角スペースで区切って記述します。

background-image: radial-gradient(開始色 位置, 終了色 位置)

See the Pen
CSS radial-gradient size by Mana (@manabox)
on CodePen.

ちなみに開始色と終了色の位置を同じ値にするとぼかしがなくなります。これはこれで別の表現ができるのですが、今回は割愛。

メッシュグラデーションギャラリー

いろんなパターンを作ってみました！配色を考えるのも位置を考えるのも楽しいー！参考にしてみてください！

See the Pen
CSS Mesh Gradients 1 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 2 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 3 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 4 by Mana (@manabox)
on CodePen.

便利なジェネレーターもあります

Mesher Toolを使えば複雑なメッシュグラデーションのCSSコードを楽に生成できちゃいます。画面上にある点を動かしてグラデーションの位置を変えたり、「Rondomize」ボタンからランダムに色を表示してくれます。画面右下の「Copy CSS」ボタンからCSSコードをコピーできますよ。

選択する色や位置、大きさ次第で様々な表現が可能となりますね！今回紹介した指定方法以外の書き方もあるので、ぜひ確認してみてください！

radial-gradient() – CSS: カスケーディングスタイルシート | MDN

WordPressでは2018年から「ブロック」と呼ばれる要素のかたまりを組み合わせてコンテンツを作っていくブロックエディターが利用できるようになりました。今回はテンプレートファイルはいじらず、WordPressの管理画面（ダッシュボード）でブロックを組み合わせるだけでWebサイトを作成できるフルサイト編集機能にフォーカスします！
続きを読む

いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。
続きを読む

新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。
続きを読む

Webサイトの制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。そんなダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。かつて「制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ」という記事で紹介したこともあったのですが、SSLに対応していないものも多かったので、httpsに対応した画像URLが生成できるもののみに絞りました！
続きを読む

WebサイトにInstagramを掲載したい！と思ったときに、意外とその方法が見当たらなかったりしませんか？各Instagramの投稿をブログ記事などに埋め込む方法は公式でありますが、投稿一覧を掲載するには今回紹介する「LightWidget」というサービスを使うと便利ですよ！
続きを読む

上下に並んだセクションの間に、斜めのラインや模様を取り入れると一気に印象が変わります。複雑な図形もSVGを使って実装できますが、一からコーディングするとなるとなかなか手間がかかります。そこで予めいろんな模様が用意されているWebサイトを使って手軽に挿入してみましょう！
続きを読む

WordPress 5.8が公開され、ウィジェットの扱いが大きく変わって早1ヶ月。皆さんうまくウィジェットとお付き合いできていますか？レイアウトが崩れたりHTMLの構造がおかしくなっちゃったりの不具合をどうにかする方法や、そもそも元のウィジェットに戻したい！という方向けに記事にしてみます。
続きを読む