ゼロからサイトを作ってみる②
デイトラWeb制作コース初級編DAY6の学び
【この記事に書いてあること】
プログラミング学習6日目⏩
— ふりっく💻トリプルゼロの(これから)Webマーケター (@FuRiC_twi) January 17, 2021
Web制作コース 初級編DAY6💻
学習時間:3時間23分⏳
学習内容:ゼロからサイトを作る②✏
学び📚
・altには画像の説明を入れる
・CSSは共通部分から記述していく
・inputは属性を付けて指定する
・送信ボタンはsubmit#デイトラ #プログラミング初学者 #プログラミング pic.twitter.com/F2uUWcn899
【学習時間】
時間分
【学び】
1 altには画像の説明を入れる
<img src="" alt=""> <!-- altには画像の説明を入れる-->
2 wrapperとは包むという意味
例では、<div class="course-item"></div>
を包み込んでいる
<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
を書かない
<div class="about-left">
<img src="./img/about.png" alt="デイトラとは"> <!-- altには画像の説明を入れる-->
</div>
<div class="about-right">
<p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。
毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。
1日1題30日でプロのWebエンジニアを目指しましょう!
</p>
</div>
.about-left {
float: left;
width: 48%;
}
.about-right {
float: right;
width: 48%;
}
5 placeholder="〇〇"
の属性を使えば、後ろの影として表示できる
例
<input type="email" name="email" id="email" placeholder="メールアドレス">
6 枠の調整
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
は似ている枠を追加することがよくあるので、属性を付けて指定する
input[type="email"] { }
8 送信ボタンを作成する
<input type="submit">
9 ボタンは複数使うことがあるから、クラスを2つ作成して分ける
.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名で気をつけること
・誰が見てもわかりやすい名前をつける
・書き方を統一する
・役割や場所、見た目がイメージしやすい
Author And Source
この問題について(ゼロからサイトを作ってみる②), 我々は、より多くの情報をここで見つけました https://qiita.com/FuRiC_QT/items/86ee02c8d4327423e524著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .