Archives for 2020

HTMLで重要な語句を強調する方法！strong要素について学習しよう

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

はじめに

Webページを作るとき、どうしてもここは声を大にして伝えたい！という部分がありますよね。

セールでお安くなっています！とか、ここはテストに出ます！とか、そういった部分のことです。

HTMLで記述する時にそのような語句に強調の意味合いを持たせることができます。

今まさに上記の文章で「強調の意味合い」の部分が強調されていますね。

この記事ではHTMLで重要な語句を強調する方法について解説します。

動画解説

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

重要な語句を強調する方法

HTMLで重要な語句や緊急性・重大性の高いコンテンツを強調したい場合はstrongタグを使用します。

strong要素の基本構文

下記がstrong要素の基本構文です。

開始タグ<strong>から終了タグ</strong>で挟んだ部分が強調語句としてマークアップされます。

<strong>強調したい部分</strong>

コードと表示例

実際にどのような表示になるのかコーディングしながら見てみましょう。

エディタを開いてファイル「strong.html」を新規作成し、下記のように打ち込んでみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>強調の練習</title>
  </head>
  <body>
    <p>家に帰ったら<strong>手洗いをしましょう</strong></p>
  </body>
</html>

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

「手洗いをしましょう」のところが強調されて太字になっていますね。

このように、コーディング時に「ここは重要だ」という意味付け（マークアップ）を行うと一般的にはブラウザが解釈し太字で表示します。

強調した方がいい部分って？

MDNによれば、strongの用途は下記のように説明されています。

<strong> 要素は「強い重要性」のある内容、つまり (警告など) 高い重大性や緊急性のある物事のためのものです。これは、ページ全体にとって非常に重要な文である可能性があります。または、いくつかの単語が周囲のコンテンツと比較して重要であると指摘することができます。

<strong>: 強い重要性要素 – MDN Web Docs – Mozilla

逆にいえば、これに当てはまらない場合はstrongを使って強調しない方がいいわけです。

そこまで神経質に使い分ける必要はありませんが、下記のような例を参考にしてください。

強調した方がいい例

このおもちゃは小さなお子様に与えると誤飲の危険があります。必ず保護者の方が付き添って遊んでください。
本コースの課題提出期限は12月31日23:59です。遅れると単位が認められません。
初めてのお客様に限り、今月末まで特別限定価格：980円でお買い求めいただけます！お早めに！

どの語句も緊急性・重大性の高い内容を表していますね。このような場合は強調を使って重要な情報であることを示しましょう。

強調でなくてもいい例

マダイ　スズキ科の魚。一般に「タイ」といえばこの魚を指す。
荷物の発送方法と支払いについて　資料p.5を参考に各自で行ってください。担当者は…
買い出し：鈴木さん　会計：伊藤さん　連絡：山田さん

いずれも緊急性・重大性が高い情報を強調するというよりも、単に語句を目立たせるために使用されていますね。

例えば1つ目のように単語を説明する目的ならば「説明リスト」を使うと良いでしょう。

2つ目のようにテーマを書きたい場合は見出しにするのがいいですね。

3つ目は何かの係を目立たせたい目的なので、箇条書きの方が良いでしょう。

強調の注意点

先述の通り、strong要素があるとブラウザは一般的に太字で表示します。

先ほどの表示例ではGoogle Chromeで表示していますが、そこでも太字になっていましたね。

しかし、ブラウザによっては下線を引くなど異なる挙動で強調表示することがあります。

そのため「太字にしたい」という表示上の目的でstrong要素を使うことは避けてください。

HTMLの本来の目的はマークアップであり、ブラウザに「ここが重要である」という意味付けを伝えることです。

表示のコントロールはCSSで行うようにしましょう。

まとめ

HTMLで重要な語句を強調するための方法を説明しました。

重大発表や緊急性の高い情報を提示する時に積極的に使って、文書にメリハリをつけましょう。

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

新HTML入門（Proglus）

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

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

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

今すぐ詳細を確認する

HTMLのリンクをマスター！3種類のリンクを使えるようになろう！

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

はじめに

リンクはHTMLの醍醐味といっても過言ではありません。

