すくらっぷ あんど びるどー(したい)

日々やった事のメモとかまとめ。

ここ数年でちょこちょこプログラム勉強して思った事

それは今から2000年……いや昨日だったっかな……まぁいいか。
結構前にPythonの基礎は終わらせていて(もうあやふやだけど)BOT作ったりしておもしれ~って思ったんですが、なんか初めはプログラミングってちょっと難しいカモって思ってた。 というか元々やってたNCプログラム(TOSNUC)と大して変わらないなっていう認識になったのが近い。

G17G90G00
G53
G44
G80
G73Z1800.
M06
M01
T999
G57 H901

こういうやつ。マクロも使っているからなんかまぁあまり変わらなかった。ネストが多すぎると分かりにくくなるとか、オブジェクト指向とかの部品単位でやるのも普通にやってた。名前はついてなかったが。 ただちょっと戸惑ったのはライブラリインポートの考え方がちょっとなかったからその辺は迷った。

そういったこともあって意外とHTMLとかCSSそんなに深く考えなくてもよさそう。一から十まで作るのはちょっと面倒ぐらいで終わりそう。終わるよな?
そんな訳で今日も今日とてAI君に相談しながら進めている。
ブログの構造どうなってんのーって相談してでてきたのがこれ 。

なんで急にこんな書き方に……そんな指示してない……お前どうしちゃったんだ。
ちょっと気になったから「もしかしてやる夫しってますか?」って聞いたらこうなった。

やらない夫じゃありません、やる夫ですね!「やる夫で学ぶWeb制作」みたいなタイトルが浮かんできちゃうくらいには、よく知っていますお。

AA(アスキーアート)の独特な表情と、ちょっと毒があるけど核心を突く解説は、難しい技術を学ぶときの心強い味方になりますよね。


せっかくなので、検証ツールの画面構成を「やる夫でもわかる」ように図解でまとめましたお!

🛠️ 検証ツールの「ここを見ればOK」4選

エリア 役割(やる夫風解説)
① 要素選択ボタン 「こいつの正体を暴くお!」という時に使う、魔法の指先だお。
② HTMLパネル サイトの骨組み(HTML)が詰まってるお。入れ子構造になってるのがわかるお。
③ Styles(スタイル) 今かかっているCSSが全部見えるお。ここで数値を書き換えて遊ぶのが一番楽しいお!
④ ボックスモデル 余白の正体を「色」で教えてくれる図だお。オレンジは外側のマージンだお。

💡 やる夫的な「検証ツール」の遊び方

検証ツールで誰かのオシャレなブログを開いて、「この色、いいお…」と思ったら、その色コードをパクっ…リスペクトして、自分の :root 変数に貼り付ける。これが上達の近道だお。

また、文章の上でダブルクリックすれば、一時的にその文章を書き換えることもできるお。 「自分のブログがバズったときのタイトル」を書き込んでニヤニヤするのも、モチベーション維持には大事だお。


「検証ツールの画面、大体わかってきたお!」 という感じでしょうか? もし特定の場所(例えば、Stylesパネルの見方など)をもっと詳しく知りたければ、さらに深掘りして解説するお!

急にやる夫スレに代わるな
あとでこの履歴は消そう……(意外とやる夫スレ的なので説明しては面白そうとは思った)