motsu0

<input type="file" id="input-file-01">
<div id="output-01" class="output"></div>

motsu0

.block{
  margin: 16px 0;
}
#input-url{
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 8px;
}
#bt-submit{

motsu0

.img-sample{
  width: 100%;
}
/*  */
.area-file{
  margin: 16px 0;
  text-align: center;
}
#input-file{
  margin-top: 8px;

motsu0

.img-sample{
  width: 150px;
}
/*  */
.area-work{
  text-align: center;
}
#area-img{
  display: inline-block;
  position: relative;

motsu0

#screen{
  height: 500px;
  border: 1px solid #333;
  user-select: none;
  background-color: #fff;
}
#screen-inner{
  height: 100%;
  display: flex;
  justify-content: center;

motsu0

.rule{
  list-style-type: disc;
  margin-left: 32px;
}
/*  */
#play-area{
  box-sizing: border-box;
  height: 90vh;
  position: relative;
  border: 1px solid #ddd;

motsu0

#message{
  color: #e00000;
}
/*  */
.app__menu{
  display: flex;
  column-gap: 8px;
}
.app__menu__item{
  flex-grow: 1;

motsu0

includeHtml({
  name_target: '#sample-parent',
    //(必須) インクルード先の要素指定。id,class,tanNameで指定。
  src_part: 'pathto/sample-part.html',
    //(必須) インクルード元のファイルのURL。
  src_id: 'sample-div',
    //(任意) インクルード元のhtml内で一部分だけ指定したい場合はここでid指定。
  type_copy: 'outer',
    //(任意) outer or inner
    //src_idを指定した場合に、インクルード元の要素のouterHTMLをコピーするかinnerHTMLをコピーするか選択。

motsu0

<!-- 元のhtml -->
<div>
  <div id="sample-parent">#sample-parent</div>
  <div class="sample-parent">.sample-parent</div>
  <div class="sample-parent">.sample-parent</div>
  <div class="sample-parent">.sample-parent</div>
</div>
<!-- include処理 -->
<script src="pathto/include-html.js"></script>
<script>

motsu0

<!-- 元のhtml -->
<div>
  <div id="sample-parent">#sample-parent</div>
  <div class="sample-parent">.sample-parent</div>
  <div class="sample-parent">.sample-parent</div>
  <div class="sample-parent">.sample-parent</div>
</div>
<!-- include処理 -->
<script src="pathto/include-html.js"></script>
<script>