幸せになりたいけど 頑張りたくない

実家暮らしアラサー女のブログ。「言語化能力を鍛えるため」という大義名分で更新されるが中身はくだらない。たまにコスメ・映画レビュー。

【プログラミング】文系Fラン大卒女(30代)が一から勉強して月5万稼げるようになるか?【26日目】

どうもこんばんは。日に日に勉強のやる気を失くしています。でもやりますよ。

さて今日はマナブさんの記事に貼ってあった記事を2本読みました。

manablog.org

2本ともデベロッパーツールの使い方についての記事です。動画で見た内容をおさらいした感じですね。2本ともイラストや画像をたくさん使っていて、テキストベースといえど非常にわかりやすかったです。事前に動画見てたのも大きかった気がします。動画見てからだとすんなり理解できるって実感できました。多分最初にこの記事読めって言われてたら、チンプンカンプンで放り出してた気がする。初めて知ったこともあるので、まとめ。

www.webcreatorbox.com

saruwakakun.com

 

デベロッパーツール起動のショートカットキー:Ctrl + Shift + C

Ctrl + Alt + I は覚えていたのですが、こちらのショートカットキーでも開けました。これだと片手で押せるからいいですね。Ctrl + Alt + I だと I が遠くて手首一回転しそうになるんで、ちょっとやってみてください。

 

・数値は↑↓キーでもいじれる

paddingとか数値を指定するところ、いちいち数字を消して入力し直さないといけないと思ってました。地味にめんどくさいので、数字まわりはほとんどいじってなかったんですよね。こういう手間が省けると大分ラク。ありがたい。

 

・変えたいところを右クリック→「Edit as HTML」でまるっとHTMLいじれる

正直デベロッパーツールの入力、ちょーっとだるいなーと思ってたんですよ。これだと入力窓みたいなのができて、めっちゃ入力しやすい。なのでちょっと遊びました。

f:id:almostcinefil:20200831201434p:plain一番上に貼ったマナブさんのサイトで、自分の心情を率直に書いてみました。このままだと私が入力したところだけ文字の太さと色が違うので、

f:id:almostcinefil:20200831201559p:plain

マネしたいところのCSSを見て編集しました。できたのちょっとうれしい…!

 

ここのところ座学というか、見て・読んで勉強するというステップだったのであまり手を動かしていなかったのですが、いよいよ次のステップは「レスポンシブサイトを作ってみよう」ですよ。しかも英語!

マナブさんの記事にも「ここで挫折者が増えるかもです」ってあるし、挫折の臭いがぷんぷんしやがるぜ…