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

フロントエンドLT

unisuke
August 26, 2020

 フロントエンドLT

初めてのLT

unisuke

August 26, 2020
Tweet

More Decks by unisuke

Other Decks in Programming

Transcript

  1. 初心者が初めて
    のフロント開発で
    感動したこと

    View full-size slide

  2. アルバイト初日
    boss
    「うにちゃんBootstrap初めてだよね。
     XD渡すからこれコーディングしてみて〜!」
    うに
    「(XD最高!それならいける!)
    わかりました!6時間で仕上げます!!」

    View full-size slide

  3. 上がってくるデザインの質の差
    を実感した話

    View full-size slide

  4. 自己紹介
    名前:うにすけ
    所属:東北大学工学部電気情報物理工学科3年 
    住んでいる場所:せんだい
    出身:さいたま
    どんな人:アルバイトでフロント書いてる

    View full-size slide

  5. アルバイト初日-続-
    bossが笑いながら渡してきたXDファイルはスクショをXDにのせ
    ただけのもの...
    画像はスクショ、値もとってこれない...地獄...

    View full-size slide

  6. アルバイト3日目
    boss
    「うにちゃんお疲れ〜次これやって〜」
    うに
    「 (もう何も信じられない...)」

    View full-size slide

  7. アルバイト3日目-続-
    もらえたXDファイルは...
    プロのデザイナーが作った完璧なもの!
    素材もダウンロードできる、cssも見れる、値も全部揃ってる....最
    高....

    View full-size slide

  8. Bootstrapを初めて使ってみ
    た話

    View full-size slide

  9. Bootstrapって?
    BootstrapはHTML/CSS/JavaScriptから構成される
    Twitter社のWEBフレームワーク

    View full-size slide

  10. Bootstrapって?
    BootstrapはHTML/CSS/JavaScriptから構成される
    Twitter社のWEBフレームワーク
                 使ってみた範囲では
    ....
    グリッドレイアウトが作りやすい!
    レスポンシブデザインがありがたい!

    View full-size slide

  11. グリッドレイアウトとは?
    それぞれの要素を格子状に並べることで、美しく整えられた印象
    のデザインを作るデザイン手法
    ◎ ×

    View full-size slide

  12. アルバイト3日目
    boss
    「うにちゃんお疲れ〜次これやって〜」
    うに
    「 (もう何も信じられない...)」

    View full-size slide

  13. アルバイト初日
    boss
    「うにちゃんBootstrap初めてだよね。
     XD渡すからこれ模写コーディングしてみて〜!」
    うに
    「(XD最高!それならいける!)
    わかりました!6時間で仕上げます!!」

    View full-size slide

  14. Bootstrapとグリッドレイアウト
    container
    row
    col
    col col
    col
    col
    col col

    View full-size slide

  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

    View full-size slide

  16. まとめると..
    クラスの指定だけで簡単にグリッドレイアウトが作れる

    画面サイズによってグリッドの大きさをいい感じに変えてくれる
    初心者でも簡単に崩れない綺麗なサイトが作れる

    View full-size slide

  17. まとめ
    上がってくるデザインの質の差を実感した話
    Bootstrapを初めて使ってみた話

    View full-size slide