バレンタイン直前開催Web勉強会
•Transferir como PPTX, PDF•
10 gostaram•1,387 visualizações
当日参加者向けスライド
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (17)
Semelhante a バレンタイン直前開催Web勉強会
Semelhante a バレンタイン直前開催Web勉強会 (20)
バレンタイン直前開催Web勉強会
- 3. バレンタイン直前開催 「今風」なWebサイトの作り方 直前やで！
- 4. 今日のハッシュタグ #MTL勉強会 ツイートしろ！
- 5. 犬でもわかる！Webサイトの作り方 わかったわ！ 実際わかったわ！
- 6. 実際犬でもわかるのか わかった犬 わからなかった犬 わかったわ！ 完全にわかったわ！ わかんねー。 まじわかん ねー。
- 7. わかったフェレット わからなかったフェレット
- 8. わかったSMAP わからなかったSMAP
- 9. わかった笑点 わからなかった笑点
- 13. 自己紹介 Beaglooveというユニットでラップやってます。 日本人の韻リテラシーを高めるために fumu.in というブログをやっています。 「韻を踏む」ことだけは 日本で一番な自信が あります。
- 19. キャッチャー消す研究 19
- 20. キャッチャー消す研究 20
- 21. Input images User view image Computing geometry of cameras Objective scene Plane Sweep in PGS Background subtraction Occluded object Rendered image Subtracted image user Combining Output image
- 22. 2年間の研究の末、わかったこと
- 23. キャッチャーは、消えない。
- 29. 韻を踏むとは おもしろほーじんに おこしのとき おどしのよーに いうこのしぼーどーき ことしのどーき とほんとしぬほどに そーとーしんどいとき もぼっとーしごとに 全部、「おおいおおい」が共通しています。 ※「っ」「ん」「ー」を除く
- 31. って？ 2007年4月1設立 今年6期目 ・技術調査研究~新規事業開発を行う 「実証研究機関(R&D)」 企画・ 運営を行い 創造する。
- 32. 2012 20本出しました
- 33. cameran 蜷川実花監修カメラ大ヒット！ 世界各国で総合１位！ 公開10日で100万DL！！
- 35. 今日はワイワイガヤガヤ やりたいです！ ・この後制作に入ると沈黙は結構きついで す！ ・ついていけなくなったときにサクッと聞 ける人が周りにいると良いです！ ・一回喋ったらもう友達です！ ・Facebookで「知り合いかも？」のとこに 出てくるのはだいたい友達の友達です！
- 36. 今から同じ机の人と 自己紹介タイム！ ひとり１分！ ・名前 ・大学と学年 ・Webの経験 ・好きなハニー
- 40. 今風なUI • アニメーション • ページ遷移なし • メトロUI • 横スクロール • リアルなボックスシャドウ • 左右比対称スクロール • IE6,7無視 -参考サイト （時間余ったら見ましょう）
- 41. 今風じゃないユーアイ
- 44. レベル感の確認 させてください！
- 45. 【HTML】 <div id=“container”> <img src=“img/dog.jpg”> <p class=“text”>犬でもわかる！</p> </div> 【CSS】 に入る3文字は？ #container { background: #fdfdfd; に入る1文字は？ } .text { に入る1文字は？ font-size: 90%; }
- 46. 【HTML】 <div id=“container”> <img src=“img/dog.jpg”> <p class=“text”>犬でもわかる！</p> </div> 【CSS】 に入る3文字は？ #container { background: #fdfdfd; に入る1文字は？ } .text { に入る1文字は？ font-size: 90%; }
- 48. 今日はChromeを使いましょう！ • CSS3のベンダープレフィックスの話とか を極力はしょって、本質的なところに集 中したい。 • 今日はIEのことは忘れて踊り明かそう！
- 49. 今日のメニュー 一気に組む。一気に。 - 爆速なHTMLの組み方（Zen-Codingの紹介） - CSSのよくある誤解（OneClickCSSの紹介） - 手軽にオシャレにするCSSの組み方
- 51. Zen-Coding 覚えることはこれだけ • > で、中に入れます！ • + で、足し算できます！ • * で、掛け算できます！ • # や . で、idやclassの指定ができます！ • () で、数学的な意味の括弧が付けられます！ • [] で、その他の属性の指定ができます！ • {} で、タグの中身が書けます！ • $ で、連番が付けられます！
- 53. <div id=“wrapper”> <header><h1>GIRICHO.CO</h1></header> <div id=“columns”> <div class=“pin”> <img src=http://giricho.co/image1.jpg”> <p>Valentine’s Day!</p> <img src=http://giricho.co/image2.jpg”> <p>Valentine’s Day!</p> <img src=http://giricho.co/image3.jpg”> <p>Valentine’s Day!</p> ・ ・ ・ </div> </div> </div>
- 55. 組む→整える→入れる ↑ つぎここ
- 57. CSSのよくある誤解 【HTML】 <div id=“container”> <img src=“img/dog.jpg”> <p class=“text”>犬でもわかる！</p> </div>
- 58. CSSのよくある誤解 p{ font-size: 18px; } p{ font-size: 20px; }
- 59. CSSのよくある誤解 .text { font-size: 18px; } p{ font-size: 20px; }
- 60. CSSのよくある誤解 #container p { font-size: 18px; } p{ font-size: 20px; }
- 64. SCSS（Sassy CSS）とは こうやって書けるやつ！衝撃的に便利！ div { img { } p{ } }
- 65. こうなる div { } div img { } div p { }
- 67. position: fixed; ・スクロールしても付いてくる。 他には、 position: relative; position: absolute; があるけど、詳しくはググってください！
- 68. background: rgba(200, 30, 30, 0.7); ・rgba(赤, 緑, 青, 不透明度); という指定の仕方ができて便利！ ・rgb(赤, 緑, 青); という指定もできる。 ・rgb(255, 255, 255) = #fff
- 69. width: 100%; ・親要素に対して、横幅100% 100%
- 70. box-shadow: 0 2px 2px rgba(35, 25, 25, 0.8); ・水平、垂直、ぼかし距離、色の順に指定
- 71. margin: 15px auto; ・margin: 縦 横; （autoは、自動の中央揃 え） 15px 15px
- 72. • width: ●● %; • margin: 0 auto; の組み合わせは本当に頻出！
- 73. -webkit-column-count: 5; • -webkit- は、ベンダープレフィックス。 • ChromeとSafariは、-webkit- • Firefoxは、-moz- • IEは、-ms- • これについては、詳しくはググってくだ さい。 • 今日は-webkit-のみで通します！
- 74. display: inline-block; • ここでは、変な改行を防止する役割。 • いままでだと横並びを実現するときに、 float: left; をしまくって、最後にclear: both; をしないといけなかったやつが、簡単に できる。
- 75. margin: 0 2px 15px; • marginもpaddingも、3つ指定するときは、 上、左右、下の順。 • 1つのときは、全部。 • 2つのときは、上下、左右の順。 • 4つのときは、上から時計回り。
- 76. @media (max-width: 1100px) { } ・誰でも簡単にレスポンシブ！ ・max-widthで、ブラウザの横幅を指定し て、以下のときのCSSを中に書けばよいで す！