Mirador 3をページ内の特定の領域に埋め込む方法

先日、以下の記事で、Nuxt.jsを用いて、Miradorをページ内の特定の領域に埋め込む方法を紹介しました。

 

nakamura196.hatenablog.com

 

今回は、Vue.jsなどのフレームワークを使わずに、Miradorを埋め込む方法について紹介します。

 

具体的には、以下のページのソースコードをご確認ください。

https://nakamura196.github.io/nuxt-mirador/embedded2

 

上記は単純なHTMLファイルです。

Miradorを画面に埋め込む際、Miradorを表示する要素のID(例:mirador)を指定します。この時、以下のようなCSSを与えることで画面の一部に埋め込むことができます。

 

#mirador {
  height: 600px;
  position: relative;
  width: 100%;
}

 

ポイントは、「position: relative;」です。これを与えないと、heightなどを指定しても全画面で表示されてしまいます。

 

Mirador 3の利用において、本記事がお役に立つことがあれば幸いです。