デイトラ1期 DAY2『Progate HTML & CSS 初級編(7章まで)』【30DAYSトライアル1st】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

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

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

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

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

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

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

 

たとえば「ボックスモデルという概念に基づいています」という箇所は、

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

に別れる気がしますね。

 

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

「要素」については、この後の中級編で解説あるはず。

 

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

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

とのことです。

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

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

 

【デイトラ学習記録】HTMLで意味がわからなかったので調べた

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

SPANとは何か?

「SPAN」とは、単体では特に意味を持たないタグ。

しかし、<span>~</span>で囲った部分をインライン要素としてグループ化することができます。

つまり、ブロック要素ではなく、インライン要素として使いたいときに頻繁に使われるものということですね。

 

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

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

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

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

 

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

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

 

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

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

 

自分なりの覚え方をすることが重要ですね。