【HTMLとCSS】②ChatAppの大まかなレイアウトについて
◯上記のようにページをデザインしたい！
【模範解答】
☆app/views/messages/_main_chat.html.erb
<div class="chat-header">
</div>
<div class="messages">
</div>
<div class="form">
</div>
☆app/views/messages/_side_bar.html.erb
<div class="side-bar-header">
</div>
<div class="rooms">
</div>
☆app/assets/stylesheets/messages.css
wrapper {
display: flex;
}
.side-bar {
background-color: #253141;
width: 300px;
height: 100vh;
}
.side-bar-header {
height: 100px;
}
.rooms {
background-color: #2F3E51;
height: calc(100vh - 100px);
}
.chat {
background-color: #FFFFFF;
width: calc(100vw - 300px);
}
.chat-header {
height: 100px;
}
.messages {
background-color: #FAFAFA;
height: calc(100vh - 100px - 90px);
}
.form {
background-color: #DDDDDD;
height: 90px;
}
【自分への解説】
思考手順
１.まずは、side-barクラスとchatクラスの内部のデザイン編集と捉える
２._main_chat.html.erbと_side_bar.html.erbの編集が必要だと判断する
（部分レイアウトの内部を編集する）
３._main_chat.html.erbでは、3つのクラスが必要と判断し、それぞれ「chat-header」「messages」「form」と命名しHTMLを編集する（命名についてはなんでも良い）
４._side_bar.html.erbでは、2つのクラスが必要と判断し、それぞれ「side-bar-header」「rooms」と命名しHTMLを編集する（命名についてはなんでも良い）
５.CSSをクラスごとに編集していく
◯各HTMLの編集については、クラスを定義していくだけなので割愛します。
◯CSSの編集について（ここが理解できていないポイント）
・side-bar-headerクラスの編集について
.side-bar-header {
height: 100px;
}
↑
side-bar-headerの編集はこれのみ。
side-barクラスの色をそのまま使用するため、ここでは特に背景色は指定していない。
・roomsクラスの編集について
.rooms {
background-color: #2F3E51;
height: calc(100vh - 100px);
↑
ここではcalc()関数を用いる。
side-bar-headerが縦100pxのためroomsクラスはその残りの部分である。
・chat-headerクラスの編集
.chat-header {
height: 100px;
}
↑
ここでも、背景色についてはchatクラスを同じのため特に色は指定しない。
・messagesクラスの編集
.messages {
background-color: #FAFAFA;
height: calc(100vh - 100px - 90px);
}
↑
高さについて、messagesクラスはchat要素の真ん中に位置している。
calc()関数において例えば、要素の上下にへつの要素が存在するとき（headerとfooterがある際）は、height: calc(100vh - 100px - 90px);というような記述の仕方をとる。ここでいう「-100pxがheader」、「-90pxがfooter」を表している。
