• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / Archives for HTML

HTML

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

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

タイムアラートボタン

はじめに

タイピングの手元

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

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

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

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

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に役立てよう|プログラミング入門ナビ

中級編

Webプログラミングする女性

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>

まとめ

3人の喜ぶプログラマー

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

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

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

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: CSS, Emmet, HTML

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」はプラグインの設定項目が記載されたファイルです。これに手を加えることで細かいカスタマイズができます。

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

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(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: Bracket Pair Colorizer, HTML, vscode, プラグイン

簡単なウェブページを作りながら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>項目1</li>
  <li>項目2</li>
  <li>項目3</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(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: a, article, aside, dd, dl, dt, footer, h1, h2, header, HTML, img, li, main, ol, small

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 13
  • Go to Next Page »

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchをMacにインストールする方法
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • 初心者のプログラミング学習には13インチのMacBook Proがおすすめ!その理由も解説!
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介
  • MySQL 5.7 for Windowsのアンインストール方法
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法

最近の投稿

  • 【03/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • swpファイルが作成されてvimでファイルが編集できない時の対処法とは?
  • 【無料モニター(2期生)募集!】「就職活動用のポートフォリオ制作講座」
  • フレームワークとは?開発効率UPに役立つ理由を知っておこう!
  • WordPressとは?どんなことができるの?初心者にもわかりやすく解説!

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー