Neet is get Money! LOL

育児とマインドセットに役立つ情報を発信しています

ヘッダーでわからん。

模写コーディングをやってみた

うん、ヘッダーでわからん


最初の段階でつまずくのだ。


まず、ヘッダートップの右と左。の間隔を統一して

中央揃えにしたいのだが、


やり方がわからない。


いや。
margin-right: auto;
margin-left: auto;
だと思ったんだけど違うみたい。

一応widthも幾つかpx入れて調節しようと思っても反映されない。

横並びはわかってきた。いつしかの

某ドーナツ屋の模写コーディングでは

大変頭を悩ませた。



floatタグをつけて右に指定しても。

そこのテキストとテキストの間に空間を入れたい。

画像と画像の間に空間があるため。

間隔を開けたい


だが、無理だ、、


floatお前じゃ無理なんだよ…




たぶん、やり方はあるのかもしれない。


今、ちょっと検索したけど



float、お前結構奥が深いんやな…。



で、ちなみに、私が見つけた解決だが、


display: flex; することで横並びになった。

ちなみに、空間?


文字と文字との間に間隔を開ける方法なんだけど


よくわからん。


前回、前前回や太郎のポートフォリオ


これはドットインストールという一部無料で教えてくれる

プログラミング学習動画サイトの学習の産物なのだが。
太郎のポートフォリオ



そう、この画像、

この画像が太郎のポートフォリオだ。



この画像では「吹き出し」と「カメラ」の間に空間があるはずだ、

だがCSSでする前は
[太郎のポートフォリオ空間




上の画像のようにくっついているのだ。


これをなくしたい。

これをやめたい。


では、私はどうしたか?



色々調べた

調べに調べた。

だが、解決はしなかった。


そして、

デロッパツールを開いて

margin、padding、borderの欄があるのだが、



そこを見て気づいた





padding入れたらいんじゃね?







そして私は適当にpaddingを入れた。







なんと!





吹き出し」と「カメラ」




その間に






空間が生まれたのだ!!






もう私の頭の中では



拍手喝采

拍手








だが、今回も模写コーディングをやってみたのだが。



なぜか、空間が生まれない


そして。右によってもくれない。



挙げ句の果には




横並びにしていたヘッダーが



縦になったりして



WTF!!!



と心が叫びたがってるんだ




あ、うん、叫んではないよ。



めっちゃ調べてた。




あ、そうそう。




レスポンシブのことについてなんだけど




急に思い出した。



で。



レスポンシブのことなんだけど



全くやってないです!!



(*´∀`*)えへ




まあ。やってないってのはコードを書いてない



っていうこと



一応、さすがYouTbeさんというべきか。




動画たくさん、あったね。


色々、動画を見て回ったのだが



んー、如何せん解りづらい



あの時と同じだわ。


Bootestrapのときと


なんで、わかるようになったか考えたんだけど



その人の動画は見づらかったけど。



理解は出来た。




で、その人一緒にコードを書きながら説明してたわけ



つまり。我々視聴者と同じ目線に立ってたわけだね。


だからわかりやすいんじゃないかなと思った。


プログラミングの人達ってよくも悪くも


いい感じに見せるのは得意なんよ。

あんま身にならないけど。



いや、これまじで。


これがこうなります



って言葉で説明されてもわからない。



聞いたものを想像で補わないと行けないってこと



で、挙げ句の果てには自分で調べてください


だから。


いや、調べてこの動画見てるんですけど


って言いたい人もいるんだよ。




私はさすがにそこまで思わないけど





想像で補うのがどう難しいかを
みんなが簡単に経験出来るように


私は考えた。


そう、国民的アニメの原作の情景を文字で起こしてみよう、と


是非当ててみて欲しい
名前を出すと一発でわかる作品なので
キャラクター名は伏せてます





正月休み、少年は。1人、部屋で横になりながら餅を食べていた。
すると、どこからともなく声が聞こえてきた

「少年は30分後に首を吊る」

少年は突然、不幸な出来事を言われ
いきなり言葉に思わず、飛び上がる。

少年は部屋の辺りをくるくると見渡している

だが、部屋にいるのは自分1人だけ


すると、机の引き出しがゴトゴトと動き出した。

少年は気になって近寄ると、引き出しが勢いよく空き
青いロボットが出てきた。







まあ、簡単かもしれない。


が、


実際のイメージとは違うことに気づきを得るはずだ。


答えはこのURL飛んだ先だ。
https://shogakukan.tameshiyo.me/4091400019?page=7






そう、ドラえもんの一話だ。
私はこう解釈して小説風に書いたが。


だが、描写を見せたほうが圧倒的に

わかりやすい。人間の情報の90%は視覚だ。


この視覚情報を有利に活用出来るのが


動画のはずなのに。

それをやってない人が多かった。


私がバカってのは否定しないが。


同じ目線で動画を作ってほしい。


いっそ私が作ってやろうか。


そう、ただ、教えるんじゃない。

それじゃあ、学校の教師と変わらない。


まあ、そんな文句をたれても私の身には結局ならないので


とりあえず、なにからしていいかわからないが。

レスポンシブを1週間か2週間

実践してみようと思っている。