Webフロントエンド入門 メッセージアプリを作ろう Part.3
挨拶
こんにちわこんばんわおはようございます。
Webシステム部の菊地です。（はい、拍手ー。わーいわーい
世の中、やってて、楽しいけど、こんなことしてて、何になるんだろと、思うことはたくさんあります。
そんなあなたに、この言葉を送ります。
「枯れ木も山の賑い」
枯(か)れ木(き)も山(やま)の賑(にぎ)わい
《枯れ木も山に風情を添えるのに役立つ意から》つまらないものでも、ないよりはましであることのたとえ。
楽しいけど、意義に迷ってたら、ないよりマシと思って、すすめちゃいましょう！！
止まっているより、行動あるのみ！！
あっ、人生長いので、無理しすぎない程度に、頑張りましょう。
ゆるくファイト、ゆるファイです👓
本題
早速、本題ですが、今回は、画面のメッセージ表示部分を作っていきます。
ようやく、メッセージアプリらしくなりますね。
〜お品書き〜
画面レイアウトの作成
メッセージの表示部分の作成
スタイルの適用
メッセージ表示部分の作成
早速ですが、次のように、ソースコードを変更してみてください。
書けたら保存して、結果をブラウザで確認します。（フルHDだと、確認がしづらいなと、気がついたので、スマートフォンサイズにしました。）
前回と同じように、文字だけの表示になっていると思います。
では、見た目を設定していきます。
styleのタグの中を以下と同じように、追記していきます。
書けましたか？では、結果を確認してみましょう。
メッセージアプリっぽくなってきましたね！
自分と相手の発言が同じ行ですね。分けましょうか。
以下のようにコードを書き変えましょう。
まずは、テンプレートから、自分と相手の発言を区別するために、class要素に、"you"と"me"を追加します。
次に、CSSで、meクラスの記述を足します。（え？youの方はいいのかって、プログラムを書くときに、クラスをつけておくといろいろ便利なんです。）
結果を確認してみましょう。
ついに、メッセージアプリっぽさが出ましたね！
おめでとうございます！
メッセージ入力欄の作成
この興奮が冷めるまえに、入力欄の作成に取り掛かりましょう・・・！
例によって、コード、具体的には、テンプレートに以下を追加します。
書けたら、結果を見てみます。
例のごとく、殺風景に表示されてます。
今回に限っては、表示が画面外にいってますね。
もちろん、これから見た目を整えます。
まず、テンプレートを新しく書き加えたDivタグの中に入れます。
classは、chat-containerにしてください。
Styleタグの中を以下のように、変更してください。
出来たら、確認してみてください。
画面に収まっていると思います。
これは、もう、すっかりメッセージアプリですね！
まとめ
今回は、メッセージアプリの見た目を作っていきました。
具体的には：
画面の基本レイアウト作成
メッセージの左右配置の実装
入力欄の設置
CSSを使って、少しずつ調整を加えることで、メッセージアプリらしい見た目になってきました。(ﾖｷﾖｷ
次回予告
Part 4では、いよいよメッセージを送信できるようにしていきます！
メッセージの送信機能
送信時のアニメーション
次回も、ｻｰﾋﾞｽｻｰﾋﾞｽｩ！（今の子に通じない
困ったときは
コードが動かないときは、以下をチェックしてみてください：
CSSのclass名は合っていますか？
divタグの閉じ忘れはありませんか？
ブラウザの開発者ツールでエラーは出ていませんか？
完成したコードはGitHubリポジトリで公開していますので、
うまく動かない場合は参考にしてみてください。
それでは、Part 4でお会いしましょう！