img

簡単なウェブページを作りながら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週間無料体験しよう

今すぐ詳細を確認する

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の使い道が一気に広がり、高度なウェブページを作れるようになります。

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