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

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

motsu0

<span class="review-star" data-size="20" data-val="3" data-max="5"></span>
<!-- 
  data-size(int)[px] 星のサイズ(>=4) 初期値16
  data-val(number) 評価数(星)の値(>=0) 初期値0
  data-max(int) 評価数(星)の最大値(>=1) 初期値5
-->

<script src="pathto/review-star.js"></script>

motsu0

<div class="block--demo">
  3/5　
  <span class="review-star" data-size="20" data-val="3" data-max="5"></span>
</div>
<div class="block--demo">
  4.2/5　
  <span class="review-star" data-size="20" data-val="4.2" data-max="5"></span>
</div>
<div class="block--demo">
  7.7/10　

motsu0

/*!
 * review-star.js v1.0
 *
 * Copyright (c) 2023 motsu
 *
 * Released under the MIT license.
 * see https://opensource.org/licenses/MIT
 */
class reviewStar{
  #els_review_star;

motsu0

.block{
  padding: 4px;
  margin: 12px 0;
  border: 1px outset #aaa;
}
.radio-school{
  display: none;
}
.label-school{
  display: inline-flex;

motsu0

.settings{
  margin: 20px 0;

  text-align: center;
}
.settings__row{
  padding: 16px 0;

  border-bottom: 1px dashed #777;
}

motsu0

.control{
  text-align: center;
}
.control__row{
  margin: 40px auto;
  overflow-x: auto;
}
.input-color{
  width: 100px;
  height: 30px;

motsu0

.sandglass{
  box-sizing: border-box;
  width: 90%;
  max-width: 400px;
  margin: 100px auto;
  position: relative;

  user-select: none;
}
.sandglass::after{