[B! javascript] View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術

<!DOCTYPE html> <html lang="ja" data-page-scope="Entry" data-stable-request-url="https://b.hatena.ne.jp/entry?url=https%3A%2F%2Fics.media%2Fentry%2F230510%2F" data-device-type="PC" data-sentry-environment="production" data-sentry-sample-rate="0.1" data-alert-admin-names="" data-bookmark-count="134" data-category-name="it" data-entry-created="2023-05-10T11:42:41Z" data-entry-eid="4736300501008890469" data-entry-url="https://ics.media/entry/230510/" data-page-subtype="entry" data-page-type="entry" > <head>  <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5TDHQX'); </script>  <meta charset="UTF-8"> <title>[B! javascript] View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA</title> <script src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/js/v4/bookmark.js" async></script> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/css/v4/bookmark.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/css/v4/bookmark.star.css" /> <link rel="canonical" href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230510/" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width"> <link rel="search" type="application/opensearchdescription+xml" title="はてなブックマーク検索" href="/opensearch.xml" /> <link rel="apple-touch-icon-precomposed" href="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/apple-touch-icon-precomposed.png" /> <link rel="mask-icon" href="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/safari-pinned-tab-icon.svg" color="#00A4DE" /> <meta name="msapplication-navbutton-color" content="#2C6EBD" /> <meta name="msapplication-task" content="name=はてなブックマーク; action-uri=/; icon-uri=https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/icons/bookmark.ico" /> <meta name="msapplication-task" content="name=マイブックマーク; action-uri=/my; icon-uri=https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/icons/my-bookmark.ico" /> <meta name="msapplication-task" content="name=お気に入りのブックマーク; action-uri=/my/favorite; icon-uri=https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/icons/favorite-bookmark.ico" /> <meta name="msapplication-task" content="name=人気エントリー; action-uri=/hotentry; icon-uri=https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/icons/hotentry.ico" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="always"> <link rel="alternate" href="android-app://com.hatena.android.bookmark/https://b.hatena.ne.jp/entry.comment/s/ics.media/entry/230510/" /> <meta property="og:title" content="『View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA』へのコメント"> <meta property="og:type" content="article"> <meta property="og:url" content="https://b.hatena.ne.jp/entry/s/ics.media/entry/230510/"> <meta property="og:description" content="この記事に対して5件のコメントがあります。コメントは「“①document.startViewTransition()メソッドを呼び出す ②DOM変化前後のスナップショットが撮られる ③HTMLの最前面にスナップショットが配置される ④クロスフェードで変化する”」、「これいいねーかわいい」、「よさげな機能。でも複雑なんやな。そして別ファイルのhtmlへの遷移ではなくて、SPA用の機能なんやな。」、「あー、これGWのお勉強ネタにするべきだったな…。しくじった…」です。"> <meta property="og:site_name" content="はてなブックマーク" /> <meta property="og:image" content="https://ics.media/entry/230510/images/eyecatch.png"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@HatenaBookmark"> <meta name="twitter:title" content="『View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA』へのコメント"> <meta name="twitter:description" content="reboot_in, ”“①document.startViewTransition()メソッドを呼び出す ②DOM変化前後のスナップショットが撮られる ③HTMLの最前面にスナップショットが配置される ④クロスフェードで変化する”” / sippo_des, ”これいいねーかわいい”"> <meta name="twitter:image" content="https://ics.media/entry/230510/images/eyecatch.png"> <link rel="alternate" type="application/rss+xml" href="/entry/rss/https://ics.media/entry/230510/" /> <script> function isMobile() { const html = document.documentElement; const deviceType = html.dataset.deviceType || ''; if (deviceType.length > 0) { return deviceType === 'MOBILE'; } else { const maxMobileWidth = 480; const windowWidth = window.innerWidth; return maxMobileWidth >= windowWidth; } } </script> </head> <body class="page-entry fixed-header">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5TDHQX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="link-app-banner js-dynamic-link-app-banner is-hidden"> <button class="link-app-banner-btn-close js-dynamic-link-app-banner-close-button"><span>close</span></button> <a class="link-app-banner-btn" href="https://hatenabookmark.page.link/app"> <div class="link-app-banner-btn-detail"> <div class="link-app-banner-icon"><img src="/images/v4/public/app/ic-ios.svg" alt="はてなブックマークアプリ"></div> <p class="link-app-banner-text">サクサク読めて、<br class="link-app-banner-text-newline">アプリ限定の機能も多数！</p> </div> <div class="link-app-banner-btn-open">アプリで開く</div> </a> </div> <header id="global-header" data-portal-static-origin="//cdn.www.st-hatena.com"> <div id="header" class="global-header-inner js-global-header-inner"> <h2 id="gh-logo"><a href="/" data-gtm-label="gh-blogo"><span>はてなブックマーク</span></a></h2> <div class="is-guest js-guest is-hidden"> <input id="gh-search-icon-check" type="checkbox" checked="checked" /> <label class="gh-search-icon" for="gh-search-icon-check" aria-label="検索を閉じる"><span>閉じる</span></label> <form class="gh-searchbox" method="get" action="/search_dwim" role="search"> <input value="" name="q" type="search" class="gh-inputtext" placeholder="キーワード・URLを検索" size="40" /> <input value="" type="submit" class="gh-search-button" /> </form> <ul class="gh-service-menu"> <li><a href="/guide" data-gtm-label="gh-guest-guide">はてなブックマークって？</a></li> <li><a href="/guide/tools" data-gtm-label="gh-guest-tools">アプリ・拡張の紹介</a></li> <li><a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2F%3Fregistered_from%3Dglobal-header&via=201037" class="gh-guest-register" data-gtm-label="gh-guest-register">ユーザー登録</a></li> <li><a href="https://www.hatena.ne.jp/login?location=https%3A%2F%2Fb.hatena.ne.jp%2Fentry%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F" rel="nofollow" class="gh-guest-login" data-gtm-label="gh-guest-login">ログイン</a></li> <li class="gh-hatena-logo"><a href="http://www.hatena.ne.jp/"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/logo/logo-global-white.svg" alt="Hatena" width="74px" height="13px"/></a></li> </ul> </div> <noscript> <ul class="gh-service-menu"> <li><a href="https://www.hatena.ne.jp/logout?location=https%3A%2F%2Fb.hatena.ne.jp%2F">ログアウト</a></li> </ul> </noscript> <script type="text/x-template" id="template-menu-hatena-user"> <form class="gh-searchbox" method="get" action="/search_dwim" role="search"> <input value="" name="q" type="search" class="gh-inputtext" placeholder="キーワード・URLを検索" size="40" /> <input value="" type="submit" class="gh-search-button" /> </form> <ul class="gh-service-menu"> <li><a class="hotentry" data-gtm-label="gh-mypage" href="{{hotentry_url}}"><img src="{{user_image_url}}" class="header-profile-icon" width="16" height="16" alt="{{username}}" /></a><a class="hotentry" data-gtm-label="gh-mypage" href="{{hotentry_url}}">マイページ</a></li> <li><a class="bookmark" data-gtm-label="gh-bookmark" href="{{bookmark_url}}">ブックマーク</a></li> <li><a class="unread_bookmark" data-gtm-label="gh-ril" href="{{bookmark_stock_url}}">あとで読む</a></li> <li><a class="add" data-gtm-label="gh-add" href="{{add_bookmark_url}}">追加</a></li> <li><a class="tools" data-gtm-label="gh-tools" href="/guide/tools">ツール</a></li> <li><a class="config" data-gtm-label="gh-config" href="/-/my/config/profile">設定</a></li> <li><a class="feedback" data-gtm-label="gh-feedback" href="/-/feedback/hatena_bookmark" target="_blank">フィードバック</a></li> <li id="header-username" class="gh-dropdown-services" data-gtm-label="gh-services" title="利用中のサービス" data-name="{{username}}"> <span class="header-dropdown gh-dropdown" tabindex="0"> <img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/common/usermenu-wh.svg" alt="利用中のサービス" width="24" height="24" /> </span> <dl class="header-window" id="username-window"></dl> </li> <li id="header-notify" data-gtm-label="gh-notify" class="gh-dropdown-notify" title="あなたへのお知らせ"> <span class="header-dropdown gh-dropdown" tabindex="0"> <img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/common/notify-wh.svg" alt="あなたへのお知らせ" width="25" height="25" /> <span class="notify-count"></span> </span> <div id="notify-window" class="header-window header-notify"></div> </li> <li class="gh-hatena-logo"><a href="http://www.hatena.ne.jp/"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/logo/logo-global-white.svg" alt="Hatena" width="74px" height="13px"/></a></li> </ul> </script> </div> </header> <div id="info-header"><div id="info-header-message"></div><span></span></div> <div class="global-notification is-hidden js-global-notification"></div> <script type="text/javascript"> // ---------------- dfp section ---------------- var valve = valve || []; if (isMobile()) { valve.push(function(v) { v.defineDFPSlot({ unit: '/4374287/bookmark_sp_entry_above-comment_320x100', sizes: [[320,100]], slotId: 'entry-ad-sp-upon-comments' }); var isCapableForMultiSizeAds = false; var adSizesForMobileRectangle = isCapableForMultiSizeAds && window.screen.availWidth >= 336 ? [[336,280],[300,250]] : [[300,250]]; v.defineDFPSlot({ unit: '/4374287/bookmark_sp_entry_under-title_300x250', sizes: adSizesForMobileRectangle, slotId: 'entry-ad-sp-below-comments' }); v.defineDFPSlot({ unit: '/4374287/b_sp_com_1_3250_0_no', sizes: [[320,80],[320,70],[320,50]], slotId: 'touch-footer-ad' }); v.defineDFPSlot({ unit: '/4374287/bookmark_sp_a', sizes: [[300,250]], slotId: 'entry-touch-a-rectangle' }); v.defineDFPSlot({ unit: '/4374287/bookmark_sp_entry', sizes: [[300,250]], slotId: 'entry-touch-rectangle' }); v.sealDFPSlots(); }); } else { valve.push(function(v) { v.defineDFPSlot({ unit: '/4374287/bookmark_entry', sizes: [[300,250]], slotId: 'entry-rectangle-top-right' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entry2', sizes: [[300,250]], slotId: 'entry-rectangle-bottom-right' }); v.defineDFPSlot({ unit: '/4374287/b_pc_e_8_tex_0_v2', sizes: [[728, 90],[578, 80]], slotId: 'entry-text-ad' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entry_left', sizes: [[336,280],[300,250]], slotId: 'entry-double-rectangle-left' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entry_right', sizes: [[336,280],[300,250]], slotId: 'entry-double-rectangle-right' }); v.sealDFPSlots(); }); } </script> <script> var valve = window.valve || []; valve.push(function(v) { var pageKeyValues = {"categoryAdminName":"it"}; if (document.cookie.split(';').some(function(item) { return item.indexOf('202011_guest_status=register_incomplete') >= 0})) { pageKeyValues.bookmark_status = 'register_incomplete'; } v.config({ bypass: false, pageKeyValues: pageKeyValues, textSelector: ".entry-contents", content: { result: "ng" }, service: 'bookmark' }); }); </script> <script src="https://cdn.pool.st-hatena.com/valve/valve.js" async></script> <style id="ignore-user-style" type="text/css"></style> <script type="text/javascript"> (function() { var ignoreUsers; try { ignoreUsers = window.localStorage.getItem("bstn.ignored_users") || "[]"; } catch (ignore) { ignoreUsers = "[]" } try { ignoreUsers = JSON.parse(ignoreUsers) } catch (ignore) { ignoreUsers = [] } if (ignoreUsers.length) { const style = document.getElementById('ignore-user-style'); const chunkSize = 1000; let css = ''; for (let i = 0; i < ignoreUsers.length; i += chunkSize) { css += ignoreUsers.slice(i, i + chunkSize).map(function(user) { return '.js-ignorable-user-content[data-user-name="' + user + '"]'; }).join(",") + "{ display: none; }\n"; } style.textContent = css; } })() </script> <div class="navi-wrapper is-simple is-fixed"> <ul class="navi-body"> <li class="cat-all" data-category-name="cat-all"> <div class="navi-link"> <a href="/hotentry/all" class="navi-link-text cat-all" data-gtm-label="global-navi-all"><span>総合</span></a> </div> </li> <li class="cat-general" data-category-name="cat-general"> <div class="navi-link"> <a href="/hotentry/general" class="navi-link-text cat-general" data-gtm-label="global-navi-general"><span>一般</span></a> </div> </li> <li class="cat-social" data-category-name="cat-social"> <div class="navi-link"> <a href="/hotentry/social" class="navi-link-text cat-social" data-gtm-label="global-navi-social"><span>世の中</span></a> </div> </li> <li class="cat-economics" data-category-name="cat-economics"> <div class="navi-link"> <a href="/hotentry/economics" class="navi-link-text cat-economics" data-gtm-label="global-navi-economics"><span>政治と経済</span></a> </div> </li> <li class="cat-life" data-category-name="cat-life"> <div class="navi-link"> <a href="/hotentry/life" class="navi-link-text cat-life" data-gtm-label="global-navi-life"><span>暮らし</span></a> </div> </li> <li class="cat-knowledge" data-category-name="cat-knowledge"> <div class="navi-link"> <a href="/hotentry/knowledge" class="navi-link-text cat-knowledge" data-gtm-label="global-navi-knowledge"><span>学び</span></a> </div> </li> <li class="cat-it" data-category-name="cat-it"> <div class="navi-link"> <a href="/hotentry/it" class="navi-link-text cat-it" data-gtm-label="global-navi-it"><span>テクノロジー</span></a> </div> </li> <li class="cat-fun" data-category-name="cat-fun"> <div class="navi-link"> <a href="/hotentry/fun" class="navi-link-text cat-fun" data-gtm-label="global-navi-fun"><span>おもしろ</span></a> </div> </li> <li class="cat-entertainment" data-category-name="cat-entertainment"> <div class="navi-link"> <a href="/hotentry/entertainment" class="navi-link-text cat-entertainment" data-gtm-label="global-navi-entertainment"><span>エンタメ</span></a> </div> </li> <li class="cat-game" data-category-name="cat-game"> <div class="navi-link"> <a href="/hotentry/game" class="navi-link-text cat-game" data-gtm-label="global-navi-game"><span>アニメとゲーム</span></a> </div> </li> </ul> </div> <div id="container" class="entry-container cat-it"> <div class="entry-wrapper js-entry-wrapper" data-entry-url="https://ics.media/entry/230510/"> <div class="breadcrumb-wrapper"> <ul class="breadcrumb"> <li><a href="/" data-gtm-label="entry-breadcrumb-home"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/breadcrumb-home.svg" alt="はてなブックマーク" class="breadcrumb-home"></a></li> <li><a href="/hotentry/it" data-gtm-label="entry-breadcrumb-category">テクノロジー</a></li> <li><span class="breadcrumb-current">View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA</li> </ul> <ul class="breadcrumb-share"> <li><a href="https://twitter.com/share?text=View+Transitions+API%E5%85%A5%E9%96%80+-+%E9%80%A3%E7%B6%9A%E6%80%A7%E3%81%AE%E3%81%82%E3%82%8B%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%82%A6%E3%82%A7%E3%83%96%E3%81%AE%E6%96%B0%E6%8A%80%E8%A1%93+-+ICS+MEDIA&url=https%3A%2F%2Fb.hatena.ne.jp%2Fentry%2Fs%2Fics.media%2Fentry%2F230510%2F" target="_blank" rel="noopener" title="Twitterでシェア" data-gtm-label="entry-share-twitter"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/share-twitter.svg" alt="Twitterでシェア"></a></li> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fb.hatena.ne.jp%2Fentry%2Fs%2Fics.media%2Fentry%2F230510%2F" target="_blank" rel="noopener" title="Facebookでシェア" data-gtm-label="entry-share-facebook"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/share-facebook.svg" alt="Facebookでシェア"></a></li> </ul> </div> <div class="entry-contents" itemtype="https://schema.org/DiscussionForumPosting" itemscope> <div class="entry-main"> <div class="guide-blogToBookmark-modal js-blogtobookmark-modal is-hidden"> <div class="guide-blogToBookmark-window js-modal-content"> <h3>気に入った記事をブックマーク</h3> <img class="guide-blogToBookmark-image" src="/images/v4/public/b_panel/guide-hatenablog-to-bookmark.svg" width="144" height="144"> <ul class="guide-blogToBookmark-benefit"> <li><b>気に入った記事を保存</b>できます <div class="guide-blogToBookmark-benefit-note">保存した記事の一覧は、はてなブックマークで確認・編集ができます</div> </li> <li>記事を読んだ<b>感想やメモを書き残せます</b></li> <li><b>非公開でブックマーク</b>することもできます</li> </ul> <div class="guide-blogToBookmark-btn js-modal-close-button"><button>記事をブックマークしてみる</button></div> </div> </div> <div class="entry-bookmark"> <meta itemprop="mainEntityOfPage" content="https://b.hatena.ne.jp/entry/s/ics.media/entry/230510/"> <meta itemprop="url" content="https://b.hatena.ne.jp/entry/s/ics.media/entry/230510/"> <meta itemprop="datePublished" content="2023-05-10T11:42:41Z"> <div itemprop="author" itemtype="https://schema.org/Person" itemscope> <meta itemprop="name" content="ics-media"> <meta itemprop="url" content="/ics-media/"> </div> <div class="entry-info"> <div class="entry-info-inner"> <h1 class="entry-info-title js-entry-info-title"> <a href="https://ics.media/entry/230510/" class="js-entry-info-title-text" data-gtm-label="entry-info-title" data-entry-id="4736300501008890469" data-entry-category="テクノロジー" title="View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA" target="_blank" rel="noopener"> <span itemprop="headline">View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA</span> </a> </h1> <div class="entry-info-meta js-entry-info"> <span class="entry-info-category"><a class="entry-info-category-name" href="/hotentry/it" data-gtm-label="entry-info-category">テクノロジー</a> <a class="entry-info-category-change" href="https://docs.google.com/forms/d/e/1FAIpQLSc2KRyIMERuugzXCP79fjv5P7qnPh2vzINDpw1ARYyKL7zjnA/viewform?usp=pp_url&entry.773742086=https%3A%2F%2Fics.media%2Fentry%2F230510%2F&entry.1114420074=View%20Transitions%20API%E5%85%A5%E9%96%80%20-%20%E9%80%A3%E7%B6%9A%E6%80%A7%E3%81%AE%E3%81%82%E3%82%8B%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%82%A6%E3%82%A7%E3%83%96%E3%81%AE%E6%96%B0%E6%8A%80%E8%A1%93%20-%20ICS%20MEDIA&entry.867410236=%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC" target="_blank" aria-label="カテゴリーの変更を依頼"><span>カテゴリーの変更を依頼</span></a> </span> <span class="entry-info-domain"><span class="text">記事元:</span><a href="/site/ics.media/" data-gtm-label="entry-info-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F230510%2F" alt="" width="16px" height="16px">ics.media</a></span> </div> </div> <div class="entry-edit js-entry-edit-button"> <span class="entry-edit-popup">適切な情報に変更</span> <button type="button" class="entry-edit-btn"> <img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/edit.svg" alt="編集"> </button> </div> <div class="entry-editModal is-hidden js-entry-edit-modal" data-url="https://ics.media/entry/230510/"> <div class="entry-editModal-window js-entry-edit-modal-window"> <h3 class="entry-editModal-title">エントリーの編集</h3> <p class="entry-editModal-description js-entry-edit-modal-description"></p> <div class="entry-editModal-spinner js-entry-edit-modal-spinner"> <img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/common/loading@2x.gif" alt="loading..." class="entry-editModal-spinner-icon"> </div> <div class="entry-editModal-general js-entry-edit-modal-general is-hidden"> <p class="entry-editModal-description">エントリーの編集は<span class="caution">全ユーザーに共通</span>の機能です。<br> 必ずガイドラインを一読の上ご利用ください。</p> <form method="post" action="" class="entry-editModal-form"> <div class="js-entry-edit-modal-title is-hidden"> <h4 class="entry-editModal-headline">タイトル<span class="entry-editModal-guideline"><a href="https://b.hatena.ne.jp/help/entry/guideline_title">ガイドライン</a></span></h4> <input type="text" name="title" value="View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA" class="entry-editModal-textInput"> </div> <div class="entry-editModal-btnArea"> <button type="button" class="entry-editModal-cancel js-entry-edit-modal-cancel-button is-hidden">キャンセル</button> <button type="submit" class="entry-editModal-decide js-entry-edit-modal-decision-button is-hidden">保存する</button> </div> </form> </div> <div class="entry-editModal-owner js-entry-edit-modal-owner is-hidden"> <p class="entry-editModal-owner-description">このページのオーナーなので以下のアクションを実行できます</p> <div class="entry-editModal-renew js-entry-edit-modal-refresh is-hidden"> <span class="entry-editModal-renew-help">タイトル、本文などの情報を<br>再取得することができます</span> <button type="button" class="entry-editModal-renew-btn">情報を更新する</button> </div> <div class="entry-editModal-visibility js-entry-edit-modal-visibility is-hidden"> <span class="entry-editModal-visibility-help">コメントを非表示にできます</span> <a href="/my/site/https%3A%2F%2Fics.media%2Fentry%2F230510%2F/visibility">コメント表示の設定</a> </div> </div> <button type="button" class="entry-editModal-close js-entry-edit-modal-close-button"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/overlay-close-gray.svg" alt=""></button> </div> </div> <div class="entry-twitterModal is-hidden js-twitter-share-modal"> <div class="entry-twitterModal-window js-modal-content"> <h3 class="entry-twitterModal-title">ブックマークしました</h3> <p class="entry-twitterModal-tweet js-twitter-share-modal-text"> ここにツイート内容が記載されます <span>https://b.hatena.ne.jp/URLはspanで囲んでください</span> </p> <a href="#" class="entry-twitterModal-btn js-twitter-share-modal-share-link" target="_blank" rel="noopener" data-gtm-click-label="share-modal-twitter">Twitterで共有</a> <div class="entry-twitterModal-checkbox is-hidden js-twitter-share-modal-auto-redirect"> <input class="entry-twitterModal-checkbox-btn" type="checkbox" id="twitter-redirect-switch" data-gtm-click-label="share-checkbox-twitter"> <label class="entry-twitterModal-checkbox-label" for="twitter-redirect-switch">次回からTwitterへ自動リダイレクト</label> </div> <p class="entry-twitterModal-note is-hidden js-twitter-share-modal-auto-redirect-note">ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します</p> <button type="button" class="entry-twitterModal-close js-modal-close-button"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/overlay-close-gray.svg" alt=""></button> </div> </div> </div> <div class="entry-myBookmark js-entry-myBookmark" data-entry-canonical-url="https://ics.media/entry/230510/" data-default-comment="" data-bookmark-source=""> <div class="entry-user-and-comment"> <span class="entry-info-users" itemprop="interactionStatistic" itemtype="https://schema.org/InteractionCounter" itemscope><a href="" data-gtm-label="entry-info-users"><span itemprop="userInteractionCount">134</span> users</a><span class="text" itemprop="interactionType" content="https://schema.org/LikeAction">がブックマーク</span></span> <span class="entry-info-comment" itemprop="interactionStatistic" itemtype="https://schema.org/InteractionCounter" itemscope><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/ic-comment.svg" alt="コメント" itemprop="interactionType" content="https://schema.org/CommentAction"><span itemprop="userInteractionCount">5</span></span> </div> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://ics.media/entry/230510/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> <script type="text/x-template" id="entry-myBookmark-template"> <a href="/{{ user_name }}/" class="entry-myBookmark-icon"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" title="{{ user_name }}"> </a> <span class="entry-myBookmark-username"><a href="{{ anchor_path }}">{{ user_name }}</a></span> <span class="js-private-icon status {{ #is_public }}is-hidden{{ /is_public }}"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/userpage/icon-private.svg" alt="非公開" width="10px" height="10px"></span> <span class="entry-myBookmark-text">{{{ comment_expanded }}}</span> <ul class="entry-comment-tags"> {{ #tags }} <li><a href="/{{ user_name }}/{{ tag_escaped }}/">{{ tag }}</a></li> {{ /tags }} </ul> <div class="entry-myBookmark-foot"> <p class="entry-comment-meta"> <span class="entry-comment-timestamp"><a href="{{ anchor_path }}">{{ timestamp }}</a></span> </p> <ul class="entry-myBookmark-menu js-bookmark-menu js-intent-share-bookmark" data-target-url="{{ url }}"> <li class="entry-myBookmark-item entry-myBookmark-share"> <div class="tooltip-hint is-invisible js-intent-share-tooltip"> <p class="tooltip-hint-text">こちらからブックマークを共有できます</p> <button class="tooltip-hint-close js-tooltip-close"><span>close</span></button> </div> <div class="ui-contextMenu entry-myBookmark-item-inner"> <div class="ui-contextMenu-btn entry-myBookmark-menu-btn js-intent-share-button" tabindex="0" role="button"> <span class="entry-myBookmark-popup">共有</span> </div> <div class="ui-contextMenu-list entry-myBookmark-menu-list js-intent-share-container"> <ul class="is-disabled" tabindex="-1"> <li> <a href="#" class="ui-contextMenu-listItem entry-myBookmark-menu-item entry-myBookmark-menu-item--twitter js-intent-share-twitter-link" target="_blank" rel="noopener" data-gtm-click-label="share-intent-twitter">Twitterへ共有</a> </li> <li> <a href="#" class="ui-contextMenu-listItem entry-myBookmark-menu-item entry-myBookmark-menu-item--mastodon js-intent-share-mastodon-link" target="_blank" rel="noopener" data-gtm-click-label="share-intent-mastodon">Mastodonへ共有</a> </li> </ul> </div> </div> </li> <li class="entry-myBookmark-item entry-myBookmark-edit"> <button type="button" class="entry-myBookmark-menu-btn js-inplace-edit"> <span class="entry-myBookmark-popup">ブックマークを編集</span> </button> </li> <li class="entry-myBookmark-item entry-myBookmark-delete"> <button type="button" class="entry-myBookmark-menu-btn js-inplace-delete" data-confirm-message="ブックマークを削除しますか？"> <span class="entry-myBookmark-popup">ブックマークを削除</span> </button> </li> </ul> </div> </script> <div class="entry-myBookmark-container js-entry-myBookmark-container"></div> <div class="entry-myBookmark-guest is-hidden js-entry-myBookmark-guest"> <a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2Fmy%2Fadd.confirm%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F%26registered_from%3Dentry-info-register-user-icon&via=201038" class="entry-myBookmark-icon js-register-modal-link" data-gtm-label="entry-info-register-user-icon"> <img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/profile.gif" alt="ゲスト" title="ゲスト"> </a> <div class="entry-myBookmark-guest-main"> <a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2Fmy%2Fadd.confirm%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F%26registered_from%3Dentry-info-register-form&via=201038" class="entry-myBookmark-guest-form js-register-modal-link" data-gtm-label="entry-info-register-form">コメントするにはログインが必要です</a> <a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2Fmy%2Fadd.confirm%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F%26registered_from%3Dentry-info-register-button&via=201038" class="entry-myBookmark-guest-button js-register-modal-link" data-gtm-label="entry-info-register-button"><span>ブックマークを追加</span></a> </div> <div class="entry-myBookmark-guest-register"> <a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2Fmy%2Fadd.confirm%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F%26registered_from%3Dentry-info-register-button-cta-bookmark&via=201038" class="entry-myBookmark-guest-button js-register-modal-link" data-gtm-click-label="entry-info-register-button-cta-bookmark" rel="noreferrer"><span>ブックマークを追加</span></a> </div> </div> <div class="bookmarkadd-iconLeft js-user-bookmark-edit editing-form js-editing-form is-hidden entry-myBookmark-form"> <div class="bookmarkadd-iconLeft-icon js-profile-image-container"> <script type="text/x-template" id="template-user-profile-image"> <a href="/{{ user_name }}"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" title="{{ user_name }}" class="bookmarkadd-iconLeft-icon-image"> </a> </script> </div> <div class="bookmarkadd-iconLeft-main"> <form method="post" action="/my/bookmark" class="js-add-form "> <input type="hidden" name="url" value="https://ics.media/entry/230510/" /> <input type="hidden" name="from" value="entry" /> <div class="bookmarkadd-comment js-annotation-component"> <textarea class="bookmarkadd-comment-form is-comment-form-shrink" name="annotation" placeholder="コメントを入力してください (省略可)" aria-label="コメントを入力 (省略可)" ></textarea> <div class="bookmarkadd-comment-footer"> <div class="bookmarkadd-community-guideline"> <p><a href="/guide/guideline" target="_blank">ガイドライン</a>をご確認の上、良識あるコメントにご協力ください</p> </div> <span class="bookmarkadd-comment-count"> <span class="js-bookmarkadd-comment-count">0</span> <span class="bookmarkadd-comment-slash">/</span> <span class="js-bookmarkadd-comment-limit">0</span> </span> </div> </div> <div class="bookmarkadd-options"> <div class="bookmarkadd-tags js-bookmarkadd-tags"> <input type="text" class="bookmarkadd-tags-textbox js-bookmarkadd-tags-textbox" placeholder="タグを入力して追加" aria-label="タグを入力して追加(省略可)"> <span class="bookmarkadd-tags-btn is-hidden js-bookmarkadd-tags-btn"> <span class="bookmarkadd-tags-btn-popup">入力したタグを追加</span> <button class="bookmarkadd-tags-btn-image"></button> </span> </div> <div class="bookmarkadd-share"> <div class="bookmarkadd-share-block js-bookmarkadd-share-block"> <label class="bookmarkadd-share-label js-bookmarkadd-share-label-twitter"> <input type="checkbox" name="post_twitter" class="bookmarkadd-shareInput" value="1" /> <span class="bookmarkadd-twitter"> <span class="bookmarkadd-share-text twitter"> twitterにシェア </span> </span> </label> <label class="bookmarkadd-share-label"> <input type="checkbox" name="bookmark_stock" class="bookmarkadd-shareInput js-bookmarkadd-readlater" value="1" /> <span class="bookmarkadd-readlater"> <span class="bookmarkadd-share-text readlater">あとで読む</span> </span> </label> <label class="bookmarkadd-share-label"> <input type="checkbox" class="bookmarkadd-shareInput js-bookmarkadd-private" name="privacy" value="1"> <span class="bookmarkadd-private"> <span class="bookmarkadd-share-text private">非公開</span> </span> </label> </div> <div class="bookmarkadd-cancel-and-submit-buttons js-buttons-container"> <button class="bookmarkadd-cancel-btn js-bookmarkadd-cancel-btn is-hidden" type="button"> キャンセル </button> <input class="bookmarkadd-submit-btn js-bookmarkadd-submit-btn" type="submit" value="ブックマーク"> </div> </div> </div> <p class="bookmarkadd-externalHelp is-hidden js-bookmarkadd-externalHelp-general-myBookmarkPrivate" > <span>現在プライベートモードです<span> <a href="/-/my/config/profile" class="bookmarkadd-externalHelp-link">設定を変更する</a> </p> </form> <div class="js-bookmarkadd-tagList is-hidden"> <h3 class="bookmarkadd-tagList-title js-bookmarkadd-recommended-tagList-title"><span>おすすめタグ<span><a href="/help/entry/tag" target="_blank">タグについて</a></h3> <ul class="bookmarkadd-tagList-contents js-bookmarkadd-recommended-tagList-contents"> </ul> <h3 class="bookmarkadd-tagList-title often js-bookmarkadd-frequent-tagList-title"><span>よく使うタグ</span><button type="button" class="js-bookmarkadd-frequent-tagList-button">すべて表示</button></h3> <ul class="bookmarkadd-tagList-contents js-bookmarkadd-frequent-tagList-contents"> </ul> </div> </div> </div> <button type="button" class="entry-myBookmark-form-button js-entry-myBookmark-form-button is-hidden"><span>ブックマークを追加</span></button> <div class="bookmark-modal js-bookmark-modal js-editing-form is-hidden" aria-label="閉じる"> <div class="bookmark-modal-inner js-bookmark-modal-inner"> <div class="bookmark-modal-info"> <h2 class="bookmark-modal-title"> View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA </h2> <div class="entry-info-meta"> <span class="entry-users">134 users</span> <span class="entry-info-domain"> <img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F230510%2F" alt="" width="16px" height="16px" class="bookmark-modal-favicon"><a href="/site/ics.media/">ics.media</a> </span> </div> </div> <form method="post" action="/my/bookmark" class="js-add-form bookmark-modal-form"> <input type="hidden" name="url" value="https://ics.media/entry/230510/" /> <input type="hidden" name="from" value="entry" /> <div class="bookmarkadd-comment js-annotation-component"> <textarea class="bookmarkadd-comment-form is-comment-form-shrink" name="annotation" placeholder="コメントを入力してください (省略可)" aria-label="コメントを入力 (省略可)" ></textarea> <div class="bookmarkadd-comment-footer"> <div class="bookmarkadd-community-guideline"> <p><a href="/guide/guideline" target="_blank">ガイドライン</a>をご確認の上、良識あるコメントにご協力ください</p> </div> <span class="bookmarkadd-comment-count"> <span class="js-bookmarkadd-comment-count">0</span> <span class="bookmarkadd-comment-slash">/</span> <span class="js-bookmarkadd-comment-limit">0</span> </span> </div> </div> <div class="bookmarkadd-options"> <div class="bookmarkadd-tags js-bookmarkadd-tags"> <input type="text" class="bookmarkadd-tags-textbox js-bookmarkadd-tags-textbox" placeholder="タグを入力して追加" aria-label="タグを入力して追加(省略可)"> <span class="bookmarkadd-tags-btn is-hidden js-bookmarkadd-tags-btn"> <span class="bookmarkadd-tags-btn-popup">入力したタグを追加</span> <button class="bookmarkadd-tags-btn-image"></button> </span> </div> <div class="bookmarkadd-share"> <div class="bookmarkadd-share-block js-bookmarkadd-share-block"> <label class="bookmarkadd-share-label js-bookmarkadd-share-label-twitter"> <input type="checkbox" name="post_twitter" class="bookmarkadd-shareInput" value="1" /> <span class="bookmarkadd-twitter"> <span class="bookmarkadd-share-text twitter"> twitterにシェア </span> </span> </label> <label class="bookmarkadd-share-label"> <input type="checkbox" name="bookmark_stock" class="bookmarkadd-shareInput js-bookmarkadd-readlater" value="1" /> <span class="bookmarkadd-readlater"> <span class="bookmarkadd-share-text readlater">あとで読む</span> </span> </label> <label class="bookmarkadd-share-label"> <input type="checkbox" class="bookmarkadd-shareInput js-bookmarkadd-private" name="privacy" value="1"> <span class="bookmarkadd-private"> <span class="bookmarkadd-share-text private">非公開</span> </span> </label> </div> <div class="bookmarkadd-cancel-and-submit-buttons js-buttons-container"> <input class="bookmarkadd-submit-btn js-bookmarkadd-submit-btn" type="submit" value="ブックマーク"> </div> </div> </div> <p class="bookmarkadd-externalHelp is-hidden js-bookmarkadd-externalHelp-general-myBookmarkPrivate" > <span>現在プライベートモードです<span> <a href="/-/my/config/profile" class="bookmarkadd-externalHelp-link">設定を変更する</a> </p> </form> <div class="js-bookmarkadd-tagList is-hidden"> <h3 class="bookmarkadd-tagList-title js-bookmarkadd-recommended-tagList-title"><span>おすすめタグ<span><a href="/help/entry/tag" target="_blank">タグについて</a></h3> <ul class="bookmarkadd-tagList-contents js-bookmarkadd-recommended-tagList-contents"> </ul> <h3 class="bookmarkadd-tagList-title often js-bookmarkadd-frequent-tagList-title"><span>よく使うタグ</span><button type="button" class="js-bookmarkadd-frequent-tagList-button">すべて表示</button></h3> <ul class="bookmarkadd-tagList-contents js-bookmarkadd-frequent-tagList-contents"> </ul> </div> </div> </div> </div> </div> <div class="bookmark-guest-register-modal js-bookmark-guest-register-modal is-hidden" aria-label="閉じる"> <div class="bookmark-guest-register-modal-inner js-modal-inner"> <button type="button" class="bookmark-guest-register-modal-close js-modal-close-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="5748.793 -620.207 21.414 21.414"> <defs><style>.cls-1 { fill: none; stroke-width: 2px; }</style></defs> <g> <title>閉じる</title> <desc>モーダルを閉じます</desc> <path id="line1" d="M5769.5-619.5l-20 20"/><path id="line2" d="M5769.5-599.5l-20-20"/> </g> </svg> </button> <img src="/images/v4/public/bookmark-logo.png" class="entry-modal-guest-register-logo" alt="はてなブックマーク"> <h2 class="entry-modal-guest-register-title">はてなブックマークで<br>関心をシェアしよう</h2> <p class="entry-modal-guest-register-description">みんなの興味と感想が集まることで<br>新しい発見や、深堀りがもっと楽しく</p> <a href="#" data-gtm-click-label="entry-modal-guest-register-button" class="entry-modal-guest-register-button js-register-link" rel="noreferrer">ユーザー登録</a> <p class="entry-modal-guest-login">アカウントをお持ちの方は<a href="https://www.hatena.ne.jp/login?location=https%3A%2F%2Fb.hatena.ne.jp%2Fentry%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F" data-gtm-click-label="entry-modal-guest-login" rel="noreferrer">ログインページ</a>へ</p> </div> </div> <div class="entry-ad-pc-text"> <div id="entry-text-ad"></div> </div> <div class="entry-ad-sp-banner"> <div id="entry-ad-sp-upon-comments"></div> </div> <div class="entry-comments"> <h3 class="entry-comment-title">記事へのコメント<span>5</span>件</h3> <div class="js-bookmarks-sort-tabs-group entry-comment" data-popular-count="1"> <div class="entry-comment-tabs js-bookmarks-sort-tabs"> <ul class="entry-comment-tab"> <li role="button" class="js-bookmarks-sort-tab is-active" data-sort="popular">注目コメント</li> <li role="button" class="js-bookmarks-sort-tab" data-sort="recent">新着コメント</li> </ul> </div> <div class="bookmarks-sort-panels js-bookmarks-sort-panels"> <script type="text/x-template" id="autoloader-bookmark-item"> <div class="entry-comment-contents js-ignorable-user-content js-bookmark-item js-user-bookmark-comment" data-user-name="{{user_name}}" data-url="{{bookmarked_url}}" > <div class="entry-comment-contents-main"> <a href="{{user_page_path}}" class="entry-user-icon" data-gtm-label="entry-{{ sort }}-icon"><img src="{{profile_image_url}}"/ alt="{{user_name}}" title="{{user_name}}"></a> <div class="entry-comments-contents-body"> <span class="entry-comment-username" ><a href="{{user_page_path}}" data-gtm-label="entry-{{ sort }}-username" ><span >{{user_name}}</span></a></span> <span class="status {{ #is_public }}is-hidden{{ /is_public }}"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/userpage/icon-private.svg" alt="非公開" width="10px" height="10px"></span> <span class="entry-comment-text js-bookmark-comment" >{{{comment_expanded}}}</span> <ul class="entry-comment-tags"> {{{tags}}} </ul> <div class="entry-comment-contents-foot"> <p class="entry-comment-meta"> <span class="entry-comment-timestamp"><a class="js-bookmark-anchor-path" data-gtm-label="entry-{{ sort }}-timestamp" href="https://b.hatena.ne.jp{{anchor_path}}" >{{created}}</a></span> <span class="entry-comment-permalink"> <a data-gtm-label="entry-{{ sort }}-permalink" href="{{comment_page_path}}" rel="{{#should_nofollow}}nofollow{{/should_nofollow}}">リンク</a> </span> <span class="list-star-container js-list-star-container"></span> <span class="twitter-click js-short-url-clicks"></span> </p> <div class="entry-comment-menus"> <div class="js-add-star-container add-star-container"></div> <div data-location-id="{{location_id}}" data-user-name="{{user_name}}" class="is-hidden js-bookmark-downvote-container entry-comment-menu-minusvote"> <input type="checkbox" class="js-bookmark-downvote-checkbox entry-comment-menu-minusvote-checkbox" title="マイナス評価"> </div> <div class="ui-contextMenu entry-comment-menu-more js-bookmark-menu-button{{#enable_button}} is-enabled{{/enable_button}}" onclick> <div class="ui-contextMenu-btn entry-comment-menu-more-btn" tabindex="0" role="button"><span>その他</span></div> <div class="ui-contextMenu-list entry-comment-menu-more-list"> <ul tabindex="-1"> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-followuser js-entry-comment-followuser">お気に入りに追加</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unfollowuser js-entry-comment-unfollowuser is-hidden">お気に入りを解除</button> </li> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-ignoreuser js-entry-comment-ignoreuser">ユーザーを非表示</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unignoreuser js-entry-comment-unignoreuser is-hidden" data-unignore-msg-hover="ユーザーを表示" data-unignore-msg="非表示に設定済み"><span class="is-hidden">ユーザーを表示</span></button> </li> <li><button type="button" class="ui-contextMenu-listItem entry-comment-reportViolation js-bookmark-report-violation-button">通報する</button></li> </ul> </div> </div> </div> </div> </div> </div> </div> </script> <script type="text/x-template" id="template-short-url-click"> {{#tweet_url}} <a href="{{tweet_url}}" target="_blank" rel="noopener noreferrer" data-gtm-click-label="reaction-twitter-clicks"><span>{{count}} clicks</span></a> {{/tweet_url}} {{^tweet_url}} <span>{{count}} clicks</span> {{/tweet_url}} </script> <div class="is-active bookmarks-sort-panel js-bookmarks-sort-panel" data-sort="popular"> <div class="js-bookmarks js-bookmarks-popular"> <div class="entry-comment-contents is-fixed js-ignorable-user-content js-bookmark-item js-user-bookmark-comment" data-user-name="ics-media" data-url="https://ics.media/entry/230510/" itemprop="comment" itemtype="https://schema.org/Comment" itemscope > <div class="entry-comment-fixed-comment" > <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_227_141)"> <path d="M9.45167 10.3873L9.54071 11.9999C9.55154 12.1961 9.47831 12.3877 9.33933 12.5267V12.5267C9.06943 12.7966 8.63183 12.7966 8.36193 12.5267L6.37576 10.5405L3.53554 13.3807L2.82844 13.3807L2.82844 12.6736L5.66865 9.83341L3.68983 7.85459C3.41587 7.58062 3.41587 7.13644 3.68983 6.86247V6.86247C3.82468 6.72762 4.00862 6.65348 4.19929 6.65713L5.75114 6.68678L9.6638 2.77412L9.4281 2.53842C9.23284 2.34316 9.23284 2.02658 9.4281 1.83131V1.83131C9.62336 1.63605 9.93995 1.63605 10.1352 1.83131L14.3071 6.00324C14.5024 6.19851 14.5024 6.51509 14.3071 6.71035V6.71035C14.1119 6.90561 13.7953 6.90561 13.6 6.71035L13.3643 6.47465L9.45167 10.3873ZM4.85548 7.60602L8.53243 11.283L8.48529 9.93947L12.6572 5.76754L10.3709 3.48123L6.19898 7.65316L4.85548 7.60602Z" fill="#46525E" fill-opacity="0.8" /> </g> <defs> <clipPath id="clip0_227_141"> <rect width="16" height="16" fill="white" /> </clipPath> </defs> </svg> オーナーコメントを固定しています </div> <div class="entry-comment-contents-main"> <a href="/ics-media/" class="entry-user-icon" data-gtm-label="entry-popular-icon"><img src="https://cdn.profile-image.st-hatena.com/users/ics-media/profile.png"/ alt="ics-media" title="ics-media"></a> <div class="entry-comments-contents-body"> <span class="entry-comment-owner">オーナー</span> <span class="entry-comment-username" itemprop="author" itemtype="https://schema.org/Person" itemscope ><a href="/ics-media/" data-gtm-label="entry-popular-username" itemprop="url" ><span itemprop="name" >ics-media</span></a></span> <span class="entry-comment-text js-bookmark-comment" itemprop="text" >View Transitions APIの使い方と、実際に導入したうえでの注意点をまとめました。</span> <ul class="entry-comment-tags"> </ul> <div class="entry-comment-contents-foot"> <p class="entry-comment-meta"> <span class="entry-comment-timestamp"><a class="js-bookmark-anchor-path" data-gtm-label="entry-popular-timestamp" href="https://b.hatena.ne.jp/ics-media/20230510#bookmark-4736300501008890469" itemprop="datePublished" content="2023-05-10T14:04:49Z" >2023/05/10</a></span> <span class="entry-comment-permalink"> <a data-gtm-label="entry-popular-permalink" href="/entry/4736300501008890469/comment/ics-media" itemprop="url" rel="">リンク</a> </span> <span class="list-star-container js-list-star-container"></span> <span class="twitter-click js-short-url-clicks"></span> </p> <div class="entry-comment-menus"> <div class="js-add-star-container add-star-container"></div> <div data-location-id="4736300501008890469" data-user-name="ics-media" class="is-hidden js-bookmark-downvote-container entry-comment-menu-minusvote"> <input type="checkbox" class="js-bookmark-downvote-checkbox entry-comment-menu-minusvote-checkbox" title="マイナス評価"> </div> <div class="ui-contextMenu entry-comment-menu-more js-bookmark-menu-button" onclick> <div class="ui-contextMenu-btn entry-comment-menu-more-btn" tabindex="0" role="button"><span>その他</span></div> <div class="ui-contextMenu-list entry-comment-menu-more-list"> <ul tabindex="-1"> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-followuser js-entry-comment-followuser">お気に入りに追加</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unfollowuser js-entry-comment-unfollowuser is-hidden">お気に入りを解除</button> </li> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-ignoreuser js-entry-comment-ignoreuser">ユーザーを非表示</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unignoreuser js-entry-comment-unignoreuser is-hidden" data-unignore-msg-hover="ユーザーを表示" data-unignore-msg="非表示に設定済み"><span class="is-hidden">ユーザーを表示</span></button> </li> <li><button type="button" class="ui-contextMenu-listItem entry-comment-reportViolation js-bookmark-report-violation-button">通報する</button></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=" bookmarks-sort-panel js-bookmarks-sort-panel js-bookmark-autoloader-recent" data-sort="recent" data-autoload-url="https://ics.media/entry/230510/" data-next-cursor=""> <div class="js-bookmarks js-bookmarks-recent"> <div class="entry-comment-contents is-fixed js-ignorable-user-content js-bookmark-item js-user-bookmark-comment" data-user-name="ics-media" data-url="https://ics.media/entry/230510/" > <div class="entry-comment-fixed-comment" > <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_227_141)"> <path d="M9.45167 10.3873L9.54071 11.9999C9.55154 12.1961 9.47831 12.3877 9.33933 12.5267V12.5267C9.06943 12.7966 8.63183 12.7966 8.36193 12.5267L6.37576 10.5405L3.53554 13.3807L2.82844 13.3807L2.82844 12.6736L5.66865 9.83341L3.68983 7.85459C3.41587 7.58062 3.41587 7.13644 3.68983 6.86247V6.86247C3.82468 6.72762 4.00862 6.65348 4.19929 6.65713L5.75114 6.68678L9.6638 2.77412L9.4281 2.53842C9.23284 2.34316 9.23284 2.02658 9.4281 1.83131V1.83131C9.62336 1.63605 9.93995 1.63605 10.1352 1.83131L14.3071 6.00324C14.5024 6.19851 14.5024 6.51509 14.3071 6.71035V6.71035C14.1119 6.90561 13.7953 6.90561 13.6 6.71035L13.3643 6.47465L9.45167 10.3873ZM4.85548 7.60602L8.53243 11.283L8.48529 9.93947L12.6572 5.76754L10.3709 3.48123L6.19898 7.65316L4.85548 7.60602Z" fill="#46525E" fill-opacity="0.8" /> </g> <defs> <clipPath id="clip0_227_141"> <rect width="16" height="16" fill="white" /> </clipPath> </defs> </svg> オーナーコメントを固定しています </div> <div class="entry-comment-contents-main"> <a href="/ics-media/" class="entry-user-icon" data-gtm-label="entry-recent-icon"><img src="https://cdn.profile-image.st-hatena.com/users/ics-media/profile.png"/ alt="ics-media" title="ics-media"></a> <div class="entry-comments-contents-body"> <span class="entry-comment-owner">オーナー</span> <span class="entry-comment-username" ><a href="/ics-media/" data-gtm-label="entry-recent-username" ><span >ics-media</span></a></span> <span class="entry-comment-text js-bookmark-comment" >View Transitions APIの使い方と、実際に導入したうえでの注意点をまとめました。</span> <ul class="entry-comment-tags"> </ul> <div class="entry-comment-contents-foot"> <p class="entry-comment-meta"> <span class="entry-comment-timestamp"><a class="js-bookmark-anchor-path" data-gtm-label="entry-recent-timestamp" href="https://b.hatena.ne.jp/ics-media/20230510#bookmark-4736300501008890469" >2023/05/10</a></span> <span class="entry-comment-permalink"> <a data-gtm-label="entry-recent-permalink" href="/entry/4736300501008890469/comment/ics-media" rel="">リンク</a> </span> <span class="list-star-container js-list-star-container"></span> <span class="twitter-click js-short-url-clicks"></span> </p> <div class="entry-comment-menus"> <div class="js-add-star-container add-star-container"></div> <div data-location-id="4736300501008890469" data-user-name="ics-media" class="is-hidden js-bookmark-downvote-container entry-comment-menu-minusvote"> <input type="checkbox" class="js-bookmark-downvote-checkbox entry-comment-menu-minusvote-checkbox" title="マイナス評価"> </div> <div class="ui-contextMenu entry-comment-menu-more js-bookmark-menu-button" onclick> <div class="ui-contextMenu-btn entry-comment-menu-more-btn" tabindex="0" role="button"><span>その他</span></div> <div class="ui-contextMenu-list entry-comment-menu-more-list"> <ul tabindex="-1"> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-followuser js-entry-comment-followuser">お気に入りに追加</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unfollowuser js-entry-comment-unfollowuser is-hidden">お気に入りを解除</button> </li> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-ignoreuser js-entry-comment-ignoreuser">ユーザーを非表示</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unignoreuser js-entry-comment-unignoreuser is-hidden" data-unignore-msg-hover="ユーザーを表示" data-unignore-msg="非表示に設定済み"><span class="is-hidden">ユーザーを表示</span></button> </li> <li><button type="button" class="ui-contextMenu-listItem entry-comment-reportViolation js-bookmark-report-violation-button">通報する</button></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="entry-comment-contents js-ignorable-user-content js-bookmark-item js-user-bookmark-comment" data-user-name="reboot_in" data-url="https://ics.media/entry/230510/" itemprop="comment" itemtype="https://schema.org/Comment" itemscope > <div class="entry-comment-contents-main"> <a href="/reboot_in/" class="entry-user-icon" data-gtm-label="entry-recent-icon"><img src="https://cdn.profile-image.st-hatena.com/users/reboot_in/profile.png"/ alt="reboot_in" title="reboot_in"></a> <div class="entry-comments-contents-body"> <span class="entry-comment-username" itemprop="author" itemtype="https://schema.org/Person" itemscope ><a href="/reboot_in/" data-gtm-label="entry-recent-username" itemprop="url" ><span itemprop="name" >reboot_in</span></a></span> <span class="entry-comment-text js-bookmark-comment" itemprop="text" >“①document.startViewTransition()メソッドを呼び出す ②DOM変化前後のスナップショットが撮られる ③HTMLの最前面にスナップショットが配置される ④クロスフェードで変化する”</span> <ul class="entry-comment-tags"> <li class=""><a href="/reboot_in/web/" data-gtm-label="entry-recent-tags">web</a></li> </ul> <div class="entry-comment-contents-foot"> <p class="entry-comment-meta"> <span class="entry-comment-timestamp"><a class="js-bookmark-anchor-path" data-gtm-label="entry-recent-timestamp" href="https://b.hatena.ne.jp/reboot_in/20230511#bookmark-4736300501008890469" itemprop="datePublished" content="2023-05-11T10:42:05Z" >2023/05/11</a></span> <span class="entry-comment-permalink"> <a data-gtm-label="entry-recent-permalink" href="/entry/4736300501008890469/comment/reboot_in" itemprop="url" rel="">リンク</a> </span> <span class="list-star-container js-list-star-container"></span> <span class="twitter-click js-short-url-clicks"></span> </p> <div class="entry-comment-menus"> <div class="js-add-star-container add-star-container"></div> <div data-location-id="4736300501008890469" data-user-name="reboot_in" class="is-hidden js-bookmark-downvote-container entry-comment-menu-minusvote"> <input type="checkbox" class="js-bookmark-downvote-checkbox entry-comment-menu-minusvote-checkbox" title="マイナス評価"> </div> <div class="ui-contextMenu entry-comment-menu-more js-bookmark-menu-button" onclick> <div class="ui-contextMenu-btn entry-comment-menu-more-btn" tabindex="0" role="button"><span>その他</span></div> <div class="ui-contextMenu-list entry-comment-menu-more-list"> <ul tabindex="-1"> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-followuser js-entry-comment-followuser">お気に入りに追加</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unfollowuser js-entry-comment-unfollowuser is-hidden">お気に入りを解除</button> </li> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-ignoreuser js-entry-comment-ignoreuser">ユーザーを非表示</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unignoreuser js-entry-comment-unignoreuser is-hidden" data-unignore-msg-hover="ユーザーを表示" data-unignore-msg="非表示に設定済み"><span class="is-hidden">ユーザーを表示</span></button> </li> <li><button type="button" class="ui-contextMenu-listItem entry-comment-reportViolation js-bookmark-report-violation-button">通報する</button></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="entry-comment-contents js-ignorable-user-content js-bookmark-item js-user-bookmark-comment" data-user-name="sippo_des" data-url="https://ics.media/entry/230510/" itemprop="comment" itemtype="https://schema.org/Comment" itemscope > <div class="entry-comment-contents-main"> <a href="/sippo_des/" class="entry-user-icon" data-gtm-label="entry-recent-icon"><img src="https://cdn.profile-image.st-hatena.com/users/sippo_des/profile.png"/ alt="sippo_des" title="sippo_des"></a> <div class="entry-comments-contents-body"> <span class="entry-comment-username" itemprop="author" itemtype="https://schema.org/Person" itemscope ><a href="/sippo_des/" data-gtm-label="entry-recent-username" itemprop="url" ><span itemprop="name" >sippo_des</span></a></span> <span class="entry-comment-text js-bookmark-comment" itemprop="text" >これいいねーかわいい</span> <ul class="entry-comment-tags"> <li class=""><a href="/sippo_des/media/" data-gtm-label="entry-recent-tags">media</a></li> <li class=""><a href="/sippo_des/api/" data-gtm-label="entry-recent-tags">api</a></li> <li class=""><a href="/sippo_des/Vue/" data-gtm-label="entry-recent-tags">Vue</a></li> </ul> <div class="entry-comment-contents-foot"> <p class="entry-comment-meta"> <span class="entry-comment-timestamp"><a class="js-bookmark-anchor-path" data-gtm-label="entry-recent-timestamp" href="https://b.hatena.ne.jp/sippo_des/20230511#bookmark-4736300501008890469" itemprop="datePublished" content="2023-05-10T19:51:57Z" >2023/05/11</a></span> <span class="entry-comment-permalink"> <a data-gtm-label="entry-recent-permalink" href="/entry/4736300501008890469/comment/sippo_des" itemprop="url" rel="nofollow">リンク</a> </span> <span class="list-star-container js-list-star-container"></span> <span class="twitter-click js-short-url-clicks"></span> </p> <div class="entry-comment-menus"> <div class="js-add-star-container add-star-container"></div> <div data-location-id="4736300501008890469" data-user-name="sippo_des" class="is-hidden js-bookmark-downvote-container entry-comment-menu-minusvote"> <input type="checkbox" class="js-bookmark-downvote-checkbox entry-comment-menu-minusvote-checkbox" title="マイナス評価"> </div> <div class="ui-contextMenu entry-comment-menu-more js-bookmark-menu-button" onclick> <div class="ui-contextMenu-btn entry-comment-menu-more-btn" tabindex="0" role="button"><span>その他</span></div> <div class="ui-contextMenu-list entry-comment-menu-more-list"> <ul tabindex="-1"> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-followuser js-entry-comment-followuser">お気に入りに追加</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unfollowuser js-entry-comment-unfollowuser is-hidden">お気に入りを解除</button> </li> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-ignoreuser js-entry-comment-ignoreuser">ユーザーを非表示</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unignoreuser js-entry-comment-unignoreuser is-hidden" data-unignore-msg-hover="ユーザーを表示" data-unignore-msg="非表示に設定済み"><span class="is-hidden">ユーザーを表示</span></button> </li> <li><button type="button" class="ui-contextMenu-listItem entry-comment-reportViolation js-bookmark-report-violation-button">通報する</button></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="entry-comment-contents js-ignorable-user-content js-bookmark-item js-user-bookmark-comment" data-user-name="helldeath" data-url="https://ics.media/entry/230510/" itemprop="comment" itemtype="https://schema.org/Comment" itemscope > <div class="entry-comment-contents-main"> <a href="/helldeath/" class="entry-user-icon" data-gtm-label="entry-recent-icon"><img src="https://cdn.profile-image.st-hatena.com/users/helldeath/profile.png"/ alt="helldeath" title="helldeath"></a> <div class="entry-comments-contents-body"> <span class="entry-comment-username" itemprop="author" itemtype="https://schema.org/Person" itemscope ><a href="/helldeath/" data-gtm-label="entry-recent-username" itemprop="url" ><span itemprop="name" >helldeath</span></a></span> <span class="entry-comment-text js-bookmark-comment" itemprop="text" >よさげな機能。でも複雑なんやな。そして別ファイルのhtmlへの遷移ではなくて、SPA用の機能なんやな。</span> <ul class="entry-comment-tags"> </ul> <div class="entry-comment-contents-foot"> <p class="entry-comment-meta"> <span class="entry-comment-timestamp"><a class="js-bookmark-anchor-path" data-gtm-label="entry-recent-timestamp" href="https://b.hatena.ne.jp/helldeath/20230511#bookmark-4736300501008890469" itemprop="datePublished" content="2023-05-10T19:24:16Z" >2023/05/11</a></span> <span class="entry-comment-permalink"> <a data-gtm-label="entry-recent-permalink" href="/entry/4736300501008890469/comment/helldeath" itemprop="url" rel="">リンク</a> </span> <span class="list-star-container js-list-star-container"></span> <span class="twitter-click js-short-url-clicks"></span> </p> <div class="entry-comment-menus"> <div class="js-add-star-container add-star-container"></div> <div data-location-id="4736300501008890469" data-user-name="helldeath" class="is-hidden js-bookmark-downvote-container entry-comment-menu-minusvote"> <input type="checkbox" class="js-bookmark-downvote-checkbox entry-comment-menu-minusvote-checkbox" title="マイナス評価"> </div> <div class="ui-contextMenu entry-comment-menu-more js-bookmark-menu-button" onclick> <div class="ui-contextMenu-btn entry-comment-menu-more-btn" tabindex="0" role="button"><span>その他</span></div> <div class="ui-contextMenu-list entry-comment-menu-more-list"> <ul tabindex="-1"> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-followuser js-entry-comment-followuser">お気に入りに追加</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unfollowuser js-entry-comment-unfollowuser is-hidden">お気に入りを解除</button> </li> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-ignoreuser js-entry-comment-ignoreuser">ユーザーを非表示</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unignoreuser js-entry-comment-unignoreuser is-hidden" data-unignore-msg-hover="ユーザーを表示" data-unignore-msg="非表示に設定済み"><span class="is-hidden">ユーザーを表示</span></button> </li> <li><button type="button" class="ui-contextMenu-listItem entry-comment-reportViolation js-bookmark-report-violation-button">通報する</button></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="entry-comment-contents js-ignorable-user-content js-bookmark-item js-user-bookmark-comment" data-user-name="Falky" data-url="https://ics.media/entry/230510/" itemprop="comment" itemtype="https://schema.org/Comment" itemscope > <div class="entry-comment-contents-main"> <a href="/Falky/" class="entry-user-icon" data-gtm-label="entry-recent-icon"><img src="https://cdn.profile-image.st-hatena.com/users/Falky/profile.png"/ alt="Falky" title="Falky"></a> <div class="entry-comments-contents-body"> <span class="entry-comment-username" itemprop="author" itemtype="https://schema.org/Person" itemscope ><a href="/Falky/" data-gtm-label="entry-recent-username" itemprop="url" ><span itemprop="name" >Falky</span></a></span> <span class="entry-comment-text js-bookmark-comment" itemprop="text" >あー、これGWのお勉強ネタにするべきだったな…。しくじった…</span> <ul class="entry-comment-tags"> <li class=""><a href="/Falky/%21%21/" data-gtm-label="entry-recent-tags">!!</a></li> </ul> <div class="entry-comment-contents-foot"> <p class="entry-comment-meta"> <span class="entry-comment-timestamp"><a class="js-bookmark-anchor-path" data-gtm-label="entry-recent-timestamp" href="https://b.hatena.ne.jp/Falky/20230511#bookmark-4736300501008890469" itemprop="datePublished" content="2023-05-10T15:38:54Z" >2023/05/11</a></span> <span class="entry-comment-permalink"> <a data-gtm-label="entry-recent-permalink" href="/entry/4736300501008890469/comment/Falky" itemprop="url" rel="">リンク</a> </span> <span class="list-star-container js-list-star-container"></span> <span class="twitter-click js-short-url-clicks"></span> </p> <div class="entry-comment-menus"> <div class="js-add-star-container add-star-container"></div> <div data-location-id="4736300501008890469" data-user-name="Falky" class="is-hidden js-bookmark-downvote-container entry-comment-menu-minusvote"> <input type="checkbox" class="js-bookmark-downvote-checkbox entry-comment-menu-minusvote-checkbox" title="マイナス評価"> </div> <div class="ui-contextMenu entry-comment-menu-more js-bookmark-menu-button" onclick> <div class="ui-contextMenu-btn entry-comment-menu-more-btn" tabindex="0" role="button"><span>その他</span></div> <div class="ui-contextMenu-list entry-comment-menu-more-list"> <ul tabindex="-1"> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-followuser js-entry-comment-followuser">お気に入りに追加</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unfollowuser js-entry-comment-unfollowuser is-hidden">お気に入りを解除</button> </li> <li> <button type="button" class="ui-contextMenu-listItem entry-comment-ignoreuser js-entry-comment-ignoreuser">ユーザーを非表示</button> <button type="button" class="ui-contextMenu-listItem entry-comment-unignoreuser js-entry-comment-unignoreuser is-hidden" data-unignore-msg-hover="ユーザーを表示" data-unignore-msg="非表示に設定済み"><span class="is-hidden">ユーザーを表示</span></button> </li> <li><button type="button" class="ui-contextMenu-listItem entry-comment-reportViolation js-bookmark-report-violation-button">通報する</button></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <div class="comment-list-collaplse-box js-comment-list-collaplse is-hidden"> <div class="comment-list-collaplse"> <button class="js-comment-list-expand-button">コメントの続きを表示</button> </div> </div> <div class="entry-comment-readmore js-read-more"> <button id="new-bookmarks-readmore" class="js-read-more-button entry-comment-readmore-btn"> <span class="js-read-more-label js-read-more-ready">Readmore</span> <span class="js-read-more-label js-read-more-waiting is-hidden">残りのブックマークを読み込んでいます..</span> <span class="js-read-more-label js-read-more-error is-hidden">残りのブックマークを読み込めませんでした</span> </button> </div> </div> </div> <div class="entry-comment-box-guest js-entry-comment-guest is-hidden"> <a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2Fmy%2Fadd.confirm%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F%26registered_from%3Dentry-comment-user-icon&via=201038" class="entry-comment-user-icon js-register-modal-link" data-gtm-label="entry-comment-user-icon"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/profile.gif" alt="ゲスト" title="ゲスト"></a> <div class="entry-comment-main"> <a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2Fmy%2Fadd.confirm%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F%26registered_from%3Dentry-comment-form&via=201038" class="entry-comment-form js-register-modal-link" data-gtm-label="entry-comment-form">コメントするにはログインが必要です</a> <a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2Fmy%2Fadd.confirm%3Furl%3Dhttps%253A%252F%252Fics.media%252Fentry%252F230510%252F%26registered_from%3Dentry-comment-button&via=201038" class="entry-comment-button js-register-modal-link" data-gtm-label="entry-comment-button"><span>ログインしてコメント</span></a> </div> </div> <div class="entry-comment-box-login js-entry-myBookmark-form-button is-hidden"> <button type="button" class="entry-myBookmark-form-button"><span>コメントを追加</span></button> </div> <div class="entry-comment-note-wrapper"> <p class="entry-comment-note">注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています</p> </div> </div> </div> <div class="entry-subMenu"> <button type="button" class="js-entry-subMenu-embed entry-subMenu-embed" data-gtm-label="entry-subMenu-embed">リンクを埋め込む</button> <div class="entry-embedModal js-entry-embed-modal is-hidden"> <div class="entry-embedModal-window js-entry-embed-modal-window"> <h3 class="entry-embedModal-title">リンクを埋め込む</h3> <p class="entry-embedModal-description">以下のコードをコピーしてサイトに埋め込むことができます</p> <textarea name="" id="" class="entry-embedModal-textarea js-entry-embed-textarea" readonly> <iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fics.media%2Fentry%2F230510%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://ics.media/entry/230510/">View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA</a><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230510/">はてなブックマーク - View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA</a></div></iframe> </textarea> <h5 class="entry-embedModal-preview">プレビュー</h5> <div class="js-entry-embed-modal-preview" data-src-url="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fics.media%2Fentry%2F230510%2F"> <iframe marginwidth="0" marginheight="0" src="" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://ics.media/entry/230510/">View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA</a><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230510/">はてなブックマーク - View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA</a></div></iframe> </div> <div class="entry-embedModal-menu"> <div class="entry-embedModal-others"> <p class="entry-embedModal-item"><a href="/guide/bbutton?url=https%3A%2F%2Fics.media%2Fentry%2F230510%2F">はてなブックマークボタンを作成して埋め込むこともできます</a></p> </div> </div> <button type="button" class="entry-embedModal-close js-entry-embed-modal-close"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/overlay-close-gray.svg" alt="閉じる"></button> </div> </div> <div class="js-entry-submenu-only-logged-in is-hidden" data-url="https://ics.media/entry/230510/"> <aside id="owner-bookmark-visibility" class="js-entry-owners-data entry-subMenu-owners" data-entry-url="https://ics.media/entry/230510/"> <script type="text/x-template" id="owner-bookmark-visibility-template"> <span class="entry-subMenu-owners-help">このページのオーナーなので<br>コメントを非表示にできます</span> <a href="/my/site/https%3A%2F%2Fics.media%2Fentry%2F230510%2F/visibility">コメント表示の設定</a> </script> </aside> <span class="entry-subMenu-report js-entry-submenu-report" data-gtm-label="entry-subMenu-report"><a href="#">規約違反を報告</a></span> </div> </div> <div class="entry-app-link"> <img class="entry-app-link-image" src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/app-screenshot.png" alt="アプリのスクリーンショット"> <div class="entry-app-link-description"> <div class="entry-app-link-description-innner"> いまの話題をアプリでチェック！ <ul class="entry-app-link-list"> <li class="entry-app-link-item">バナー広告なし</li> <li class="entry-app-link-item">ミュート機能あり</li> <li class="entry-app-link-item">ダークモード搭載</li> </ul> <a class="entry-app-link-btn styleguide-btn-primary" href="https://hatenabookmark.page.link/app">アプリをダウンロード</a> </div> </div> </div> <div class="entry-ad-pc-rectangle-double"> <div id="entry-double-rectangle-left"></div> <div id="entry-double-rectangle-right"></div> </div> <div class="entry-ad-sp-rectangle"> <div id="entry-ad-sp-below-comments"></div> </div> <section class="entry-relationContents"> <h3 class="entry-relationContents-sectionTitle">関連記事</h3> <ul class="entry-relationContents-list js-entry-relationContents-list" data-entry-url="https://ics.media/entry/230510/"> <script type="text/x-template" id="entry-relationContents-template"> <li> <div class="entry-relationContents-text"> <img src="{{ favicon_url }}" alt="" width="16px" height="16px" class="entry-relationContents-favicon"> <h4 class="entry-relationContents-title"><a href="{{ entry_url }}" title="{{ title }}" data-gtm-label="entry-relationContents-title">{{ truncated_title }}</a></h4> <p><span class="entry-relationContents-users"><a href="{{ entry_url }}" data-gtm-label="entry-relationContents-users">{{ total_bookmarks_with_user_postfix }}</a></span><span class="entry-relationContents-domain"><a href="{{ site_search_url }}" data-gtm-label="entry-relationContents-domain">{{ root_title }}</a></span></p> </div> </li> </script> </ul> </section> <div class="entry-notificationModal js-first-bookmark-modal is-hidden" > <div class="entry-notificationModal-window js-modal-content"> <div class="entry-notificationModal-image js-first-bookmark-animation"></div> <h3 class="entry-notificationModal-title"><span class="js-first-bookmark-count"></span>usersに達しました！</h3> <p class="entry-notificationModal-text"><span class="js-first-bookmarker-name"></span>さんが1番目にブックマークした記事「View Transitions ...」が注目されています。</p> <p class="entry-notificationModal-share-text">気持ちをシェアしよう</p> <a href="" target="_blank" rel="noopener" class="entry-notificationModal-share-button js-entry-notificationModal-share-button" data-gtm-click-label="first-bookmark-share-twitter"> ツイートする </a> <button type="button" class="entry-notificationModal-close js-modal-close-button"> <img class="entry-notificationModal-closeImage-pc" src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/overlay-close-gray.svg" alt="閉じる"> <img class="entry-notificationModal-closeImage-sp" src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/entry/overlay-close.svg" alt="閉じる"> </button> </div> </div> </div> <div class="entry-aside"> <div class="entry-ad-pc-rectangle"> <div id="entry-rectangle-top-right"></div> </div> <section class="entry-about js-entry-about"> <h2 class="entry-about-title"><span class="js-entry-title">View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA</span></h2> <a rel="nofollow" href="https://ics.media/entry/230510/" class="js-entry-link is-hidden"></a> <p class="entry-about-description js-entry-about-description"> <span class="js-entry-description-short">View <a data-gtm-click-label="entry-summary-keyword" href="/q/Transition">Transition</a>s <a data-gtm-click-label="entry-summary-keyword" href="/q/API">API</a>を使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。ウェ...<button type="button" class="js-entry-about-description-readmore entry-about-description-readmore" data-gtm-label="entry-about-readMore">概要を表示</button></span> <span class="js-entry-description-all is-hidden">View <a data-gtm-click-label="entry-summary-keyword" href="/q/Transition">Transition</a>s <a data-gtm-click-label="entry-summary-keyword" href="/q/API">API</a>を使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。ウェブ<a data-gtm-click-label="entry-summary-keyword" href="/q/%E6%8A%80%E8%A1%93">技術</a>でのアニメーションはさまざまな手段が存在します。<a data-gtm-click-label="entry-summary-keyword" href="/q/CSS">CSS</a>の<a data-gtm-click-label="entry-summary-keyword" href="/q/Transition">transition</a>や<a data-gtm-click-label="entry-summary-keyword" href="/q/animation">animation</a>、<a data-gtm-click-label="entry-summary-keyword" href="/q/Javascript">JavaScript</a>でのWeb <a data-gtm-click-label="entry-summary-keyword" href="/q/animation">Animation</a>s <a data-gtm-click-label="entry-summary-keyword" href="/q/API">API</a>など利用されている方も多いでしょう。View <a data-gtm-click-label="entry-summary-keyword" href="/q/Transition">Transition</a>s <a data-gtm-click-label="entry-summary-keyword" href="/q/API">API</a>は、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 <a data-gtm-click-label="entry-summary-keyword" href="/q/%E6%9C%AC">本</a>記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 <a data-gtm-click-label="entry-summary-keyword" href="/q/%E6%9C%AC">本</a>記事で紹介すること View <a data-gtm-click-label="entry-summary-keyword" href="/q/Transition">Transition</a>s <a data-gtm-click-label="entry-summary-keyword" href="/q/API">API</a>で実現できるのは新しい遷移アニメーション <a data-gtm-click-label="entry-summary-keyword" href="/q/Javascript">JavaScript</a>と<a data-gtm-click-label="entry-summary-keyword" href="/q/CSS">CSS</a>の指定で容易に利用できる JSフレームワークでの対応も進んでいる 2024年6月リリースの<a data-gtm-click-label="entry-summary-keyword" href="/q/Chrome">Chrome</a> 126とEdge 126でJ</span> </p> <div class="entry-about-star"> <div class="js-list-star-container"></div> <div class="js-add-star-container add-star-container"></div> </div> <ul class="entry-tags"> <li><a href="/q/javascript" class="entry-tags-contents" data-gtm-label="entry-about-tags">javascript</a></li> <li><a href="/q/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" class="entry-tags-contents" data-gtm-label="entry-about-tags">アニメーション</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" class="entry-tags-contents" data-gtm-label="entry-about-tags">あとで読む</a></li> <li><a href="/q/API" class="entry-tags-contents" data-gtm-label="entry-about-tags">API</a></li> <li><a href="/q/css" class="entry-tags-contents" data-gtm-label="entry-about-tags">css</a></li> <li><a href="/q/web%E5%88%B6%E4%BD%9C" class="entry-tags-contents" data-gtm-label="entry-about-tags">web制作</a></li> <li><a href="/q/Vue" class="entry-tags-contents" data-gtm-label="entry-about-tags">Vue</a></li> <li><a href="/q/webdesign" class="entry-tags-contents" data-gtm-label="entry-about-tags">webdesign</a></li> <li><a href="/q/HTML" class="entry-tags-contents" data-gtm-label="entry-about-tags">HTML</a></li> </ul> </section> <section class="entry-bookmarkUsers js-bookmarker-icons"> <h3 class="entry-bookmarkUsers-title">ブックマークしたユーザー</h3> <ul class="entry-bookmarkUsers-list js-bookmarkers"> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="coppieee" data-created="20250321" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">coppieee</span><span class="entry-bookmarkUsers-timestamp">2025/03/21</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/coppieee/profile.png" alt="coppieee" title="coppieee"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="karur4n" data-created="20241227" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">karur4n</span><span class="entry-bookmarkUsers-timestamp">2024/12/27</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/karur4n/profile.png" alt="karur4n" title="karur4n"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="mako0717" data-created="20241212" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">mako0717</span><span class="entry-bookmarkUsers-timestamp">2024/12/12</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/mako0717/profile.png" alt="mako0717" title="mako0717"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="kazumich" data-created="20240717" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">kazumich</span><span class="entry-bookmarkUsers-timestamp">2024/07/17</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/kazumich/profile.png" alt="kazumich" title="kazumich"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="kasaya-appleple" data-created="20240717" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">kasaya-appleple</span><span class="entry-bookmarkUsers-timestamp">2024/07/17</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/kasaya-appleple/profile.png" alt="kasaya-appleple" title="kasaya-appleple"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="chayamaeki" data-created="20240523" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">chayamaeki</span><span class="entry-bookmarkUsers-timestamp">2024/05/23</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/chayamaeki/profile.png" alt="chayamaeki" title="chayamaeki"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="Lhankor_Mhy" data-created="20240226" data-location-id="4749830997979671072"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">Lhankor_Mhy</span><span class="entry-bookmarkUsers-timestamp">2024/02/26</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/Lhankor_Mhy/profile.png" alt="Lhankor_Mhy" title="Lhankor_Mhy"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="pere_ponta" data-created="20231127" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">pere_ponta</span><span class="entry-bookmarkUsers-timestamp">2023/11/27</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/pere_ponta/profile.png" alt="pere_ponta" title="pere_ponta"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="t_f_m" data-created="20230912" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">t_f_m</span><span class="entry-bookmarkUsers-timestamp">2023/09/12</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/t_f_m/profile.png" alt="t_f_m" title="t_f_m"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="sudo_vi" data-created="20230720" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">sudo_vi</span><span class="entry-bookmarkUsers-timestamp">2023/07/20</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/sudo_vi/profile.png" alt="sudo_vi" title="sudo_vi"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="thaturn" data-created="20230621" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">thaturn</span><span class="entry-bookmarkUsers-timestamp">2023/06/21</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/thaturn/profile.png" alt="thaturn" title="thaturn"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="heatman" data-created="20230609" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">heatman</span><span class="entry-bookmarkUsers-timestamp">2023/06/09</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/heatman/profile.png" alt="heatman" title="heatman"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="herakures" data-created="20230529" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">herakures</span><span class="entry-bookmarkUsers-timestamp">2023/05/29</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/herakures/profile.png" alt="herakures" title="herakures"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="shirotorabyakko" data-created="20230525" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">shirotorabyakko</span><span class="entry-bookmarkUsers-timestamp">2023/05/25</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/shirotorabyakko/profile.png" alt="shirotorabyakko" title="shirotorabyakko"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="kissshot821" data-created="20230521" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">kissshot821</span><span class="entry-bookmarkUsers-timestamp">2023/05/21</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/kissshot821/profile.png" alt="kissshot821" title="kissshot821"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="yohfee" data-created="20230519" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">yohfee</span><span class="entry-bookmarkUsers-timestamp">2023/05/19</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/yohfee/profile.png" alt="yohfee" title="yohfee"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="midas36545" data-created="20230516" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">midas36545</span><span class="entry-bookmarkUsers-timestamp">2023/05/16</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/midas36545/profile.png" alt="midas36545" title="midas36545"/> </li> <li role="link" tabIndex="0" class="bookmarker js-bookmarker js-ignorable-user-content" data-gtm-label="entry-bookmarkUsers-icon" data-user-name="tasukuchan" data-created="20230514" data-location-id="4736300501008890469"> <span class="entry-bookmarkUsers-meta"> <span class="entry-bookmarkUsers-userName">tasukuchan</span><span class="entry-bookmarkUsers-timestamp">2023/05/14</span> </span> <img src="https://cdn.profile-image.st-hatena.com/users/tasukuchan/profile.png" alt="tasukuchan" title="tasukuchan"/> </li> </ul> <div class="entry-bookmarkUsers-readMore"> <span class="entry-bookmarkUsers-readMore-wrapper"> <button class="entry-bookmarkUsers-readMore-btn js-all-bookmarkers-modal-open" data-gtm-label="entry-bookmarkUsers-readMore">すべてのユーザーを見る</button> <span class="entry-bookmarkUsers-readMore-popup">すべてのユーザーの<br>詳細を表示します</span> </span> </div> <div class="entry-usersModal js-all-bookmarkers-modal is-hidden"> <div class="is-active entry-usersModal-window js-all-bookmarkers-modal-window js-bookmark-autoloader-all" data-sort="all" data-autoload-url="https://ics.media/entry/230510/" data-next-cursor="MTY4Mzg3NzcyNywyNzY2ODg4MjM5NDUwNDU3Nw=="> <button type="button" class="entry-usersModal-close js-all-bookmarkers-modal-close"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="5748.793 -620.207 21.414 21.414"> <defs><style>.cls-1 { fill: none; stroke-width: 2px; }</style></defs> <g> <title>閉じる</title> <desc>モーダルを閉じます</desc> <path id="line1" d="M5769.5-619.5l-20 20"/><path id="line2" d="M5769.5-599.5l-20-20"/> </g> </svg> </button> <h4 class="entry-usersModal-title">ブックマークしたすべてのユーザー</h4> <div class="entry-usersModal-contents js-scrollable"> <div class="js-bookmarks js-bookmarks-all"> </div> <div class="entry-comment-readmore js-read-more"> <button id="all-bookmarks-readmore" class="js-read-more-button entry-comment-readmore-btn"> <span class="js-read-more-label js-read-more-ready">Readmore</span> <span class="js-read-more-label js-read-more-waiting is-hidden">残りのブックマークを読み込んでいます..</span> <span class="js-read-more-label js-read-more-error is-hidden">残りのブックマークを読み込めませんでした</span> </button> </div> </div> </div> </div> </section> <div class="entry-ad-pc-rectangle"> <div id="entry-rectangle-bottom-right"></div> </div> </div> </div> <div class="entry-ad-sp-rectangle"> <div id="entry-touch-a-rectangle"></div> </div> <section class="entry-group"> <h2 class="entry-group-sectionTitle"><a href="/site/ics.media/?sort=eid" data-gtm-label="entry-entrylistSameDomain-sectionTitle">同じサイトの新着</a></h2> <ul class="entry-group-list"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/ics.media/entry/250319/" title="CSSでテキストの上下余白が調整可能に！text-box-trimの使い方 - ICS MEDIA" data-gtm-label="entry-entrylistSameDomain-title">CSSでテキストの上下余白が調整可能に！text-box-trimの使い方 - ICS MEDIA</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/ics.media/entry/250319/" data-gtm-label="entry-entrylistSameDomain-users">184 users</a></span><span class="entry-group-domain"><a href="/site/ics.media/" data-gtm-label="entry-entrylistSameDomain-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F250319%2F" alt="">ics.media</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/ics.media/entry/250307/" title="HTML/CSSで装飾可能に！ select・optionタグの新しいカスタマイズ方法 - ICS MEDIA" data-gtm-label="entry-entrylistSameDomain-title">HTML/CSSで装飾可能に！ select・optionタグの新しいカスタマイズ方法 - ICS MEDIA</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/ics.media/entry/250307/" data-gtm-label="entry-entrylistSameDomain-users">52 users</a></span><span class="entry-group-domain"><a href="/site/ics.media/" data-gtm-label="entry-entrylistSameDomain-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F250307%2F" alt="">ics.media</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/ics.media/entry/250221/" title="CSSひとつで印象が変わる！　スクロールでふわっと出るアニメーション - ICS MEDIA" data-gtm-label="entry-entrylistSameDomain-title">CSSひとつで印象が変わる！　スクロールでふわっと出るアニメーション - ICS MEDIA</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/ics.media/entry/250221/" data-gtm-label="entry-entrylistSameDomain-users">12 users</a></span><span class="entry-group-domain"><a href="/site/ics.media/" data-gtm-label="entry-entrylistSameDomain-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F250221%2F" alt="">ics.media</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/ics.media/entry/250203/" title="ブラウザでマークダウンを編集！？ Nuxt Studioことはじめ - ICS MEDIA" data-gtm-label="entry-entrylistSameDomain-title">ブラウザでマークダウンを編集！？ Nuxt Studioことはじめ - ICS MEDIA</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/ics.media/entry/250203/" data-gtm-label="entry-entrylistSameDomain-users">31 users</a></span><span class="entry-group-domain"><a href="/site/ics.media/" data-gtm-label="entry-entrylistSameDomain-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F250203%2F" alt="">ics.media</a></span></p> </div> </div> </li> </ul> <p class="entry-group-readmore"> <a href="/site/ics.media/?sort=eid" data-gtm-label="entry-entrylistSameDomain-readMore">同じサイトの新着をもっと読む</a> </p> </section> <section class="entry-group"> <h2 class="entry-group-sectionTitle"><a href="/hotentry" data-gtm-label="entry-hotentry-sectionTitle">いま人気の記事</a></h2> <ul class="entry-group-list"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/kyoko-np.net/2025040101.html" title="ＳＮＳ「発信しない」という選択肢　漫画家・荒川弘さんに聞く" data-gtm-label="entry-hotentry-title">ＳＮＳ「発信しない」という選択肢　漫画家・荒川弘さんに聞く</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/kyoko-np.net/2025040101.html" data-gtm-label="entry-hotentry-users">507 users</a></span><span class="entry-group-domain"><a href="/site/kyoko-np.net/" data-gtm-label="entry-hotentry-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkyoko-np.net%2F2025040101.html" alt="">kyoko-np.net</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/anond.hatelabo.jp/20250331220905" title="春から大学生になる奴らへ。ロードバイクは絶対買うな" data-gtm-label="entry-hotentry-title">春から大学生になる奴らへ。ロードバイクは絶対買うな</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/anond.hatelabo.jp/20250331220905" data-gtm-label="entry-hotentry-users">348 users</a></span><span class="entry-group-domain"><a href="/site/anond.hatelabo.jp/" data-gtm-label="entry-hotentry-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fanond.hatelabo.jp%2F20250331220905" alt="">anond.hatelabo.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/speakerdeck.com/nasuvitz/aikodeinguezientomian-qiang-hui" title="AIコーディングエージェント勉強会" data-gtm-label="entry-hotentry-title">AIコーディングエージェント勉強会</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/speakerdeck.com/nasuvitz/aikodeinguezientomian-qiang-hui" data-gtm-label="entry-hotentry-users">251 users</a></span><span class="entry-group-domain"><a href="/site/speakerdeck.com/nasuvitz" data-gtm-label="entry-hotentry-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fnasuvitz%2Faikodeinguezientomian-qiang-hui" alt="">speakerdeck.com/nasuvitz</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/gigazine.net/news/20250401-doge-plans-to-rebuild-ssa-cobol-database/" title="イーロン・マスク率いるDOGEが6000万行ものCOBOLコードを含む社会保障局のシステムをコード生成AIでわずか数カ月の内に移行させようとしており危険性が指摘されている" data-gtm-label="entry-hotentry-title">イーロン・マスク率いるDOGEが6000万行ものCOBOLコードを含む社会保障局のシステムをコード生成AIでわずか数カ月の内に移行させようとしており危険性が指摘されている</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/gigazine.net/news/20250401-doge-plans-to-rebuild-ssa-cobol-database/" data-gtm-label="entry-hotentry-users">225 users</a></span><span class="entry-group-domain"><a href="/site/gigazine.net/" data-gtm-label="entry-hotentry-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgigazine.net%2Fnews%2F20250401-doge-plans-to-rebuild-ssa-cobol-database%2F" alt="">gigazine.net</a></span></p> </div> </div> </li> </ul> <p class="entry-group-readmore"> <a href="/hotentry" data-gtm-label="entry-hotentry-readMore">いま人気の記事をもっと読む</a> </p> </section> <section class="entry-group"> <h2 class="entry-group-sectionTitle"><a href="/hotentry/it" data-gtm-label="entry-hotentryCategory-sectionTitle">いま人気の記事 - テクノロジー</a></h2> <ul class="entry-group-list js-entry-hotentry-list-category" data-category="it" data-section-type="hotentryCategory"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/gigazine.net/news/20250401-doge-plans-to-rebuild-ssa-cobol-database/" title="イーロン・マスク率いるDOGEが6000万行ものCOBOLコードを含む社会保障局のシステムをコード生成AIでわずか数カ月の内に移行させようとしており危険性が指摘されている" data-gtm-label="entry-hotentryCategory-title">イーロン・マスク率いるDOGEが6000万行ものCOBOLコードを含む社会保障局のシステムをコード生成AIでわずか数カ月の内に移行させようとしており危険性が指摘されている</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/gigazine.net/news/20250401-doge-plans-to-rebuild-ssa-cobol-database/" data-gtm-label="entry-hotentryCategory-users">223 users</a></span><span class="entry-group-domain"><a href="/site/gigazine.net/" data-gtm-label="entry-hotentryCategory-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgigazine.net%2Fnews%2F20250401-doge-plans-to-rebuild-ssa-cobol-database%2F" alt="">gigazine.net</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/speakerdeck.com/nasuvitz/aikodeinguezientomian-qiang-hui" title="AIコーディングエージェント勉強会" data-gtm-label="entry-hotentryCategory-title">AIコーディングエージェント勉強会</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/speakerdeck.com/nasuvitz/aikodeinguezientomian-qiang-hui" data-gtm-label="entry-hotentryCategory-users">249 users</a></span><span class="entry-group-domain"><a href="/site/speakerdeck.com/nasuvitz" data-gtm-label="entry-hotentryCategory-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fnasuvitz%2Faikodeinguezientomian-qiang-hui" alt="">speakerdeck.com/nasuvitz</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/forest.watch.impress.co.jp/docs/serial/yajiuma/2002656.html" title="ローカルアカウントでWindows 11をセットアップする方法【令和7年最新版】／「BypassNRO.cmd」スクリプトに代わるシンプルなやり方が発見される【やじうまの杜】" data-gtm-label="entry-hotentryCategory-title">ローカルアカウントでWindows 11をセットアップする方法【令和7年最新版】／「BypassNRO.cmd」スクリプトに代わるシンプルなやり方が発見される【やじうまの杜】</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/forest.watch.impress.co.jp/docs/serial/yajiuma/2002656.html" data-gtm-label="entry-hotentryCategory-users">110 users</a></span><span class="entry-group-domain"><a href="/site/forest.watch.impress.co.jp/" data-gtm-label="entry-hotentryCategory-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fforest.watch.impress.co.jp%2Fdocs%2Fserial%2Fyajiuma%2F2002656.html" alt="">forest.watch.impress.co.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.yasuhisay.info/entry/2025/03/31/230212" title="ジュニアエンジニアからシニアエンジニアになるまでに自分がやっていたことまとめ - yasuhisa's blog" data-gtm-label="entry-hotentryCategory-title">ジュニアエンジニアからシニアエンジニアになるまでに自分がやっていたことまとめ - yasuhisa's blog</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.yasuhisay.info/entry/2025/03/31/230212" data-gtm-label="entry-hotentryCategory-users">88 users</a></span><span class="entry-group-domain"><a href="/site/www.yasuhisay.info/" data-gtm-label="entry-hotentryCategory-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.yasuhisay.info%2Fentry%2F2025%2F03%2F31%2F230212" alt="">www.yasuhisay.info</a></span></p> </div> </div> </li> </ul> <p class="entry-group-readmore"> <a href="/hotentry/it" data-gtm-label="entry-hotentryCategory-readMore">いま人気の記事 - テクノロジーをもっと読む</a> </p> </section> <section class="entry-group"> <h2 class="entry-group-sectionTitle"><a href="/entrylist/it" data-gtm-label="entry-entrylistCategory-sectionTitle">新着記事 - テクノロジー</a></h2> <ul class="entry-group-list"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/blog.mudatobunka.org/entry/2025/04/01/100000" title="ココピーからChatGPTを呼んで文章生成させる - 無駄と文化" data-gtm-label="entry-entrylistCategory-title">ココピーからChatGPTを呼んで文章生成させる - 無駄と文化</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/blog.mudatobunka.org/entry/2025/04/01/100000" data-gtm-label="entry-entrylistCategory-users">12 users</a></span><span class="entry-group-domain"><a href="/site/blog.mudatobunka.org/" data-gtm-label="entry-entrylistCategory-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.mudatobunka.org%2Fentry%2F2025%2F04%2F01%2F100000" alt="">blog.mudatobunka.org</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/applech2.com/archives/2025040-ios-18-4-build-22e240-update-now-available.html" title="Apple、iPhone 15 Pro以降のiPhoneとM1以降のiPadにおいて日本語でのApple Intelligenceをサポートした「iOS/iPadOS 18.4 (22E240)」を正式にリリース。" data-gtm-label="entry-entrylistCategory-title">Apple、iPhone 15 Pro以降のiPhoneとM1以降のiPadにおいて日本語でのApple Intelligenceをサポートした「iOS/iPadOS 18.4 (22E240)」を正式にリリース。</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/applech2.com/archives/2025040-ios-18-4-build-22e240-update-now-available.html" data-gtm-label="entry-entrylistCategory-users">5 users</a></span><span class="entry-group-domain"><a href="/site/applech2.com/" data-gtm-label="entry-entrylistCategory-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fapplech2.com%2Farchives%2F2025040-ios-18-4-build-22e240-update-now-available.html" alt="">applech2.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/qiita.com/Himeka_Kawaguchi/items/9de178239962ee921ca3" title="技術ヒートマップを作ろう🐱‍🐉🔥 - Qiita" data-gtm-label="entry-entrylistCategory-title">技術ヒートマップを作ろう🐱‍🐉🔥 - Qiita</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/qiita.com/Himeka_Kawaguchi/items/9de178239962ee921ca3" data-gtm-label="entry-entrylistCategory-users">5 users</a></span><span class="entry-group-domain"><a href="/site/qiita.com/" data-gtm-label="entry-entrylistCategory-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2FHimeka_Kawaguchi%2Fitems%2F9de178239962ee921ca3" alt="">qiita.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/febc-yamamoto.hatenablog.jp/entry/2025/04/01/080000" title="otlp-http-spyでOTLP/HTTPの内容を目視する - febc技術メモ" data-gtm-label="entry-entrylistCategory-title">otlp-http-spyでOTLP/HTTPの内容を目視する - febc技術メモ</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/febc-yamamoto.hatenablog.jp/entry/2025/04/01/080000" data-gtm-label="entry-entrylistCategory-users">7 users</a></span><span class="entry-group-domain"><a href="/site/febc-yamamoto.hatenablog.jp/" data-gtm-label="entry-entrylistCategory-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ffebc-yamamoto.hatenablog.jp%2Fentry%2F2025%2F04%2F01%2F080000" alt="">febc-yamamoto.hatenablog.jp</a></span></p> </div> </div> </li> </ul> <p class="entry-group-readmore"> <a href="/entrylist/it" data-gtm-label="entry-entrylistCategory-readMore">新着記事 - テクノロジーをもっと読む</a> </p> </section> <div class="entry-ad-sp-rectangle"> <div id="entry-touch-rectangle"></div> </div> <section class="entry-group"> <div class="entry-pager-container"> <h2 class="entry-group-sectionTitle">同時期にブックマークされた記事</h2> <ul class="entry-group-list"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.gap.co.jp/gap/featured/summer-collection-3019168" title="Gap | Gap公式オンラインストア" data-gtm-label="entry-entrylistSameperiod-title">Gap | Gap公式オンラインストア</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.gap.co.jp/gap/featured/summer-collection-3019168" data-gtm-label="entry-entrylistSameperiod-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.gap.co.jp/" data-gtm-label="entry-entrylistSameperiod-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.gap.co.jp%2Fgap%2Ffeatured%2Fsummer-collection-3019168" alt="">www.gap.co.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/learn.microsoft.com/en-us/power-automate/desktop-flows/requirements" title="Prerequisites and limitations - Power Automate" data-gtm-label="entry-entrylistSameperiod-title">Prerequisites and limitations - Power Automate</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/learn.microsoft.com/en-us/power-automate/desktop-flows/requirements" data-gtm-label="entry-entrylistSameperiod-users">2 users</a></span><span class="entry-group-domain"><a href="/site/learn.microsoft.com/" data-gtm-label="entry-entrylistSameperiod-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fpower-automate%2Fdesktop-flows%2Frequirements" alt="">learn.microsoft.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/zenn.dev/microcms/articles/call-js-library-from-golang" title="GoからJavaScriptのライブラリを呼び出す" data-gtm-label="entry-entrylistSameperiod-title">GoからJavaScriptのライブラリを呼び出す</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/zenn.dev/microcms/articles/call-js-library-from-golang" data-gtm-label="entry-entrylistSameperiod-users">2 users</a></span><span class="entry-group-domain"><a href="/site/zenn.dev/microcms" data-gtm-label="entry-entrylistSameperiod-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fmicrocms%2Farticles%2Fcall-js-library-from-golang" alt="">zenn.dev/microcms</a></span></p> </div> </div> </li> </ul> </div> </section> <section class="entry-group"> <h2 class="entry-group-sectionTitle"><a href="/hotentry/all/%E4%BC%81%E6%A5%AD%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2" data-gtm-label="entry-entrylistRecommendedIssue-sectionTitle">いま人気の記事 - 企業メディア</a> </h2> <ul class="entry-group-list"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/engineers.ntt.com/entry/202503-gemini-cicd-code-review/entry" title="GoogleのLLM「Gemini」でコードレビューをするGitHub Actionsを自力で構築してみた - NTT Communications Engineers' Blog" data-gtm-label="entry-entrylistRecommendedIssue-title">GoogleのLLM「Gemini」でコードレビューをするGitHub Actionsを自力で構築してみた - NTT Communications Engineers' Blog</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/engineers.ntt.com/entry/202503-gemini-cicd-code-review/entry" data-gtm-label="entry-entrylistRecommendedIssue-users">33 users</a></span><span class="entry-group-domain"><a href="/site/engineers.ntt.com/" data-gtm-label="entry-entrylistRecommendedIssue-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fengineers.ntt.com%2Fentry%2F202503-gemini-cicd-code-review%2Fentry" alt="">engineers.ntt.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/studyhacker.net/deliberate-errors" title="「あえて間違える勉強法」で驚くほど記憶が定着する理由 - STUDY HACKER（スタディーハッカー）｜社会人の勉強法＆英語学習" data-gtm-label="entry-entrylistRecommendedIssue-title">「あえて間違える勉強法」で驚くほど記憶が定着する理由 - STUDY HACKER（スタディーハッカー）｜社会人の勉強法＆英語学習</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/studyhacker.net/deliberate-errors" data-gtm-label="entry-entrylistRecommendedIssue-users">32 users</a></span><span class="entry-group-domain"><a href="/site/studyhacker.net/" data-gtm-label="entry-entrylistRecommendedIssue-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fstudyhacker.net%2Fdeliberate-errors" alt="">studyhacker.net</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/foneslife.com/healthcare-magazine/entry/waga_1222" title="病気に「なる前に対策する」時代の検査サービス「フォーネスビジュアス」を支える技術 ― CTOに聞く - lala a live(ララアライブ)│フォーネスライフ" data-gtm-label="entry-entrylistRecommendedIssue-title">病気に「なる前に対策する」時代の検査サービス「フォーネスビジュアス」を支える技術 ― CTOに聞く - lala a live(ララアライブ)│フォーネスライフ</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/foneslife.com/healthcare-magazine/entry/waga_1222" data-gtm-label="entry-entrylistRecommendedIssue-users">21 users</a></span><span class="entry-group-domain"><a href="/site/foneslife.com/" data-gtm-label="entry-entrylistRecommendedIssue-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ffoneslife.com%2Fhealthcare-magazine%2Fentry%2Fwaga_1222" alt="">foneslife.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.hotpepper.jp/mesitsu/entry/papa-izm/2025-01168" title="チューブにんにくと1袋45円で買ったもやしで本格パスタ。元イタリアン料理人の節約レシピ - メシ通 | ホットペッパーグルメ" data-gtm-label="entry-entrylistRecommendedIssue-title">チューブにんにくと1袋45円で買ったもやしで本格パスタ。元イタリアン料理人の節約レシピ - メシ通 | ホットペッパーグルメ</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.hotpepper.jp/mesitsu/entry/papa-izm/2025-01168" data-gtm-label="entry-entrylistRecommendedIssue-users">58 users</a></span><span class="entry-group-domain"><a href="/site/www.hotpepper.jp/" data-gtm-label="entry-entrylistRecommendedIssue-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.hotpepper.jp%2Fmesitsu%2Fentry%2Fpapa-izm%2F2025-01168" alt="">www.hotpepper.jp</a></span></p> </div> </div> </li> </ul> <p class="entry-group-readmore"> <a href="/hotentry/all/%E4%BC%81%E6%A5%AD%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2" data-gtm-label="entry-entrylistRecommendedIssue-readMore">企業メディアをもっと読む</a> </p> </section> </div> </div> <div class="drawer-menu js-drawer-menu"> <button class="drawer-menu-button js-drawer-menu-button" data-gtm-click-label="drawer-open"> <span class="drawer-notify-count js-notify-count"></span> </button> <ul class="drawer-menu-body js-drawer-body-container"> </ul> <script type="text/x-template" id="template-drawer-body"> {{ #is_login_user }} <li class="drawer-loginMenu"> <a href="/{{ user_name }}/bookmark" class="drawer-loginMenu-username" data-gtm-click-label="drawer-header-username"><img src="{{ profile_image }}" alt="{{ user_name }}" /><span>{{ user_name }}</span></a> <button type="button" class="drawer-loginMenu-button js-notify-list-button notify" data-gtm-click-label="drawer-header-notify"> <span class="drawer-notify-count js-notify-count"></span> <span class="hide-text">通知</span> </button> <span role="link" class="drawer-loginMenu-button config"> <a href="/{{ user_name }}/config" data-gtm-click-label="drawer-header-config"><span class="hide-text">設定</span></a> </span> </li> {{ /is_login_user }} {{ #is_guest_user }} <li class="drawer-menu-item"> <a href="{{ login_url }}" rel="nofollow" data-gtm-click-label="drawer-guest-login"><span>ログイン</span></a> </li> <li class="drawer-menu-item"> <a href="/guide" rel="nofollow" data-gtm-click-label="drawer-guest-guide"> <span>はてなブックマークとは</span> </a> </li> {{ /is_guest_user }} <li class="drawer-notify-list js-drawer-notify-list is-loading"> <img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/common/loading@2x.gif" class="notify-list-loading-image" alt="読み込み中" /> <iframe class="notify-list js-notify-list"></iframe> </li> <li class="drawer-menu-item"> <a href="/hotentry" data-gtm-click-label="drawer-menu-hotentry">人気エントリー</a> </li> <li class="drawer-menu-item"> <a href="/entrylist" data-gtm-click-label="drawer-menu-entrylist">新着エントリー</a> </li> {{ #is_login_user }} <li class="drawer-menu-item"> <a href="/add" data-gtm-click-label="drawer-menu-bookmarkadd">ブックマークを追加</a> </li> <li class="drawer-toggleMenu js-drawer-submenu is-open"> <button type="button" class="drawer-toggleMenu-label js-drawer-submenu-label">マイページ</button> <ul class="service-submenu"> <li class="service-submenu-item"> <a href="/{{ user_name }}/bookmark" data-gtm-click-label="drawer-mypage-mybookmark">マイブックマーク</a> </li> <li class="service-submenu-item"> <a href="/{{ user_name}}/unread_bookmark" data-gtm-click-label="drawer-mypage-unread">あとで読む</a> </li> <li class="service-submenu-item"> <a href="/{{ user_name }}/hotentry" data-gtm-click-label="drawer-mypage-myhotentry">マイホットエントリー</a> </li> <li class="service-submenu-item"> <a href="/{{ user_name }}/interest" data-gtm-click-label="drawer-mypage-interest">関心ワード</a> </li> <li class="service-submenu-item"> <a href="/{{ user_name }}/favorite" data-gtm-click-label="drawer-mypage-favorite">お気に入り</a> </li> </ul> </li> {{ /is_login_user }} <li class="drawer-toggleMenu js-drawer-submenu is-open"> <button type="button" class="drawer-toggleMenu-label js-drawer-submenu-label">カテゴリー</button> <ul class="service-submenu"> <li class="service-submenu-item"> <a href="/hotentry/general" data-gtm-click-label="drawer-category-general">一般</a> <a href="/hotentry/social" data-gtm-click-label="drawer-category-social">世の中</a> <a href="/hotentry/economics" data-gtm-click-label="drawer-category-economics">政治と経済</a> <a href="/hotentry/life" data-gtm-click-label="drawer-category-life">暮らし</a> <a href="/hotentry/knowledge" data-gtm-click-label="drawer-category-knowledge">学び</a> <a href="/hotentry/it" data-gtm-click-label="drawer-category-it">テクノロジー</a> <a href="/hotentry/fun" data-gtm-click-label="drawer-category-fun">おもしろ</a> <a href="/hotentry/entertainment" data-gtm-click-label="drawer-category-entertainment">エンタメ</a> <a href="/hotentry/game" data-gtm-click-label="drawer-category-game">アニメとゲーム</a> </li> </ul> </li> {{ #is_app_target }} <li class="drawer-toggleMenu js-drawer-submenu is-open"> <button type="button" class="drawer-toggleMenu-label js-drawer-submenu-label">アプリをダウンロード</button> <ul class="service-submenu"> {{ #is_ios }} <li class="service-submenu-item device-ios app-bookmark"> <a href="https://apps.apple.com/jp/app/hatenabukkumaku/id354976659?mt=8" data-gtm-click-label="drawer-app-ios">はてなブックマーク</a> </li> {{ /is_ios }} {{ #is_android }} <li class="service-submenu-item device-android app-bookmark"> <a href="https://play.google.com/store/apps/details?id=com.hatena.android.bookmark&referrer=utm_source%3Dbookmark_sp%26utm_campaign%3Dbookmark_sp_drawer&hl=ja" data-gtm-click-label="drawer-app-android">はてなブックマーク</a> </li> {{ /is_android }} </ul> </li> {{ /is_app_target }} </script> </div> <script id="valve-dmp" data-service="bookmark" src="//cdn.pool.st-hatena.com/valve/dmp.js" async></script> <div class="message-modal js-message-modal is-hidden auto-hide"> <div class="message-modal-message"> <p class="message-modal-message-text js-message-modal-message-text"></p> <button class="message-modal-btn js-message-modal-close-button">閉じる</button> </div> </div> <div class="footer"> <div class="footer-inner"> <div class="footer-inner-group footer-bookmark"> <h2 class="footer-title"><a href="/" data-gtm-label="footer-btop">はてなブックマーク</a></h2> <div class="footer-list-wrapper"> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/all" class="hotentry js-keyboard-openable" data-gtm-label="footerCategories-hotentry">総合</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/general" class="general js-keyboard-openable" data-gtm-label="footerCategories-general">一般</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/social" class="cat-social js-keyboard-openable" data-gtm-label="footerCategories-social">世の中</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/economics" class="cat-economics js-keyboard-openable" data-gtm-label="footerCategories-economics">政治と経済</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/life" class="cat-life js-keyboard-openable" data-gtm-label="footerCategories-life">暮らし</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/knowledge" class="cat-knowledge js-keyboard-openable" data-gtm-label="footerCategories-knowledge">学び</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/it" class="cat-it js-keyboard-openable" data-gtm-label="footerCategories-it">テクノロジー</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/entertainment" class="cat-entertainment js-keyboard-openable" data-gtm-label="footerCategories-entertainment">エンタメ</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/game" class="cat-game js-keyboard-openable" data-gtm-label="footerCategories-game">アニメとゲーム</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/fun" class="cat-fun js-keyboard-openable" data-gtm-label="footerCategories-fun">おもしろ</a></li> </ul> <ul class="footer-list"> <li class="footer-list-item"><a href="/guide/tools">アプリ・拡張機能</a></li> <li class="footer-list-item"><a href="https://bookmark.hatenastaff.com/">開発ブログ</a></li> <li class="footer-list-item"><a href="/help/">ヘルプ</a></li> <li class="footer-list-item"><a href="https://hatena.zendesk.com/hc/ja/categories/900000153166">お問い合わせ</a></li> <li class="footer-list-item footer-list-item--sp"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item footer-list-item--pc"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> </div> </div> <div class="footer-inner-group footer-bookmark-sns"> <h2 class="footer-title">公式Twitter</h2> <div class="footer-bookmark-list"> <ul class="footer-list"> <li class="footer-list-item"><a href="https://twitter.com/HatenaBookmark" target="_blank" rel="noopener" data-gtm-click-label="footer-officialTwitter-name">公式アカウント</a></li> <li class="footer-list-item"><a href="https://twitter.com/hatebu" target="_blank" rel="noopener" data-gtm-click-label="footer-hotentryTwitter-name">ホットエントリー</a></li> </ul> </div> </div> <div class="footer-inner-group footer-hatena"> <h2 class="footer-title">はてなのサービス</h2> <ul class="footer-list"> <li class="footer-list-item"><a href="https://hatenablog.com/" data-gtm-label="footerServices-blog">はてなブログ</a></li> <li class="footer-list-item"><a href="https://hatenablog.com/guide/pro?plus_via=hatenabookmark_footer&utm_source=hatenabookmark&utm_medium=referral&utm_campaign=hatenabookmark_to_hatenablog_pro&utm_content=hatenabookmark_footer" data-gtm-label="footerServices-blog-pro">はてなブログPro</a></li> <li class="footer-list-item"><a href="https://q.hatena.ne.jp/" data-gtm-label="footerServices-question">人力検索はてな</a></li> <li class="footer-list-item"><a href="http://d.hatena.ne.jp/" data-gtm-label="footerServices-keyword">はてなブログタグ</a></li> <li class="footer-list-item"><a href="http://hatenanews.com/" data-gtm-label="footerServices-hatenanews">はてなニュース</a></li> <li class="footer-list-item"><a href="https://soredoko.jp/" data-gtm-label="footerServices-soredoko">ソレドコ</a></li> </ul> </div> </div> <div class="footer-bottom"> <div class="footer-app"> <ul> <li class="footer-list-item"><a href="https://apps.apple.com/jp/app/hatenabukkumaku/id354976659?mt=8" target="_blank" rel="noopener" data-gtm-click-label="footer-app-ios"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/common/dl-button/appstore@2x.png" alt="App Storeからダウンロード"></a></li> <li class="footer-list-item"><a href="https://play.google.com/store/apps/details?id=com.hatena.android.bookmark&referrer=utm_source%3Dbookmark_sp%26utm_campaign%3Dbookmark_sp_user&hl=ja" target="_blank" rel="noopener" data-gtm-click-label="footer-app-android"><img src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/images/v4/public/common/dl-button/googleplay@2x.png" alt="Google Playで手に入れよう"></a></li> </ul> </div> <div class="copyright">Copyright © 2005-2025 <a href="http://www.hatena.ne.jp/">Hatena</a>. All Rights Reserved.</div> </div> </div> <div id="touch-footer-ad"></div> <div id="touch-footer-ad-placeholder"></div> <div class="modal-overlay"></div> <script type="text/javascript" src="https://b.st-hatena.com/21bb37de101e3d895eac61554a1ca07012b63961/js/v4/bookmark.star.js" async></script> <div class="js-head-notify is-hidden">設定を変更しました<span class="js-head-notify-close-button">x</span></div> </body> </html>

CINXE.COM

[B! javascript] View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA