学習ログ〜コンテンツ〜

本日の学習

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初級がおわるのでそのタイミングで学んだことを何ターンか行いながらしっかりと身につけていこうと思います。