Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSSでクオリティをよりよくする

1,206 views

Published on

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

Published in: Technology
  • Be the first to comment

CSSでクオリティをよりよくする

  1. 1. CSS m eguro.css#2 2018.07.27Fri. @um irem ix
  2. 2. テキストの 右端がバラバラ テキストの 右端が揃っている
  3. 3. CSSで均等配置を指定 文字量が多くフォントサイズが小さいテキストに 均等配置(均等割付)を使うのがおすすめ。
  4. 4. iPhone5のとき 比率 2:3 比率 2:3 30px 30px 20px20px 同じ比率
  5. 5. ジャンプ率が 保たれない ジャンプ率が 保たれる 30px 38.9px 25.9px 25.9px iPhone8Plusのとき 比率 2.59:3 比率 2:3
  6. 6. ・ジャンプ率が高い→活気がある、若々しい ・ジャンプ率が低い→知的、落ち着いている など印象が異なってくるほか、 メリハリや訴求力にも影響を与えてしまいます。 ※ジャンプ率とは本文サイズに対する見出しサイズの比率のこと。
  7. 7. CSSで文字のジャンプ率を保つ タイポグラフィーや、画像のテキストが多いページ、 メインビジュアル付近などで使うのがおすすめ。 font-size:calc(フォントサイズ /基準の画面幅 *100vw); /* *画面幅640pxのときにフォントサイズが30pxであれば、 *font-size:calc(30/640*100vw); * *※Android4.3以下の標準ブラウザでは、 * PC* PC版のpx指定継承もしくは別途px指定が必要。 */
  8. 8. 不自然に折り返して しまっている 改行させない ようにする 自然な改行 を作る
  9. 9. CSSで文字の折返しを調整 .wrap{display:block;} .inner{display:inline-block;} white-space:nowrap; 改行させないときはwhite-space:nowrap;を使用
  10. 10. 突然ですが質問です… 「iPhoneは非常になめらかに動くが、 なぜあそこまでやる必要があるのか?」 と聞かれたらどう答えますか?
  11. 11. ・スタイリング(装飾)である。 ・カッコイイ洒落た演出のため。 ・流行性のもの。 このように捉えているとしたら、 iPhoneの良さは理解できていません。
  12. 12. 「指とグラフィックとの動きの連動性で 情報に直接触れているかの感触を与え、 存在を意識せずiPhoneを利用できるから」 のようにスタイリングではなく インターフェイスデザインと考えると◎
  13. 13. 存在を意識させない自然なアニメーションで、 ユーザーにもっと心地よい体験を届けよう!!
  14. 14. CSSTransitions .btn{ background:#ccc; transition:.1s; } .btn:hover{ background:#ddd; transition:.1s; } このようなCSSの場合、個人的に.5s以上だと違和感を感じます。 ※easingやアニメーション箇所、世界観によって違和感を感じるポイントは様々。
  15. 15. 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非対応 */ }
  16. 16. これより複雑なアニメーションをしたいときは JSの方が向いている場合があります。 CSSとJS併用するなどの工夫も必要です。
  17. 17. 今回はCSSの回なので詳しく紹介しませんが、 VueとCSSアニメーションの相性が良いので、 凝ったインターフェイスデザインを作りたい場合は Vue.jsやNuxtはとてもおすすめです  
  18. 18. インターフェイスデザインを 学びたい人におすすめの本 融けるデザイン ハード×ソフト×ネット時代の新たな設計論 渡邉恵太氏(著)
  19. 19. サンプルのCSSは全部ブログに 掲載していますので御覧ください。 http://umiremix.com/blog/megurocss/ ご清聴ありがとうございました!!

×