なぜなら「HTMLはどうやって開発された？経緯や主なバージョンについて紹介！」の記事でもご紹介した通り、元々HTMLは膨大な論文の中から関連性の高いもの同士をリンクさせて探しやすくするために開発されたからです。

そのため、リンクを使いこなせるようになることは、HTMLマスターへの第一歩ともいえますね！

この記事ではHTMLで用いられる３種類のリンクの使い方をソースコードと共に詳しく解説します。

動画解説

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

リンクの基礎

リンクとは、今見ている部分からどこか他の部分へ飛ぶことです。

例えば「ここ」をクリックすれば、本ブログサイト「プログラミング入門ナビ」のトップページへと飛びます。

まずはリンクについて基礎的なことを覚えていきましょう。

リンクの基本構文

コンテンツをクリックすると他の場所へ飛ぶようにするには下記のように記述します。

<a href="リンク先のパス">コンテンツ</a>

aのタグは「anchor」の略で、リンクを張る時に使用します。

属性hrefは「Hypertext Reference」の略で、飛ばしたい先のパスを指定可能です。

簡単な例を見てみましょう。エディタを開いて「page1.html」を新規作成し下記のように記述してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リンク ページ１</title>
  </head>
  <body>
    <a href="https://blog.proglus.jp/">プログラミング入門ナビ</a>
  </body>
</html>

ブラウザで開くと下記のように表示されます。

「プログラミング入門ナビ」の文字をクリックして無事に本ブログへ飛べば成功です。

target属性とrel属性

href属性は必須の属性ですが、他にもリンクでよく使用する属性を見てみましょう。

target属性はリンクをクリックした時の開き先を指定可能で、例えば「target=”_blank”」とすれば新しいタブで開くことができます。

rel属性はリンク元とリンク先の文書の関係を指定可能です。セキュリティ対策のために「rel=”noopener”」としておけばリンク先が悪意のあるサイトであっても、自分のサイトを守ることができます。

詳しくはMDNの「リンク種別」ページを参照してください。

３種類のリンク

リンクは下記の３種類に分けられ、書き方が少し異なります。

外部リンク
内部リンク
ページ内リンク

それぞれどういったリンクなのか、次項から詳しく見ていきましょう。

外部リンク

外部のサイトへ飛ばすための方法が外部リンクです。例えば下記のようにGoogleへリンクする場合などがわかりやすいですね。

<a href="https://www.google.com/">Googleへのリンク</a>

href属性へ記述するパスは絶対パス（URLなど、誰がみても場所が明らかなパス）での指定となります。

「https://」の部分を省略しても問題ないか？という質問がよくありますが、省略してはいけません。

httpsの部分は、パソコンやスマートフォンなどとWebサーバがデータをやり取りするための「プロトコル」（通信を行うための決まりごと）の種類を表しているので、この部分がなくなると通信不可となってしまいます。

内部リンク

内部の別のページへ飛ばすことを内部リンクといいます。

具体的に書いてみた方がわかりやすいので、やってみましょう。

まずエディタを開いて「page1.html」を次のように記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リンクの練習 page1</title>
  </head>
  <body>
    <h1>page 1</h1>
    <a href="page2.html">ページ2へ</a>
  </body>
</html>

次に、「page2.html」をpage1.htmlと同じフォルダ内に作成して次のように記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>リンクの練習 page2</title>
</head>
<body>
  <h1>page 2</h1>
</body>
</html>

ブラウザでページ1を開くと下記のようにページ2へのリンクが表示されます。

リンク先は先ほど記述した通り、「href=”page2.html”」となっていますね。

クリックしてみると、下記のように先ほど作ったpage2.htmlが開かれます。

このように、内部リンクの場合は外部リンクの時のように絶対パスとしてURL等を指定せずとも、リンク元のページから見たリンク先ページへのパス（相対パスと呼びます）でリンクできます。

ページ内リンク

もう1つ、同じページ内の別の場所へ飛ばしたい時に使えるのがページ内リンクです。

ページによっては縦に長く、冒頭に戻りたい時にスクロールするのが面倒なことがありますよね。

そんな時に便利に使えます。

これもやってみた方がわかりやすいのでコードを書いてみましょう。

