【プログラミング独学5日目】metaタグの必要性・文書実体参照・リスト作成・表作成・ページ内リンク・目次

FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。

なお私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

そして今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

  • プログラミング案件も受注できるようになりたい
  • 歯科衛生士エンジニアを目指したい
  • コーディングもライティングもできる歯科衛生士

【プログラミング独学5日目】学んだこと

昨日「はじめてのCSS」を終了し、ドットインストールの有料会員登録をしました。無料版で「はじめてのHTML」は終わっていますが、今日は改めて「もっとくわしくHTML」でHTMLを詳しく学び始めました。

今日も朝1時間プログラミング学習をしてから仕事をしました。日中も昨日できなかった分時間を割き学習を進めました。それでも計3時間ほどですが・・・。今日学んだことは多かったのでアウトプットします。

①基本的なHTMLの構造

HTMLはHyper Text Markup Languageの頭文字を取ったもので、基本的な構造は以下の通りです。

<h1>ドットインストール</h1>

<h1>の部分を「開始タグ」、</h1>の部分を「終了タグ」、ドットインストールの部分を「コンテンツ」と呼びます。またこのように構成された全体全体は「要素」と呼ばれます。また<img>タグのような、終了タグの無い要素は「空要素」と呼びます。無料版ではこういった超基本的な部分は逆に飛ばされていましたね。

②<!DOCTYPE html>の表記方法

<!DOCTYPE  html>の表記はHTMLのバージョンによって異なりますが、最新版であるHTML5ではこのように書きます。

③<meta>タグの必要性

<meta>タグは「〜についての」といった意味で使われます。<meta>タグが無くても表示に大きな問題はありませんが、それぞれの要素の意味合いを明確にしておくために書いておきましょう。このように意味合いを明確にしておくことはSEO対策にも繋がります。

④HTMLで文書を作成するときに記載するものまとめ

<p>タグなど文章の内容に応じて記述するタグではなく、HTMLで文書を作成する時点で必要になってくるのは以下の6つです。

  • <!DOCTYPE html>
  • <html lang="ja">
  • <meta charset="utf-8">
  • <title>〜〜〜</title>
  • <meta name="description" content="〜〜〜">
  • <link rel="icon" href="favicon.ico">

⑤引用／区切りを表すタグ

<blockquote>〜〜〜</blockquote>

引用元のサイトURLを記述しておくときは以下のようなHTMLになります。なお引用元のサイトURLは、ユーザー向けというよりHTML文書を解析する用途で記述しておくと良いです。

<blockquote cite="https:.//〜〜〜.com">〜〜〜</blockquote>

CSSでスタイルを適用していないと、字下げしたような状態で表示されます。

また話題が変わる部分など、区切りを表したいときは<hr>タグを記述します。<hr>はhorizontal ruleの略で、CSSでスタイルを適用していないと線が表示されます。

これらはあくまで文章の意味を考えて付けるタグで、装飾のために使ってはいけません。例えば見出しの下に線が欲しいからと<hr>タグを使うのは間違った方法です。装飾を目的とした線の挿入はCSSで行いましょう。

⑥タグをテキストとして表示させたいとき

例えばこの記事のように、<br>などといったタグをそのままテキストとして表示させたいとき。HTMLの画面で打つとタグとして認識されてしまい、テキストで表示させることができません。このようなときに使うのが「文字実体参照」という仕組みです。

例えば「<br>を使って改行しましょう。」という文章を表示させたいときは、以下のように記述します。

<p>&lt ; br &gt ; を使って改行しましょう。</p>

「&lt ; 」は「less than」の略で、小なり（＜）を表します。逆に「&gt ; 」は「greater than」の略で、大なり（＞）を表します。つまり<br>の＜＞の部分を&lt ; と&gt ; で書き換えたということです。これが文字実体参照の仕組みで、こうすることで「<br>」をそのままテキストとして表示させることができます。

なお上記のように記述すると、「<br>」はそのままテキストとして表示させられますが、元々<br>の役割であった改行などは失われます。このようにタグの意味を残しつつそのままテキストとして表示させたいときは<pre>タグを使います。

