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上級課題 お問い合わせ部分