エディタで「page1.html」に下記のように記述してください。

縦に長いページを作るために少々コードが縦に長くなります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リンクの練習 page1</title>
  </head>
  <body>
    <h1>page1</h1>
    <a href="#apple">りんごへ</a>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <h2 id="apple">りんご</h2>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
  </body>
</html>

上記のコードでは冒頭部で「りんごへ」のリンクがあり、href属性で「href=”#apple”」としたことに注目してください。

また、たくさんの「テスト」段落が並ぶ中、真ん中段あたりに「りんご」の見出しがあり、この見出しにはid属性を使って「id=apple」としていますね。

ブラウザで開くと、下記のようになります。

「りんごへ」をクリックしてみると…

無事に「りんご」の位置まで飛ぶことができました！

このように、ページ内の他の要素（見出しや段落にすることが多いです）にid属性で一意なidを割り振り、a要素から#をつけてhref属性で指定すればページ内リンクを作ることができます。

まとめ

HTMLの醍醐味ともいえるリンクについて、基本的な使い方を解説しました。

また、3種類あるリンクの使い方についてもコード例を交えて説明しましたので、ぜひご自身でも書いて覚えてください。

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

新HTML入門（Proglus）

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

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

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

今すぐ詳細を確認する

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

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

はじめに

HTMLの「説明リスト」をご存知ですか？

<ul>タグと<li>を使う箇条書き（順序なしリスト）や、<ol>と<li>を使う順序付きリストは知っていても、説明リストを使ったことがまだない方もいらっしゃるかもしれません。

この記事では説明リストとはどんなものか？を説明し、使い方についても解説します。

動画解説

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

https://www.youtube.com/watch?v=-yZ4flD_jeM&feature=youtu.be

説明リストとは

まず、説明リストがどんなものなのかを見ていきましょう。

先にイメージがあるとわかりやすいですね。下記のようなものを説明リストと呼びます。

用語があってその下にその用語の説明がつく、このセットが３つ並んでいますね。

このように、ある用語の説明に特化したリストを説明リストと呼びます。

この説明リストを記述したHTMLは下記の通りです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>説明リストの練習</title>
  </head>
  <body>
    <dl>
      <dt>用語1</dt>
      <dd>説明1</dd>
      
      <dt>用語2</dt>
      <dd>説明2</dd>
      
      <dt>用語3</dt>
      <dd>説明3</dd>
    </dl>
  </body>
</html>

コードの内容を紐解いていきましょう。

dl要素

dl要素は「Description List」の略で、説明リストであることを表します。

<dl>〜</dl>の中に後述の<dt>タグと<dd>タグを記述して説明リストを構成する訳です。

dt要素

dt要素は「Description Term」の略で、<dt>〜</dt>の中に説明対象となる用語や文章を記載します。

dd要素

dd要素は「Description Definition」の略で、dt要素が指す単語や用語の意味や説明を記載します。

<dd>〜</dd>の中に内容を書いてください。

使用例で確認しよう

理解を深めるために順を追って使用例を確認しましょう。

まず、完成イメージは下記の通りです。

このサイトでもよく取り上げているWebプログラミング言語の説明リストですね。

まずはエディタで新規ファイル「description-list.html」を作成してください。

下記の通りコードを記述しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>説明リストの練習</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>文章構造を定義するマークアップ言語です</dd>

      <dt>CSS</dt>
      <dd>ウェブページのスタイルを指定するための言語です</dd>

      <dt>JavaScript</dt>
      <dd>動的なウェブページを作成する事のできるプログラミング言語です</dd>
    </dl>
  </body>
</html>

ファイルを保存し、完成イメージと同じようにできていればOKです。

ここで、説明リストについてよくある質問とその答えを確認しましょう。

用語と同じ行に説明を書くことはできる？

スタイル（CSS）を適用すればそのように表示することが可能です。別の記事で取り上げます。

ただし、HTMLはあくまで文書の構造を定義するために使用すべきなので、HTMLでは実施しません。

必ず用語はdt要素、説明はdd要素で書くようにしてください。

箇条書きを使って書いてはいけないの？

