HTML

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう

2023-05-10 By プログラミング入門ナビ編集部

はじめに

HTML言語の習得に欠かせないのがエディタです。昨今は非常に便利なエディタが多く開発されていますね。

本記事では、その中でも特に人気の高いVisual Studio Codeで使えるおすすめの設定方法をお伝えします。

ミスの防止や開発効率のUPに役立つので、初心者の方はもちろん全てのエンジニアの方におすすめしたい内容です。

macOSとwindowsで多少メニューや見た目が異なるため、初心者の方でも混乱しないように両方の設定画面を掲載しています。

Visual Studio Codeとは

プログラミングに欠かせないエディタですが、本サイトで一押しのおすすめエディタがVisual Studio Codeです（VSCodeと略称でも記載されます）。

ほぼ全てのプログラミング言語に対応し、使い勝手も良いため近年人気が急上昇しています。

使ったことの無い方もぜひ使用してみてください。下記から入手できます。

Download Visual Studio Code

タブの設定

コードを書く時にはタブでインデントが使えると便利ですね。この1タブあたりでスペースいくつ分のインデントがつくかを設定できます。

こだわりが特になければ、見やすさの観点から「2」を推奨します。

VSCodeではデフォルト値が4になっていることが多いので、下記の手順で変更しましょう。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「tab size」と入力し、出てきた「Editor: Tab Size」の欄に2を入力しましょう。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

検索窓で「tab size」と入力し、出てきた「Editor: Tab Size」の欄に2を入力しましょう。自動で保存されるのでそのまま閉じて構いません。

Emmetの日本語設定

次にEmmnet（エメット）の設定を行いましょう。Emmnetというのは、ざっくりといえば入力補間機能のことです。

例えばVSCodeで適当なHTMLファイルを新規作成し、最初にエクスクラメーションマーク「！」を入力しタブキーを押すだけで下記のようにHTML文書の雛形が自動で作成されます。

入力の手間が省けて便利ですが、VSCodeのデフォルト設定ではhtmlタグの言語（lang属性）が英語（en）になっているので、日本語の文書を作成することが多い場合はここを日本語にいちいち変える必要があります。

都度変更するのは面倒ですし変更忘れも心配なので、雛形自体を修正しておくのがおすすめです。

下記の通り実施してください。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

下記のように検索窓で「emmet」と入力し、出てきた候補の中から「Edit in setting.json」を探してクリックしましょう。

setting.jsonが開くので、最後の中かっこの手前に下記のように追加します。Command+Sキーでファイルを保存してください。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

下記のように検索窓で「emmet」と入力し、出てきた候補の中から「Edit in setting.json」を探してクリックしましょう。

setting.jsonが開くので、最後の中かっこの手前に下記のように追加します。Ctrl+Sキーでファイルを保存してください。

なお、setting.jsonに追加するコードは下記です。必要に応じコピー&ペーストしてください。

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

設定後にもう一度「！」とタブキーを押して下記のようにlang属性が日本語になっていればOKです。

不可視文字の表示

スペースや予測不能なゴミデータは通常下記のように空白で表示され、見ることができません。そのため、いくつ分の空白が空いているのかや、全角なのか？半角なのか？も気付きにくいです。

ここに、全ての半角スペースを可視化する機能を適用すると下記のように半角スペースの部分に丸グロをつけることが可能です。

このように見やすくすることで、コーディング時にありがちな半角スペースと全角スペースを間違えるミスに気付きやすくなります。

設定は下記のように行います。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「render control characters」と入力し、出てきた「Editor: Render Control Characters」の欄にチェックを入れ、「Editor: Render Whitespace」はallを選択しましょう。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

全角スペースの表示

「全角スペースを間違えて入れてしまう」のは初心者が陥りやすい頻出ミスです。

先ほどの半角スペース可視化を行っても全角スペースには丸グロがつかず、発見できない可能性があるためさらに対策を講じましょう。

ここではVSCodeの拡張機能である「zenkaku」をインストールして、下記のように全角スペースに色（この画面例ではグレー）を付けるよう対策します。

これで全角スペースが入っていたら一目でわかりますね。

下記が具体的なやり方です。

[macOSの場合]

左側メニューアイコンにカーソルを当て、「Extensions」と出るものをクリックします。

