「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『HTML（エイチティーエムエル）』を学習したい方向けに、
基本的なポイントをまとめてみました！
（HTML5に準拠）
そもそも『HTML（エイチティーエムエル）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、今回の記事は、
以下、別記事でご紹介した知識前提で書いています。
-
-
【基礎から学ぼう！】『HTML（エイチティーエムエル）』学習、超基本のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、 文系・初心者の私が、 プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かった、 ということをまとめて ...
続きを見る
『テキストエディタ』・『タグ』。
これらの単語を聞いてピンと来ない方は、
ぜひ上記の記事を先にご参考下さい。
[toc]
今回の記事は、以下記事の続きです。
宜しければこちらもご参照下さい。
-
-
【『HTML』基本のツボ】Lesson3−①
<body>タグ内に書くことを知ろう！
［<body>・<h>・<p>・<ul>・<ol>・<li>・<header>］「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、 文系・初心者の私が、 プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かった、 ということをまとめて ...
続きを見る
<nav（ナブ）>タグでナビゲーションを表示しよう
<nav>タグは、
主要なナビゲーションを表示するのに使います。
主要なナビゲーションとは、
クリックすると、
Webサイト内の他のページにとべる
メインメニューのことで、
グローバルナビゲーションと言ったりします。
実際のコードを見ていく前に、
「他のページにとぶ仕掛け」である「リンク」を表示する
<a（エー）>タグも
先に併せて学習してしまいましょう！
<a（エーもしくはアンカー）>タグで「リンク」を表示しよう
「リンク」は、
<a>タグで表示します。
それでは、
ここまで学習してきた
<nav>タグ・<a>タグを実際に使ってみましょう！
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<header>
<h1>プログラミング学習のツボ</h1>
<nav>
<ul>
<li><a href = "リンクしたいファイル名やURL等">プログラミングとは</a></li>
<li><a href = "リンクしたいファイル名やURL等">学習とは</a></li>
<li><a href = "リンクしたいファイル名やURL等">お問い合わせ</a></li>
</ul>
</nav>
</header>
</body>
</html>
12〜18行目が、
<nav>タグ・<a>タグの書き方です。
実際にブラウザで表示させてみると、
こんな感じ。
箇条書き部分に下線が付き、
マウス等でクリックすることが出来るようになりました。
今回のサンプルそのままでは、
リンク先のファイル等を具体的に設定していませんので、
クリックしても他のページにとべませんが、
実際のファイルやURL等を「href = " "」の部分に書き込めば、
ちゃんとそこにとぶようになります。
<main（メイン）>タグでメインコンテンツを作り込もう
Webページの中核、
伝えたい主要な情報を表示する部分は、
<main>タグで囲みます。
実際の書き方は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<header>
<h1>プログラミング学習のツボ</h1>
<nav>
<ul>
<li><a href = "リンクしたいファイル名やURL等">プログラミングとは</a></li>
<li><a href = "リンクしたいファイル名やURL等">学習とは</a></li>
<li><a href = "リンクしたいファイル名やURL等">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h1>プログラミング学習のメインコンテンツ</h1>
<p>ここがメインコンテンツです。</p>
</main>
</body>
</html>
22〜25行目が<main>タグです。
先に学習した<header>タグ内に書き込まないよう気をつけましょう。
ブラウザで表示されるとこんな感じです。
<footer（フッター）>タグで著作権や注釈を表示しよう
Webページの最下部によく表示される、
著作権表示（「©2021 ○○」という表示）やページの注釈等は、
<footer>タグの中に書き込みます。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<header>
<h1>プログラミング学習のツボ</h1>
<nav>
<ul>
<li><a href = "リンクしたいファイル名やURL等">プログラミングとは</a></li>
<li><a href = "リンクしたいファイル名やURL等">学習とは</a></li>
<li><a href = "リンクしたいファイル名やURL等">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<h1>プログラミング学習のメインコンテンツ</h1>
<p>ここがメインコンテンツです。</p>
</main>
<footer>
<p><small>©2021 プログラミング太郎</small></p>
</footer>
</body>
</html>
27〜29行目で<footer>タグを使っています。
今回は著作権表示をしてみました。
サンプルコードでは、
「©（コピーライト）」と表示されていますが、
実際に皆さんがテキストエディタに打ち込む際は、
「©」は、
「©」と書きます。
HTMLでは「©」は、
「特殊文字」として扱う必要があり、
「©」と書いておかないと、
表示されなかったり、文字化けしたりしますので、
留意しましょう。
また、
見慣れない<small>タグが出てきてますね。
こちらは、注釈や著作権表示等、
小さく表示される部分に使います。
単純に文字を小さくする場合は、
『CSS』で整えるべきですが、
注釈や著作権表示等、
意味のある小さな表示の際は、
<small>タグを使うケースもあることを覚えておきましょう。
今回は著作権表示をしていますので、
「©2021 プログラミング太郎」部分を
挟むように使っています。
最下部にちゃんと著作権表示されてますね。
まとめ
・<nav>タグでメインメニューを表示する
・<a>タグを使えば、他のページへのリンクが作れる
・<main>タグにはWebページのメインコンテンツを書き込もう
・<footer>タグには、著作権表示や注釈等を使う
・著作権表示や注釈等は、<small>タグで挟む
・「©」は、HTML上、「©」と書く（特殊文字）
覚えることが増えてきましたが、
焦らずいきましょう。
まずは全体感を把握していくことが大切ですので、
完璧に覚えられていなくても、
どんどん先に進んでいきましょう。
プログラミング学習をしていると、
前に学習した時にはしっくりこなかったことが、
あとで振り返ると、
意外と簡単に理解出来ることが良くあります。
プログラミング学習のコツは、
完璧主義を捨てること。
気になる箇所は、
実際にテキストエディタに書き込んで、
ブラウザ表示してみるのも効果的です。
皆さんの『HTML』学習、
応援しています！