섹션 개요

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



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


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

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

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


    • 作成方法

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

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

      3.エディタをHTML表示に切り替える(エディタの詳細はこちら

       

      4.サンプルソースをコピーして編集

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

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

      <details>

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

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

      </details>

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


      LASBOSについて  

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

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

      <details>

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

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

               <ul>

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

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

              </ul>

          </details>

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


      LASBOSについて  

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

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

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


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

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

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