教材開発してみた

教材開発のあれこれ

縦スクロール(HTML5 ウィジェット)

HTML5ウィジェットの中で、通常のWebページのように「縦スクロール」をさせたいときには、cssで「overflow-y: scroll」を設定します。

例:

<head>

<style>

  .yscroll{

    height: 600px;

    overflow-y: scroll;

  }

</style>

</head>

<body>

<div class="yscroll">

  <!-- ・・・ここが縦スクロールされます・・・ -->

 </div>

</body>

 

MaciPadiBooksでは表示が異なります。MaciBooksではスクロールバーが右側に表示されます。iPadiBooksではスクロールバーが表示されません。よって、このウィジェットが、通常のWebページと同様に「縦にスクロールできる」ことを利用者に伝える必要があります。