• 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とは?

タイムアラートボタン

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

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

今すぐ詳細を確認する

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

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

今すぐ詳細を確認する

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

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

今すぐ詳細を確認する

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

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」が赤文字で表示されれば成功です。

spanの練習

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はインライン要素のためこのようになります。

spanとdivの比較

注意点

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週間無料体験しよう

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: div, HTML, span

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

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

デスクと文書

はじめに

デスクと文書

ウェブページを作る時、文章の構造を意識してHTMLコーディングしていますか?

HTMLには、各部分でどんな内容を書いているのかグルーピングするための要素があります。

こういったグルーピングをしないで書くのも間違いではありません。

しかし、情報をグループ化して文章構造をはっきりとさせると様々なメリットがあるのです。

この記事では情報をグループ化するための要素を紹介し、実際のコード例を交えて使い方を解説します。

動画解説

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

情報のグループ化の重要性

div要素とHTML5以降の新要素

HTML5より前のバージョンでは、文章のかたまりをdiv要素でまとめていました。

div要素は意味を持たない汎用ブロックで、こちらを使っている方も多いかもしれません。

HTML5以降ではこれに代わる新要素が登場しており、後述する理由からdivだけでなく文書の意味に応じて使い分けることが推奨されています。

詳しくは後ほど紹介しますが、headerやfooter、article等といった要素です。なんとなくどんな部分に使うのか想像がつきますね。

情報のグループ化によるメリット

文章の構造がわかりやすくなる

人間にとってはもちろん、コンピュータからみても何の文章が書かれているのか見やすくなるのが大きな利点です。

複数人でコードを書く時にもわかりやすくて便利ですし、検索エンジンが膨大なウェブページの中から必要な部分を抽出してくるのにも役立ちます。

スタイルをあてやすくなる

ウェブページのデザインはCSSを使って行います。

CSSで定義したスタイルをHTML文書に適用する際、情報ごとにグループ化されていると非常にスタイルをあてやすいです。

なお、プログラスではCSSの講座も解説していますので、興味のある方はこちらも参考にしてください。

CSS入門(Proglus)

情報のグループ化を行う要素

ここからグルーピングに使用できる新要素を1つ1つ見ていきましょう。

header

文書のヘッダー部分を示します。

ここには大抵ページ自体の見出し(基本的にはh1見出し)や、後述のナビゲーションが入ることが多いです。

footer

文書のフッターを示します。

ウェブページの著作権表記や商標登録表記などを入れることが多いです。

nav

ナビゲーションを示します。

ナビゲーションとは、ページ上部でページ全体の構成や各セクション・ページへのリンクが貼られている部分のことです。

main

文章のメインコンテンツ領域を示します。

article

記事コンテンツを示す要素です。

ページ・アプリケーション・サイトなどの中で自己完結しており、個別に配信や再利用を行うことを意図した構成物に適用します。

例えば記事に対するコメントやブログの記事等です。

section

セクションを示す要素です。

セクションとは見出し+それに伴うコンテンツの組み合わせを指しますが、見出しがない場合もあります。

articleと似ていますが、articleはその部分だけで完結した文章として成り立つ場合に使うのに対し、sectionはその限りではありません。

例えば他ページへのリンクを含んでいて、それをクリックした遷移先でも情報を確認する必要がある場合はsectionを使うと良いでしょう。

aside

余談要素を示します。メインコンテンツとは関連性が低い情報のことです。

「アサイド」は日本語で「脇へ」とか「傍らに」といった意味で、まさにその意味合いとなっていますね。

例えばサイドバーや広告の表示に使われることがあります。

練習用のページを作ってみよう

説明を読んでもイメージが沸きにくいですので、実際に先ほどの要素を含んだページを作ってみましょう。

ページのイメージ

完成形としてこのようなウェブページを作ります。

グループ化の練習ページ

文章構造

このウェブページの文章構造は下記のようにします。

HTML文書の構造

コード例

それでは実際に書いてみましょう。エディタで「group.html」というファイルを新規作成し、下記のように記述してみてください。

先の項目で学習した各要素が折り込まれていることに注目です。

また、リンク先はダミーとして”#”と書いています。クリックしても何のページにも飛ばないですがテストページなので問題ありません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>グループ化の練習</title>
  </head>
  <body>
    <header>
      <h1>グループ化の練習</h1>
      <nav>
        <ul>
          <li><a href="#">エンジニアへの道</a></li>
          <li><a href="#">プログラミング入門</a></li>
          <li><a href="#">ニュース</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>グループ化を学ぶのにおすすめのサイト10選!</h2>
        <p>グループ化を学べるサイトを10個紹介いたします。</p>
      </article>
      
      <section>
        <h2>関連記事</h2>
        <ul>
          <li><a href="#">関連記事1</a></li>
          <li><a href="#">関連記事2</a></li>
          <li><a href="#">関連記事3</a></li>
        </ul>
      </section>
    </main>

    <aside>
      <h2>広告</h2>
      <p>全ショップ対象エントリーでポイント5倍!</p>
    </aside>

    <footer>
      <p><small>&copy; 2020 Yuta Nakamura.</small></p>
    </footer>
  </body>
</html>

ファイルを保存して、ブラウザで表示させてみましょう。先ほどのイメージ通りに表示されれば成功です。

なお、今回学習したグルーピングのための各要素(header・nav・main等)がなくてもHTMLとしては間違いではありません。

興味のある方はこれらを外して表示させてみてください。全く同じ表示になるはずです。

よくある質問

必ず情報のグループ化をした方がいいですか?

必須ではありません。現に、グループ化をしなくても得られる表示は同じです。

ただし、先述の通り文書構造がわかりやすくなる・スタイルがあてやすくなるというメリットがあるため、グループ化することを推奨します。

divだけを使用してはいけませんか?

div要素だけ使用しても情報のグルーピングはできます。

しかしながら、新要素を使う方が文章構造をより正確に表現できるのでおすすめです。

どの要素をどこに使うべきかわかりません

これについては100%の正解があるわけではなく、結局はウェブ製作者の意図に合わせて様々なパターンが考えられます。

正解は1つではありませんので、深く悩みすぎずに用途に合わせて設計しましょう。

まとめ

板書する人々

HTML5の新要素を使った情報のグループ化方法について解説しました。

本格的なウェブサイトであればあるほどグループ化は重要になります。

ぜひ覚えてグループ化を心がけてください。

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

新HTML入門(Proglus)

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

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

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

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: article, aside, div, footer, header, HTML, main, nav, section

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

Primary Sidebar

Proglus(プログラス) 採用情報 FindU

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • VSCodeで画像が表示されない場合の対処法
  • VSCodeの基本~プロジェクトフォルダの設定方法について解説します!
  • Visual Studio Codeのメニューを 日本語化する方法と英語化する方法について解説!
  • Node.jsをmacOSからアンインストールする方法
  • MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法
  • JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因と対処方法を紹介!
  • 【Arduino入門】LCD(液晶ディスプレイ)に文字を表示しよう
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MAMP for MacOSによるMySQLのインストール方法

最近の投稿

  • ChatGPTエラーの原因別対応法: トラブルシューティングのヒント
  • 【SQL】ER図(Entity-relationship Diagram)について解説します!
  • 【MySQL】公式インストーラー(dmg)を使って、MySQLサーバーをmacOSにインストールする方法を解説
  • 【AWS Cloud9】Gitで使用するエディタを再起動してもvimの設定にする方法
  • 【VSCode】アクティビティバーに拡張機能アイコンが表示表示されていない場合の解決方法

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

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

アーカイブ

  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 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 © 2023 · programmingnavi.com ・About・プライバシーポリシー