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

フロントエンドLT

36db74c2b509d12cb2404b62846afa27?s=47 uniSuke
August 26, 2020

 フロントエンドLT

初めてのLT

36db74c2b509d12cb2404b62846afa27?s=128

uniSuke

August 26, 2020
Tweet

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を初めて使ってみた話