デイトラ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を使って横並びにすることが多いみたいなので、横並びの配置にしたいと思ったら、積極的に使いたいです。

コメントを残す

メールアドレスが公開されることはありません。