Downloaded 10 times
![Zen-Coding 覚えることはこれだけ
• > で、中に入れます！
• + で、足し算できます！
• * で、掛け算できます！
• # や . で、idやclassの指定ができます！
• () で、数学的な意味の括弧が付けられます！
• [] で、その他の属性の指定ができます！
• {} で、タグの中身が書けます！
• $ で、連番が付けられます！](https://image.slidesharecdn.com/slideshare-130213194216-phpapp02/85/Web-51-320.jpg)
![どんな構造も、１行で書けます！
div#wrapper>(header>h1{GIRICHO.CO})+(
div#columns>div.pin*20>img[src="http://
giricho.co/image$.jpg"]+p{Valentine's
Day!})](https://image.slidesharecdn.com/slideshare-130213194216-phpapp02/85/Web-54-320.jpg)
バレンタイン直前開催Web勉強会
- 1.
- 2.
- 3.
- 4. 今日のハッシュタグ #MTL勉強会 ツイートしろ！
- 5. 犬でもわかる！Webサイトの作り方 わかったわ！ 実際わかったわ！
- 6. 実際犬でもわかるのか わかった犬 わからなかった犬 わかったわ！ 完全にわかったわ！ わかんねー。 まじわかん ねー。
- 7. わかったフェレット わからなかったフェレット
- 8. わかったSMAP わからなかったSMAP
- 9. わかった笑点 わからなかった笑点
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 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.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. 韻を踏むとは おもしろほーじんに おこしのとき おどしのよーに いうこのしぼーどーき ことしのどーき とほんとしぬほどに そーとーしんどいとき もぼっとーしごとに 全部、「おおいおおい」が共通しています。 ※「っ」「ん」「ー」を除く
- 30.
- 31. って？ 2007年4月1設立 今年6期目 ・技術調査研究~新規事業開発を行う 「実証研究機関(R&D)」 企画・ 運営を行い 創造する。
- 32. 2012 20本出しました
- 33. cameran 蜷川実花監修カメラ大ヒット！ 世界各国で総合１位！ 公開10日で100万DL！！
- 34.
- 35. 今日はワイワイガヤガヤ やりたいです！ ・この後制作に入ると沈黙は結構きついで す！ ・ついていけなくなったときにサクッと聞 ける人が周りにいると良いです！ ・一回喋ったらもう友達です！ ・Facebookで「知り合いかも？」のとこに 出てくるのはだいたい友達の友達です！
- 36. 今から同じ机の人と 自己紹介タイム！ ひとり１分！ ・名前 ・大学と学年 ・Webの経験 ・好きなハニー
- 37.
- 38.
- 39.
- 40. 今風なUI • アニメーション • ページ遷移なし •メトロUI • 横スクロール • リアルなボックスシャドウ • 左右比対称スクロール • IE6,7無視 -参考サイト （時間余ったら見ましょう）
- 41.
- 42.
- 43.
- 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%; }
- 47.
- 48. 今日はChromeを使いましょう！ • CSS3のベンダープレフィックスの話とか を極力はしょって、本質的なところに集 中したい。 • 今日はIEのことは忘れて踊り明かそう！
- 49.
- 50.
- 51. Zen-Coding 覚えることはこれだけ • > で、中に入れます！ • + で、足し算できます！ • * で、掛け算できます！ • # や . で、idやclassの指定ができます！ • () で、数学的な意味の括弧が付けられます！ • [] で、その他の属性の指定ができます！ • {} で、タグの中身が書けます！ • $ で、連番が付けられます！
- 52.
- 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>
- 54.
- 55. 組む→整える→入れる ↑ つぎここ
- 56.
- 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; }
- 61.
- 62.
- 63.
- 64. SCSS（Sassy CSS）とは こうやって書けるやつ！衝撃的に便利！ div { img { } p{ } }
- 65. こうなる div { } div img{ } div p { }
- 66.
- 67. position: fixed; ・スクロールしても付いてくる。 他には、 position: relative; position:absolute; があるけど、詳しくはググってください！
- 68. background: rgba(200, 30,30, 0.7); ・rgba(赤, 緑, 青, 不透明度); という指定の仕方ができて便利！ ・rgb(赤, 緑, 青); という指定もできる。 ・rgb(255, 255, 255) = #fff
- 69.
- 70. box-shadow: 0 2px2px 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 2px15px; • marginもpaddingも、3つ指定するときは、 上、左右、下の順。 • 1つのときは、全部。 • 2つのときは、上下、左右の順。 • 4つのときは、上から時計回り。
- 76. @media (max-width: 1100px){ } ・誰でも簡単にレスポンシブ！ ・max-widthで、ブラウザの横幅を指定し て、以下のときのCSSを中に書けばよいで す！