Googleスプレッドシートで行きたいお店や場所のリストを管理しているかたもいらっしゃると思います。Googleマップのリストにまとめておいて共有することもできますが、それをサイトにして公開したいということもあるかと思います。 そんなときに、便利そうなのが今回ご紹介するサービスです。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 指定条件でリストを絞り込めるサイトをGoogleスプレッドシートで作れる「Sheet 2 Site」 「Sheet 2 Siteは、専用のGoogleスプレッドシートのファイルに必要な情報を入れるだけで、リアルタイムにサイトを作成、更新できるサービス。 スプレッドシートに一覧した情報をサイトに掲載し、あらかじめ指定した条件でリストを絞り込むこともできます。 スプレッドシ

ボタンや矩形などの要素にシャドウを付ける時は「box-shadow」が便利ですが、1色または重ねても全体が均一のカラーでしかシャドウを適用することができません。 2色の美しいCSSグラデーションでシャドウを適用するPure CSSの実装を紹介します。 Gradient shadow in pure CSS デモ 実装 デモ まずは、実際の動作から見てましょう。 2色の美しいグラデーションを伴ったシャドウは、ボタンのノーマル時・ホバー時・アクティブ時のそれぞれで異なります。

/* センターに寄せているだけなので、参照しなくてOK */ .bg { height: 100vh; background-color: #000; display: flex; justify-content: center; align-items: center; } .border { width: 400px; height: 400px; border-radius: 50%; border-top: 10px solid #fff; background-color: #fff; animation-name: spin; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; } /* 回転するkeyframe */ @keyframes

自分用に一覧化したものがほしくて作ったのでシェアします。 ボタンのホバーエフェクトとして見かける機会も多くなった、ホバーしたら背景がスライドしたり領域を覆うアニメーションのサンプルです。 アニメーションによってはホバー時の見栄えを維持するのではなく、ホバー時に一時的に見えるようなタイプもあります。 共通のHTML・CSS ここで紹介しているサンプルはいずれも下記のようなシンプルなHTMLをベースに使用しています。

約1年半前からモバイルファーストインデックスのテストをGoogleは実施してきました。 そして、ついにモバイルファーストインデックスのロールアウトをGoogleが発表しました。 モバイルファーストインデックスに移行したサイトにはSearch Consoleに通知を送ってくれる 昨年のGoogle Dance Tokyoで、Gary Illyes氏がモバイルファーストインデックス（以下、MFI）に移行したサイトにはSearch Consoleにオプトイン・オプトアウトの導入を検討すると言っていました。 最終的にSearch Consoleで通知するという結論に至ったのでしょう。 僕は通知は不要だと考えています。 MFIはランキングに影響することではなく、インデックスの収集方法を変えるだけの話です。 Googleを見てコンテンツ制作している方は驚くかもしれませんが、ユーザーを見てコンテンツを制