Edited at
NIFTYDay 16

リメイクUIコーディング

More than 1 year has passed since last update.

NIFTY Advent Calendar 2016 > 16日目の投稿


はじめに

どうも、デザイナーのクラク(@Qrac_jp)です。去年まではIllustratorを使ったUIデザインを中心に担当していましたが、2016年はじめからコーディングも行うようになりました。

Webデザイン、同じ見た目でもCSSの書き方を変えるだけで制作が有意義になったりしますよね。個人的には、UIをリメイクしている感覚です。ここで少し、自分が2016年に試した「リメイク的なUIコーディング」を振り返ってみたいと思います。


リメイク事例


もっと大きなボタン

codepen-larger-button.png

ボタンには「高さ・余白・文字」など複数の値が設定されているので、サイズ違いのボタン作成が大変。そこで、値をemに統一しフォントサイズ変更のみで作成できるようにしました。


pug

.btn.is-xxs Button

.btn.is-xs Button
.btn.is-sm Button
.btn.is-md Button
.btn.is-lg Button
.btn.is-xl Button
.btn.is-xxl Button


scss

.btn {

cursor: pointer;
position: relative;
display: inline-flex;
vertical-align: top;
height: 2.5em;
line-height: 2.5em;
padding: 0 1.5em;
&.is-xxl {
font-size: 200%;
}
&.is-xl {
font-size: 150%;
}
&.is-lg {
font-size: 125%;
}
&.is-md {
font-size: 100%;
}
&.is-sm {
font-size: 87.5%;
}
&.is-xs {
font-size: 75%;
}
&.is-xxs {
font-size: 62.5%;
}
}

DEMO - Larger Button


厚みのあるボタン

codepen-thick-button.png

ボタンをボタンらしく見せるために厚みを追加するかと思いますが、この厚みのあるボタンを画像ではなくCSSで再現することで汎用性が増しました。


pug

.btn.is-thick



scss

.btn.is-thick {

line-height: calc(2.5em - 2px);
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
&:hover {
top: 1px;
height: calc(2.5em - 1px);
border-bottom-width: 2px;
}
&:active {
top: 2px;
height: calc(2.5em - 2px);
border-bottom: 1px solid transparent;
}
}

DEMO - Thick Button


ホバー・アクティブ

codepen-hover-and-active-color-by-scss.png

色数の多いサイトで:hover:activeのデザインを揃えるのは骨が折れます。そこで、SCSSの変数で一元管理。色味の変化も計算で算出します。


pug

.btn.is-primary Button

.btn.is-info Button
.btn.is-success Button
.btn.is-warning Button
.btn.is-danger Button


scss

$primary: #00BCD4;

$info: #2196F3;
$success: #4CAF50;
$warning: #FFC107;
$danger: #EF5350;

.btn.is-primary {
background: $primary;
&:hover {
background: darken($primary, 5%);
}
&:active {
background: darken($primary, 10%);
}
}

.btn.is-info {
background: $info;
&:hover {
background: darken($info, 5%);
}
&:active {
background: darken($info, 10%);
}
}

.btn.is-success {
background: $success;
&:hover {
background: darken($success, 5%);
}
&:active {
background: darken($success, 10%);
}
}

.btn.is-warning {
background: $warning;
&:hover {
background: darken($warning, 5%);
}
&:active {
background: darken($warning, 10%);
}
}

.btn.is-danger {
background: $danger;
&:hover {
background: darken($danger, 5%);
}
&:active {
background: darken($danger, 10%);
}
}


DEMO - Hover And Active Color By SCSS


グラデ・シャドウ

codepen-gradation-and-shadow-by-scss.png

画像に含まれていたグラデーションやドロップシャドウをCSSに置き換え。ただ、コードが長く煩雑になりそうだったので、こちらもSCSSの変数で一元管理しています。


pug

.btn.is-chemical



scss

$gra-1:

linear-gradient(95deg, rgba(33, 196, 218, 0.9), rgba(252, 76, 121, 0.9));
$shadow-1:
0 1px 6px 0 rgba(0, 0, 0, 0.3);
$shadow-1-hover:
0 3px 16px 0 rgba(0, 0, 0, 0.3);
$shadow-1-active:
0 1px 8px 0 rgba(0, 0, 0, 0.3);

.btn {
&.is-chemical {
background: $gra-1;
background-color: #fff;
box-shadow: $shadow-1;
}
&.is-chemical:hover {
background-color: #666;
box-shadow: $shadow-1-hover;
}
&.is-chemical:active {
background-color: #000;
box-shadow: $shadow-1-active;
}
}


DEMO - Gradation And Shadow By SCSS


ナンバリング

codepen-numbering-by-css3.png

ランキングやスタンプラリーなどのUIでよく「ナンバーの入った画像」を作っていましたが、このナンバリングをCSSで自動生成できました。いくらでも増やせるので仕様変更に強い。


pug

ul.card-set.is-stamp

li.card
li.card
li.card
li.card
...


scss

.card-set.is-stamp {

counter-reset: stamp;
> .card:after {
counter-increment: stamp;
content: counter(stamp);
}
> .card:nth-child(5n) {
background: #84A5B6;
}
> .card:nth-child(10n) {
background: #21C4DA;
}
> .card:nth-child(100n) {
background: #FF2C55;
}
}

DEMO - Numbering By CSS3


マーキー・ブリンク ※おまけ

marquee-and-blink-by-css3.png

「とにかく目立つように作ってくれ!」との依頼があり、昔よく使われていたMarqueeとBlinkをCSSでリメイク。最近見ない(ブラウザが対応していない)ので、とにかく目立ちましたw


pug

p.text.is-marquee

span.text.is-blinking テキストテキスト...


scss

*.is-marquee {

padding-left: 100%;
display: inline-block;
white-space: nowrap;
animation-name: marquee;
animation-timing-function: linear;
animation-duration: 40s;
animation-iteration-count: infinite;
}

*.is-blinking {
animation-name: blink;
animation-timing-function: linear;
animation-duration: 1s;
animation-iteration-count: infinite;
}

@keyframes marquee {
from { transform:translate(0); }
to { transform:translate(-100%); }
}

@keyframes blink {
0% { opacity: 0; }
19.9% { opacity: 0; }
20% { opacity: 1; }
100% { opacity: 1; }
}


DEMO - Marquee And Blink By CSS3


最後に

リメイク的なUIコーディングという内容で振り返ってみましたが、やはりリメイクした部分は多少長持ちするようになったんじゃないかなと思います。この先もっと良い書き方が編み出されるでしょうが、壊れないうちに新しい技術で手直しをする習慣は忘れずに続けていきたいものです。