フロントエンジニア育成の取り組みの中でつまずいたこと

こんにちは！S.Fです。

フロントエンジニア強化トレーニングに参加するまでの経緯

まず私の状況を説明します。
新卒で弥生に入社し、入社してから今年の1月まではデスクトップ製品の自動テストを開発するチームに所属していました。
今年の2月からフロントシステムを開発するチームに配属されました。

HTMLは新人研修の頃に触った程度（かれこれ2年ほど見てもいない。。）
それも「csvファイルを整形してHTMLで出力しなさい」なんてお題だったので表作って完了！くらいのことしかやったことがありませんでした。
そんな私に上司から「フロントエンドエンジニア育成の取り組みがあるけどやってみる？」と提案がありました。
正直、家で取り組もうにも何から手を付ければいいのかわからない状態だったので、参加することにしました。

まずそもそものHTMLの書き方から勉強！なんて状態の私が詰まったことをお伝えします！成果物は以下に配置しています。
https://github.com/ykk-pa1127/FrontEngTraining/tree/master/20170223_20170316/team2/Phase1

フェーズ1の中で詰まったこと

どんなタグを使うんだろうか？
floatによるレイアウトを利用する
数字の縦書き方法はどうするんだろうか？
縦書きの文字をどうコンテンツの真ん中に寄せるんだろうか？
ブラウザを変えるとレイアウトが崩れる
縦が画面サイズからはみ出る

1. どんなタグを使うんだろうか？

レスポンシブデザインとかで検索かけるとcssの書き方は書いてあっても
どうHTMLを書くのかはなかなか見つけられず（検索の仕方がまずかったのかもですが。。。）
サンプル落とせるサイトが合ったので、落として確認！
<div>タグを使う！
ということで、<div>を使ってHTMLの作成に取り組みました。

2. floatによるレイアウトを利用したこと

なんとなくPCデザインはできた！
しかし、他のサイズにするときはどうしてくのか不明だなぁと思いつつ
同じチームのKさんに見てもらうと

float使ったの？？？  
floatでレスポンシブデザインを実現するとなると、メディアクエリ内でfloatの解除や  
javascriptで要素の高さの調整が必要となるから、
そのような複雑な処理をせずにシンプルな方法で実現できるflexboxを使おう！

とご指摘が。。
各コンテンツの区切り方もアドバイスいただきflexboxで再作成！
ちなみにこの段階のHTMLはコンテンツの区切りを<section>で区切るなんて暴挙に出ていました。

3. 数字の縦書き方法は？

writing-mode: horizontal-tb;を設定しても数字が縦書きにならない！
このとき、記載していた数字は半角でした。
全角に戻すと縦書きになりました。

4. 縦書きの文字をどうコンテンツの真ん中に寄せるんだろうか？

縦書きの文字が中央に配置されない！！
ってことでKさんのお力を借りました。
結論

各コンテンツ自体もflexboxに設定
flexboxを中央に寄せる

こうすることで真ん中に寄せることができました。

5. ブラウザを変えるとレイアウトが崩れる

Chromeで動作確認しながらflexboxが折り返すところでメディアクエリのブレークポイントを設定
そんな設定をしたせいなのか（おそらくそうなのですが）
ブラウザによってレイアウト崩れが！！！
うまいことブレークポイントを設定しようとしましたが上手く行かず時間切れ。。。
自分なりの考察

flex-wrap: wrapの設定の位置がおかしい
メディアクエリの設定の前にflex-wrap: wrapを設定しているため、サイズによる制御ができていない
ChromeとIE、Safariだとコンテンツ5が折り返す位置が違う

フェーズ2ではこのあたり注意したいです。

6. 縦が画面サイズからはみ出る！

なんだか縦のサイズ設定がうまいこといかず、画面からはみ出る事態が！
flexboxの設定を再度考え直して修正をかけることにしました。
頭で考えていても混乱するだけだったので、親と子の関係を明確にするためにお絵かき。 f:id:satoko-0119:20170309193058p:plain
ここで明確にしたものに合わせて、<div>を再設定して、あわせてcssを修正。

<body>
    <div class="container">
        <div class="contentHeader">コンテンツ１</div>
        <div class="contents">
            <div class="contentMenu"><div>コンテンツ２</div></div>
            <div class="contentMain">
                <div class="content contentLightBlue"><div>コンテンツ３</div></div>
                <div class="content contentYellow"><div>コンテンツ４</div></div>
                <div class="content contentPink"><div>コンテンツ５</div></div>
            </div>
        </div>
    </div>
</body>

（<style>も<div>に修正しました。）
containerの子要素のcontentHeaderとcontentsを縦に並べて、高さを設定することではみ出ることを修正しました。