はじめに
HTML＆CSS入門講座の第三弾として、HTMLの初心者入門、基本的な書き方とタグの使い方ついて紹介します。
この記事を読むと次の疑問について知ることができます。
・HTML宣言
・htmlタグ
・headタグ
・titleタグ
・bodyタグ
●HTMLでよく使うタグとはどのようなもの？
・pタグ
・h1〜h6タグ
・imgタグ
・aタグ
・ul/ol/liタグ
・brタグ
コメントアウト
●classとidとは何ですか？
●divタグとspanタグとは何ですか？
HTMLの基本構造
HTMLの基本的構造を勉強する前に、テキストエディターとブラウザーでの使い方手順を次にあげます。
HTML宣言
HTMLの文書を書く時には、この文書は「HTML文書だよ！」と宣言します。
この宣言文が、
<!DOCTYPE html>
htmlタグ
これも決まりのようなもので、ここからここまではHTMLのコードですよ！ということを知らせるものです。
htmlのタグの書き方の例を示します。
<html lang="ja">
この間に色々これから説明するhtmlの要素を書き込みます。
</html>
headタグ
headタグは、あなたが書こうとしている文書（Webページ）のいろいろな情報や設定を書きます。
headタグの書き方の例を示します。
<head>
<meta charset="utf-8">
<title>HTML＆CSS入門講座（３）</title>
<link rel="stylesheet" href="default.css">
</head>
titleタグ
この「titleタグ」は、あなたの文書（Webページ）のタイトルを意味しており、ブラウザーなどで表示した際にあなたのWebページのタイトルとして認識されます。
titleタグの書き方の例を示します。
<title>HTML＆CSS入門講座（３）</title>
bodyタグ
<body>
この文書は、HTML＆CSS（３）に関する文書です。
</body>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML＆CSS入門講座（３）</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
この文書は、HTML＆CSS（３）に関する文書です。
</body>
</html>
HTMLでよく使うタグ
pタグ
ｐタグは、「Paragraph（パラグラフ）」の「ｐ」を表し、段落を意味します。
したがって、一番文書内では使われるタグの一つです。
pタグの書き方の例を示します。（bodyタブ内に書いてください。）
<p>
パソコン上でHTML、CSSを書いていくための帳面と鉛筆に相当するものを用意する必要があります。 Windowsパソコンであれば、テキストエディターのメモ帳が標準で付属して、使えないことはないですが、HTML、CSSなどの言語を書く上ではあまりお勧めできません。
</p>
<p>
パソコン上でHTML、CSSを書いていくための帳面と鉛筆に相当するものを用意する必要があります。
</p>
<p>
Windowsパソコンであれば、テキストエディターのメモ帳が標準で付属して、使えないことはないですが、HTML、CSSなどの言語を書く上ではあまりお勧めできません。
</p>
h1〜h6タグ
hタグは、見出しを作成するためのHTMLの要素で、h1タグは、ブログなどでは文書のタイトルの一番大きい見出しとなります。
ブログなどでの本文中の見出しは、最大の見出しが「h2タグ」になることも頭に入れておいてください。
hタグの書き方の例を示します。（bodyタブ内に書いてください。）
<h1>一番大きい見出し</h1>
<h2>二番目に大きい見出し</h2>
<h3>三番目に大きい見出し</h3>
<h4>四番目に大きい見出し</h4>
<h5>五番目に大きい見出し</h5>
<h6>一番小さい見出し</h6>
imgタグ
文書中に画像を張り込むためのHTML要素です。
画像の張り込める画像タイプとして、jpeg(jpg)、png、gif、svg、WebPなどが利用できます。
imgタグの書き方の例を示します。（bodyタブ内に書いてください。）
<img src=
"https://yanai-ke.com/wp-content/uploads/2020/07/ponponmamu.jpg"
alt="黄色のポンポンマムの花だよ！" width="300" height="200"/>
aタグ
aタグは、リンクを作成するHTML要素になります。
aタグで指定した文字や画像をクリックすると、その指定したリンク先に飛ばすことができます。
aタグの書き方の例を示します。（bodyタブ内に書いてください。）
<a href="https://yanai-ke.com/">定年後のスローライフブログのトップに飛びます</a>
<p></p>
<ｐ>下の画像をクリックしてね！↓ ↓ ↓</p>
<a href="https://yanai-ke.com/"><img src="https://yanai-ke.com/wp-content/uploads/2020/07/ponponmamu.jpg" /> width="300" height="200"/></a>
ul、ol、liタグ
- 項目１
- 項目2
- 項目3
のようにリストを作成できます。
「ol」と「li」のペアで利用した場合は、
- 項目1
- 項目2
- 項目３
のようなリストを作成できます。
ul、ol、liタグの書き方の例を示します。（bodyタブ内に書いてください。）
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
brタグ
brタグは、改行のHTML要素です。
文書を見ていて、ただ単に改行したと思っても、改行されていないこともあります。
そのようなときに「brタグ」を使えば、強制的に改行をすることができます。
brタグの書き方の例を示します。（bodyタブ内に書いてください。）
<p>
cssとは、HTML、
<br>
CSSの勉強に必要なツール
</p>
コメントのタグ
文書を書いていて、ここの部分に注釈を入れておくと、後で見た際に分かりやすくなります。
コメントを入れたい部分に使うHTML要素が「<!--」と「-->」です。
この「<!--」と「-->」の間に注釈（コメント）を入れることができ、クラウザー上には表示されません。
<!--」と「-->」タグの書き方の例を示します。（bodyタブ内に書いてください。）
<p>
cssとは、HTML、
<br> <!--左の<br>は強制的に改行するHTMLの要素だよ！-->
CSSの勉強に必要なツール
</p>class属性とid属性
classとid属性は、HTML要素の開始タグで利用されるもので、次号以降で解説するCSSなどで修飾する際にClass、id名が付加されていれば、CSS内でHTMLのclass名やid名を指定して修飾が行えます。
class名とid名の注意事項を次に載せます。
class属性とid属性の書き方は以下の通り。
<開始タグ> id="id名" </終了タグ>
<p class="文字の色" id="特別色" >
この文字は赤、この文字は緑、この文字は白
</p>divタグとspanタグ
divタグとspanタグは、文書（Webページ）内の「ある部分からある部分まで」と括って一つのまとまりを作成するもので、後でCSSでそのまとまりに対して修飾が行えるようにするものです。
divタグとspanタグの書き方の例を示します。（bodyタブ内に書いてください。）
<div class="文字の色が赤" >
<p>この文字は黒、この文字は赤、この文字は黒</p>
</div><p> この文字は黒、 <span class = "文字の色が赤" > この文字は赤 </span> 、この文字は黒</p>
ダウンロードした「htmlcss01.html」ファイルをGoogle Chromeなどのブラウザーにドラッグ＆ドロップしてみてください。
今までやってきたことがブラウザーで見ることができます。
おわりに
如何だったでしょうか？
HTMLの基本構造とはどのようなもの？、HTML宣言、htmlタグ、headタグ、titleタグ、bodyタグ、HTMLでよく使うタグとはどのようなもの？、pタグ、h1〜h6タグ、imgタグ、aタグ、ul、ol、liタグ、brタグ、コメントアウト、classとidとは何ですか？、divタグとspanタグとは何ですか？などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント