2020年3月12日 学習の内容・課題の進捗 学習12日目

2020年3月12日　学習の内容・課題の進捗

学習12日目

実施項目

CSS上級

• width 指定しないと揃わなかった

.form-item__label {
  font-weight: bold;
  width: 150px; //これがないとボックスずれる
  padding: 10px;
  line-height: 1.6;
}

.form-item__text-input {
  display: block;
  text-align: center;
  width: 50%;
  font-size: 16px;
  padding: 10px 10px;
  margin: 10px;
  border-radius: 4px;
  box-shadow: #0000001f 0 1px 4px inset;
  border: solid 1px #d2d2d2;
  background-color: white;
}

• 隙間は justify-content: space-evenly;だけでなく、marginも必要

.form-item__inline-items {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: space-between;
  margin-left: 10px;
}

.form-item__inline-item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 4px;
  border: solid 1px ;
  height: 50px;
  width: 120px;
  font-size: 16px;
  text-align: center;
background-color: #EEEEEE;
margin: 10px;
}

• 親要素を分ける

  

.form-item__inline-item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 4px;
  border: solid 1px;
  height: 50px;
  width: 120px;
  font-size: 16px;
  text-align: center;
  background-color: #EEEEEE;
  margin: 5px;
}

.form-item:nth-child(even) .form-item__inline-item {
  background-color: #DDDDDC;//親要素を分ける
}

**

## 1日の振り返り 親要素を分け方がわからなかったのですが、質問して、わかりやすく答えてくれて良かった😊

---

明日の学習

CSS上級課題　お問い合わせ部分