次に検索窓に「zenkaku」と入力して出てきた下記のアイコンをクリックし、緑の「Install」ボタンを押しましょう。完了後にVSCodeの再起動が必要です。

[windowsの場合]

下記の左側メニューアイコンをクリックします。

次に検索窓に「zenkaku」と入力して出てきた下記のアイコンをクリックし、緑の「Install」ボタンを押しましょう。完了後にVSCodeの再起動が必要です。

HtmlHint

2023/04/08現在、拡張機能「HtmlHint」はメンテナンスされなくなったため非推奨とされています。
本コースコースでも導入は非推奨としています。

非推奨の拡張機能をインストールすると、下記のような影響が考えられます。

最新のセキュリティ対策が施されていないため、ハッキングやマルウェアの脅威にさらされる可能性がある。(セキュリティの問題)
最新のバージョンと互換性がないため、VSCodeの機能が正しく動作しなくなる可能性があります。たとえば、ファイルの自動保存、デバッグの実行、または他の拡張機能の使用に問題が発生することがある。( 機能の問題)

■代替となる拡張機能について
HTMLHintをインストールしてご利用してください。(名前が類似していますが、オレンジ色のアイコンです)

HTMLフォーマッタ

最後に、自動でHTMLの構文に即したインデントをつけるなど、HTMLを自動整形する機能を設定しましょう。

この機能を有効にすると、下記のようなコードが、

macOSの場合：SHIFTキー+optionキー+Fキーで、windowsの場合：SHIFTキー+ALTキー+Fキーで下記のように自動整形されます。

headとbodyにインデントがついて見やすくなりましたね。

時間短縮になるのでぜひ活用してください。

設定は下記のように行います。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「html.format.enable」と入力し、出てきた「Enable/disable default HTML formatter」の欄にチェックを入れます。すでに入っている場合はそのままで構いません。

また、再度検索窓に戻り「html.format.indentInnerHtml」と入力し、出てきた「Indent <head> and <body> sections」の欄にチェックを入れます。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

まとめ

HTMLのコーディングにおすすめしているVisual Studio Codeでの便利な設定について紹介しました。

少し数が多いですが、最初のこの一手間で驚くほど快適になるのでぜひ全て設定することをおすすめします。

また、本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Emmetとは？HTMLを素早くコーディングする方法を習得しよう！

2021-01-31 By プログラミング入門ナビ編集部

はじめに

HTMLのプログラミングをしていると、最初は丁寧に書くものの、慣れてくるとだんだん似たような表記が多くて煩わしくなってきますよね。

簡単なWebページなら問題になりませんが、たくさんの階層構造を持つページをコーディングする場合は骨が折れます。

Emmetというプラグイン機能を使えば、この手間を大幅に省くことが可能です。

このページではEmmetの概要と使用方法、および人気のエディタであるVSCodeでの導入方法を紹介します。

動画でEmmetについて学ぶ

フォローしてね！

Emmetとは？

Emmet（読み：エメット）は、短く略したコードをタイプすると本来の長いコードに変換されるようにする機能です。

若者を中心によく用いられる「略語」のようなもので、「スマートフォン」を「スマホ」、「サブスクリプション」を「サブスク」と言い換えるのと似ています。

略語を使えば文字数が減りますし、言いやすくなりますよね。コーディングでも文字数が減ればタイプする労力や時間が大幅に減らせます。

具体的に見た方が早いので下記の例を見てください。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  ul#nav>li.item$*4>a{Item $}
</body>
</html>

7行目に見慣れない表記がありますが、これがEmmetを使うための書き方です。これを「展開」すると下記のようなコードになります。

<!doctype html>
<html lang="en">
<head>
  <title>Demo</title>
</head>
<body>
  <ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
  </ul>
</body>
</html>

たった1行だったのが6行のコードに早変わりしました。

「展開」の方法はエディタにより異なりますが大体ボタン1つでできることが多く、上記の例でいえば「27文字＋展開ボタン」の手間で199文字分のコーディングができることになります。

この使い方を知っていると知っていないではコーディングの速さに雲泥の差が出ますね。

これは公式サイトで取り上げている一例ですので、意味についてはまだ理解しなくて問題ありません。

