当サイトはアフィリエイト広告を利用しています

【デイトラ1st 6日目感想】HTML & CSS 道場コース初級中級編【30DAYSトライアル】

f:id:osanaiyuta0321:20200208195958j:plain

 

【30DAYSトライアル1st DAY6.】
Progate HTML & CSS 道場コース初級中級編

5日目で慣れてきたぜ!と思って調子に乗ってたら、全然覚えてなくてヒーヒーでした。 初級だけで2時間…。CDかけながら歌ってたらいい感じだったのに、カラオケで歌ったら全然ダメだった感じと似ています。精進します。

 

 

実際に使ったhtml&cssコードとメモ

・HPの基本htmlメモ

<html>


 <head>◯◯◯</head>


 <body>

 <div class="header">
  <div class="header-logo">◯◯◯</div>
  <div class="header-list">
   <ul>
    <li>◯◯◯</li>
    <li>◯◯◯</li>
    <li>◯◯◯</li>
   </ul>
  </div>
 </div>

 <div class="main">
  <div class="copy-container">
   <h1>◯◯◯</h1>
   <h2>◯◯◯</h2>
  </div>
 </div>


 <div class="footer">
 ◯◯◯
 </div>


 </body>
</html>

 

・それぞれの<li>に指定しないと全部の<li>にcssがかかってしまう

 

・paddingとmarginはどちらも余白を調整するもの。ボックスモデルを理解するとわかりやすい。

内側から順に

 

①要素(文字や画像)

②padding(要素の余白)

③枠線

④margin(枠線の外側の余白)

詳しくはこちらのサイトから。

 

・先にHTMLを書き上げてからCSSで装飾するイメージ

 

 

関連記事

デイトラ1st日記まとめ

30DAYSトライアル公式サイト

 

オススメ記事