섹션 개요

  • 축소 확대

    概要

    모두 접기 모두 펼치기

    折り畳み機能（アコーディオン）やタブ機能を使ってスクロールを減らし、１画面に様々な要素を表示する方法を紹介します。



  • 축소 확대

    折り畳み表示１（リソース：ユニラベルの使用））

    ユニラベルのアコーディオンは、提供されるフォーマットにタイトルとコンテンツを入力することで折り畳み表示を簡単に作成できます。


    • ユニラベル（アコーディオン）のサンプルコースはこちら

      ユニラベルのマニュアルはこちら

  • 축소 확대

    折り畳み表示２（HTML：summaryタグの使用）

    HTMLのサンプルソースを編集して折り畳み表示を作成する方法です。
    ユーザーがコースを開いたときに、表示状態を折り畳みまたは展開を制御できます。


    • 作成方法

      １．対象のコースで「活動またはリソースを追加する」をクリック

      ２．「テキストおよびメディア領域」をクリック

      ３．エディタをHTML表示に切り替える（エディタの詳細はこちら）

      　

      ４．サンプルソースをコピーして編集

      ５．エディタの表示を元に戻して確認・保存

    • サンプルソース１を表示

      <details>

          <summary>LASBOSについて</summary>

          　<p>LASBOSは海と生き物を学ぶオンライン教育システムです。サイト形式のLASBOS Moodleと動画形式のLASBOS YouTubeがあります。</p>

      </details>

    • サンプルソース１の表示結果


      LASBOSについて 　

      LASBOSは海と生き物を学ぶオンライン教育システムです。サイト形式のLASBOS Moodleと動画形式のLASBOS YouTubeがあります。

    • サンプルソース２を表示

      <details>

              <summary>LASBOSについて</summary>

              　<p>LASBOSは海と生き物を学ぶオンライン教育システムです。</p>

              　<ul>

                  　<li>サイト形式のLASBOS Moodle</li>

                  　<li>動画形式のLASBOS YouTube</li>

              </ul>

          </details>

    • サンプルソース２の表示結果


      LASBOSについて 　

      LASBOSは海と生き物を学ぶオンライン教育システムです。

      　
        　
      • サイト形式のLASBOS Moodle
        • 　
      • 動画形式のLASBOS YouTube

    • --- Tips ---

      タイトルをクリックすると展開され折り畳んだ部分が表示されます。
      作成時に折り畳んだ状態または展開した状態で「保存してコースに戻る」をクリックするとその状態が維持されユーザーに表示されます。


  • 축소 확대

    タブ表示（テンプレート）

    サンプルソースを変更してタブ表示を作成できます。

    • 作成方法
      １．対象のコースで「活動またはリソースを追加する」をクリック
      ２．「テキストおよびメディア領域」をクリック
      ３．エディタをHTML表示に切り替える（エディタの詳細はこちら）

      ４．サンプルソースをコピーして編集
      ５．エディタの表示を元に戻して確認・保存