公式サイト：Emmet — the essential toolkit for web-developers

VSCodeでの使い方

プログラマーから絶大な人気を得ているテキストエディタであるVSCode（Visual Studio Code）でEmmetを使う方法ですが、実は最初から使用できるように組み込まれているため特別な設定は必要ありません。

「展開」はTabキーでできます。

VSCodeを使っている方はすぐにでも試せますのでぜひお手元で打ち込みながら次項をお読みください。

なお他のテキストエディタ（Sublime TextやAtom等）では外部プラグインとして導入が必要になります。

公式サイトからダウンロード可能です。

主な記述方法

ここからはEmmetの数ある表記の中でも特に多用されるものを中心に記述方法を見ていきましょう。

まずは初級編を覚えておくだけでも大いに役立ちます。余力があれば中級編・上級編も使ってみましょう。

初級編

タグ単体

要素名だけ入力し「展開」（VSCodeではTabキー押下）すると、開始タグと（必要に応じ）終了タグが補完されます。

<!-- 展開前 -->
h2

Tabキーを押すと

<!-- 展開後 -->
<h2></h2>

入れ子構造

入れ子構造にするには、先に親要素名を書いてから「>」で子要素名につなぎます。

<!-- 展開前 -->
div>a

Tabキーを押すと

<!-- 展開後 -->
<div><a href=""></a></div>

兄弟構造

入れ子ではなく、同列の並びとなる兄弟構造は「+」で要素名をつなぎます。

<!-- 展開前 -->
h2+div

Tabキーを押すと

<!-- 展開後 -->
<h1></h1>
<div></div>

繰り返し

特に表や箇条書きなどでは同じタグを何度も書かなければならないのが面倒ですよね。

繰り返したい要素名の後に「*回数」を書けばその回数分が表記されます。

入れ子表記との組み合わせも可能です。

<!-- 展開前 -->
ul>li*3

Tabキーを押すと

<!-- 展開後 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

HTML雛形

HTML文書の冒頭に必ず書く必要のある雛形も、簡単に展開することができます。

一般的には「html:5」と入力しますがVSCodeの場合は「!」でも可です。

<!-- 展開前 -->
html:5

Tabキーを押すと

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

</body>
</html>

なお、デフォルトでは言語設定部分（<html lang=”ja”> ）が日本語（”ja”）でなく英語（”en”）となっていることが多いです。

適宜直すか、面倒ならばエディタの設定で修正することができるので対応しておくと良いでしょう。

VSCodeでの設定方法は下記の記事の「Emmetの日本語設定」を参照してください。

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう｜プログラミング入門ナビ

中級編

idを付加

要素にidをつけるには「#」で指定します。

<!-- 展開前 -->
div#item1

Tabキーを押すと

<!-- 展開後 -->
<div id="item1"></div>

クラスを付加

要素にクラス名をつけるには「.」で指定します。

<!-- 展開前 -->
p.content

Tabキーを押すと

<!-- 展開後 -->
<p class="content"></p>

テキストを指定

コンテンツであるテキストを入れて入力することもできます。要素名に続けて「{}」内に記述しましょう。

<!-- 展開前 -->
p{ここが本文です}

Tabキーを押すと

<!-- 展開後 -->
<p>ここが本文です</p>

属性を指定

属性を記述するには「[]」を使います。スペースで区切って複数の属性を同時に指定することも可能です。

<!-- 展開前 -->
img[src="dog.jpg" alt="犬の画像"]

Tabキーを押すと

<!-- 展開後 -->
<img src="dog.jpg" alt="犬の画像">

上級編

グルーピング

いくつかの表記の組み合わせを（）で囲めば、一つのグループとして扱うことができます。

繰り返したい要素が1つだけでなく複数要素である場合などに有効です。

<!-- 展開前 -->
table>(tr>th+td*3)*3

Tabキーを押すと

<!-- 展開後 -->
<table>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

連番をつけて展開

クラス名やテキストの内容に連番をふりたい場合はその部分を「$」にします。

<!-- 展開前 -->
h2.item${見出し$}*3

Tabキーを押すと

<!-- 展開後 -->
<h2 class="item1">見出し1</h2>
<h2 class="item2">見出し2</h2>
<h2 class="item3">見出し3</h2>

