scroll-behaviorでなめらかスクロールが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 06日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 06 日目 scroll-behavior でハッシュ付き URL とかでジャンプするときのスクロールをなめらかアニメーションさせることができます。 使い方 デモ：https://codepen.io/ginpei/pen/OJdrqPR JS でのジャンプにも利く scrollTo() 等でスクリプトからスクロールする際にも利きます。楽ちんですね。 ちなみに実行時オプションで CSS の設定を上書きできます。 アニメーション制御はなし ON/OFF だけです。速度とかはブラウザー次第。 あとブラウザーの気分次第で無視しても良いと仕様に書かれています。そうなんだ。 おしまい 昔はみんな頑張って JavaScript で計算してアニメーションさせてましたね。 参考 scroll-behavior – CSS: カスケーディ
爆速で説明するreact-routerの使い方 - Qiita
目的 自分が読んだreactの最近の参考書にはreact-routerの使い方の説明が一切書かれていなかったため、公式ドキュメントを参考にして備忘録として使い方を記す。 実践 index.jsx(ts使うならtsx)に下記のように記載する。 各コンポーネント、ファイルの置き場所をsrc/routes,src/components配下としたが、これは特に定められているわけではないので場合によってはもっとネストさせたディレクトリの下などから呼ぶこともあるだろう。 index.jsx 結局index.jsxを"root"にレンダリングするため、全てのRouteをindex.jsxに記載する。 HeaderやFooterなどの固定するものはどこのページでも表示するため、内外に記載する。 <Route path="/" element={<Home />} />では、URLを例えばhttp://lo
待望のアンカーリンクとオーディオ機能が登場！ Adobe XDでプロトタイプに役立つ新機能まとめ - ICS MEDIA
先日、Adobe XDの2020年3月の大型アップデートが公開されました。今回の目玉機能は「アンカーリンク」そして「オーディオの再生」です。これらのプロトタイプの可能性を拡げてくれる機能の使い方と注意点を紹介します。 その他にも「タップトリガーでの複数のアクション」「コンテンツに応じたエリア内テキストのサイズ変更のショートカット」「画像の置き換え」といった機能も登場しました。 Adobe XDを普段から使っている方には最新機能の復習として、使っていない方にはAdobe XDの進化を感じられる内容になっています！ アンカーリンク 同じページ上の特定のポイントまでスクロールするリンクの一種である「アンカーリンク」が登場しました。 プロトタイプモードでアンカーリンクしたい要素から、スクロール先にリンクを繋ぐだけで設定は完了です。同一ページ内でリンクを繋ぐと自動的にアクション「スクロール先」が設定
ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック
ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-paddingプロパティを使用して、この問題を解決するCSSのテクニックを紹介します。 Fixed Headers, On-Page Links, and Overlapping Content, Oh My! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ内リンクが固定ヘッダと重なって隠れる scroll-paddingとscroll-margin 「scroll-snapプロパティ」のサポートブ
スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page
ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 instant.pageのデモ instant.pageの使い方 instant.pageの特徴 instant.pageはprefetchを使用し、ユーザーがクリック・タップする直前にページをプリロードして、ページを高速に表示します。 ユーザーがリンクをクリックする際には、そのリンクの上にマウスを移動します。そのリンクをユーザーが65ミリ秒間ホバーした場合、そのリンクをクリックする確率は1/2であるため、この時instant.p
怪しいリンク先を簡単に「VirusTotal」でチェックできるChrome用アドオン「VTchromizer」を使ってみた - GIGAZINE
ネットサーフィンをしていると、必ずと言っていいほど出会ってしまう「怪しげなリンク」。クリックすると目的の情報にアクセスできそうですが、フィッシングサイト(詐欺サイト)にアクセスしてしまったり、マルウェアやウイルスに感染してしまうリスクがあります。また、セキュリティソフトが入っていれば、必ずしも大丈夫ということではなく、ソフトによっては検知の精度もバラバラで、知らないうちに被害を受けているなんてことも。無料でインターネットのURLやファイルを検査してくれるウェブサービス「VirusTotal」を使えば、60以上のウイルス対策ソフトやセキュリティソフトで一度に検査してくれますが、怪しいリンクに遭遇する都度、アクセスするのは手間でしかありません。そこで、簡単な操作で怪しいリンクを「VirusTotal」でチェックできる、Chrome用アドオン「VTchromizer」を使ってみました。 VTch
pageAccelerator - JavaScriptだけでWebページ読み込みを高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。 今回は簡易的にページ読み込みを高速化してくれるpageAcceleratorを紹介します。 pageAcceleratorの使い方 pageAcceleratorはTurbolinkやpjaxと呼ばれる仕組みに近いものとなっています。まずスクリプトを読み込みます。 <script src="page-accelerator.min.js"></script> 後はpageAcceleratorを実行するだけです。
こいつぁ便利ね…！他サイトの記事紹介リンクをかっこ良く作成してくれる「Embedly」
人様のブログや他サイトの記事を紹介するためにいろんな方法をとっておりましたが、@shintarowfresh さんの最近捗ったweb系のあれこれって記事で知ったEmbedlyというサービスがなかなか良かったので導入＆カスタマイズしてみました。 Embedly 外部サイトを紹介するのに便利なEmbedlyの使い方 まずはこちらのページへGO。 ブックマークレットをブックマークバーにぶち込みます。 これで準備は完了。あな簡単し。 あとは紹介したいページにアクセスして、先ほど登録したブックマークレットをクリックすると… いいじゃない！下部のソースコードを貼り付ければおしまいです。 できあがりは↓こんな感じ。 ホント買って良かったこのレンズ！Sonnar T* FE 55mm F1.8 ZA（SEL55F18Z）実写レビュー レスポンシブ対応ですし、使い方も非常に簡単。こいつぁ便利ですね！ 最近捗
:target擬似クラスのまとめ
CSSの「:target擬似クラス」について調べてみました。 認識誤りがありましたらどこかでつぶやいてください。 １．:target擬似クラスとは :target擬似クラスはCSS3で追加されたセレクタです。 以下、とりあえず仕様の記載をもとに記します。 仕様は下記のリンク先にあります。 Selectors Level 3 - 6.6.2. The target pseudo-class :target フラグメント識別子（#）のついたURIは、同じHTML文書内の特定の要素にリンクされることがあり、これを「ターゲット要素」と呼びます。 次の例は、HTML文書内にあるfooと名付けられた要素を参照するURIです。 http://user-domain/index.html#foo ターゲット要素は:target擬似クラスで表すことができます。 URIがフラグメント識別子を持たない場合、その
[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems
タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script src="jquery.min.js"></script> <script src="menuitems/menuitems.min.js"></script> </body> Step 2: HTML 各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。 <body> <section|div class="menuI
![[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems](https://cdn-ak-scissors.b.st-hatena.com/image/square/490093a26eeae705d029e62c12e65ec0e91614fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120901.png)
[ブックマークレット] コレ抜きではブログ書けねェ!! ブロガーにオススメの厳選ブックマークレット | ヨッセンス
こんにちは! ヨス（プロフィールはこちら）です! 以前、ブックマークレットってなに?について書きました。 今度は私が実際に使っていて、現在進行形で役に立ちまくっているオススメのブックマークレットを紹介します!! ブックマークレットをオススメしている理由は、ブラウザのお気に入り（ブックマーク）に登録でき、ワンクリックで起動できるという手軽さだけではありません。 なんと言っても軽いんです! 今回は「ブロガー向け」に絞ってのお勧めブックマークレットを紹介します! ブロガーにオススメのブックマークレット では私も普段から愛用しまくっているブロガー向けのブックマークレットたちを4つ（＋ヨスが作ったオマケ1個）を紹介します。 あ! ブックマークレットの紹介って書きましたが、いきなり訂正します（笑）。 よくよく考えると、今回の5つは、厳密には自分に合ったブックマークレットを作成する、「ブックマークレット
![[ブックマークレット] コレ抜きではブログ書けねェ!! ブロガーにオススメの厳選ブックマークレット | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/461ffe669973ec86dcd5b670613e3566f2981cec/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fbookmarklet_recommend_blogger-250.gif)
jQuery とっても簡単、ページ内リンクでスムーズスクロール
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール？というかたは、↓の DEMO をご覧になって、どこかリンク部分（下線がある文字）をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 ＊味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順１：jQueryの記述 手順２：HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順１：jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
事前レンダリングでウェブページの表示時間を高速化
[対象: 上級] 事前レンダリングと呼ぶ技術を使って、ウェブページの表示時間を高速化する方法をこの記事では解説します。 事前レンダリングとは 事前レンダリング (Prerendering)とは、その名のとおり、ページの読み込み（正確にはレンダリング）を前もって実行する仕組みです。 Google検索で採用されている「インスタントページ」には事前レンダリングが使われています。 下のキャプチャは、Googleで「Amazon」を検索したときのChromeのタスクの状況をタスクマネージャで確認したものです。 「事前レンダリング」でAmazon.co.jpが出ています。 「Amazon」で検索したユーザーはかなり高い確率で（1位に出てきた）Amazonのホームページをクリックするはずです。 Chromeは先回りして、ユーザーがクリックしなくてもAmazonのホームページを取得および描画、つまりレンダ
ページ内の目次を自動生成するjQueryプラグイン・jQuery Jump To
ページ内の目次を自動生成する、というスクリプトのご紹介です。見出しを検出してページ内のナビゲーションを作成出来ます。冗長なページにはあると良さそうですね。 ページ内の見出しを使ってナビゲーションを作成します。現在閲覧中の見出しにもスタイルを当てられますのでユーザーに分かりやすいナビゲーションを作成出来そうですね。 長いページにはページ内ナビゲーションがあると便利。ドキュメントや規約など冗長化しやすいコンテンツと相性良さそうです。 $(document).ready( function() { $(".page_container").jumpto({ firstLevel: "> h2", secondLevel: "> h3" }); });リンクとして取り出す要素は上記のように指定します。ネストも可能ですが2段階層までの対応のようです。 シンプルなので手軽に使えそうですね。詳細は以下よ
[JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors
通常のハッシュリンクと違い、#のすぐ後に「.」があります。これは、そのclassをもった最初の要素にリンクしています。 また、右端の「#.hello｜5000」はスクロールの速度を設定しています。 リンクのパターンはさまざまなものがあり、各所に利用されています。 Arbitrary anchorsの使い方 実装は簡単で、classのリンクやスピード調整だけでなく、通常のハッシュリンクでもアニメーションでスクロールさせることができます。 Step 1: 外部ファイル head内に、jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript
[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll
「Easing Effect」には3つのデモがあります。 「easeInOutBack」一旦逆にスクロールし、目的地をちょっとだけ通りすぎて戻って到着。 「easeOutBounce」目的地につくとバウンドで到着。 「easeOutElastic」はeaseInOutBackを素早くした感じです。 AnimateScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に記述します。 <head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="animatescroll.js"> </head> Step 2: HTML（スクロール先の設定） スクロール先の要素にidやclassを付与します。 ※ペー
[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
SMINT SMINTの使い方 Step 1: 外部ファイル スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.smint.js"></script> </head> Step 2: HTML まずは、最上部に配置されるナビゲーションから。 <div class="subMenu" > <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" c
固定ページで子ページのリンクやタイトル、抜粋を一覧表示させるショートコード
固定ページで子ページを持つ親ページに使うショートコード。子ページを一覧表示させる。 出力されるマークアップは$outputの中身ですので変えたい場合はここを弄れば良いですね。
競合サイトの被リンクを調査する4つの方法 | 検索エンジン最適化（SEO）情報ブログ
検索エンジンの検索結果内での競合サイトの被リンクを調査する方法を紹介しています。私が普段から使用しているGoogle+で当ブログの記事を毎回投稿しています。すると、昨日投稿した記事に対して質問をされている方がいました。どんな質問かというと以下のようなものです。 初歩的な内容で恐縮なんですが、気になっているサイトの外部リンクを調べるってどうやってやってるんですか？？ ウェブマスターツールからリンク一覧拾ってくる以外に方法を知らなくて。。 https://plus.google.com/u/0/105143303660674368078/posts/cQYUUeMBNnK そこで今回は検索エンジンの検索結果内で競合サイトや気になっているサイトの外部リンクを調べる方法をご紹介します。 link:コマンドを使用する このlink:コマンドというのはどのように使用するのか。それは以下のようになりま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意のWebサイトからデータを抽出し、リンクカード化してくれるAPI・「Microlink」 | かちびと.net
