Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 460 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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/ ご清聴ありがとうございました!!

×