兄弟要素のテキストを指定

次のように要素を挟みたい場合は兄弟要素の記述要領でテキスト指定が可能です。

<!-- 展開前 -->
p>{お申し込みは}+a{こちら}+{から}

Tabキーを押すと

<!-- 展開後 -->
<p>
  お申し込みは
  <a href="">こちら</a>
  から
</p>

まとめ

HTMLをサクサクとコーディングするためのプラグインであるEmmetについて概要と使用方法を解説しました。

CSSにも応用可能なので興味のある方は調べて活用してみてください。

コードを早く書けるようになることはもちろん、プログラマーはコードを打ちすぎて腱鞘炎になる方も多いので、その予防の意味でもぜひ役立てていきましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

VSCodeのプラグインBracket Pair Colorizerを導入して括弧を見やすく！HTMLに適用する方法も解説！

2020-11-05 By プログラミング入門ナビ編集部

はじめに

微笑むエンジニア — Image of unshaven smiling programmer man showing thumb up while working with computers in office

プログラミングをしていると、とにかく括弧がたくさん出てきませんか？

入れ子になっていたりすると、括弧がさらに増えて何が何だかわからなくなる…

誰でも一度は経験したことがあるのではないでしょうか。

この記事では、そんな悩みを解決するためのおすすめの方法を解説します。

括弧が見やすくなるとバグも格段に減らせるので、打ち間違いが多発してなかなか効率が上がらないという方にもおすすめです。

Visual Studio Codeとは

今回ご紹介するのはVisual Studio Codeというエディタ向けの方法です（VSCodeと略称でも記載されます）。

このエディタは本サイトでもイチオシしていて、ほぼ全てのプログラミング言語に対応し、使い勝手も良いため近年人気が急上昇しています。

使ったことの無い方もこの機会にぜひ使用してみてください。下記から入手できます。

Download Visual Studio Code

Bracket Pair Colorizerとは

VSCodeで使用できる便利なプラグイン（後付け便利機能）がBracket Pair Colorizerです。

（プラグインはExtensionとも呼ばれます。）

これを使うとソースコードが下記のようになります。

括弧の始まりと終わりを同じ色にして、またその括弧に挟まれた部分を色付きの棒でつないでくれるのでど、こからどこまでが一括りなのかとても見やすくなりますね。

詳しい説明を読みたい方は下記の公式ページをご覧ください。

Bracket Pair Colorizer（Microsoft Visual Studio Market Place）

インストール方法

VSCodeを開いたら画面左側下のアイコン（ブロックのようなマーク）をクリックして検索画面を開き「bracket」で検索してください（下図参照）。

おそらく一番上に「Bracket Pair Colorizer」が出てくるので右下の「Install」ボタンをクリックします。

ほんの数秒でインストールは完了です。試しにJavaScript等のソースコードを見てみてください。

先ほどの画面例のように括弧が色付けされていれば成功です。

HTMLへの適用方法

初期設定では色付けされる括弧は「()」「[]」「{}」の3種類だけなので、JavaScriptやRubyなどは見やすくなりますが、HTMLには変化がありません。

せっかくですので、HTMLのタグも見やすくしてみましょう。

適用前

例えばこんなHTMLのソースコードがあったとします。

VSCodeのデフォルト機能により、正しくインデントができていれば縦棒で対応する開始タグ・終了タグが繋がれているためある程度は見やすいですね。

しかし括弧（<>）が全て同じ色なので、書いている途中にはわかりづらく、間違えてインデントしてしまうことがありそうです。

設定方法

Bracket Pair Colorizerの設定からHTMLにも対応できるようにカスタマイズできます。

MacOSの場合

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

上に出てくる検索窓で「bracketpair」と検索するといくつかの候補が出てくるので、下図のように「Bracket Pair Colorizer: Consecutive Pair Colors」の項目を探して下線が引かれている「Edit in settings.json」をクリックしてください。

「settings.json」はプラグインの設定項目が記載されたファイルです。これに手を加えることで細かいカスタマイズができます。

下図赤枠の部分を追記しましょう。

コピー＆ペースト用に下記コードも書いておきます。

["<", "</"],
["<", "/>"],

Command+Sキーでファイルを保存してください。保存できたらファイルを閉じても構いません。

