HTML/CSS学習のためのエクステンションガイド

HTML&CSSは、Web制作や開発において必須なものといえる。Web系の学習するのであれば覚えておいて損はない。HTML＆CSSだけでも、Webサイトは制作できるが、併せてPHPやJavascriptなどのプログラミング言語も覚えておくと、動的なサイトやデータベースと連携したサイトを作ることができる。今回はHTML&CSSのみとした。

前記事「プログラミング学習のための環境を作ろう」を読んでおり、学習環境の準備ができていることを前提としている。まだ、読んでいない方は、必ず読んでおいていただきたい。

環境

Linux mint 20.3 MATE Edition
Visual Studio Code 1.66.2
Live Sass Compiler 3.0.0 preview
Live Server 5.7.5
CSS Peek 4.2.0
Indent-Rainbow 8.3.1

エクステンションガイド

HTML&CSSおよびSassの学習に必要な拡張機能の使い方と設定について紹介する。

Live Sass Compiler

この拡張機能は、Sassで記述された.scssファイルを.cssファイルへコンバートしてくれる。CSSはHTMLと較べてファイルが大きくなりやすく、記述も冗長になったり、同じ指定を何回も指定することがあり、コードの保守性や視認性を悪くしている。そのため、修正ミスを起してしまうこともある。できるだけこれらを防ぎ、コーディングのしやすさからSassで記述するのが一般的である。

しかし、Sassで記述するかどうかはCSS設計の段階で決めるとよい。何がなんでもSassで記述しなければならないというわけではなく、CSSのファイルが大きくなればなるほど、Sassの有用性が出てくるので、このあたりを検討して決定するとよいだろう。比較的小さければSassで記述しなくても問題ないのである。

なお、Sassで記述された.scssファイルはそのままで使用することができないために、.cssファイルへコンバートする必要がある。Live Sass Compilerは、.scssファイルを.cssファイルへリアルタイムでコンパイルしてくれる拡張機能のひとつだ。ほかにもあるので、気に入ったものをインストールするとよいだろう。

使い方

とくに使い方というものはない。インストールさえしていれば、.scssファイルまたは.sassファイル保存時に.cssファイルへ勝手にコンパイルされる。ただし、設定がデフォルトのままだと、.scssファイルがある同じ階層に.cssファイルが作られてしまう。そのため、コンバートされた.cssファイルをcssフォルダに入れたい場合は、きちんと設定する必要がある。

設定

Live Sass Compilerの設定内容は非常にシンプルである。

設定内容は次の３項目だ。

設定項目	設定内容
format	expanded \| compact \| compressed \| nested　デフォルトはexpanded
extensionName	.css \| .min.css　デフォルトは.css
savePath	scssファイルがある場所から、cssファイルを保存する場所を相対指定する。デフォルトはnull

表.１ Live Sass Compilerの設定

これらをsettings.jsonに記述する必要がある。実際にやってみよう。

下図のように順番に選択していき、設定アイコンをクリック、表示されるコンテキストメニューから[拡張機能の設定]クリックする。

最初に拡張機能を選択し、２番めにLive Sass Compilerの設定アイコンをクリック、表示されるコンテキストメニューの一番下にある[拡張機能の設定]をクリック — Live Sass Compilerの設定

一番上のLive Sass Compiler > Settings: Autoprefixの[settings.jsonで編集]をクリックして、setting.jsonを開く。

Live Sass Compilerの設定でsetting.jsonで編集をクリックする — settings.jsonで編集

編集画面が開いたら、｛｝の中に次のコードを記述していく。

    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        }
    ]

記述し終わったら、保存して編集画面を閉じ、設定画面も閉じて実際に動作するか確認してみよう。

まず[ファイル]→[フォルダを開く]から前記事の「プログラミング学習のための環境を作ろう」で作成しておいたsiteフォルダを開く。次にscssフォルダ内にstyle.scssという空のファイルを作成してSassで記述する。

