エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

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

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

 

 

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

DAY2.『Progate HTML & CSS 初級編(7章まで)』
引き続きオンラインプログラミング学習サイト『Progate』( https://t.co/2CJ1eEhyiD )でコーディング(HTML・CSSでのライティング作業)の基礎を学びます!

DAY2は、初級編の7章まで終わらせてください💻#30DAYSトライアル

 

 

ってことでやりました。

WEBは未経験ですが、エンジニアなので、大体30分くらいで終わりました。

f:id:alpacajp:20190108185417p:plain

progate初級編

 

 

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

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

 

動的に変更結果が表示されるので、初心者にも分かりやすい。

 

あと、HTMLとCSSを本当にひとつずつ、適切な粒度で学んでいくので良い。

 

一部説明が不親切というか、初見殺しだな、というところもあった。

ブロック要素とかインライン要素とかね。

 

「ボックスモデルという概念に基づいています」というのも、

なんとなくそうなんだ、と思える人と、

そもそもなにそれっていう人に別れる気がする。

 

「HTMLすべての要素にはborderがある」と言われるのも、困るかもなあ。

 

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

 

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

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

 

四角い箱の中に
✅本体(widthとheightで指定できる部分)
✅padding(内側に取る余白)
✅border(外と内の境界線)
✅margin(外側に取る余白)
があり、このボックスがいくつも積み重なってWebサイトができてます。

 

とのことです。

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

 

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

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

 

 

SPANとは何か?

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

だそうな。

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

CLASSの指定ではできないからか。

 

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

paddingとmarginってどっちがどっちだかわからなくなりそう(英語的にね)

 

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

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

 

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

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

 

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

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

 

 

【関連記事】