<pre>
　<p>&lt ; br &gt ; を使って改行しましょう。</p>
</pre>

<pre>タグで囲うと、<br>だけでなく字下げもそのまま反映されます。つまり上記のように記述すると、文章の前に少しスペースが空いてしまうため注意しましょう。

加えて、上記の記述はコードであるため最終的に以下のような記述で完成となります。

<pre>
<code>
<p>&lt ; br &gt ; を使って改行しましょう。</p>
</code>
</pre>

<code>タグは書かなくても見た目上問題ありませんが、意味を明確にするため記載します。また<pre>タグの中に<code>タグを入れるのはルール違反であるため順番を守るようにしましょう。

⑦リスト作成

HTMLで表現できるリストには3種類あります。

  • 箇条書きリスト
  • 番号付きリスト
  • 説明付きリスト

それぞれの書き方を解説します。

箇条書きリスト

箇条書きリストとは以下のようなもので、<ul>／<li>タグを使用します。

  • 赤
  • 青
  • 黄

HTMLでは以下のように記述します。

<ul>
　<li>赤</li>
　<li>青</li>
　<li>黄</li>
</ul>

番号付きリスト

番号付きリストとは以下のようなもので、<ol>／<li>タグを使用します。

  1. 赤
  2. 青
  3. 黄

HTMLでは以下のように記述します。

<ol>
　<li>赤</li>
　<li>青</li>
　<li>黄</li>
</ol>

説明付きリスト

説明付きリストとは以下のようなもので、<dl>／<dt>／<dd>タグを使用します。

赤

　りんごの色です。

青

　空の色です。

黄

　バナナの色です。

HTMLでは以下のように記述します。

<dl>
　<dt>赤</dt>
　　<dd>りんごの色です。</dd>
　<dt>青</dt>
　　<dd>空の色です。</dd>
　<dt>黄</dt>
　　<dd>バナナの色です。</dd>
</dl>

⑧表作成

年 出来事
　 2015　　 会社設立
  2019　 サイトリニューアル

例えば上のような表を作るときは以下のようなHTMLになります。

<body>
　<table>
　　<thead>
　　　<tr>
　　　　<th>年</th>
　　　　<th>出来事</th>
　　　</tr>
　　</thead>

　　<tbody>
　　　<tr>
　　　　<td>2015</td>
　　　　<td>会社設立</td>
　　　</tr>
　　　<tr>
　　　　<td>2019</td>
　　　　<td>サイトリニューアル</td>
　　　</tr>
　　</tbody>
　</table>
</body>

<body>
　<table>
　　<thead>
　　　<tr>
　　　　<th>年</th>
　　　　<th>出来事</th>
　　　</tr>
　　</thead>

　　<tbody>
　　　<tr>
　　　　<td>2015</td>
　　　　<td>会社設立</td>
　　　</tr>
　　　<tr>
　　　　<td>2019</td>
　　　　<td>サイトリニューアル</td>
　　　</tr>
　　</tbody>
　</table>
</body>

長くてややこしいですね。今まで出てきた中で一番苦手かもしれません。ひとまず表の見出しとなる部分には<thead>タグ、表の中身となる部分には<tbody>タグを使います。その後<tr>タグで大枠を作って、そこに<th>／<td>タグで中身を入れていく・・・と考えるとわかりやすいかもしれません。なお表の見出しが無い場合は、<thead>タグは書かなくてOKです。

⑨同サイト内別ページへのリンク

いま記述しているのはサイトトップページである「index.html」というファイルです。メンバー紹介画面とレッスン一覧画面を別で作るとしましょう。メンバー紹介画面は「members.html」というファイルで良いですが、レッスン一覧画面は画面数が多くなると考えられるため「lessons」というフォルダにまとめて、その中にひとまず「index.html」を作成します。

サイトトップページからメンバー紹介画面（members.html）へリンクさせるためには、以下のようなHTMLを記述します。

<a href="members.html">メンバー紹介画面はこちら</a>

