30DAYSトライアル VScode お勉強 ツール

【デイトラ】試行錯誤のHTMLとCSSの巻【30DAYSトライアル DAY9】

30DAYSトライアル

こんなんすぐ終わるわ楽勝~とか思ってたのに普通に1時間ぐらい掛かりました。

【VScode】windowsでのキーボードショートカット

ショートカット集は印刷して手元に置いておくことにしました!すぐ見れるように!

windowsでキーボードショートカット見るときはココ!↓

windows キーボードショートカット VScode

HTMLとCSSを作成して文字と画像を表示

普通に「HTML 書き方」「HTML CSS 読み込み」とかで検索したわ(笑)。
学生の頃、今と同じようにテキストベースでコードを打って、初めて画面に表示させたことを思い出しました。

ファイルパス~フォルダの構成~

practice
│ index.html
├─css-test.css
└─img-test.png

最初なんにも気にせずこういう風に↓していたのですが、

ファイルパス フォルダ 構成 階層
これが↓正解だったのですね

ファイルパス フォルダ 構成 階層
フォルダ構成の横棒の意味に気づきませんでした。。

↓めちゃくちゃわかりやすかったです!感謝...!↓

HTMLとCSSの基礎のキソ

<head>や<body>を忘れていて、htmlのソースコードがまんまブラウザに表示されてしまったのほんと恥ずかしいわ。
Progateでお前は何をやってきたんだ。

あとファイルの保存方法。
ブラウザ設定のつもりがテキストファイルになってたみたいで。
(CSSファイルも...)

html 保存 形式

これで無事表示することができたー...

と思ったら今度はCSSファイルが適用されず。
HTMLでのファイルパスミスってました。。

HTML CSS ファイルパス

テキストファイルでHTMLとCSSファイルを作るときに確認すること

  • 文字コードがUTF-8か
  • テキストファイル形式で保存されていないか(htmlはhtmlファイル形式、cssはすべてのファイルで保存)
  • htmlはちゃんとbodyタグなどで囲まれているか
  • 画像やcssを読み込むパスは間違っていないか

-30DAYSトライアル, VScode, お勉強, ツール
-, ,

© 2021 文系女子とプログラミング