<ul>と<li>を使って箇条書きにしても同じような表示はできるので、間違いではありません。

しかしながら、似たような表示であっても箇条書きと説明リストでは書く側が文書に持たせたい意味合いが異なります。

例えば下記のような文書を比べてみましょう。

文書１：お買い物リスト

りんご
ぶどう
みかん

文書２：果物の説明

りんご

バラ科リンゴ属の植物。7500以上の品種が栽培されている。

ぶどう

ブドウ科の植物。果実はワインの原料ともなる。

みかん

ミカン科の植物。正式名称はウンシュウミカン。

文書１は単なる列挙、文書２では用語とそれに対する説明となっていますね。

その文書に何が書かれているのかをマークアップするのがHTMLの役割であり、ブラウザや検索エンジンはそれを頼りに機能します。

ブラウザでその文書に合った表示をさせたり、検索エンジンに正しく文書の内容を解析してもらうためにも意味合いに合ったタグを選んで記述するよう心がけましょう。

まとめ

説明リストの紹介と、HTMLでの記述方法解説を行いました。

用語の説明にぜひ活用してみてください。

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

新HTML入門（Proglus）

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

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

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

今すぐ詳細を確認する

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

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

はじめに

改行や区切り線、見出しといった簡単なHTMLを理解できるようになったそこのあなた、学習はいいペースで進んでいるようですね。

これまで覚えてきた要素は「開始タグ・コンテンツ・終了タグ」の構成がほとんどで、開始タグの中にはタグ名しか入っていないことが多かったのではないでしょうか？

例えば見出しならば<h2>はじめに</h2>といった感じです。

しかし、HTMLをマスターするにはもう一つ覚えるべき「属性」という機能があります。初めて聞いた方もいらっしゃるかもしれませんね。

この記事では属性の説明と、画像の表示方法を例にした使い方解説を行います。

動画解説

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

https://www.youtube.com/watch?v=GkMs6uPgHsE&feature=youtu.be

属性とは？

わかりやすくいえば「属性」（英語でAttribute）とはタグの設定を行うための機能です。

言い換えると、属性によってタグを使用する際のオプションを設定できます。

属性の基本構文

属性を使う場合の基本構文は下記の通りです。

<タグ名 属性名="属性値"></タグ名>

開始タグの中に、「属性名」と「属性値」があり、この2つを合わせて「属性」と呼びます。

属性の使用例

実際に属性がどのように使われるのか見てみましょう。

<a href=”https://www.google.co.jp/”>Google</a>
<img src="cat.jpg">
<link rel="stylesheet" href="default.css">

1行目は「a要素」といい、他のウェブページへのリンクを設定できます。開始タグにあるhref属性でリンク先のURLを指定していますね。

2行目は「img要素」で、画像表示が可能です。この例ではsrc属性を使って画像のファイル名を指定しています。詳しい使い方は次項にて詳しく解説するのでそちらを参照してください。

3行目は「link要素」といい、外部リソース（文書や画像等）へのリンクを設定できます。rel属性でリンク先との関係（この例ではスタイルシート）、href属性でリンク先のファイル名を指定していますね。

このように、要素によってはタグ名とコンテンツだけではその機能が果たせないことがあり、開始タグの中でオプションを指定する必要があるので、こういった場合に属性を使用するわけです。

属性の一覧

MDNのサイトではHTMLで使用できる属性の一覧を確認できます。

HTML 属性リファレンス – HTML: HyperText Markup Language

全てを暗記する必要はなく、必要に応じて参照すればOKですが、どのような属性があるか気になる方は見てみてください。

画像の表示で属性を使ってみよう

ここからは実際に画像の表示をするHTMLを書きながら属性の使い方をマスターしていきましょう。

下準備として、下記のリンク先に例題用に用意した犬の画像がありますのでダウンロードしてください。

犬の画像（例題用）

src属性の使い方：相対パス

エディタで新規ファイル「attribute.html」を作成し、下記のように打ち込んでください。

また、先ほど用意した犬の画像「dog.jpg」をattribute.htmlと同じフォルダ下に置きましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>属性の練習</title>
  </head>
  <body>
    <img src="dog.jpg">
  </body>
