習うより慣れよ

HTMLで使用できるタグの数は非常に多く、ここに示したタグ以外にもさまざまな機能を持ったタグがごまんとあります。まずは自身で使ってみて、楽しみながら、時にはなかなか思うようにデザインできないもどかしさと闘いながら、自分が使いたいタグを極めてみてください。

強調：<strong>，<em>

文章中の特定の箇所を強調したい場合には文字色を変えたり蛍光ペンで強調したり、さまざまな手法を取ることができます。その中でシンプルなのは①太字と②斜体（イタリック）があります。HTMLではどのように強調できるでしょうか。

①太字（strong、b）

太字で強調したい時は基本的にstrongタグを使用しましょう。太字で表示されると同時に文字列に重要性を与えます。bタグも使用可能ですが、文字列に重要性を与えず、フォントによっては太字とならない場合があります。

②斜体（em, i）

斜体で強調したい時にはemタグを使用しましょう。こちらも文字列に重要性を与えます。iタグも使用可能ですが、フォントによっては斜体とならない場合があり、推奨はされていません。

以下使用例

<strong>strongタグは太字</strong> <b>bタグは太字</b>
<em>emタグは斜体</em> <i>iタグは斜体</i>
<strong><em>太字で斜体</em></strong>

strongタグは太字 bタグは太字

emタグは斜体 iタグは斜体

太字で斜体

リスト：<ul>，<ol>，<li>

HTMLで箇条書きをしたい時は<ul>タグまたは<ol>タグを使いましょう。

箇条書きでで並べたい項目を<li>タグで列挙し、それらを黒点で並べる<ul>タグか番号で並べる＜ol＞で挟むだけです。

ーーー

使用例：黒点で並べる場合

<ul>
  <li>アイスランド共和国</li>
  <li>アイルランド</li>
  <li>アゼルバイジャン</li>
  <li>アフガニスタン</li>
  <li>アメリカ合衆国</li>
</ul>

アイスランド共和国
アイルランド
アゼルバイジャン
アフガニスタン
アメリカ合衆国

ーーー

使用例：番号で並べる場合

<ol>
  <li>中華人民共和国</li>
  <li>インド</li>
  <li>アメリカ合衆国</li>
  <li>インドネシア</li>
  <li>パキスタン</li>
</ol>

中華人民共和国
インド
アメリカ合衆国
インドネシア
パキスタン

テーブルの作成：<table>

テーブル（表）を使うこともあるでしょう。皆さんがよくWordで作成したレポートに載せているアレです。テーブルを作成する時は<table>タグを使います。

例えば次のようなテーブルを作成するとしましょう。

この時、各行は<tr>タグで追加します。各行には<th>タグで見出し、あるいは<td>タグでデータを追加して列に並べていきます。実際に作成すると以下のようになります。

<body>
<table border="1" width="50%">
   <tr style="color:white;background-color:dimgray">
      <th>都道府県</th>
      <th>県庁所在地</th>
      <th>人口（万人）</th>
   </tr>
   <tr>
      <td>愛媛県</td>
      <td>松山市</td>
      <td>133</td>
   </tr>
   <tr>
      <td>香川県</td>
      <td>高松市</td>
      <td>95</td>
   </tr>
   <tr>
      <td>徳島県</td>
      <td>徳島市</td>
      <td>71</td>
   </tr>
   <tr>
      <td>高知県</td>
      <td>高知市</td>
      <td>69</td>
   </tr>
</table>
</body>

都道府県	県庁所在地	人口（万人）
愛媛県	松山市	133
香川県	高松市	95
徳島県	徳島市	71
高知県	高知市	69

特定の列・行・セルのみ文字色（color）や背景色（bgcolor）を変更したり、セルの幅（width）や高さ（height）を変更することも可能です。例えば上の表の徳島県の列のみを強調したいときは対象のtr要素に変更を加えます。さらにその行の「徳島市」のセルのみ編集したい場合は対象のtd要素を編集します。

<body>
<table border="1" width="50%" style="text-align:center">
    <tbody>
        <tr style="color:white;background-color:dimgray">
            <th>都道府県</th>
            <th>県庁所在地</th>
            <th>人口（万人）</th>
        </tr>
        <tr>
            <td>愛媛県</td>
            <td>松山市</td>
            <td>133</td>
        </tr>
        <tr>
            <td>香川県</td>
            <td>高松市</td>
            <td>95</td>
        </tr>
        <tr style="background-color: #ffeaff">
            <td>徳島県</td>
            <td style="background-color: #ff4500; color: white; font-weight: bold;">徳島市</td>
            <td>71</td>
        </tr>
        <tr>
            <td>高知県</td>
            <td>高知市</td>
            <td>69</td>
        </tr>
    </tbody>
