Qiita学習記録　HTML/CSS #3

5572 ワード
HTML 学習記録 Web制作 初心者 CSS HTML テキストリンク

デイトラDay7

スマホ用にレスポンシブ対応
・ポイントはメディアクエリとブレイクポイント

style.css
.course-wrapper {
        flex-wrap: wrap;
    }

画面の横幅のサイズを超えた時自動的に改行を行うWrap
レスポンシブ表示に限らずPC表示でも役立つ。
flexboxの使い方は奥深いので調べる必要あり。

デイトラDay8

ついに自力でのWeb制作開始

実務でWeb制作する際のtips

まずHTMLで全体（またはキリのいいブロックまで）を書き上げる
CSSを付けつつデザイン通りに調整していく
という順でコーディングするので、今回はできればHTMLを書き上げてからCSSを書くという手順で挑戦！！

HTMLを先に書くときに意識しておくべきこと３つ

  • 完成形をイメージしてブロックを作る
  • どこに何のスタイルを当てるか設計しつつ書く
  • レスポンシブも見越してブロックを整理する

理解が進んでいない部分



「inputがあるからformもいるな」とセットで覚える必要がある。

index.html
 <form action="#" method="POST">
                <input type="email" name="email" id="email" placeholder="メールアドレス">
                <button type="submit" class="btn btn-register">無料ではじめる</button>
            </form>
style.css
input[type="email"],input[type="text"] {
    width: 600px;
    border: 3px solid #d8d8d8;
    font-size: 18px;
    display: block;
    margin: auto;
    padding: 15px;
    border-radius: 999px;
    margin-bottom: 20px;
}
style.sheet
.btn {
padding: 20px 60px;
display: inline-block;
background-color: #082b48;
color: #fff;
font-size: 24px;
font-weight: bold;
border-radius: 4px;
border: none;
} 

.btn:hover {
    opacity: 0.7;
    cursor: pointer;
}

.btn-register {
    background-color: #ec6d64;
    display: block;
    margin: auto;
}