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

CSS上級で1番難しかったところ

 CSS上級で1番難しかったところ

フィヨルドブートキャンプのプラクティス「CSS上級」
を取り組む中で時間がかかったところについて、どうやって解決したかを書きました。

yatsuhashi

August 22, 2020
Tweet

More Decks by yatsuhashi

Other Decks in Programming

Transcript

  1. CSS上級で
    1番難しかったところ
    yatsuhashi
    フィヨルドブートキャンプ 初めてのLT会 Vol.4
    2020-08-22

    View Slide

  2. 趣旨
    CSS上級でとても時間がかかった部分があったので
    その振り返り
    これからCSS上級に取り組む⼈の参考になれば

    View Slide

  3. ⽬次
    ⾃⼰紹介
    1番難しかったところ
    なぜ難しかったのか
    どのように解決したか
    学び

    View Slide

  4. ⾃⼰紹介
    yatsuhashi
    現在のプラクティス︓Linux
    好きなもの︓コーヒー

    View Slide

  5. ⽬次
    ⾃⼰紹介
    1番難しかったところ←ココ
    どのように解決したか
    なぜ難しかったのか
    学び

    View Slide

  6. 1番難しかったところ
    フッターの「@私の名前 2018」
    を1段下に持ってくる

    View Slide

  7. 1番難しかったところ

    View Slide

  8. 1番難しかったところ

    View Slide

  9. 1番難しかったところ
    CSS上級完成までにかかった⽇数
    8⽇
    解決までにかかった⽇数
    5⽇

    View Slide

  10. ⽬次
    ⾃⼰紹介
    1番難しかったところ
    どのように解決したか←ココ
    なぜ難しかったのか
    学び

    View Slide

  11. どのように解決したか
    display: flex;
    flex-wrap: wrap;
    を親要素に適⽤し、
    widthを合計100%
    にして折り返す

    View Slide

  12. どのように解決したか
    flex-wrap

    View Slide

  13. どのように解決したか

    View Slide

  14. どのように解決したか
    width:50%
    width:50%
    @私の名前 2018が下に来た︕︕

    View Slide

  15. どのように解決したか
    Googleで検索
    「CSS 改⾏」
    word-break、
    、etc…
    なんか違う︕

    View Slide

  16. どのように解決したか
    ⽇報、Q&Aを⾒る
    「このサイトの作者」部分についての
    ⽇報を発⾒する

    View Slide

  17. どのように解決したか

    View Slide

  18. どのように解決したか
    width:100%

    View Slide

  19. どのように解決したか
    これだ︕︕︕

    View Slide

  20. どのように解決したか
    width:50%
    width:50%
    @私の名前 2018が下に来た︕︕

    View Slide

  21. ⽬次
    ⾃⼰紹介
    1番難しかったところ
    どのように解決したか
    なぜ難しかったのか←ココ
    学び

    View Slide

  22. なぜ難しかったのか
    「どうやったら改⾏できるんだろう」
    「折返し」と「改⾏」が結びつかなかった

    View Slide

  23. なぜ難しかったのか
    すぐ調べなかった
    ⽇報、Q&Aを⾒なかった

    View Slide

  24. ⽬次
    ⾃⼰紹介
    1番難しかったところ
    どのように解決したか
    なぜ難しかったのか
    学び←ココ

    View Slide

  25. 学び
    ⽇報、Q&Aはほんとに⼤事
    わからなかったらすぐに調べる、
    それでもダメだったら素直に聞く

    View Slide

  26. 学び
    これからCSS上級をする⼈へ
    width:100%での折返しを理解すると
    CSS上級だいぶ進むよ︕︕
    (お問合せフォームにも使える)

    View Slide

  27. 参考
    参考にさせていただいた⽇報
    https://bootcamp.fjord.jp/reports/15011

    View Slide

  28. ありがとうございました︕

    View Slide