CSSとSCSS

浪人のサムライ（旧kawa@noter）

2023年4月11日 13:51

こんにちは！

今はもう常識？

cssはscssで書きましょうと。

これ、どのように実現するのでしょうか？

今日は、初歩の初歩ということで行きましょう～。

まずはHTMLを

scssを使うにあたり、特別なHTMLを書く必要はありません。通常通りHTMLを書けば良いのです。

HTMLはこんな感じで。例えば、index.htmlに書くとするとです。

<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="css/style.css">  
  <title>test</title>
</head>

<body>

<h1>テスト</h1>
  
</body>

</html>

1つだけポイントがあるとすれば、cssのパスをちゃんと通すこと。通常はcssフォルダを作って、そこに保存するかと思います。そして、トップページ、すなわち「index.html」でパスを通します。

上のコードで言うと、index.htmlから見て、CSSを指定しています。こんな感じですね。

index.html→css(フォルダです）→style.css

cssを格納するフォルダ名は好きなモノで良いですが、日本語はNGだと思うので、英語にしましょう。大概はcssフォルダを作るかと思います。

そしてCSSのファイル名を指定します。フォルダ同様、名前は何でも良いですが、多くの場合、「style.css」と名付ける場合が多いかと思いますが、好きな名前を英語で付けましょう。

なお、例えば、「style.css」と付けた場合、パスも同じファイル名にしましょう。

<link rel="stylesheet" type="text/css" href="css/style.css">

上の場合、「style.css」と付けたので、「href」のところを「style.css」と指定しています。そして、CSSフォルダに保存しているので、

href="css/style.css"

となるのです。

これでHTMLファイルの記述はおわり。あとは、ここでは「style.css」にしますが、cssをガンガン書いていきます。

CSSが効かない場合

CSSが効かな場合、だいたいはCSSのパスへの通し方です。先ほど、こんな事を書きました。

<link rel="stylesheet" type="text/css" href="css/style.css">

herfのあとのパスが異なるとCSSが効きません。なので、パスが通っているか確認しましょう。

SCSSはどうする。

SCSSはCSSの進化版ですが、「コンパイル」という作業が必要です。すなわち、SCSSをいくら書いても反映されません。

scssをCSSに変換。すなわち「コンパイル」が必要なのです。このコンパイルをどうするかって話ですが、vscodeとドリームウィーバーで確認済みです。

vscodeはプラグインのインストールが可能です。ドリームウィーバーは有料のため、個人的にはvscodeをオススメします。vscodeを使う場合、プラグインは、Live Sass Compilerなどで可能です。くわしくはネット検索してください。

ちなみに、筆者はドリームウィーバーを使っています。有料ですが中々便利に使えております。

ドリームウィーバーは有料なので、まずはvscodeで試してみることをオススメします。

style.scssを読み込む必要はない

scssは、たとえばstyle.scssに書くのですが、コヤツを読み込む必要はありません。

先ほど、scssはコンパイルが必要だと書きましたが、コンパイルするとsty.cssに反映されますので、scssを読み込む必要はないのです。

なので、上で書いたように

<link rel="stylesheet" type="text/css" href="css/style.css">

と書くだけです。コンパイルが上手くいかない場合、scssとcssファイルが連動していないので、お使いのエディターの設定をご確認ください。

なお、コンパイルできるエディターにしてください。そうじゃないと、いくらSCSSを書いても反映されませんので。

さいごに

これから少しずつですが、css系の記事を書いていきたいと思っています。筆者は、ちょっと話がそれますが、PythonとFlaskについて学びました。そのとき、初心者向けの記事が少ないため、とても苦労しました。

なので、cssでも同様のことが起きているだろうと判断。今後、初心者向けにcss系の記事を書いていきたいと思います。

おわり！