ハジメテのCSS〜背景と余白〜
<h1>Hello World!</h1>
今日はやたらと作業が捗ったので、記録しておきたい気分。
それと、早速方針変更した。ので書いておこう。
本に従って進めていこう！と思って三分の一くらいまで進めたはいいのですが、
なるほどね！うん！あーね！ってコードの意味を理解できるのはいいけど、「これ、実践できるのか自分？」
ってなって来て、やっぱり作りたいものが先にあって、それに向かってググりながら、本で引用引きながらやったほうが、覚えられるのでは？？となり、今日からこれを使っています。
これが、めちゃくちゃに便利・・・・！CSSとHTMLとJavascript、それぞれコードが打てて、それがすぐさまプレビューを脇で見ながら作業できるという優れもの・・・・！だし、それぞれコードが保存できるので、達成感を感じるのにも良さそう・・・・！
こちらのお題を参考に色々作って見たよ〜〜〜
主に2つ学んだので以下にば！
１▶︎余白
マージン？？ん〜〜聞いたことあるけどな〜〜ん〜〜という状態だった私。
図を見れば理解しやすい〜！
余白には2種類あって
margin＞文字の周辺
padding＞内側の余白
だと。
このサイトがわかりやすい〜〜
1pxってどんなもんだろーか？？と少しずつ値を変えながらちょうどいい間隔を探していきました。もう少し練習していこう〜
2▶︎背景
文字などを置く背景！は以下のようなタグを使って見た〜〜
background-size: 50px 50px;
background-color: #ffff;
background-image: url("~~~~~");
透過加工とかもできて楽しい・・・！
Keynoteとかで作れば一発なのに、コードで作ろうとするとめちゃ大変・・・。だけど、思うような形が出来上がるとめちゃくちゃ嬉しいし楽しい〜〜〜〜🐼
最終的にこんなのができた。
これは、このオシャサイトを模写してくようなイメージで作っていきました〜
（画像とかは適当だけども）
かっこいいサイトの文字と画像の配置を真似することを繰り返していくのがいい練習になりそうで、ワクワクしている・・・・・！模写好きぃ
10を目標に模写していくぞ〜〜〜〜お〜〜〜
初めてのことを学ぶと毎回思うけど、楽しい・・・！
わからないことをわかろうとしてわからないことが増えていく感覚、私は好きです。私はね、、、。
