Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap | コリス

2019/08/28 61 users コリス スクリプト 自動生成 構成 マップ

Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。 pagemap pagemap -GitHub pagemapの特徴 pagemapのデモ pagemapの使い方 pagemapの特徴 pagemapはページ全体の構成を取得し、全体を把握できるマップを自動生成... 続きを読む

ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック | コリス

2019/04/08 156 users コリス CSS ヘッダ 固定ヘッダ テクニック

ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-p... 続きを読む

今どきのスムーズスクロール(2019年版) - to-R Media

2019/03/15 175 users スムーズスクロール jQuery しょうが お世辞 今どき

ページ内リンクをスムーズスクロールで行いたい場合はどのようにすればよいでのしょうか？ jQueryを利用すれば簡単に対応できますが、非jQueryの案件ですと悩みものです。 筆者は12年前にjQuery非依存のスムーズスクロールのJavaScriptライブラリ「smoothScroll.js」をリリースしていますがお世辞にも今の時代に利用する... 続きを読む

任意のWebページのテキストを読みやすく、見やすくしてくれるChrome拡張・「Clearly」 | かちびと.net

2018/12/30 17 users Chromeエクステンション 見出し 左ペイン 音声 メニュー

Clearly Clearlyは任意のWebページのテキストを読みやすくしてくれるChromeエクステンションです。上SSは昨日の記事ですが、広告やメニュー等が非表示となり、テキストがセンターに、左ペインには見出しに対して自動でページ内リンクが作成され、右ペインには音声読み上げやページ内スタイル調整、フルスクリーンモード... 続きを読む

ページ内リンクの実装から考える、<a>要素のclickイベントとその振る舞い - シフトブレイン／スタンダードデザインユニット

2018/10/26 80 users スタンダードデザインユニット スムーズスクロール 実装 要素

この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-beh... 続きを読む

jQuery：ページトップへの動きに使えるエフェクト 5 | NxWorld

2015/07/07 106 users jQuery NxWorld スムーズスクロール エフェクト

閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 ※以下で紹介している方法はいずれもjQueryを使用していますので、予め読み込ま... 続きを読む

ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験 | WWW WATCH

2015/05/15 261 users WWW WATCH 一瞬 実験 瞬時 親切心

タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript... 続きを読む

» Markdown記法で記事を書いているブログのデザインにひと手間加える 12px.com

2014/01/21 32 users markdown記法 12px.com デザイン ひと手間

このブログはMarkdown on Save Improvedプラグインを使用して、Markdown記法で記事を投稿できるように設定しています。 Markdownって便利だけど要素に個別のクラスを割り当てたりできないので個別のデザインを割り当てたりページ内リンクとかがつけにくいですよね。 MarkdownにHTMLタグを記載すれば認識してくれるのでそのまま書けばいいじゃんて話だとは思うのですが、入... 続きを読む

うまい棒は１０回払いで購入可能できる？意外と知らない分割払いのまとめ | 最新クレジットカード比較＆入門2013

2013/05/09 28 users うまい棒 分割払い 最新クレジットカード比較＆入門 この際

みなさんご存知のうまい棒。この１０円で購入できる駄菓子を分割１０回払いで購入することは果たして可能なのでしょうか？ 今回はこの馬鹿みたいな内容に加え、意外と知らない分割払いに関する知識について真剣に調べてみました。 うまい棒＋分割払いに関する情報一覧（ページ内リンク）： 1. うまい棒は分割10回払いで購入可能？ 2. 分割払いをこの際、詳しく覚えよう 3. 手数料がかからない分割払いがある 4.... 続きを読む

jQueryでスムーススクロールするスクリプト : Toro_Unit

2012/02/07 18 users jQuery ret Toro_Unit function

jQueryで、ページ内リンクや、ページの先頭にリンクするときにアニメーションでスクロールさせたいときのスクリプトです。まぁ、皆さん普通に使っていると思うので今更感はばりばりですが・・・・ 余談ですが、 $('a').click(function(){ return false; }) みたいに、falseを返すと、URLの書き換えをしなくなります。なので、ページ内リンクなどをに使うときは、ret... 続きを読む

caramel*vanilla » ページ内リンクをわかりやすくするJavaScript

2006/10/08 2634 users 一瞬 先頭 caramel*vanilla オシャ リンク

リンク先を視覚的にわかりやすくする del.icio.us経由で面白そうなJavaScriptをみつけました。 ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。 そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。 [ このページの先頭へ、をちょこっとおしゃ... 続きを読む

Alertbox: ページ内リンクの使用は避けよう（2006年2月21日）

2006/03/14 106 users ハイパーテキスト AlertBox 要約 混乱 コラム

要約： ウェブ上のユーザたちは、ハイパーテキスト・リンクは別のページを読み込むべきだという、明確な思考モデルを持っている。ページ内リンクはこの思考モデルに反するため、混乱を招く。 最近、同じ日に同じことについて 2 つの質問をされた。普通、このようなことが起こるということは、この話題にはもっと幅広い関心があるということなので、これについてのコラムを書こうと決めた。 質問その 1： 今、リンクをクリ... 続きを読む