TECH EXPERT 19日目 チャットアプリ開発 4.フロント部分の実装
HTML、CSS ビューの部分
１.事前準備
GitHubでの管理を行う
ブランチの作成 「フロント実装」→コミット
フロント実装に必要なルーティング、コントローラー、ビューを作成する
仮のものでOK、作成後ちゃんと表示されるか一応確認しとく→コミット
リセットCSSが適用されるように設定する
app/views/layouts/application.html.erb
paddingなどで要素のサイズが変わらないように設定する
app/assets/stylesheets/application.cssファイルに設定。
box-sizing: border-box; を使う。
paddingやmarginを要素のサイズに含めることができるプロパティ。→コミット
フロント実装で使用するファイルを作成する
ビューファイルはサイドバーとメインチャットで分ける。
部分テンプレート使用↓
<%=render "side_bar" %> <%=render "main_chat" %>
※部分テンプレートの読み込みはファイル名頭の「_」、拡張子は必要ない→ コミット
詳細に関しては把握しきれないので
調べて実装などでも問題なさそう。記述自体は複雑でもないので。
２.ビューの実装
overflow: scroll; #はみ出した部分をスクロールされた時に考慮して
はみ出した部分があったらスクロールできるようになる
label要素
フォームの中でフォームの項目名とフォームの入力要素（画像選択フォーム、プルダウン、チェックボックスなど）を関連付けるための要素。
label要素の役割の1つは、label要素がクリックされた時に、子要素もクリックされたことにしてくれる。この仕組みを使うと、見えないはずのファイル選択ボタンをクリックしたかのように動作させることができます。
要素の横並びなど学んだ部分で作成可能、あとこまめにコミット。
逆に設計からどんなページの作成をするか具体的にイメージしてたから作りやすい