逆にメンバー紹介画面からサイトトップページへの戻るためのリンクを載せるには、以下のようなHTMLを記述します。

<a href="index.html">サイトトップページへ戻る</a>

サイトトップページとメンバー紹介画面（members.html）は同じ階層にいるので、リンクの記述はシンプルです。

今度はサイトトップページからレッスン一覧画面（lessonsフォルダの中のindex.html）へのリンクを作成します。以下のようなHTMLを記述します。

<a href="lessons/index.html">レッスン一覧画面はこちら</a>

サイトトップページとレッスン一覧画面（lessonsフォルダの中のindex.html）は、フォルダを介しているため同じ階層にいません。サイトトップページの1つ下の階層にレッスン一覧があるようなイメージです。そのため上記のように記載します。

逆にレッスン一覧画面からサイトトップページへの戻るためのリンクを載せるには、以下のようなHTMLを記述します。

<a href="../index.html">サイトトップページへ戻る</a>

レッスン一覧から見るとサイトトップページは1つ上の階層にいるため、「. . /」と記載します。もし2つ上の階層のページへリンクしたい場合は「. . . /」、3つ上の階層のページへリンクしたい場合は「. . . . /」と「. 」が1つずつ増えていきます。

2021/6/1　追記

階層が増えていくごとに追加するのは「 . 」ではなく「../」です。そのため2つ上の階層のページへいきたいときは「../../」、3つ上の階層のページへリンクしたい場合は「../../../」となります。勘違いしていました。

⑩同ページ内の特定部分へのリンク

各見出しなど、同じページ内の特定の部分へリンクを飛ばせたいときは以下のように記述します。今回は同ページ内の<h2>タグにリンクさせたい場合の例です。

<a href="#about">サービス紹介はこちら</a>

リンク元のhref属性の中に「#」を書き、好きな名前を付けます。今回はサービスについてのリンクへ飛ばしたいので「about」という名前を付けました。上記のようなHTMLを記述したら、飛ばし先に以下のように追記します。

<h2 id="about">このサービスについて</h2>

リンク元で「aboutへ飛ばす」と勝手に名前を付けて指定したので、飛ばし先にもその名前が付いたことを明記します。

⑪ページ先頭へ戻るリンク作成

ページ下部にある「ページの先頭へ戻る」リンクは、以下のようなHTMLになります。

<p><a href="#">ページの先頭へ戻る</a></p>

「#」だけで良いですが、「#top」と記述してもOKです。なおこのリンクを押してページの先頭へ戻った場合、URLは「https://〜〜〜#」へと変化するため注意が必要です。「#top」と記述した場合は「https://〜〜〜#top」となります。

⑫ページの各区切りを表すタグ

ページ内の各区切りを表すHTMLは以下のようになっています。

<header>　ページ上部や導入部分

<footer>　ページ下部や締めくくり部分

<nav>　メニューのリンクなどページ内のナビゲーション部分

<aside>　本文の内容と関係性の低い部分（サイドバーの広告など）

<article>　ブログの記事など独立したコンテンツ

<main>　ページ内の主要な部分、1カ所にしか使えない

<section>　上記のどれにも分類できない部分

なお見た目だけであれば全て<div>タグで表すこともできますが、このようにさまざまなタグを使って意味を明確にすることで他のプログラムに正しく情報を伝えることができます。これがSEO対策などにもつながります。

【プログラミング独学5日目】わからなかったこと・調べてわかったこと

今日疑問が残った部分はありませんでした。というのも、有料版に登録したことで先生に直接質問ができるようになったんですよね。私はまだ質問していないですが、大体疑問を感じた部分は誰かが質問してくれていてそれに対して先生が答えてくれているので全て解決しました（有料版ではそういった他の人のやりとりも見ることができます）。他の人の質問すべてに目を通すことで自分では気付かなかった部分にまで目を向けられるので、有料登録して良かったな〜とつくづく感じました。明日も頑張ります。

FREELANCE,WORDPRESS/WEB

Posted by miho