パーツ > スーパースクロール

スーパースクロール（インタラクション機能）

長〜いページ内で、ページ内リンクのスクロールにアニメーションを適用すると、スクロールが目まぐるしくなりすぎて不快ではありませんか？basics4独自のスーパースクロールは、スクロールアニメーションを適度に端折って、インタラクションを快適する機能です。

ページ内リンクをクリックして体験してみてください。

figure.width_quarter.float_left > img.fit_width

p むかしから、“太平楽”という言葉がある。クリスマスからつづいてまだ不足顔の醒（さ）めない“正月の亭主族”のごとき者をいったのだろう。語源は「太平記」以前であるにちがいない。それが古典の太平記に用いられてから謡曲、民劇、小説などでさらに一般化したのである。室町期の記録もの、お伽草子（とぎぞうし）。また江戸時代の小説類などおよそ“太平記”という書題を取ったものは百種以上にものぼるであろうか。たとえば「お伽太平記」「ごばん太平記」「女太平記」「東国太平記」「化物太平記」近年でも「新聞太平記」「何々太平記」など、とてもかぞえきれない。私のこんど書く「私本太平記」もその一つに入るわけである。けれど無数の書名は、じっさいには、ほんとの太平記の内容とは、何のかかわりもなく、ただその“太平”ということばの持つ広さや漠（ばく）とした思わせぶりに仮托（かたく）したものが大部分であるといってよい。

節の見出しh3

p.text_justify むかしから、“太平楽”という言葉がある。クリスマスからつづいてまだ不足顔の醒（さ）めない“正月の亭主族”のごとき者をいったのだろう。語源は「太平記」以前であるにちがいない。それが古典の太平記に用いられてから謡曲、民劇、小説などでさらに一般化したのである。室町期の記録もの、お伽草子（とぎぞうし）。また江戸時代の小説類などおよそ“太平記”という書題を取ったものは百種以上にものぼるであろうか。たとえば「お伽太平記」「ごばん太平記」「女太平記」「東国太平記」「化物太平記」近年でも「新聞太平記」「何々太平記」など、とてもかぞえきれない。私のこんど書く「私本太平記」もその一つに入るわけである。けれど無数の書名は、じっさいには、ほんとの太平記の内容とは、何のかかわりもなく、ただその“太平”ということばの持つ広さや漠（ばく）とした思わせぶりに仮托（かたく）したものが大部分であるといってよい。

さらに小さい見出しh4

p.text_small.text_justify むかしから、“太平楽”という言葉がある。クリスマスからつづいてまだ不足顔の醒（さ）めない“正月の亭主族”のごとき者をいったのだろう。語源は「太平記」以前であるにちがいない。それが古典の太平記に用いられてから謡曲、民劇、小説などでさらに一般化したのである。

figure.width_quarter.float_right > img.fit_width

div.line_higher > p むかしから、“太平楽”という言葉がある。クリスマスからつづいてまだ不足顔の醒（さ）めない“正月の亭主族”のごとき者をいったのだろう。語源は「太平記」以前であるにちがいない。それが古典の太平記に用いられてから謡曲、民劇、小説などでさらに一般化したのである。室町期の記録もの、お伽草子（とぎぞうし）。また江戸時代の小説類などおよそ“太平記”という書題を取ったものは百種以上にものぼるであろうか。たとえば「お伽太平記」「ごばん太平記」「女太平記」「東国太平記」「化物太平記」近年でも「新聞太平記」「何々太平記」など、とてもかぞえきれない。私のこんど書く「私本太平記」もその一つに入るわけである。けれど無数の書名は、じっさいには、ほんとの太平記の内容とは、何のかかわりもなく、ただその“太平”ということばの持つ広さや漠（ばく）とした思わせぶりに仮托（かたく）したものが大部分であるといってよい。

