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


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

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

 【学習時間】

時間分

 【学び】

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 ボタンは複数使うことがあるから、クラスを2つ作成して分ける

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名で使いやすい英単語