スポンサーリンク
安心保証付き・パソコン工房の中古パソコン

Visual Studio Code入門②HTML・CSSコーディング編

スポンサーリンク
Visual Studio Code
2022.09.04
スポンサーリンク
スポンサーリンク

今回から、Visual Studio Codeを使用して、様々なプログラム言語でのコーディングについて、見ていきます。最初は、HTML、CSSのコーディングについて、見ていきます。

HTML、CSSのコーディングを行うための手助けとなるのが、Emmetと呼ばれる拡張機能です。Visual Studio Codeでは、Emmetは最初からONになっており、特別拡張機能を別途インストールせずに利用できます。

スポンサーリンク

Emmetとは

Emmetとは、HTML、CSSを省略記法で入力することができる機能です。

例えば、

main.class1

のように入力し、EnterあるいはTabを押すと、次のように展開されるため、コーディング速度の大幅な向上が期待できます。

<main class="class1"></main>

Emmet利用時のVS Code設定

Emmetを利用する際、VS Codeの設定を、１つ変更しておくと、便利です。

VS Codeの設定を変更するには、次のように操作します。

画面左下の歯車アイコンをクリックします。

設定アイコン
設定メニュー

上記のポップアップメニューが開くので、「設定」を選択すると、ウインドウに次の画面が表示されます。

ここで、拡張機能の左にある＞をクリックし、メニューを開きます。

ここで、①Emmetの項目をクリックし、②表示されるウィンドウで、Preference→「Settings.jsonで編集を選びます。

settings.jsonの編集画面が開くので、次の項目を追加します。

    "emmet.variables": {
        "lang": "ja"
    },

この設定を追加しない場合のデフォルトのEmmet動作では、！に続くTABあるいはEnterで、以下のHTML5の雛型を出力します。

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

</body>
</html>

2行目の<html lang=”en”>は、通常enをjaに書き換えますが、これを初めからjaとする設定です。enをjaと毎回書き換えるだけと思われるかもしれませんが、書き換えを忘れるかもしれませんので、初めからjaを出力するようしておくといいでしょう。

EmmetでHTMLコーディング

省略文字を入力して、EnterあるいはTabを入力することを、以降Emmet展開すると呼ぶことにします。

タグ

HTMLファイルで、タグ名のみを入力して、EnterあるいはTabを入力すると、タグを出力することができます。

例えば、divと入力し、Emmet展開すると、

<div></div>

pと入力し、Emmet展開すると、

<p></p>

などです。

HTML5の雛型

！を入力し、Emmet展開すると、下記のようにHTML５の雛型を出力することができます。

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

</body>
</html>

タグにクラス名付与

タグ名.クラス名でEmmet展開すると、タグにクラス名を付与して出力することができます。

例えば、div.boxと入力してEmmet展開すると、次のように出力されます。

<div class="box"></div>

タグ名がdivの時だけ、タグ名を省略して、.boxように入力してEmmet展開することにより、同じように出力することができます。

タグにidを付与

タグ名#idでEmmet展開すると、タグにidを付与して出力することができます。

例えば、header#topでEmmet展開すると、次のように出力されます。

<header id="top"></header>

タグにクラスとidを両方付与する

タグ名.クラス名#idでEmmet展開すると、タグにクラスとidを両方付与して出力することができます。

例えば、main.content#detailでEmmet展開すると、次のように出力されます。

<main class="content" id="detail"></main>

兄弟要素を出力する

タグ名1＋タグ名2＋タグ名3のようにタグ名を＋でつないでEmmet展開すると、つないだタグを並列に兄弟要素として出力することができます。

例えば、div+p+bqでEmmet展開すると、次のように出力されます。

<div></div>
<p></p>
<blockquote></blockquote>

要素を繰り返し出力する

タグ名*n（nは1,2,3,・・・）でEmmet展開すると、n個の要素（タグ）を繰り返し出力することができます。

例えば、li*5でEmmet展開すると、次のように出力されます。

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

要素をネスト出力する

タグ1>タグ2でEmmet展開すると、要素をネスト出力することができます。

例えば、ul>liでEmmet展開すると、次のように出力されます。