</html>

ブラウザで表示して下記のようになればOKです。

ここで、img要素のタグ内で「src=”dog.jpg”」と書いてあるのに注目してください。

このHTMLファイル（attribute.html）から見て同じフォルダ内に「dog.jpg」があるのでファイル名を指定するとこの画像を表示することが可能です。

HTMLファイルから見た場合に画像ファイルがどこにあるのか？を相対的に指定するので、このような指定方法を「相対パス」指定と呼びます。

src属性の使い方：絶対パス

先ほどのように画像ファイルがHTML文書から見てどこに配置されているか？ではなく、誰が見ても明確な場所として指定することを「絶対パス」指定と呼びます。

具体的には、下記のコードのようにオンライン上に置かれている画像ファイルの場所をURLで指定するような場合です。比較のため、先ほどのコードの下に区切り線をつけ、その下に書いてみましょう。

この時も相対パス指定時と同様、src属性で指定できます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>属性の練習</title>
  </head>
  <body>
    <img src="dog.jpg">
    <hr>
    <img src="https://dl.dropboxusercontent.com/s/hgql4ez48vtzcr7/dog.jpg">
  </body>
</html>

ブラウザで下記のように表示されたでしょうか。同じ画像ですが、上は相対パス指定、下は絶対パス指定での画像表示です。

下の画像は別のサイトから取得後に表示しているため、ネットワーク環境によっては下の画像の方が表示に時間がかかるかもしれません。

width属性とheight属性

img要素ではsrc属性の他にも、画像表示時の横幅を指定するwidth属性、縦幅を指定するheight属性が設定可能です。

attribute.htmlのコードを下記のように書き換えてみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>属性の練習</title>
  </head>
  <body>
    <img src="dog.jpg" width="300" height="200">
  </body>
</html>

src属性の後にスペースでwidth属性、height属性が続いていますね。

このように、スペースで区切って複数の属性を指定できます。

ファイルを保存したら、ブラウザで確認してみましょう。

先ほどwidthやheightを指定せずに表示した時よりも画像が小さくなっていますね。

この画像の元の大きさは600 x 400なので、今回300 x 200を指定することで縮小表示されたわけです。

意外と重要なalt属性

最後にもう一つ、img要素で指定できる重要な属性である「alt」を紹介します。

alt属性は「altanative（代替手段）」の略で、これは何の画像か？を表す文言を入力するためのものです。

用途としては、万が一画像の表示に不備があった際に何の画像が表示されるはずだったのかを説明したり、音声読み上げ時に画像の代わりに読み上げたりするのに用いられます。

先ほどのファイルをさらに下記のように書き換えてみてください。

src属性で、存在しないファイル名「dog1.jpg」に書き換えたことに注目してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>属性の練習</title>
  </head>
  <body>
    <img src="dog1.jpg" width="300" height="200">
  </body>
</html>

画像の実際のファイル名はdog.jpgなので、これでは正しく画像を読み込めません。どうなるのでしょうか。

ブラウザで表示を確認してみましょう。

画像が表示されないのは仕方ないとして、これでは何の画像が出る予定だったのか、ページを訪れたユーザーにとっては意味不明となってしまいますね。

では次にalt属性を指定してみましょう。attribute.htmlを下記のように書き換えてください。

src属性は先ほどのまま存在しない画像ファイル名である「dog1.jpg」を指定し、alt属性として画像の内容がわかる文言を付け加えます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>属性の練習</title>
  </head>
  <body>
    <img src="dog1.jpg" width="300" height="200" alt="犬がシャボン玉と戯れる様子">
  </body>
</html>

ブラウザで表示すると下記のようになります。

今回も画像は表示されませんが、altを指定しているのでどんな画像だったのかの説明が表示されました。

これならば万が一、画像表示に不備があってもイメージしてもらうことができますね。

また、音声読み上げの時にもどんな画像なのかを読み上げてもらうことが可能です。

まとめ

HTMLのマスターに欠かせない属性について、画像表示を例に使用方法を解説しました。

実は属性の使用が必須である要素はかなり多いです。

そのため、属性を使用できるようになると、HTMLの使い道が一気に広がり、高度なウェブページを作れるようになります。

