<div id="pageTop">
    <header class="header">
        <h1>スムーズスクロール(Back to top含む)</h1>
        <nav class="global-nav"></nav>
    </header>
    <div class="container">
        <main role="main">
            <div class="section-wrap">
                <section id="sectionA" class="section">
                    <h2 class="section__heading">
                        スムーズスクロール(Smooth scroll)の挙動について - セクションA見出し
                    </h2>
                    <p>
                        スムーズスクロールという要素間アニメーション移動は、Webページにおけるコンテンツ移動の本来的な挙動からは外れたものということは知っておきたいところです。a要素のページ内リンクを疑似的に使用していますが、ほにゃらかにゃら。
                    </p>
                    <p>
                        そのためJavaScriptを用い、インタラクティブ要素として定義されたa要素の持つリンク遷移機能などのデフォルトアクションを<code>preventDefault()</code><code>return false</code
            >で停止したのちに、必要な処理設定をする手法が旧来から取られてきました。
          </p>
          <p>
            このとき忘れられがちなのが、本来の挙動を強制的にキャンセルした結果、機能に抜けが発生したままになってしまうことです。フラグメント識別子(#~)をうんたらかんたらして、本来備えているキーボード操作等におけるフォーカス管理機能までが置き去りになっているケースがとても多いように見受けられます。
          </p>
          <p>
            これはJavaScriptを用いて実装するインタラクティブなUIで、よく見られるケースです。スムーズスクロールであればこの点、<code>HTMLElement.focus()</code>メソッドを使用したフォーカスコントロールは比較的容易です。
                    </p>
                    <p>
                        しかし見たことがないほど斬新で、離れ技のような動きや機能を実装すればするほど、本来持つべき機能を一度止めねばならず、また再実装で回復させることが困難になる傾向があります。
                    </p>
                    <p>
                        では一体これの何が問題なのでしょうか。HTMLを大もととするWebアプリケーションの機能はそもそもアクセシブル & ユーザブルに設計・策定されています。JSでのカスタマイズはその機能を殺してしまっているのです。
                    </p>
                    <p>
                        改めてWeb = ソフトウェアデザインにおける各UIが何のために生み出され、どういった役割を担うべきなのか、立ち返って見つめ直す必要があると強く感じます。スムーズスクロールはそのもっとも単純な例として良いサンプルになるでしょう。
                    </p>
                    <a href="#">ダミーリンクです</a>
                </section>
                <section id="sectionB" class="section">
                    <h2 class="section__heading">
                        セクションB見出し
                    </h2>
                    <p>
                        セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。
                    </p>
                    <p>
                        セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。
                    </p>
                    <a href="#">ダミーリンクです</a>
                </section>

                <section id="sectionC" class="section">
                    <h2 class="section__heading">
                        セクションC見出し
                    </h2>
                    <p>
                        セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。
                    </p>
                    <p>
                        セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。
                    </p>
                    <a href="#">ダミーリンクです</a>
                </section>
            </div>
        </main>
        <aside class="aside">
            <div class="side-box">ダミーBOX</div>
            <nav class="toc">
                <a href="#sectionA" class="toc__link">セクションA</a>
                <a href="#sectionB" class="toc__link">セクションB</a>
                <a href="#sectionC" class="toc__link">セクションC</a>
            </nav>
        </aside>
    </div>
    <footer class="footer">
        <a href="#pageTop" class="back-to-top" title="ページの先頭(トップ)へ戻る" aria-label="ページの先頭(トップ)へ戻る"></a
    >
  </footer>
</div>
<div id="pageTop">
  <header class="header">
    <h1>スムーズスクロール(Back to top含む)</h1>
    <nav class="global-nav"></nav>
  </header>
  <div class="container">
    <main role="main">
      <div class="section-wrap">
        <section id="sectionA" class="section">
          <h2 class="section__heading">
            スムーズスクロール(Smooth scroll)の挙動について -
            セクションA見出し
          </h2>
          <p>
            スムーズスクロールという要素間アニメーション移動は、Webページにおけるコンテンツ移動の本来的な挙動からは外れたものということは知っておきたいところです。a要素のページ内リンクを疑似的に使用していますが、ほにゃらかにゃら。
          </p>
          <p>
            そのためJavaScriptを用い、インタラクティブ要素として定義されたa要素の持つリンク遷移機能などのデフォルトアクションを<code>preventDefault()</code><code
              >return false</code
            >で停止したのちに、必要な処理設定をする手法が旧来から取られてきました。
          </p>
          <p>
            このとき忘れられがちなのが、本来の挙動を強制的にキャンセルした結果、機能に抜けが発生したままになってしまうことです。フラグメント識別子(#~)をうんたらかんたらして、本来備えているキーボード操作等におけるフォーカス管理機能までが置き去りになっているケースがとても多いように見受けられます。
          </p>
          <p>
            これはJavaScriptを用いて実装するインタラクティブなUIで、よく見られるケースです。スムーズスクロールであればこの点、<code>HTMLElement.focus()</code>メソッドを使用したフォーカスコントロールは比較的容易です。
          </p>
          <p>
            しかし見たことがないほど斬新で、離れ技のような動きや機能を実装すればするほど、本来持つべき機能を一度止めねばならず、また再実装で回復させることが困難になる傾向があります。
          </p>
          <p>
            では一体これの何が問題なのでしょうか。HTMLを大もととするWebアプリケーションの機能はそもそもアクセシブル
            &
            ユーザブルに設計・策定されています。JSでのカスタマイズはその機能を殺してしまっているのです。
          </p>
          <p>
            改めてWeb =
            ソフトウェアデザインにおける各UIが何のために生み出され、どういった役割を担うべきなのか、立ち返って見つめ直す必要があると強く感じます。スムーズスクロールはそのもっとも単純な例として良いサンプルになるでしょう。
          </p>
          <a href="#">ダミーリンクです</a>
        </section>
        <section id="sectionB" class="section">
          <h2 class="section__heading">
            セクションB見出し
          </h2>
          <p>
            セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。
          </p>
          <p>
            セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。セクションBコンテンツ。
          </p>
          <a href="#">ダミーリンクです</a>
        </section>

        <section id="sectionC" class="section">
          <h2 class="section__heading">
            セクションC見出し
          </h2>
          <p>
            セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。
          </p>
          <p>
            セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。セクションCコンテンツ。
          </p>
          <a href="#">ダミーリンクです</a>
        </section>
      </div>
    </main>
    <aside class="aside">
      <div class="side-box">ダミーBOX</div>
      <nav class="toc">
        <a href="#sectionA" class="toc__link">セクションA</a>
        <a href="#sectionB" class="toc__link">セクションB</a>
        <a href="#sectionC" class="toc__link">セクションC</a>
      </nav>
    </aside>
  </div>
  <footer class="footer">
    <a
      href="#pageTop"
      class="back-to-top"
      title="ページの先頭(トップ)へ戻る"
      aria-label="ページの先頭(トップ)へ戻る"
      ></a
    >
  </footer>
</div>
/* No context defined for this component. */

There are no notes for this item.