Windowsの場合

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

以降は上記「MacOSの場合」と同様です。

最後は、Ctrl+Sキーでファイルを保存してください。

適用後

早速、先ほどのHTMLファイルを見てみましょう。

タグの始まりと終わりが同色で表示され、別のタグだと黄色・ピンク・水色で色が使い分けられているのでかなり見やすくなりましたね。

また、カーソルを当てたところ（下図25行目〜32行目、section要素の部分）には開始タグから終了タグに挟まれた中身の部分が縦棒で繋がれているので、範囲がとても見やすいです。

まとめ

女性の横顔 — Photo of smiling cute woman using laptop and studying with exercise book while sitting in cozy cafe

VSCodeで括弧の対応が見やすくなるBracket Pair Colorizerについて、導入方法とHTMLへの対応方法を解説しました。

コードが見やすくなると些細なミスが減りますし、気分も上がりますよね。

簡単に導入できるので、ぜひやってみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

簡単なウェブページを作りながらHTMLの基礎を習得しよう！演習形式で徹底解説！

2020-09-30 By プログラミング入門ナビ編集部

はじめに

HTMLを学んでいるみなさん、学習は順調ですか？

やはりHTML学習の醍醐味といえばウェブページを自分で作れるようになることですよね。

この記事では、簡単なウェブページ作成を通してHTMLの基礎習得に欠かせないHTML要素を網羅的に学習します。

演習形式で回答も丁寧に解説するので、手っ取り早くHTMLの基礎を習得したい方や、これまで学んできた基礎知識をおさらいしたい方にもおすすめです！

動画解説

本記事の内容を動画でも解説しています。

演習問題：HTMLの基礎

演習回答：HTMLの基礎

演習問題

それでは早速ですが演習問題です。

完成イメージ

下記のようなウェブページを制作してください。

前準備：素材の入手

テキスト

こちらのリンク先からコピー＆ペーストして使用してください。

画像

こちらのリンク先からダウンロードし、これから作るhtmlファイルと同階層に配置してください。

情報のグループ化

ウェブページの見た目には影響しませんが、情報のグループ化は意味付けや後からデザインをつける時の利便性の観点で非常に重要です。

今回は下記のようにグループ化してください。

ヒント

「三毛猫モモの紹介ページ」はページ自体のタイトルですのでh1要素、他の見出し（プロフィール、好きな食べ物、SNS）はh2要素を使いましょう。

画像の表示にはimg要素が使えますね。

プロフィールは順序付きリスト、好きな食べ物は説明リストを使います。

「フォロー」の部分はご自身のツイッターアカウント、または講師の中村のアカウント（https://twitter.com/ynakayu）をa要素で記述しましょう。

著作権表示はsmall要素でできます。

演習回答

ウェブページは作成できましたか？ここからは回答例を解説していきますので、必ず自分で演習ページを作ってから見てくださいね。

まずは簡単におさらい

コードの全体例に入っていく前に、それぞれの要素についておさらいしていきましょう。

まず先に答えが見たい方はスキップして下の方の「回答コード例」を先に見ても構いませんが、間違えた箇所があったらここに戻って各要素の詳細を確認してください。

見出し

各話題に入る前の冒頭部で、そこで記述される内容のテーマをわかりやすく目立たせるために使われるのが見出しです。

見出しの大きさによってh1、h2、h3、h4、h5、h6までの要素が用意されており、数字が小さいほど大きい見出し、大きいほど小さい見出しになります。

<h2>見出しにしたい部分</h2>

簡単なようでいて、忘れがちな細かいルールもあるので自信がない方は下記の記事で復習しておきましょう。

HTMLで見出しを書いてみよう！意外と知らないルールについても解説！

画像

画像を表示させるにはimg要素を使用します。この要素ではsrc属性を使って画像のパスを指定するのでしたね。

<img src="cat.jpg">

どこにある画像を指定するかによって、パスの指定方法が異なります。下記の記事で詳しく説明しているので、気になった方は確認してください。

HTMLに欠かせない「属性」とは？画像の表示方法を例にわかりやすく解説！

説明リスト

プロフィールの部分で生年月日等を説明しているように、ある用語や文言の説明に特化したリストを説明リストと呼びます。

