$30 off During Our Annual Pro Sale. View Details »

フロントエンドLT

unisuke
August 26, 2020

 フロントエンドLT

初めてのLT

unisuke

August 26, 2020
Tweet

More Decks by unisuke

Other Decks in Programming

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