「プログラミング学習のツボ」へようこそ！
管理人のKENです。
本サイトでは、
文系・初心者の私が、
プログラミング学習を進める中でつまづいたこと、
最初から知ってれば良かった、
ということをまとめていきます。
これからプログラミング学習を始める方の一助になれば幸いです。
今回は『HTML（エイチティーエムエル）』を学習したい方向けに、
基本的なポイントをまとめてみました！
（HTML5に準拠）
そもそも『HTML（エイチティーエムエル）』って何？
という方は、以下の別記事もご参照下さい！
-
-
【プログラミング初心者必見！】『HTML（エイチティーエムエル）』学習のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、文系・初心者の私が、プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かったということをまとめていきます ...
続きを見る
また、今回の記事は、
以下、別記事でご紹介した知識前提で書いています。
-
-
【基礎から学ぼう！】『HTML（エイチティーエムエル）』学習、超基本のツボ
「プログラミング学習のツボ」へようこそ！ 管理人のKENです。 本サイトでは、 文系・初心者の私が、 プログラミング学習を進める中でつまづいたこと、 最初から知ってれば良かった、 ということをまとめて ...
続きを見る
『テキストエディタ』・『タグ』。
これらの単語を聞いてピンと来ない方は、
ぜひ上記の記事を先にご参考下さい。
[toc]
<body（ボディ）>タグ内にはコンテンツを書く
<body>タグ内には、
実際にブラウザの画面に表示されるコンテンツ
を書きます。
例えば、テキストや画像等ですね。
まさに今皆さんが見ているこの文章も、
<body>タグに挟まれた中に書かれています。
<body>タグ内には、
色々なタグを書き込むケースがありますが、
今回は、その中でも基本的なものを学んでいきましょう！
文章の基本！<h（エイチ）>タグ と<p（ピー）>タグを知ろう
皆さんがWebサイトを見る際、
コンテンツとして、
必ず文章は目にしますよね。
この文章を表示している基本のタグが、
<h>タグと<p>タグです。
早速、実際のコードを見てみましょう！
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<h1>一番大きな見出し</h1>
<p>これが一番大きな見出しです。</p>
<h2>二番目に大きな見出し</h2>
<p>これが二番目に大きな見出しです。</p>
</body>
</html>
10〜13行目が、
<h>タグ・<p>タグの書き方です。
実際にブラウザで表示させてみると、
こんな感じ。
<h>タグの「h」は、
「heading（見出し）」の意味。
見出しレベルに応じて、
<h1>〜<h6>まで数字とセットで書きます。
<h1>が一番の大見出し、
<h6>までレベルがあり、
数字が大きくなるほど、
小さな見出しになっていきます。
実際にブラウザ表示させた例でも、
<h1>タグより、<h2>タグの方が少し小さく表示されていますね。
<h1>より<h2>、<h2>より<h3>の方が、
文字サイズが小さく表示されますが、
単純に文字サイズを小さくしたいだけで、
<h>タグを使うことは避けましょう。
今回は詳しく触れませんが、
文字サイズを小さくしたい場合は、
<font（フォント）>タグや『CSS』等で
調整するようにしましょう。
Google等の検索サイトは、
<h>タグから見出しレベルを読み取っています。
画面上綺麗に表示されていても、
見出しが不規則に使われていると、
検索サイト側から、文章の構成上、
ユーザーに寄り添ったサイトの作りになっていないと見られ、
検索した際に上位に表示されにくくなる可能性があります。
今はあまり気にする必要はありませんが、
Webサイトを公開する際には、
少し気にしておくと良いポイントです。
箇条書きはこのタグで！<ul>タグもしくは<ol>タグと、<li>タグ
文章を書いていて、
箇条書きにしたい時ってありますよね？
要点をまとめる時や、
何かの手順を伝えたい時は、
- <ul>タグ、もしくは<ol>タグ
- <li>タグ
を使います。
（この箇条書きがまさにそれ）
<li>タグは必ず使います。
- プログラミング
- 学習
こんな感じで、
「・」の箇条書きを表示したい時は、
<ul>タグと<li>タグのセットを使います。
実際のコードは以下の通り。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<ul>
<li>プログラミング</li>
<li>学習</li>
</ul>
</body>
</html>
10〜13行目のように書きます。
また、以下のように、
番号付きの箇条書きを表示したい時もありますよね。
- プログラミング
- 学習
そんな時は、
<ol>タグと<li>タグのセットを使います。
実際のコードはこんな感じです。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<ol>
<li>プログラミング</li>
<li>学習</li>
</ol>
</body>
</html>10〜13行目のように書きます。
ちなみに、
<ul>の「ul」は、
「unordered list（順序がないリスト）」の意味、
<ol>の「ol」は、
「ordered list（順序のあるリスト）」の意味です。
何の略なのか、
英語の意味と紐付けて覚えてしまうのもオススメです。
箇条書きを使うケースは意外と多いと思います。
ぜひ身につけておきましょう！
<header（ヘッダー）>タグで、タイトルやメニューを表示させよう
Webサイトの上部に表示されるエリアを、
ヘッダーエリアと言います。
赤枠で囲まれたエリアがヘッダーエリア↓
ヘッダーエリアは、
アクセスしてくれた多くの人の目にとまる為、
Webサイトのロゴやタイトル、
メニュー等を表示することが一般的です。
ヘッダーエリアは<header>タグで指定します。
実際の書き方を見てみましょう！
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>プログラミング学習のツボ</title>
<link rel = "stylesheet" href = "読み込みたいCSSのファイル名">
</head>
<body>
<header>
<h1>プログラミング学習のツボ</h1>
<ul>
<li>プログラミングとは</li>
<li>学習とは</li>
<li>お問い合わせ</li>
</ul>
</header>
</body>
</html>10〜17行目が<header>タグ部分です。
<body>タグに挟まれていることを確認しておきましょう。
<header>タグ内の<h1>タグでWebサイトのタイトルを表示、
以降の行でWebサイトのメニュー（※）を表示しています。
※本来は、これにリンクをつけたり、
ナビゲーションメニューの範囲を表す<nav（ナブ）>タグをつけたり、
『CSS』で位置を整えたりしていきます。
今回はプログラミング学習初心者向けなので、
一番簡単な形でとどめています。
色々と書いてきましたが、
<header>タグには、
Webサイトのタイトルやメニューを書き込む、
ということをまずは覚えておきましょう！
まとめ
・<body>タグ内には、コンテンツを書く
・文書表示の基本は、<h>タグと<p>タグ
・箇条書きは<ul>もしくは<ol>タグと、<li>タグのセット
・<header>タグには、タイトルやメニューを書き込む
いかがでしたでしょうか？
ここまで学習を進めてきた方は、
まだ簡易とは言え、
文章や箇条書き等をWebサイト上に表示することが
出来るようになりました。
実は、今回学習した内容以外にも、
<body>タグ内に書く基本的なことは、
まだあります。
ですが、少し長くなってきましたので、
今回はここまで。
続きは別の記事で改めて解説させて頂きます。
ここまで『HTML』学習を進めてきた皆さんの世界は、
少しづつ確実に広がっています。
かっこいい・かわいいWebサイトを自分で作っちゃう日を目指して、
一つずつやれることを増やしていきましょう！
皆さんの『HTML』学習、
応援しています！