Upgrade to Pro — share decks privately, control downloads, hide ads and more …

スポンサーロゴサイズの統一

274c474bb14a19f48ee86907c5be2a1d?s=47 Kite
August 28, 2016

 スポンサーロゴサイズの統一

縦横比がバラバラなロゴを、大体同じぐらいのサイズに見えるようにする方法

274c474bb14a19f48ee86907c5be2a1d?s=128

Kite

August 28, 2016
Tweet

Transcript

  1. Grand Frontend Osaka 2016 / Kite มଶత$44τϦοΫ൪֎ฤ
 εϙϯαʔϩΰαΠζͷ౷Ұ

  2. WordPress core contributor Ruby on Rails contributor Wocker developer Bathe

    developer Frasco developer Web & graphic designer Programmer Kite KITERETZ inc. CEO & Funder ! kite.koga " ixkaito # ixkaito
  3. εϙϯαʔϩΰαΠζͷ౷Ұ

  4. ࢓༷ ॎԣൺ͕όϥόϥͳϩΰ

  5. ߴ͞΍෯Ͱ߹Θͤͯ΋ɺಉ͡େ͖͞ʹ͸ݟ͑ͳ͍ ࣦഊྫ

  6. ಉ͡େ͖͞ʹݟ͑ΔΑ͏ʹ͢Δʹ͸ɺ໘ੵ͕ಉ͙͡Β͍ʹͳΔΑ͏ʹ͢Δඞཁ͕͋Δ ࣦഊྫ

  7. Ұ൪ԣ௕ͳ ॎ௕Ͱ΋Α͍ ϩΰΛج४ʹɺൣғ಺ͰऔΕΔ࠷େ໘ੵΛٻΊΔ ΍Γํ

  8. ྫ 300 * 50 = 15,000px ΍Γํ

  9. x : y = 1.5 : 1 x y ΍Γํ

    x y x : y = 1 : 1
  10. x * y = 15,000 1.5 * y * y

    = 15,000 y = √10,000 y = 100px x * y = 15,000 1 * y * y = 15,000 y = √15,000 y ≒ 122.474487139px ΍Γํ
  11. ΍Γํ 122px 100px x * y = 15,000 1.5 *

    y * y = 15,000 y = √10,000 y = 100px x * y = 15,000 1 * y * y = 15,000 y = √15,000 y ≒ 122.474487139px
  12. ެࣜ 短辺 = √(最大面積 ÷ 縦横比)

  13. ࣮ࡍ͸ϩΰʹΑͬͯృΓͭͿ͠෦෼ͷ໘ੵ͕ҧ͍·͢ͷͰɺ
 ࠷ޙ͸ࣗ͝਎ͷ໨Ͱ֬ೝ͠ɺඍௐ੔͢Δ͜ͱΛΦεεϝ͠·͢ɻ ֮ॻ

  14. ࠷ޙʹ

  15. ,*5&3&5;JOD גࣜձࣾΩςϨπ Ͱ͸ɺ
 ຐ๏࢖͍ʹͳΓ͍ͨਓΛืू͠·͢ɻ
 ϦϞʔτɺύʔτλΠϜ׻ܴɻ αΠτ͔Β
 IUUQLJUFSFU[DPN 'BDFCPPLϝοηʔδ͔Β
 IUUQGBDFCPPLDPNLJUFLPHB (JU)VC*TTVF


    IUUQTHJUIVCDPNLJUFSFU[