Skip to content

Instantly share code, notes, and snippets.

Avatar

Tatsuya Fujii CHUKK

View GitHub Profile
@CHUKK
CHUKK / Yahoo grid block
Last active May 4, 2018
Flex Banner Block
View Yahoo grid block
<div style="margin: auto; width: 948px;">
<h2 style="background-color: hotpink; padding: 10px; text-align: center; margin-top: 0; margin-bottom: 0; color: white;">見出し</h2>
<div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/200/animals" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/arch" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/nature" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
View Footer Block Design
@CHUKK
CHUKK / Yahoo Nav Bar
Last active May 6, 2018
Yahoo Nav Bar
View Yahoo Nav Bar
<nav style="width: 950px; margin: auto; margin: 50px auto;">
<table style="width: 100%; vertical-align: middle;">
<tr style="background: linear-gradient(8deg, #ff67bf, rgb(230, 162, 255));">
<td style="text-align: center; vertical-align: middle; box-shadow: 0 3px 1px #dddddd; width: 150px;">
<a href="カテゴリページリンク" style="display: block; font-weight: bold; color: white; text-decoration: none; padding: 1rem 0;">
カテゴリ-1</a>
</td>
<td style="text-align: center; vertical-align: middle; box-shadow: 0 3px 1px #dddddd; width: 150px;">
<a href="カテゴリページリンク" style=" display: block; font-weight: bold; color: white; text-decoration: none; padding: 1rem 0;">
カテゴリ-2</a>
@CHUKK
CHUKK / calculator
Created Jun 3, 2018
calculator app
View calculator
<div class="wrap">
<h1>calculator</h1>
<div class="calc">
<p>税抜: <input v-model="price" type="number"></p>
<p>税込: <input v-model="withTax" type="number"></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
View BMI app
<h1>BMI</h1>
<div id="app" class="bmi">
<p><input type="number" v-model="height" placeholder="cm"></p>
<p><input type="number" v-model="weight" placeholder="kg"></p>
<div class="best-bmi">
<p>Your Best BMI</p>
<span v-if="!bmiCalc">0</span>
<span v-else>{{ bmiCalc }}</span>
</div>
View table
<table width="100%" align="center" cellpadding="8" cellspacing="0">
<tr>
<th align="center">メーカー名</th>
<td align="center">メーカー</td>
</tr>
<tr>
<th align="center">型番</th>
<td align="center">xxxxxx</td>
</tr>
</table>
View table-2
<table width="100%" align="center" bordercolor="#93d4ff" cellpadding="8" cellspacing="0">
<tr>
<th width="100%" bgcolor="#93d4ff" align="center">メーカー名</th>
</tr>
<tr>
<td width="100%" align="center">WAVLINK</td>
</tr>
<tr>
<th width="100%" bgcolor="#93d4ff" align="center">型番</th>
View table-3
<table width="100%" align="center" bordercolor="#93d4ff" cellpadding="8" cellspacing="0">
<tr>
<th width="100%" bgcolor="#93d4ff" align="center">オプション</th>
</tr>
<tr>
<td width="100%" align="center">
<p>カラー</p>
<hr color="#93d4ff">
<p>サイズ</p>
<hr color="#93d4ff">
@CHUKK
CHUKK / Copy by clicking
Last active Feb 28, 2019
Copy by clicking
View Copy by clicking
<style>
.couponWrap {
border: dashed 3px #292929;
font-size: 1.5rem;
text-align: justify;
padding: 0.5rem 1.2rem 0.5rem;
letter-spacing: 0.2rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
align-items: center;