「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

59,301 views

Published on

2013年11月8日、JPタワー(東京・丸の内)で開催されたCREATE NOW / PLUS ONE DAYの「画像をなるべく使わずにWebをレイアウトするテクニック」セッションのスライドです。 http://adobe-createnow.jp/event

Published in: Technology, Business
1 Comment
106 Likes
Statistics
Notes
  • 11月8日、JPタワー(東京・丸の内)で開催されたCREATE NOW / PLUS ONE DAYの「画像をなるべく使わずにWebをレイアウトするテクニック」セッションのスライドです。
    http://adobe-createnow.jp/event
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
59,301
On SlideShare
0
From Embeds
0
Number of Embeds
41,428
Actions
Shares
0
Downloads
145
Comments
1
Likes
106
Embeds 0
No embeds

No notes for slide

「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

  1. 1. 鷹野雅弘 (スイッチ)
  2. 2. 近いところで、複眼をつかってさまざまな角度から注意深く見る
  3. 3. 高いところから俯瞰(ふかん)する目のこと
  4. 4. 水の流れや潮の満ち干、つまり、世の中の流れを敏感に感じる目 ち干、つまり、世の中の流れを敏感に感じる目
  5. 5. Nexus 4 Samsung Galaxy S IV Nexus 7 HTC One Samsung Galaxy Note II
  6. 6. #btn { ! display:block; ! width:300px; ! font-size:28px; ! font-weight:bold; ! text-align:center; ! line-height:2em; ! height:2em; ! text-decoration:none; ! border:1px solid #225588; ! color:#ffffff; ! background:#337fcc; ! border-radius:5px; ! text-shadow:0 -2px 0px #225588, 0 -2px 0px #225588;bac ! background:-webkit-gradient(linear, 100% 0%, 100% 100% ! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rg } #btn:hover { ! background:-moz-linear-gradient(rgba(34,85,136,0.4), r 20 background:-webkit-gradient(linear, 100% 0%, 100% 100% }
  7. 7. #btn { ! display:block; ! width:300px; ! font-size:28px; ! font-weight:bold; ! text-align:center; ! line-height:2em; ! height:2em; ! text-decoration:none; ! border:1px solid #225588; ! color:#ffffff; ! background:#337fcc; ! border-radius:5px; ! text-shadow:0 -2px 0px #225588, 0 -2px 0px #225588;bac ! background:-webkit-gradient(linear, 100% 0%, 100% 100% ! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rg } #btn:hover { ! background:-moz-linear-gradient(rgba(34,85,136,0.4), r 20 background:-webkit-gradient(linear, 100% 0%, 100% 100% }
  8. 8. #box { background: rgba(51,153,204,0.5) }
  9. 9. #box { background: rgba(51,153,204,0.5) }
  10. 10. .角丸長方形_1 { } border-radius: 10px; background-color: rgb( 234, 104, 162 ); position: absolute; left: 270px; top: 194px; width: 142px; height: 142px; z-index: 2;
  11. 11. 画像化
  12. 12. Web Google Fonts Typekit Desktop
  13. 13. ありがとうございました。
  14. 14. ベルサール九段 2013.11.23 ネタ祭り2013 Vol.2 14のショートセッション
  15. 15. http://2843.jp/ books/nabebon/
  16. 16. swwwitch swwwitch takan.masahiro
  17. 17. demo data http://bit.ly/plus1day-takano

×