フロントエンドLT

初めてのLT

Transcript

1. 初心者が初めて のフロント開発で 感動したこと
2. アルバイト初日 boss 「うにちゃんBootstrap初めてだよね。 　XD渡すからこれコーディングしてみて〜！」 うに 「(XD最高！それならいける！) わかりました！6時間で仕上げます！！」
3. 上がってくるデザインの質の差 を実感した話
4. 自己紹介 名前：うにすけ 所属：東北大学工学部電気情報物理工学科3年　 住んでいる場所：せんだい 出身：さいたま どんな人：アルバイトでフロント書いてる
5. アルバイト初日-続- bossが笑いながら渡してきたXDファイルはスクショをXDにのせ ただけのもの... 画像はスクショ、値もとってこれない...地獄...
6. アルバイト3日目 boss 「うにちゃんお疲れ〜次これやって〜」 うに 「 (もう何も信じられない...)」
7. アルバイト3日目-続- もらえたXDファイルは... プロのデザイナーが作った完璧なもの！ 素材もダウンロードできる、cssも見れる、値も全部揃ってる....最 高....
8. Bootstrapを初めて使ってみ た話
9. Bootstrapって？ BootstrapはHTML／CSS／JavaScriptから構成される Twitter社のWEBフレームワーク
10. Bootstrapって？ BootstrapはHTML／CSS／JavaScriptから構成される Twitter社のWEBフレームワーク 　　　　　　　　　　　　　使ってみた範囲では .... グリッドレイアウトが作りやすい！ レスポンシブデザインがありがたい！
11. グリッドレイアウトとは？ それぞれの要素を格子状に並べることで、美しく整えられた印象 のデザインを作るデザイン手法 ◎ ×
12. アルバイト3日目 boss 「うにちゃんお疲れ〜次これやって〜」 うに 「 (もう何も信じられない...)」
13. アルバイト初日 boss 「うにちゃんBootstrap初めてだよね。 　XD渡すからこれ模写コーディングしてみて〜！」 うに 「(XD最高！それならいける！) わかりました！6時間で仕上げます！！」
14. Bootstrapとグリッドレイアウト container row col col col col col col col
15. Bootstrapとレスポンシブデザイン container row col col-sm- 6 container row col-lg-4 col-lg-4 col-lg-4 col-lg-4 col-lg-4 col-lg-4 col-sm- 6 col-sm- 6 col-sm- 6
16. まとめると.. クラスの指定だけで簡単にグリッドレイアウトが作れる ＆ 画面サイズによってグリッドの大きさをいい感じに変えてくれる 初心者でも簡単に崩れない綺麗なサイトが作れる
17. まとめ 上がってくるデザインの質の差を実感した話 Bootstrapを初めて使ってみた話