<dl>
  <dt>用語1</dt>
    <dd>説明1</dd>
  <dt>用語2</dt>
    <dd>説明2</dd> 
  <dt>用語3</dt>
    <dd>説明3</dd>
</dl>

各タグの意味や使い方を忘れてしまった方は下記の記事からおさらいしましょう。

説明リストとは？HTMLで用語説明ページを作るのに最適！使い方を確認しよう

順序付きリスト

好きな食べ物など、文言を順番つきで列挙する用途には順序付きリストを使用します。

<ol>
  <li>項目１</li>
  <li>項目２</li>
  <li>項目３</li>
  ・・・略・・・
</ol>

順序のない箇条書きを使うこともできます。これらの違いやタグの意味については下記から確認してください。

HTMLでリストを書く方法！箇条書きと順序付きリストの違いは？入れ子にする方法も確認しよう

著作権表記

著作権や商標登録など、ページ全体に関する細目を表記するにはsmall要素を使用します。

<small>ここに細目を記述</small>

詳しくは下記の記事も参考にしてください。

HTML文書で著作権表示などの細目を表記するには？small要素の使い方をマスターしよう！

情報のグループ化

文章の内容に合わせてarticleやsection等の要素を使い分けてグルーピングすると、文章の構造がわかりやすくなる、スタイルを当てやすくなるというメリットがあります。

自信のない方は下記記事で詳しく説明していますので、目を通してみましょう。

情報のグループ化は重要！div要素だけでなく意味に応じてarticleやsection等を使い分けよう！

回答コード例

それでは、今回の演習の回答コード例はどのようになるのか見てみましょう。

お手元のコードと比較し、間違いがあったら前項に戻って復習をお忘れなく！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三毛猫モモの紹介ページ</title>
</head>
<body>
  <header>
    <h1>三毛猫モモの紹介ページ</h1>
    <p>三毛猫のモモについて紹介します。</p>
  </header>

  <main>
    <article>
      <h2>プロフィール</h2>
      <img src="momo.jpg">
      <dl>
        <dt>生年月日</dt>
        <dd>2020年1月1日</dd>

        <dt>性別</dt>
        <dd>メス</dd>
        
        <dt>出身地</dt>
        <dd>東京</dd>
      </dl>
    </article>

    <article>
      <h2>好きな食べ物</h2>
      <ol>
        <li>焼き魚</li>
        <li>刺身</li>
        <li>かつお節</li>
      </ol>
    </article>
  </main>

  <aside>
    <h2>SNS</h2>
    <p>Twitterで<a href="https://twitter.com/ynakayu">フォロー</a>してください。</p>
  </aside>

  <footer>
    <small>&copy; 2020 Momo.</small>
  </footer>
</body>
</html>

よくある質問

演習について、受講者の方からよくいただく質問と回答を掲載します。

講師と同一の手順で記述していく必要がありますか？

動画を見ながら進めてくださった方の中には、講師の記述していく順番と全く同一の方法で書いた方がいいのか気にされる方もいらっしゃるようです。

答えはNoで、同じ手順で書く必要はありません。

実際、どんな順番で書いたとしても最終的に正しい記述になっていれば全く同じ表示結果となります。

詳しくは下記の記事でも解説していますので参考にしてください。

HTMLの正しい書き順は？タグが先？コンテンツが先？

表示されたページの見た目（文字サイズやフォント）が若干違います

お手元の演習回答のウェブページ表示結果が、この記事や動画内で解説している表示結果と若干異なることを気にされる方もいらっしゃるようです。

文字のサイズやフォントのみの違いであれば、全く問題ありません。

使用しているブラウザやOSによってこの辺りは若干見え方が異なるためです。

HTML文書の構造が同じであれば正しく記述できていますので、問題ありません。

まとめ

演習方式でHTMLの基礎となる代表的な要素の使い方を解説しました。

簡単なウェブページを作りながら進めると、表示結果を確認しながら楽しく学べますね。

ぜひ、覚えた知識をもとにご自身でも簡単な紹介ページを作ってみてはいかがでしょうか。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

span要素の使い方を解説！div要素との違いも確認しよう

2020-09-30 By プログラミング入門ナビ編集部

はじめに