<ul>
    <li></li>
</ul>

前出の繰り返し出力を組み合わせて、ul>li*3のように入力してEmmet展開すると、次のように出力されます。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

()によるグルーピング

（）で括って、要素のまとまりを指定できます。

例えば、ul>(li>a.link)*3をEmmet展開すると、()内をまとまりとして３回繰り返し、次のように出力されます。

<ul>
    <li><a href="" class="link"></a></li> 
    <li><a href="" class="link"></a></li>
    <li><a href="" class="link"></a></li> 
</ul>

連番にする

例えば、.num$*3をEmmet展開すると、次のように出力されます。

<div class="num1"></div>
<div class="num2"></div>
<div class="num3"></div>

$を増やすと、桁数を増やすことができます。num$$$*3をEmmet展開すると、次のように出力されます。

<div class="num001"></div>
<div class="num002"></div>
<div class="num003"></div>

@を使って、開始番号を指定できます。.num@4*3で次のように出力されます。

<div class="num4"></div>
<div class="num5"></div>
<div class="num6"></div>

テキストを指定する

{}で囲んで、{}内のテキストを出力できます。

例えば、ul>(li>a{リンク})*3をEmmet展開すると、次のように出力されます。

<ul>
     <li><a href="">リンク</a></li>
     <li><a href="">リンク</a></li>
     <li><a href="">リンク</a></li>
</ul>

EmmetでCSSコーディング

続いて、EmmetでCSSを記述する方法について、解説していきたいと思います。

EmmetでCSSコーディングを使用する場合、基本的にプロパティ、あるいはプロパティと値を記述する場合です。例えば、次のような展開が利用できます。

mmargin: ;
ppadding: ;
w100width: 100px
maw50pmax-width: 50%
fwbfont-weight: bold;

主なプロパティ

Emmetで展開するCSSのプロパティの主なものは、以下の通りです(左列がEmmet展開前、右列が展開後)。

wwidth
hheight
mawmax-width
miwmin-width
mahmax-height
mihmin-height
mmargin
ppadding
bdborder
bgbackground
bxshbox-shadow

さらに、marginやpaddingなどは、下記と組み合わせることにより、padding-topやmargin-bottomなどのプロパティを展開することができます。

ttop
bbottom
lleft
rright

例えば、margin-topは「mt」、padding-leftは「pl」のようにそれぞれの頭文字を組み合わせて、Emmet展開できます。

また、各プロパティの数値を指定して入力することも可能です。例えば、widthの場合は下記のように入力できます。

w10width: 10px;
w10pwidth: 10%;
w10rwidth: 10rem;
w10ewidth: 10em

フォント系プロパティ

フォント系のプロパティで利用できるのは、以下のようなものがあります。

ccolor
fffont-family
fwfont-weight
fzfont-size

テキスト系プロパティ

テキスト系プロパティで利用できるのは、以下のようなものがあります。

tatext-align
tdtext-decoration
lhline-height
ltsletter-spacing

Flexbox関連プロパティ

Flexbox関連プロパティで利用できるのは、以下のようなものがあります。

ddisplay
d:fdisplay: flex;
acalign-content
aialign-items
fxwflex-wrap
fxdflex-direction
jcjustify-content
fxfflex-flow
ordorder
flflex
fxgflex-glow
fxshflex-shrink
fxbflex-basis
asalign-self

ここまで紹介したプロパティ以外にも様々な入力記法が利用できます。以下を参考にしてください。

Emmetチートシート

今回は、ここまでです。

次回以降、他のプログラム言語でのVisual Studio Codeの利用方法を紹介していきたいと思います。

コメント

  1. whoiscall より:
    2023年9月29日 6:15 AM

    Thanks.

    返信
  2. Опсуимолог より:
    2024年1月27日 10:09 AM

    – Я не получаю то, что хочу.
    – Не хватает мотивации на регулярные занятия.

    – Мои цели сбываются у других людей.

    Почему так, спроси у опсуимолога!

    Вбивай в поиск: “опсуимолог” и получи актуальные контакты.

    Ты же знаешь кто такой опсуимолог?

    返信
タイトルとURLをコピーしました