白うさぎのIT学習帳

医療IT科の学生が奮闘していく日々

【奮闘記】VScodeでHTML/cssを始めた。cssが反映されなかった件について。

目次

 

突如仕事は訪れる

学校の先生から「テストをwebで受けれるようにしたいから、やってみない?」と提案。

ほぼweb制作したことなかったけど、いつかはやりたいなと思っていたからいい機会だし受け入れてみた。

なお、MACでの操作前提のお話になります。

自分の備忘録用でもある。

 

VScode拡張機能を入れるよ

まず、参考にしたのがこちら

qiita.com

しかしうまくプレビューされないので、プレビューのみこちらの記事を参考にしました。

rui-log.com

 

開発環境はこれでOK

 

HTMLとCSSを作る。そもそもVScodeってどうやって使うの?

VScode初心者なので、どう使うのかすら謎でした。

まずは[command + N]で新規ファイルの作成(この時点では『Untitled-1』って名前)

続いて[command + S]でファイルの保存(『 ~~.html』『~~.scc』として保存)

こうするとどうやらHTMLとcssが作成できるみたいですね。

 

まずはHTMLから!

作成したHTMLファイルにて、『!』と入力して[tab]キーを押す

すると雛形がパッと現れます・・・!嬉しい・・・!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>

 bodyの部分に試しに何かしらの文字を入れてプレビューしてみましょう。

 
<p>試作</p>

 

[command + K]の後に[V]

f:id:Siro-On:20190704110310p:plain

順調順調

[command + S]で保存。

 

CSSの作成

せっかく表示したのでHelloWorldの色を変えようと思います。

p {color : }からのカラーコードを入力しようとしたら・・・

 

f:id:Siro-On:20190704110519p:plain

!?便利すぎる。感動した。

[command + S]で保存。

 

HTMLとcssを反映させるよ

HTMLファイルの<head>の中身に

<link rel="stylesheet" href="cssのファイル名">

と入力するとcssと対応付けられます。(hrefの中身は自分で変更)

 

f:id:Siro-On:20190704111153p:plain

わーいできた

 

なぜかcssが反映されなかった

このブログを書く前、linkを入力してもcssが全く反映されなくて泣くかと思った(30分間)

なぜされなかったのか・・・保存をしていなかった!

普通に、凡ミス。