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


# デイトラWeb制作コース初級編DAY6の学び
# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習6日目⏩<br><br>Web制作コース 初級編DAY6💻<br><br>学習時間:3時間23分⏳<br><br>学習内容:ゼロからサイトを作る②✏<br><br>学び📚<br>・altには画像の説明を入れる<br>・CSSは共通部分から記述していく<br>・inputは属性を付けて指定する<br>・送信ボタンはsubmit<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%AD%A6%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初学者</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://t.co/F2uUWcn899">pic.twitter.com/F2uUWcn899</a></p>&mdash; ふりっく💻トリプルゼロの（これから）Webマーケター (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1350739855832195074?ref_src=twsrc%5Etfw">January 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#　【学習時間】

時間分

#　【学び】

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="メールアドレス">
```
↓
![スクリーンショット 2021-01-17 16.52.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/329e5157-99bd-f43b-4a0f-645eb01df74d.png)

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;/*下余白の調整*/
}
```
↓
![スクリーンショット 2021-01-17 17.01.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/f3440f13-af24-1a12-6890-feab5a54e1e9.png)

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

```style.css
input[type="email"] { }
```

8 送信ボタンを作成する

```index.html
<input type="submit">
```
↓
![スクリーンショット 2021-01-17 17.24.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/44a5ca39-5fe3-7947-49a3-ee4112d54653.png)

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名で使いやすい英単語
![スクリーンショット 2021-01-17 18.24.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1028584/0444ba1f-71ca-d09b-c0f5-04e9f1983414.png)