学習ログ〜コンテンツ〜
本日の学習
1.メインのレイアウト
1-1 mainの構造
1-2 文中の一部にCSSを適用させる
1-3 ブロック要素・インライン要素
2.コンテンツの構造
3.ボーダー
3-1 枠線をつける
4.内側の余白と外側の余白
4-1 padding&margin
4-2 ボックスモデル
4-3 maginまとめ
1.メインのレイアウト
1-1 mainの構造
①copy-container
②contencs
③contact-form
1-2 文中の一部にCSSを適用させる
<span>要素・・・文章の色を一部変える。改行がいらない。
HTML
<h1>
ようこそ<span>Progate</span>へ
↑一部を<span>で囲む
</h1>
CSS
span {
color: #ff000 ;
}
1-3 ブロック要素・インライン要素
HTMLの要素には、改行される要素と改行されない要素
ブロック要素
前後で改行が入り、親要素の幅一杯になる要素
<div> <h1> <p>要素
インライン要素
改行されない要素 <span> <a>要素
2.コンテンツの構造
HTML
<div class-"contents">
<h3>学べるレッスン</h3> ←<h3>要素
↓＜contents-item＞クラスを持つ<div>要素
<div class="contents-item">
<img src="https://...>
<p>HTML&CSS</p>
</div>
</div>
3.ボーダー
3-1 枠線をつける
・要素にボーダーを付けるには、borderプロパティを用いる
・枠線の大きさ・種類・色を指定
border
上下左右全てに線を付けたい場合
border-top/left/bottom/light
特定の場所のみに線を付けたい場合
HTML
<div class="logo1">
Progate
</div>
<div class="logo2">
Progate
</div>
CSS
.logo1 {
border: 5px solid red;
↑大きさ・種類・色
}
.logo2 {
border-bottom: 1px solid #333 ;
↑下部に線がつく
}
4.内側の余白と外側の余白
4-1 padding&margin
padding・・・borderの内側の余白
margin ・・・borderの外側の余白
HTML
<div class="logo1">
Progate
</div>
CSS
.logo1 {
padding: 10px; ←ボーダーの内側全体に10pxの余白を追加
margin: 20px; ←ボーダー外側全体に20pxの余白を追加
}
4-2 ボックスモデル
border・padding・marginはボックスモデルという概念に基づいている
4-3 maginまとめ
個別指定
.logo1 {
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
省略形①
.logo1 {
margin: 20px 10px 20px 10px;
}
省略形②
.logo1 {
margin: 20px 10px;
}
本日のまとめ
少しづつですが、要素の役割がわかってきた。
反復をすることで理解していくのが肌で感じます。もう一項目でHTML&CSS初級がおわるのでそのタイミングで学んだことを何ターンか行いながらしっかりと身につけていこうと思います。