【HTMLとCSS】④ChatAppにおける投稿フォームの作成
◯上記のような投稿フォームを実装したい！
【模範解答】
☆app/views/messages/_main_chat.html.erb のformクラス以下
<div class="form">
<div class="form-input">
<input class="form-message" placeholder= "type a message">
</div>
<input class="form-submit" type="submit" value="送信">
</div>
☆app/assets/stylesheets/messages.cssのform部分
.form {
background-color: #DDDDDD;
height: 90px;
padding: 20px 40px;
display: flex;
}
.form-input {
background-color: white;
width: 100%;
}
.form-message {
border: none;
height: 50px;
width: 100%;
padding-left: 10px;
}
.form-submit {
background-color: #38AEF0;
border: none;
color: white;
font-size: 16px;
height: 50px;
margin-left: 15px;
padding: 0 20px;
}
【自分への解説】
思考手順
１.まずメッセージ入力部分、送信ボタン部分の2つのクラスが必要であると認識する。
２.HTMLにて、入力部分、送信ボタン部分のクラスを定義する
３.CSSを編集する
２.HTMLの編集
<div class="form">
<div class="form-input">
↑
フォームのクラスを作成している
<input class="form-message" placeholder= "type a message">
↑
input要素のクラスを作成し、"form-message"と命名
placeholder= "type a message"で、初めから"type a message"という文字列が表示されるようにしている。
</div>
<input class="form-submit" type="submit" value="送信">
↑
送信ボタンのinput要素のクラスを作成
ここではtype属性"submmit"を用いて実際に押すことのできる送信ボタンを作成している
</div>
◯そもそもform要素とは？
form要素とは、フォーム関連要素の集まりを表すブロック要素である。
<form>...</form>のなかに、入力フォームや送信フォームを作成する。
◯input要素とは？
Input要素とは、フォームの入力欄や実行ボタンなどを作成することができるインライン要素である。input要素にはtype属性という設定があり、それを指定することによって様々な種類のフォーム部品を作り出すことができる。
◯type属性とは？
| type属性 | 用途 |
|---|---|
| text | １行のテキスト入力欄を作成します |
| checkbox | チェックボックスを複数作成することができます |
| radio | 複数の中から１つしか選択できない、ラジオボタンを作ります |
| submit | 送信ボタンを作ります |
３.CSSの編集
.form {
background-color: #DDDDDD;
height: 90px;
padding: 20px 40px;
display: flex;
}
↑
フォームの中は横並びのため、親要素でdisplay: flex;を使っている
.form-input {
background-color: white;
width: 100%;
}
↑
入力のボックスのデザイン
横のサイズは親要素に対して100％と指定している
.form-message {
border: none;
height: 50px;
width: 100%;
padding-left: 10px;
}
↑
入力するメッセージ（中身）のデザイン
.form-submit {
background-color: #38AEF0;
border: none;
color: white;
font-size: 16px;
height: 50px;
margin-left: 15px;
padding: 0 20px;
}
↑
marginで外側の余白を表現
paddingで内側の余白を表現
