Skip to content

Instantly share code, notes, and snippets.

@hideki-a

hideki-a/japanese_syllabary.scss

Created January 22, 2015 12:17
Show Gist options
  • Save hideki-a/25cf4a8e0e5556f36041 to your computer and use it in GitHub Desktop.
Save hideki-a/25cf4a8e0e5556f36041 to your computer and use it in GitHub Desktop.
Download ZIP
50音を並べたボタン
Raw
japanese_syllabary.scss
.list-syllabary-ja{
$item-font-size: 16px;
$item-margin: 10px;
$item-border-width: 1px;
$item-padding: 5px;
display: -webkit-flex;
display: flex; // See Also: http://www.w3.org/TR/css3-flexbox/
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
writing-mode: tb-rl; // IE
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
margin: 0 0 calc(1em - #{$item-margin});
padding: 0;
width: ($item-font-size + $item-border-width * 2 + $item-padding * 2) * 10 + $item-margin * 9;
height: ($item-font-size + $item-border-width * 2 + $item-padding * 2) * 5 + $item-margin * 5;
list-style: none;
line-height: 1;
font-size: $item-font-size;
li{
margin: 0 0 $item-margin $item-margin;
padding: 0;
width: 28px;
&.next-kana-empty{
margin-bottom: $item-font-size + $item-border-width * 2 + $item-padding * 2 + $item-margin * 2;
}
&:last-child{
margin-left: 0;
}
}
a{
display: block;
padding: $item-padding;
border: $item-border-width solid #b5b5b5;
border-radius: 3px;
background: linear-gradient(to bottom, #fff 60%, #efefef 100%);
color: #333;
text-decoration: none;
&:hover,
&:focus{
border-color: #C72020;
background: linear-gradient(to bottom, lighten(#C72020, 10) 60%, #C72020 100%);
color: #fff;
}
}
}
Raw
syllabary.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>50音のボタン</title>
</head>
<body>
<ul class="list-syllabary-ja">
<li><a href="#">あ</a></li>
<li><a href="#">い</a></li>
<li><a href="#">う</a></li>
<li><a href="#">え</a></li>
<li><a href="#">お</a></li>
<li><a href="#">か</a></li>
<li><a href="#">き</a></li>
<li><a href="#">く</a></li>
<li><a href="#">け</a></li>
<li><a href="#">こ</a></li>
<li><a href="#">さ</a></li>
<li><a href="#">し</a></li>
<li><a href="#">す</a></li>
<li><a href="#">せ</a></li>
<li><a href="#">そ</a></li>
<li><a href="#">た</a></li>
<li><a href="#">ち</a></li>
<li><a href="#">つ</a></li>
<li><a href="#">て</a></li>
<li><a href="#">と</a></li>
<li><a href="#">な</a></li>
<li><a href="#">に</a></li>
<li><a href="#">ぬ</a></li>
<li><a href="#">ね</a></li>
<li><a href="#">の</a></li>
<li><a href="#">は</a></li>
<li><a href="#">ひ</a></li>
<li><a href="#">ふ</a></li>
<li><a href="#">へ</a></li>
<li><a href="#">ほ</a></li>
<li><a href="#">ま</a></li>
<li><a href="#">み</a></li>
<li><a href="#">む</a></li>
<li><a href="#">め</a></li>
<li><a href="#">も</a></li>
<li class="next-kana-empty"><a href="#">や</a></li>
<li class="next-kana-empty"><a href="#">ゆ</a></li>
<li><a href="#">よ</a></li>
<li><a href="#">ら</a></li>
<li><a href="#">り</a></li>
<li><a href="#">る</a></li>
<li><a href="#">れ</a></li>
<li><a href="#">ろ</a></li>
<li><a href="#">わ</a></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment