プログラミング

30DAYSトライアル【2日目】HTML&CSSの入門編の最後まで

30DAYSトライアル 2日目のアイキャッチ

こんにちは!偉人ハックブロガーのカズせん(@kazusen5)です。

30DAYSトライアルの2日目、スタートします。

参考:WEB制作で月5万円稼ぐために!30DAYSトライアル【まとめ・随時更新】

30daysトライアル まとめのアイキャッチ
WEB制作で月5万円稼ぐために!30DAYSトライアル【まとめ・随時更新】こんにちは!偉人ハックブロガーのカズせん(@kazusen5)です。 Twitterを見ていたら、このようなツイートを目にしました...

 

 

2日目の課題 【Progate HTML & CSS 初級編(7章まで)】  

2日目の課題は、『ProgateのHTML & CSS 初級編(7章まで)』でした。

やってみた感想としては、以前にProgateで習った範囲なので、まだまだ大丈夫って感じでしたね。

むしろ久しぶりにやってみることで、「これこれ!」と記憶の定着を感じることができて楽しかったです。

ツッコミウルフ
ツッコミウルフ
やっぱ勉強って久しぶりにやったら記憶が定着するな

カズせん
カズせん
重要な概念のBOXモデルなんかも、今やったらスッと入ってきた

 

 

2日目の忘備録

以下からは、分かりにくいであろうポイントを忘備録も兼ねて解説していきます。

 

BOXモデル〜paddingとmarginとborder〜

中身とpaddingとmargin、そしてborderによって作られるBOXモデルは、以前Progateをやったときはマジでよく分かんなかったんですよね。

ツッコミウルフ
ツッコミウルフ
正直ほっといてたな

カズせん
カズせん
今やってみたら分かったぞ

BOXモデルについては、ショーへーさんも説明してくれています▼

BOXモデルを理解するには、まずはpaddingとmarginの腑に落ちる区別から入った方が良さそうですね。

たとえばmarginには、日本語だと「手数料」なんて意味があります。

ツッコミウルフ
ツッコミウルフ
「マージンを取る」とかな

『追加の上乗せ』的な言葉だから『外側』。

 

対するpaddingは、「詰め物」って意味があります。

だから『内側』

 

そしてBOXモデルを漫画風い解説したのが以下です▼

30DAYSトライアル 2日目 BOXモデルの解説 30DAYSトライアル 2日目 BOXモデルの解説 2 30DAYSトライアル 2日目 BOXモデルの解説 3 30DAYSトライアル 2日目 BOXモデルの解説 3 30DAYSトライアル 2日目 BOXモデルの解説 4

 

ポイントは、BOXモデルが並べられてWEBサイトが作られていると理解することです

30DAYSトライアル 2日目 BOXモデルの解説 5
ツッコミウルフ
ツッコミウルフ
BOXモデル、大事っぽいな

カズせん
カズせん
WEB制作するならマストだね

ABOUT ME
カズせん
元コメディアンブロガー&WEBライター。偉人たちの知恵や仕事術や習慣を現代のツールと組み合わせて次世代のHACKを作り出すことに精を出す20代。
smoothing: antialiased;