Skip to content

Instantly share code, notes, and snippets.

View 01copipe-storage.css
#message{
color: #e00000;
}
/* */
.app__menu{
display: flex;
column-gap: 8px;
}
.app__menu__item{
flex-grow: 1;
View example-include-html.js
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をコピーするか選択。
View 01monologue-maker.css
.img-sample{
width: 150px;
}
/* */
.area-work{
text-align: center;
}
#area-img{
display: inline-block;
position: relative;
View 01howto-review-star.html
<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>
View demo-review-star.html
<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 
View review-star.js
/*!
* 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;
View 01zaiseki-year.css
.block{
padding: 4px;
margin: 12px 0;
border: 1px outset #aaa;
}
.radio-school{
display: none;
}
.label-school{
display: inline-flex;
View 01make-circle-icon.css
.settings{
margin: 20px 0;
text-align: center;
}
.settings__row{
padding: 16px 0;
border-bottom: 1px dashed #777;
}
View 01rgb-splitter.css
.control{
text-align: center;
}
.control__row{
margin: 40px auto;
overflow-x: auto;
}
.input-color{
width: 100px;
height: 30px;
View 01web-sandglass.css
.sandglass{
box-sizing: border-box;
width: 90%;
max-width: 400px;
margin: 100px auto;
position: relative;
user-select: none;
}
.sandglass::after{