ゼロからサイトを作ってみる②

デイトラWeb制作コース初級編DAY6の学び

【この記事に書いてあること】

プログラミング学習6日目⏩

Web制作コース 初級編DAY6💻

学習時間:3時間23分⏳

学習内容:ゼロからサイトを作る②✏

学び📚
・altには画像の説明を入れる
・CSSは共通部分から記述していく
・inputは属性を付けて指定する
・送信ボタンはsubmit#デイトラ #プログラミング初学者 #プログラミング pic.twitter.com/F2uUWcn899

— ふりっく💻トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 17, 2021

　【学習時間】

時間分

　【学び】

1 altには画像の説明を入れる　

index.html

<img src="" alt=""> <!-- altには画像の説明を入れる-->

2 wrapperとは包むという意味
例では、<div class="course-item"></div>を包み込んでいる

index.html

<div　class="course-wrapper"> 
        <div class="course-item"></div>
        <div class="course-item"></div>
        <div class="course-item"></div> 
</div>

3 CSSは共通部分から記述していく

4　親クラスやブロックで囲って、そこにfloatなどを記述していく
そうすることで後から<p>タグなどを追加しても反映される
　<p>などの子要素に直接floatを書かない

index.html

        <div class="about-left">
          <img src="./img/about.png" alt="デイトラとは"> <!-- altには画像の説明を入れる-->
        </div>
        <div class="about-right">
          <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。 
            毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。
            1日1題30日でプロのWebエンジニアを目指しましょう!
          </p>
        </div>

style.css

.about-left {
    float: left;
    width: 48%;
}

.about-right {
    float: right;
    width: 48%;
}

5 placeholder="〇〇"の属性を使えば、後ろの影として表示できる
例

index.html

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

↓

6 枠の調整

style.css

input[type="email"] {
    width: 600px; /*枠の横の長さ*/
    border: 3px solid #d8d8d8; /*枠線の細さ、傍線、色*/
    font-size: 18px; /*フォント（メールアドレス）のサイズ*/
    display: block;/*要素が横までいっぱいに広がり、縦に並んでいく*/
    margin: auto;/*要素を中央へ持ってくる*/
    padding: 15px;/*枠内の余白の調整*/
    border-radius: 990px;/*枠角の調整*/
    margin-bottom: 20px;/*下余白の調整*/
}

↓

7 　inputは似ている枠を追加することがよくあるので、属性を付けて指定する

style.css

input[type="email"] { }

8 送信ボタンを作成する

index.html

<input type="submit">

↓

9 ボタンは複数使うことがあるから、クラスを２つ作成して分ける

style.css

.btn { /*ベースのボタンクラス*/
    padding: 20px 60px;
    display: inline-block;/*幅や高さが変更できるインライン要素*/
    background-color: #082B48;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
}

.btn-register {/*ベースのボタンクラスに後付で各ボタンで仕様変更をする*/
    background-color: #ec6d64;
    display: block;
    margin: auto;
}

10 CSSのclass名で付けては行けないNGワード
　・日本語や全角英数字
　・数字から始めない
　・ハイフン（-）とアンダースコア（_）以外の記号を使わない

11 CSSのclass名で気をつけること
　・誰が見てもわかりやすい名前をつける
　・書き方を統一する
　・役割や場所、見た目がイメージしやすい

12 CSSのclass名で使いやすい英単語