エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

DAY2.『Progate HTML & CSS 初級編(7章まで)』 #30DAYSトライアル

DAY2.『Progate HTML & CSS 初級編(7章まで)』 #30DAYSトライアル です。

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY2.『Progate HTML & CSS 初級編(7章まで)』  

DAY2.『Progate HTML & CSS 初級編(7章まで)』  ということで、HTMLとCSSについて学びました。 

 

「Progate HTML & CSS 初級編」の感想

「Progate HTML & CSS 初級編」が全部終わりましたので感想です。

  • 動的に変更結果が表示されるので、初心者にも分かりやすい
  • HTMLとCSSを本当にひとつずつ、適切な粒度で学んでいくので良い。
  • 一部説明が不親切というか、初見殺しなところもあり(ブロック要素とかインライン要素とか)

 

あと、「ボックスモデルという概念に基づいています」という箇所なんかは、

  • なんとなくそうなんだ、と思える人
  • そもそもなにそれっていう人

に別れる気がする。

 

「HTMLすべての要素にはborderがある」と言われるのも、困る気もしました。

 

<input>要素については、この後の中級編で解説あると思うけど、突然ボタンという概念が出てきてちょっと駆け足な感じもした。

 

【追記】ボックスモデルの説明

ショーヘーさんからボックスモデルの説明を直接いただけました。

とのことです。

初心者の方は参考URLも是非見てみてください~

margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話 | アライドアーキテクツのクリエイターブログ

 

HTMLで意味がわからなかったので調べた内容メモ

HTMLで意味がわからなかったので調べた内容メモです。

 

SPANとは何か?

「SPAN」とは、単体では特に意味を持たないタグですが、<span>~</span>で囲った部分をインライン要素としてグループ化することができるタグです。

 

つまり、ブロック要素ではなく、インライン要素で、特殊に扱いたいときにつかうものてこと。

 

paddingとmarginがどっちがどっち?覚える方法

paddingとmarginってどっちがどっちだかわからなくなりそうです(英語に弱いので)

 

paddingは、「詰め物をすること、芯(しん)を入れること、芯、詰め物、(新聞・雑誌などの)埋めくさ、不必要な挿入句」

ってことで、詰め物だから内側。

 

marginは、「【商業】 元値と売り値の開き,利ざや,マージン」

ってことで、余った感じだから外側。

 

個人的な覚え方はこうですね。

  • padding → 詰め物=内側
  • margin → 利ざや=余り物=外側

 

  【関連記事】

  1. DAY1.『Progate HTML & CSS 初級編(4章まで)』 #30DAYSトライアル 
  2. DAY2.『Progate HTML & CSS 初級編(7章まで)』 #30DAYSトライアル
  3. DAY3.『Progate HTML & CSS 中級編(3章まで)』 #30DAYSトライアル
  4. DAY4.『Progate HTML & CSS 中級編(7章まで)』 #30DAYSトライアル
  5. DAY5.『Progate HTML & CSS 上級編』 #30DAYSトライアル
  6. DAY6. 『Progate HTML & CSS 初級・中級道場コース』 #30DAYSトライアル
  7. DAY7. 『Progate HTML & CSS 上級道場コース』 #30DAYSトライアル

www.engineer-step.com