ul {
  margin-top: 1em;

  li {
    padding:10px;
    color: Green;
  }
}

このファイルを保存すると、cssフォルダ内にstyle.cssとstyle.css.mapの２つのファイルがcssフォルダに作成されてるのがわかるはずだ。

.cssファイルが作成されない

settings.jsonに記述した内容に間違いがないか確認する
Ctrl+Sift+@でターミナルを開き、出力タブをクリックして、変換先を確認する（一度保存しなおす）

Change Detected...
style.scss
--------------------
Generated :
/mnt/callisto/learn/site/css/style.css
/mnt/callisto/learn/site/css/style.css.map
--------------------
Watching...
--------------------

Live Sass CompilerがWatchingモードになっているか確認する（上図の青いバーのところに（見にくいが）Watching…と表示）表示されていない場合は、Ctrl+Shift+Pでパレットを開き、Live Sassと入力すると、一覧が表示されるので、[Live Sass: Watch Sass]をクリックする。

Live Server

Apacheがインストールされていなくても、.htmlファイルに変更（保存）があったとき、デフォルトブラウザを起動して内容を表示してくれる。cssファイルに変更があっても反映される。たとえば、h1のタグの文字色を変更したといった場合である。ただし、JavascriptやPHPには対応していないので注意が必要である。

使い方

Alt+L、Alt+Oと押して起動する。

設定

不要

CSS Peek

いちいち.cssファイルを開かなくとも、.htmlファイル上でCSSもしくはSassファイルの変更が行える。優秀な拡張機能のひとつである。.scssファイルにも対応している。つまり、.scssファイルの内容を変更して保存すると.cssファイルにも反映させることができるということである。なお、設定する項目もあるが、設定しなくとも問題がないはずである。必要になったら設定すればいいだろう。

使い方

Class名をクリックして、次のいずれかの操作をする。

Ctrl:
　Ctrlキーを長押しすると、Class名の下に下線が表示され、適用されているCSSが表示される。
　表示されるのは、適用しているCSSがひとつのみである。複数ある場合は表示されない。

Ctrl+Shift+F10 / Ctrl+Click:
　説明ではF12となっているが記述ミスである。適用されているCSSが表示されて編集も行える。
　Ctrlキーを長押しした状態でクリックしても同じことが行える。一番使用頻度が高い。

F12:
　CSSファイルを開いて、該当するCSSへカーソルが移動した状態で表示される。

.scssファイルを変更した場合は、[ファイル]→[すべて保存]とすること。.cssファイルがない場合も同じである。そうしないと、反映されない。

CSS PeekでCSSファイルを編集することができる — CSS PeekでCSSを編集

設定

不要

Indent-Rainbow

インデントを色付けしてわかりやすくしてくれる。一見なんでもないような機能だが、タグごとにインデントして記述する場合は、開始タグから終了タグまでをわかりやすくしてくれるので、入れておいて損はない。

使い方

インストールのみ。

Indent-Rainbowを導入すると、インデントを色付けしてくれる — Indent-Rainbowによるインデントの色付け

設定

不要だが、インデントの色を変更したい場合は設定を変更しよう。Ctrl+,で設定画面を開き、検索欄に「indent-rainbow」と入力する。Indent Raibow: Colorsのsetting.jasonで編集をクリックする。下記のコードを任意の位置に記述する。一番外側の{}の外に記述しないこと。

インデントの色を変更してみた。保存したら、Visual Studio Codeを再起動する。ちなみに、1個しか書かない場合は、インデントの色がすべて同じになるので注意が必要である。下記では４つのインデントまで指定している。５つ目は最初の色になる。基本的に４個あたりまで色を指定しておくといいだろう。もとに戻すには、ブロック丸ごと削除する。

,
"indentRainbow.colors": [
        "rgb(252, 175, 62)",
        "rgb(252, 233, 79)",
        "rgb(138, 226, 52)",
        "rgb(114, 159, 207)"
],

最後に

では、よいプログラミングライフを！

環境