Skip to content

Instantly share code, notes, and snippets.

@motsu0
motsu0 / fraction.css
Last active Jan 15, 2019
write fraction with only CSS
View fraction.css
.fraction{
display: inline-block;
vertical-align: middle;
text-align: center;
}
.fraction_n,.fraction_d{
display: block;
}
.fraction_n{
border-bottom: 1px solid #333;
@motsu0
motsu0 / radio_button_01.css
Last active Jan 16, 2019
css radio button design
View radio_button_01.css
.radio_box{
border-collapse: collapse;
font-size: 0;
letter-spacing: 0;
}
.radio_sq{
display: none;
}
label{
cursor: pointer;
View 01input_range_css
#demobox{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 200px;
border: 1px solid #ddd;
}
#demochild{
View 01.simple-img-modal.html
<!-- headタグ内 / in <head> -->
<link rel="path/to/simple-img-modal.css">
<!-- bodyタグの終了直前 / before </body> -->
<script src="path/to/simple-img-modal.js"></script>
<script>
const modal = new simpleImgModal();
</script>
<!-- 画像を置きたい場所 / in your html -->
@motsu0
motsu0 / 01js-search-in-page.css
Last active Aug 19, 2022
keyword search in page
View 01js-search-in-page.css
.highlight{
background-color:yellow;
}
.hide{
display: none;
}
@motsu0
motsu0 / random-true-or-false.js
Created Jan 29, 2020
generate ramdom bool (true or false)
View random-true-or-false.js
const bool = Math.random()<0.5; //bool=true or bool=false
@motsu0
motsu0 / random-betweet-m-and-n.js
Created Jan 29, 2020
generate ramdom integer between M and N
View random-betweet-m-and-n.js
function randomMN(m,n){
const d = Math.max(m,n)-Math.min(m,n);
return Math.floor(Math.random()*(d+1)+Math.min(m,n));
}
// randomMN(3,9) => 3~9(int)
// randomMN(-2,4) => -2~4(int)
View date-obj.js
const date = new Date(); //現在の日時よりDateオブジェクトを生成
const yyyy = date.getFullYear(); //年
const MM = date.getMonth()+1; //月
const dd = date.getDate(); //日
const hh = date.getHours(); //時
const mm = date.getMinutes(); //分
const dow_list = ['日','月','火','水','木','金','土'];
const dow = dow_list[date.getDay()]; //曜日
View 01.2columns-layout-01.html
<!-- 左カラム(固定幅)、右カラム(可変幅) -->
<div class="parent">
parent
<table class="sample1">
<tr>
<td class="lc">吾輩は猫である</td>
<td class="rc">吾輩は猫である。名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</td>
</tr>
<tr>
<td class="lc">坊っちゃん</td>
View 01.2columns-layout-02.html
<!-- 左カラム(固定幅)、右カラム(可変幅) -->
<div class="parent">
parent
<div class="sample2">
<div class="lc">吾輩は猫である</div>
<div class="rc">吾輩は猫である。名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
<div class="lc">坊っちゃん</div>
<div class="rc">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</div>
<div class="clear"></div>
</div>