2019/09/08_HTML&CSS（あやふやな点）

2019/09/08

やったこと

課題のグループチャットアプリが終わったので、HTMLとCSSの問題を解きました。 知識がすごい抜けてて、ひどかったので、今日はHTMLとCSSのおさらいを書きます。

おさらい（あやふやだったもの）

css

flexboxを右寄せにする

display: flexで横並びにした要素を右寄せにする方法です。

justify-contentプロパティを使う

• 親要素に対してjustify-content: flex-end;を指定する
• 参考
  • 左寄せは、値をflex-startにする(デフォルトの設定)
  • 中央寄せは、値をcenterにする

参考

justify-content - CSS: カスケーディングスタイルシート | MDN
(例で各値の結果が確認できて、わかりやすかったです！)

HTML

formタグ

formタグの存在は、知ってたのですが、そもそもなんだっけ？と思ったので、調べました。

• formタグは、「フォームの部品」を囲うブロック要素
  • フォームの部品 : <input>、<select>、<textarea>など情報を選択・入力する部分を作るもの
• 各部品で入力した値の送信先を指定する役割を持つ

例

<form action="cgi-bin/formmail.cgi" method="post">
<！-- ここに<input>やら<textarea>を書く -->
</form>

解説

• action属性 : データの送信先を指定
• methid : 送信のときのHTTPメソッドを指定

参考

<FORM>－HTMLタグリファレンス

labelタグ

formタグと同じく、知ってるけどなんだかよくわからないので、調べました。

• フォームの部品に名前をつけるだけではなく、関連付けする役割を持つ
• 関連づけ の例としては、名前の部分をクリックしただけで
  • ラジオボタンが選択される。
  • 入力欄にすぐ回答を打ち込めるようになる。 　　　　　　　といったこと。

例１（ラジオボタン）

<form ~>
  <label><input type="radio" name="blood" value="a">A型</label>
  <label><input type="radio" name="blood" value="b">B型</label>
  <label><input type="radio" name="blood" value="o">O型</label>
  <label><input type="radio" name="blood" value="ab">AB型</label>
</form>

解説

• 公式にすると、<label><input type='◯◯'>名前</label>
• 上の例でいうと、「A型」の部分をクリックしても、ラジオボタンが選択できるようになる。

例２（入力フォーム）

<form ~>
  <label for='name'>名前</label>
  <input id='name' type='text'>
</form>

解説

• 「名前」と表示された箇所をクリックすると、すぐ入力できる状態（入力欄を選択）になる。
• 関連付けの発動条件は、<label>のfor属性の値 ＝ <input>のid属性の値 であること。

参考

<LABEL>－HTMLタグリファレンス

---

以上です。 あれ？問題全然できなかったわりに、ここに記載した項目少ない気が…
知識も大切ですが、それを使いこなす経験も圧倒的に足りないってことっすかね。きっと。