【この記事に書いてあること】
プログラミング学習6日目⏩
— ふりっく💻トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 17, 2021
Web制作コース 初級編DAY6💻
学習時間:3時間23分⏳
学習内容:ゼロからサイトを作る②✏
学び📚
・altには画像の説明を入れる
・CSSは共通部分から記述していく
・inputは属性を付けて指定する
・送信ボタンはsubmit#デイトラ#プログラミング初学者#プログラミングpic.twitter.com/F2uUWcn899
【目標】
「ゼロからサイトを作ってみる②」
【学習時間】
時間分
【学び】
1 altには画像の説明を入れる
index.html
<imgsrc=""alt=""><!-- altには画像の説明を入れる-->2 wrapperとは包むという意味
例では、<div class="course-item"></div>を包み込んでいる
index.html
<div class="course-wrapper"><divclass="course-item"></div><divclass="course-item"></div><divclass="course-item"></div></div>3 CSSは共通部分から記述していく
4 親クラスやブロックで囲って、そこにfloatなどを記述していく
そうすることで後から<p>タグなどを追加しても反映される
<p>などの子要素に直接floatを書かない
index.html
<divclass="about-left"><imgsrc="./img/about.png"alt="デイトラとは"><!-- altには画像の説明を入れる--></div><divclass="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
<inputtype="email"name="email"id="email"placeholder="メールアドレス">↓
6 枠の調整
style.css
input[type="email"]{width:600px;/*枠の横の長さ*/border:3pxsolid#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
<inputtype="submit">↓
9 ボタンは複数使うことがあるから、クラスを２つ作成して分ける
style.css
.btn{/*ベースのボタンクラス*/padding:20px60px;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名で使いやすい英単語