Meguro.css #2 @ oRoでLT登壇させていただきました。

1. CSS
m eguro.css#2
2018.07.27Fri.
@um irem ix

7. テキストの
右端がバラバラ
テキストの
右端が揃っている

8. CSSで均等配置を指定
文字量が多くフォントサイズが小さいテキストに
均等配置(均等割付)を使うのがおすすめ。

9. iPhone5のとき
比率 2:3 比率 2:3
30px 30px
20px20px
同じ比率

10. ジャンプ率が
保たれない
ジャンプ率が
保たれる
30px
38.9px
25.9px
25.9px
iPhone8Plusのとき
比率 2.59:3 比率 2:3

11. ・ジャンプ率が高い→活気がある、若々しい
・ジャンプ率が低い→知的、落ち着いている
など印象が異なってくるほか、
メリハリや訴求力にも影響を与えてしまいます。
※ジャンプ率とは本文サイズに対する見出しサイズの比率のこと。

12. CSSで文字のジャンプ率を保つ
タイポグラフィーや、画像のテキストが多いページ、
メインビジュアル付近などで使うのがおすすめ。
font-size:calc(フォントサイズ /基準の画面幅 *100vw);
/*
*画面幅640pxのときにフォントサイズが30pxであれば、
*font-size:calc(30/640*100vw);
*
*※Android4.3以下の標準ブラウザでは、
* PC* PC版のpx指定継承もしくは別途px指定が必要。
*/

13. 不自然に折り返して
しまっている
改行させない
ようにする
自然な改行
を作る

14. CSSで文字の折返しを調整
.wrap{display:block;}
.inner{display:inline-block;}
white-space:nowrap;
改行させないときはwhite-space:nowrap;を使用

16. 突然ですが質問です…
「iPhoneは非常になめらかに動くが、
なぜあそこまでやる必要があるのか？」
と聞かれたらどう答えますか？

17. ・スタイリング（装飾）である。
・カッコイイ洒落た演出のため。
・流行性のもの。
このように捉えているとしたら、
iPhoneの良さは理解できていません。

18. 「指とグラフィックとの動きの連動性で
情報に直接触れているかの感触を与え、
存在を意識せずiPhoneを利用できるから」
のようにスタイリングではなく
インターフェイスデザインと考えると◎

19. 存在を意識させない自然なアニメーションで、
ユーザーにもっと心地よい体験を届けよう！！

20. CSSTransitions
.btn{
background:#ccc;
transition:.1s;
}
.btn:hover{
background:#ddd;
transition:.1s;
}
このようなCSSの場合、個人的に.5s以上だと違和感を感じます。
※easingやアニメーション箇所、世界観によって違和感を感じるポイントは様々。

21. CSSAnimations
@keyframesload{
0% {
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
tranform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
tranform:rotate(360deg);
}
}
.loading{
animation:load1slinearinfinite;/*IE9はanimation非対応 */
}

22. これより複雑なアニメーションをしたいときは
JSの方が向いている場合があります。
CSSとJS併用するなどの工夫も必要です。

23. 今回はCSSの回なので詳しく紹介しませんが、
VueとCSSアニメーションの相性が良いので、
凝ったインターフェイスデザインを作りたい場合は
Vue.jsやNuxtはとてもおすすめです

24. インターフェイスデザインを
学びたい人におすすめの本
融けるデザイン
ハード×ソフト×ネット時代の新たな設計論
渡邉恵太氏（著）

25. サンプルのCSSは全部ブログに
掲載していますので御覧ください。
http://umiremix.com/blog/megurocss/
ご清聴ありがとうございました!!