div.line_higher > p.text_brief むかしから、“太平楽”という言葉がある。クリスマスからつづいてまだ不足顔の醒（さ）めない“正月の亭主族”のごとき者をいったのだろう。語源は「太平記」以前であるにちがいない。それが古典の太平記に用いられてから謡曲、民劇、小説などでさらに一般化したのである。室町期の記録もの、お伽草子（とぎぞうし）。また江戸時代の小説類などおよそ“太平記”という書題を取ったものは百種以上にものぼるであろうか。たとえば「お伽太平記」「ごばん太平記」「女太平記」「東国太平記」「化物太平記」近年でも「新聞太平記」「何々太平記」など、とてもかぞえきれない。私のこんど書く「私本太平記」もその一つに入るわけである。けれど無数の書名は、じっさいには、ほんとの太平記の内容とは、何のかかわりもなく、ただその“太平”ということばの持つ広さや漠（ばく）とした思わせぶりに仮托（かたく）したものが大部分であるといってよい。

リスト

dl

用語１
用語１の説明テキストA。用語１の説明テキストA。用語１の説明テキストA。用語１の説明テキストA。用語１の説明テキストA。用語１の説明テキストA。用語１の説明テキストA。用語１の説明テキストA。用語１の説明テキストA。
用語１の説明テキストB。用語１の説明テキストB。用語１の説明テキストB。用語１の説明テキストB。用語１の説明テキストB。用語１の説明テキストB。用語１の説明テキストB。用語１の説明テキストB。用語１の説明テキストB。
用語２
用語２の説明テキストA。用語２の説明テキストA。用語２の説明テキストA。用語２の説明テキストA。用語２の説明テキストA。用語２の説明テキストA。用語２の説明テキストA。用語２の説明テキストA。用語２の説明テキストA。
用語２の説明テキストB。用語２の説明テキストB。用語２の説明テキストB。用語２の説明テキストB。用語２の説明テキストB。用語２の説明テキストB。用語２の説明テキストB。用語２の説明テキストB。用語２の説明テキストB。

ul

  • リスト項目テキスト
  • リスト項目テキスト
  • リスト項目テキスト
  • リスト項目テキスト
  • リスト項目テキスト
    • リスト項目テキスト

    • p(段落)リスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキスト

    • リスト項目テキスト
  • リスト項目テキスト
  • リスト項目テキスト

ol

.style_none | .disc | .circle | .square | .lower_roman | .upper_roman | .lower_greek | .upper_greek | .lower_alpha | .upper_alpha | .decimal | .decimal_leading_zero が使えます

  1. リスト項目テキスト
  2. リスト項目テキスト
  3. リスト項目テキスト
  4. リスト項目テキスト
  5. リスト項目テキスト
    1. リスト項目テキスト

    2. p(段落)リスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキストリスト項目テキスト

    3. リスト項目テキスト
  6. リスト項目テキスト
  7. リスト項目テキスト

表組

table.std

固定幅に設定した表組みを <div class="_x_scroll_area"></div> に内包することで、スマートフォンでは表を横にスクロールできます
  列の見出し 列の見出し 列の見出し
行の見出し データセル データセル データセル
行の見出し データセル データセル データセル
行の見出し データセル データセル データセル
行の見出し データセル データセル データセル

table.stripe

固定幅に設定した表組みを <div class="_x_scroll_area"></div> に内包することで、スマートフォンでは表を横にスクロールできます
  列の見出し 列の見出し 列の見出し
行の見出し データセル データセル データセル
行の見出し データセル データセル データセル
行の見出し データセル データセル データセル
行の見出し データセル データセル データセル

table.pair

会社名 Basic4・コーポレーション
所在地 〒152-0003
東京都目黒区碑文谷5丁目
受付窓口 TEL.090-1111-2222 (平日9時—18時)
主な取引先
  • リスト項目テキスト
  • リスト項目テキスト
  • リスト項目テキスト
  • リスト項目テキスト
  • リスト項目テキスト
見出しと内容が一対となる場合での利用を想定した表組です。
スマートフォンでは項目が縦並びになります。

スーパースクロールについて

basics4 の独自機能「superScroll」
長〜いページ内の、スムーズスクロールのアニメーションを、適度に端折って、インタラクションを快適する機能。