</table>
</body>

都道府県	県庁所在地	人口（万人）
愛媛県	松山市	133
香川県	高松市	95
徳島県	徳島市	71
高知県	高知市	69

見出しタグ：<h1>から<h6>

webページにはページそのもののタイトルとは別にそのページの内容が一目見て分かる「見出し」があります。HTMLには見出しタグがあり、サイズ別に<h1>から<h6>まであります。使い方は簡単で、タグで挟むだけです。以下のように記述してみましょう。

<h1>これがh1の見出しです</h1>
<h2>これがh2の見出しです</h2>
<h3>これがh3の見出しです</h3>
<h4>これがh4の見出しです</h4>
<h5>これがh5の見出しです</h5>
<h6>これがh6の見出しです</h6>

するとこのように表示されます。

これがh1の見出しです

これがh2の見出しです

これがh3の見出しです

これがh4の見出しです

これがh5の見出しです

これがh6の見出しです

これは文字サイズ指定を無視して<h1>から<h6>の各タグのサイズで表示されます。ページの内容に合わせて使い分けましょう。

リンク指定：<a>

<a>タグは外部のwebページへのリンクを挿入するタグです。

href属性で外部リンクのurlを指定し、他の属性でリンクへの飛び方を指定することもできます。

ーーー

使用例：そのまま目的のページにジャンプする場合

<a href="https://www.lib.kyushu-u.ac.jp/ja">九州大学附属図書館</a>

九州大学附属図書館

ーーー

使用例：別ウィンドウで目的のページにジャンプする場合（アンダーラインで目立たせてみる）

<u><a href="https://guides.lib.kyushu-u.ac.jp/Cuter" target="_blank">Cuter紹介ページだよ！</a></u>

Cuter紹介ページだよ！

画像の埋め込み：<img>

HTMLで画像を表示させるには<img>タグを使用します。これはサーバーにアップロードした画像のurlを指定して文章に埋め込みます。そのため、urlを指定するsrc属性が必須となります。ためしにフリー素材集「いらすとや」にあるこちらの画像（https://2.bp.blogspot.com/-Qu4ED30_mME/WIHlg1I8mGI/AAAAAAABBPs/mNVaVYfJWTElK9_rEFYUoiNUADphuFbYgCLcB/s800/landmark_tower_fukuoka.png）のurlを直接利用してみましょう。

ーーー

使用例：福岡タワーのイラストを表示させる（ちょうど良いサイズに高さと幅も調整する）

<img alt="福岡タワーの画像" loading="lazy" src="https://2.bp.blogspot.com/-Qu4ED30_mME/WIHlg1I8mGI/AAAAAAABBPs/mNVaVYfJWTElK9_rEFYUoiNUADphuFbYgCLcB/s800/landmark_tower_fukuoka.png" style="width: 190px; height: 320px;" />

JPEGやPNGといった静止画のみでなく、GIFなどのアニメーションを表示させることも可能です。ただしフリー素材でない場合は画像が転載可能か、引用元を明記する必要があるか確認しましょう。また、ここではimg要素の中でalt属性を指定し、"福岡タワーの画像"という属性値（画像の説明）を与えています。画像が上手く表示されないときや閲覧者が画像表示を制限しているときにalt属性でテキストを入力していれば、その説明テキストで代替して表示されます。また、メタデータとしてのalt属性の属性値は検索エンジンの検索対象ともなるので、特に多くの人がアクセスするWebページの画像にはalt属性を記述しておきましょう。

YouTubeの埋め込み

YouTubeの動画を紹介するブログは数多くあります。YouTubeの埋め込みは簡単に実行できます。

①まずYouTubeで埋め込みたい動画のページにアクセスし、「共有」をクリックします。

②次に、「埋め込み」をクリックします。

③埋め込み用のHTMLが表示されるのでこれをコピーします。再生時間を指定することも可能です。

④あとはこれを埋め込みたい場所に貼り付けるだけです。

グループ分け：<span>

HTML文書の特定の範囲全体のスタイルを変更したい、でもその他のデザインは変更したくない。そんな時は特定の範囲をひとつのブロックとしてまとめてあげる必要があります。そんなときに使われるのが<span>タグです。しばしばstyle属性がセットに使われて中にCSSが記述されます。

<p style="font-size:14px;color:indigo;">アクキガイより抽出される<span style="font-size:18px;color:white;background-color:indigo;">紫色の色素</span>は古代より染料として利用されてきた。</p>

アクキガイより抽出される紫色の色素は古代より染料として利用されてきた。

★HTML/CSSによる文書の作成とデザイン: 主なタグと使用例

目次