ぜひ使いこなしていきましょう！

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

新HTML入門（Proglus）

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

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

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

今すぐ詳細を確認する

演習方式でHTMLのリスト表記方法を学習！解説で理解を深めよう

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

はじめに

HTMLの学習、進んでいますか？

どのような学びの場でもいえることですが、インプットばかり行うよりも、アウトプットの場があった方が学習速度が加速します。

コード例やタグの使用例を見ながらコーディングするのも良いのですが、たまに自分で考えながらコードを書くのがおすすめです。

その機会として、この記事では演習方式でHTMLでのリスト表記方法を解説します。

先に演習問題を紹介し、その後に回答を解説しますので、腕試しとしてぜひチャレンジしてみてください。

自分でコードを書くのが重要ですので、必ずエディタを開いてやってみましょう。

動画解説

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

演習：HTMLのリスト表記

https://www.youtube.com/watch?v=gO9bYC_VPaE&feature=youtu.be

演習回答：HTMLのリスト表記

https://www.youtube.com/watch?v=vtMS65OmZjM&feature=youtu.be

演習：HTMLでリスト表記をしてみよう

この演習では、HTMLでのリスト表記ができるかどうかを確認します。

HTMLのリスト表記は２種類で、箇条書き（順序なしリスト）と順序付きリストがありますね。

いずれも複数の項目を列挙したり、手順を示したりするのによく使われる機能です。

ぜひ使い方を暗記しておきたい機能ですね。

この演習では、下記のようなレストランメニューのHTMLページを作ってみましょう。正しく記述できるでしょうか？

ファイル名を「exercise-list.html」として新規作成し、エディタでコーディングしてみてください。

ヒント１：見出しの「メニュー」文字はh1要素です。
ヒント２：順序なしリスト（箇条書き）は英語で「unordered list」です。使用する要素名はこれに由来します。
ヒント３：リストの項目は英語で「list item」ですね。

回答解説：HTMLのリスト表記はこうやればできる！

できましたでしょうか？ここから回答を解説していきます。

繰り返しになりますが、必ず自分で書いたコードを用意してからご覧ください。

ページタイトル

まず、演習問題の画面をみるとブラウザのタブに「メニュー」とありますね。

これはtitle要素で次のように書く必要があります。

<title>メニュー</title>

見出し

また、見出しにも「メニュー」とありますね。ヒントの通り、これはh1の大きさですので下記のように記述しましょう。

<h1>メニュー</h1>

箇条書き（順序なしリスト）

ここが今回のメインどころです。

演習問題の画面には箇条書きで「食事」「ドリンク」「デザート」と書かれていますね。

箇条書き（順序なしリスト）を書くには<ul>要素と<li>要素を使って下記のように記述しましょう。

<ul>
  <li>食事</li>
  <li>ドリンク</li>
  <li>デザート</li>
</ul>

回答コード

ここまでのポイントをまとめ、回答としては下記のようなHTMLコードとなります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>メニュー</title>
  </head>
  <body>
    <h1>メニュー</h1>
    <ul>
      <li>食事</li>
      <li>ドリンク</li>
      <li>デザート</li>
    </ul>
  </body>
</html>

ブラウザで表示すると、当初の目標としていた画面の通りに表示されます。

番外編：順序付きリストの場合

なお、今回は箇条書きの例でしたが、順序付きリストの書き方も覚えておきましょう。

順序付きリストは<ul>でなく<ol>を使います。「ordered list」の略と覚えると覚えやすいですね。

コード例は下記のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>メニュー</title>
  </head>
  <body>
    <h1>メニュー</h1>
    <ol>
      <li>食事</li>
      <li>ドリンク</li>
      <li>デザート</li>
    </ol>
  </body>
</html>

ブラウザでの表示結果は下記のようになります。数字がつきましたね。

まとめ

HTMLでのリスト表記方法を演習方式で解説しました。

自分で考えて書くと、理解がより深まったのではないでしょうか？

ぜひたまに自分でコーディングする癖をつけて学習を加速していきましょう。

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

新HTML入門（Proglus）

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

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

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

今すぐ詳細を確認する