デイトラweb制作初級編 DAY6

メインコンテンツ部分
Flexbox
Flexboxは「display: flex;」で使うことができる。
Flexboxの機能
1. 要素の横並び「display: inline-block;」
2. 高さの中央揃え「vertical-align: middle;」
3. 右揃え・左揃え「float」
.course-wrapper {
display: flex;
justify-content: space-around;
}

※「justify-content: space-around;」は横向きに均等配置
お問い合わせ・フッター部分
「input」タグ

<input type="email" name="email" id="email" placeholder="メールアドレス">
HTML
・「placeholder=""」 → テキストをクリックすると消える
・「value=""」 → テキストに初期値として入る(クリックで消えない)
input[type="email"] {}
CSS
・「input」タグは、属性の「type=""」までがセット → 複製が簡単
Class名の命名規則
具体的なルール
1. 日本語、全角英数字を使わない
2. 数字から始めない
3. ハイフン(-)、アンダースコア(_)以外の記号を使わない
4. 誰が見てもわかりやすくする
5. 書き方を統一する(例 ・・・ btn または button)
6. 役割や場所、見た目をイメージしやすくする
まとめ
今回はメインコンテンツ・お問い合わせ・フッターの3つを書きました!
やはり、DAY6の中だとFlexboxの存在が一番大きかった気がします。
基本的には「float」ではなく、Flexboxを使って横並びにすることが多いみたいなので、横並びの配置にしたいと思ったら、積極的に使いたいです。