タイトルの通りです:) 判定の考え方にも色々あるため（要素が1pxでも入っていればいいのか？画面の中央に来たくらいがいいのか？など）、そのあたりも網羅していきたいと思います。 色々な判定の組み合わせ一覧 画面の下部 × 要素の上部 要素が1pxでも画面に入ったら、という判定です。 var scroll; var winH = $(window).height(); var objTop = $('.obj').offset().top; $(window).on('scroll', function(){ scroll = $(window).scrollTop(); if(scroll >= objTop - winH){ //ここに処理 } }); var scroll; var winH = $(window).height(); var objH = $('.obj').outer
![[jQuery] スクロールして、要素が画面内に入ったか・出たかを判定する - ブログ | mgtnsn.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/c71b0a20bb448bbfa924e83ff2eb099a62096954/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fwww.mgtnsn.com%2F_wp%2Fwp-content%2Fuploads%2F2022%2F08%2Fjquery-scroll-event-00.png)
WordPressサイトの構築で必ずといっていいほど使われるAdvanced Custom Fields (ACF)ですが、PHPのバージョンが7から8に変わったタイミングでエラーを吐き出すようになったというケースがよくみられます。 今回はPHP8.3に対応したAdvanced Custom Fields (ACF)でよく使う取得、出力一覧を紹介します。 テキストフィールドの取得・表示 設定は以下を参照してください。 ループ内の場合 $post_id = get_the_ID(); $text = get_field('text_field_name', $post_id); if ($text) { echo esc_html($text); } 『get_the_ID();』で投稿IDを取得、『get_field(‘フィールド名’, ‘投稿IDが入った変数’);』で値を渡すと出力できま
PlaceholderJSはReactやNext.jsアプリにシームレスに統合できるシンプルで軽量なオープンソースのダミー画像生成ツールです。 よくある従来のダミー画像生成サービスと同様に以下のようなフォーマットで任意のダミー画像を生成する事が出来る、というもの。 <img src="https://placeholderjs.com/500x500&text=Hello+World!&color=_FF0000&background=_000000"> 例えばNext.jsでは以下のように使います。 import { Placeholder } from "placeholder"; <Placeholder width="500" height="500" text="Hello World!" color="#FF0000" background="#000000"/> これで先ほど
Chrome 130で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートではCSSネストがより便利になり、box-decoration-breakのサポート、コンテナクエリのフラットツリー検索など、Web制作者は要チェックです！ New in Chrome 130 Chrome 130 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSコンテナクエリのフラットツリー検索 CSSネスト: 入れ子になった宣言ルール プレフィックスなしのbox-decoration-breakを完全サポート ::part()の後に疑似要素と疑似クラスを許可 はじめに 10/16にリリースされたChrome 130で4つのCSSの新しい機能が追加されました。対象となるCh
※本ページは、アフィリエイト広告を利用しています。 Notionをなんとなく使ってる、もっと便利に使いこなしたい、使ったことがない、そんな人にお勧めのNotionの便利な使い方がよく分かる解説書を紹介します。 Notionとは簡単に言うと、テキストや画像や動画などさまざまなコンテンツを含めることができるスマホやデスクトップなどで使用できるクラウド型アプリ。メモやノート、スケジュール管理、タスク管理、家計簿、買い物リスト、運動管理、趣味管理、ブログなど、さまざまなシーンで活躍します。 本書は先日発売されたばかり！ Notionってビジネス向けでしょ、という人がいるかもしれませんが、ビジネスやプロジェクト管理などで活躍するのはもちろん、生活面でも非常に役立つツールです。私事ながら先日母が他界した後に活躍したのがこのNotionです、日々やるべきことがたくさんありましたが、Notionのおかげで
CSSの新しい:hasセレクタと、これを使用したReactコードの改善方法について説明します。実用的で美しい例とともに。 大昔、とは言ってもCSSが出てきた当初の話ですが、CSSはカスケードする仕組みになっていると教えられていました。それは、Cascading Style Sheetsという名前からも分かります。CSSでは、入れ子のように要素の中の要素を指定し、さらにその中に含まれる要素を指定していくことができます。しかし、その逆はできません。したがって、子要素が親要素にスタイルを適用するには、JavaScriptを使うしかありませんでした。 今までは。 すべての主要ブラウザがCSSの:hasセレクタに対応したことで、親要素を指定できるようになりました。それだけではありません。これは世界が一変したと言えるほどの出来事です。筆者のように、要素の角を丸くするために透過GIFを使用していた時代か
ちなみに、SQLite を使用する場合は、Python のインストールが必要です。 今回、私の環境では、MySQL を使用しています。 Strapi のインストール 冒頭にも書いたとおり、今回使用するサーバ OS は、Ubuntu 20.04 です。また、下記はすでにインストールされている前提で進めます。 node.js npm （yarn など別のパッケージマネージャでもよい） MySQL nginx certbot PM2 Web サーバの準備 今回使用する Web サーバは、nginx です。 まず、Strapi をインストールするためのディレクトリを作ります。strapi.example.com というドメインで運用する前提です。 sudo mkdir -p /var/www/strapi.example.com/html sudo chown -R www-data:www-da
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
