デイトラweb制作初級編　DAY6

2022年4月3日 2022年6月7日

nakano

メインコンテンツ部分

Flexboxは「display: flex;」で使うことができる。

1.　要素の横並び「display: inline-block;」

2.　高さの中央揃え「vertical-align: middle;」

3.　右揃え・左揃え「float」

.course-wrapper {
    display: flex;
    justify-content: space-around;
}

※「justify-content: space-around;」は横向きに均等配置

<input type="email" name="email" id="email" placeholder="メールアドレス">

HTML

・「placeholder=""」　→　テキストをクリックすると消える

・「value=""」　→　テキストに初期値として入る（クリックで消えない）

input[type="email"] {}

CSS

・「input」タグは、属性の「type=""」までがセット　→　複製が簡単

1.　日本語、全角英数字を使わない

2.　数字から始めない

3.　ハイフン（-）、アンダースコア（_）以外の記号を使わない

4.　誰が見てもわかりやすくする

5.　書き方を統一する（例・・・ btn　または　button）

6.　役割や場所、見た目をイメージしやすくする

今回はメインコンテンツ・お問い合わせ・フッターの3つを書きました！

やはり、DAY6の中だとFlexboxの存在が一番大きかった気がします。

基本的には「float」ではなく、Flexboxを使って横並びにすることが多いみたいなので、横並びの配置にしたいと思ったら、積極的に使いたいです。