「span要素って一体何のためにあるんだろう？」

これはHTMLを学習し始めた人が比較的抱きやすい疑問の一つです。

また、div要素を知っている場合は、spanとdivがよく似た要素なので違いについても気になるのではないでしょうか。

この記事ではspan要素についてコード例を交えながら解説し、div要素との違いについても説明します。

動画解説

本記事の内容を動画でも解説しています。

span要素とは

まず、span要素とは一体何なのでしょうか。

意味を持たない要素

実は、span要素自体は意味を持ちません。

文章の特定の部分を後からCSSで装飾したい時によく利用する要素です。

ここでいう「装飾」とは、例えば文字を大きくしたり色を変えたりなどといった見た目のデザインを行うことと捉えてください。

意味を持つ要素との違い

例えば「見出し」を意味するh1要素や「段落」を意味するp要素を思い浮かべてください。

これらは開始タグ・終了タグで挟まれた部分に文章上の意味付け（見出しや段落など）がなされていますね。

後から装飾したいだけならば、これらの要素に対して行うことも可能です。

しかしながら、文章上で特に意味を持たない部分にはこれらの要素を使えません。

このような部分を装飾したい時に活用されるのがspan要素なのです。

spanの使い方

説明だけではイメージを掴みにくいですので、ここからは実際にコーディングしながらspan要素の使い方を見ていきましょう。

コード例

エディタを開いて「span.html」という新規ファイルを作成し、下記のように記述してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>spanの練習</title>
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
  <p>私は、<span class="red">HTML</span>と<span class="red">CSS</span>を学びます。</p>
</body>
</html>

注目ポイントはまずhead要素の中にstyle要素があることです。

この中に書かれているのがCSSで、文字色を赤色にするためのredというクラスが記述されています。

また、本文の「HTML」と「CSS」がspan要素となっており、ここで「class=”red”」と属性が指定されていますね。

こうすることによって、このspan要素はredクラスに属することとなり、先ほどの文字色を赤くするデザインが適用されます。

表示結果

それではファイルを保存しブラウザで開いてみましょう。

下記のように「HTML」と「CSS」が赤文字で表示されれば成功です。

div要素との違い

ここで、div要素を知っている方は疑問に思われたかもしれません。

「divも意味がない要素のはずだけれど、何が違うの？」

実際、div要素も「意味を持たない要素」であり、CSSを当てるために使用されることも同じです。

ここからはこれらの違いを確認していきましょう。

spanとdivの比較

span要素とdiv要素を比較すると、下表のような違いがあります。

	div	span
ブロック要素	○	×
インライン要素	×	○
改行されるか	○	×

ブロック要素とは、ざっくりいうと要素の幅と高さが指定できる要素のことを指し、要素の終わりに必ず改行されます。

インライン要素とは、反対に要素の幅と高さが指定できない要素のことを指し、要素の終わりで改行がされません。

div要素はブロック要素なので改行がされ、span要素はインライン要素なので改行されないというのが違いです。

表示の違いを確認しよう

これも説明だけではわかりにくいため、実際にコードを書いて確かめてみましょう。

先ほどの「span.html」に、下記のように書き足してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>spanの練習</title>
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
  <p>私は、<span class="red">HTML</span>と<span class="red">CSS</span>を学びます。</p>
  <hr>
  これは<div>div</div>です。
  <hr>
  これは<span>span</span>です。
</body>
</html>

ファイルを保存してブラウザで表示すると、下記のようになります。

divを使ったところでは改行が入り、spanの部分では改行されていませんね。

先ほど説明の通り、divはブロック要素でspanはインライン要素のためこのようになります。

注意点

HTMLのルール上、ブロック要素の中にインライン要素を入れ子にするのは問題ありません。

しかし、逆にインライン要素の中にブロック要素は入れ子できないことになっています。

そのため、span要素の中にdiv要素は入れ子できませんので注意してください。


<div>divの中に<span>span</span>を入れ子します。</div> //OK
<span>spanの中に<div>div</div>を入れ子します。</span> //NG

まとめ

span要素の使い方を解説し、div要素との違いについても説明しました。

理解は深まりましたか？

CSSでデザインを当てる時に非常に便利な要素ですので、ぜひ使い方を覚えてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する