【奮闘記】VScodeでHTML/cssを始めた。cssが反映されなかった件について。
目次
- 突如仕事は訪れる
- VScodeの拡張機能を入れるよ
- HTMLとCSSを作る。そもそもVScodeってどうやって使うの?
- まずはHTMLから!
- CSSの作成
- HTMLとcssを反映させるよ
- なぜかcssが反映されなかった
突如仕事は訪れる
学校の先生から「テストをwebで受けれるようにしたいから、やってみない?」と提案。
ほぼweb制作したことなかったけど、いつかはやりたいなと思っていたからいい機会だし受け入れてみた。
なお、MACでの操作前提のお話になります。
自分の備忘録用でもある。
VScodeの拡張機能を入れるよ
まず、参考にしたのがこちら
しかしうまくプレビューされないので、プレビューのみこちらの記事を参考にしました。
開発環境はこれでOK
HTMLとCSSを作る。そもそもVScodeってどうやって使うの?
VScode初心者なので、どう使うのかすら謎でした。
まずは[command + N]で新規ファイルの作成(この時点では『Untitled-1』って名前)
続いて[command + S]でファイルの保存(『 ~~.html』『~~.scc』として保存)
こうするとどうやらHTMLとcssが作成できるみたいですね。
まずはHTMLから!
作成したHTMLファイルにて、『!』と入力して[tab]キーを押す
すると雛形がパッと現れます・・・!嬉しい・・・!
bodyの部分に試しに何かしらの文字を入れてプレビューしてみましょう。
[command + K]の後に[V]
順調順調
[command + S]で保存。
CSSの作成
せっかく表示したのでHelloWorldの色を変えようと思います。
p {color : }からのカラーコードを入力しようとしたら・・・
!?便利すぎる。感動した。
[command + S]で保存。
HTMLとcssを反映させるよ
HTMLファイルの<head>の中身に
と入力するとcssと対応付けられます。(hrefの中身は自分で変更)
わーいできた
なぜかcssが反映されなかった
このブログを書く前、linkを入力してもcssが全く反映されなくて泣くかと思った(30分間)
なぜされなかったのか・・・保存をしていなかった!
普通に、凡ミス。