s13y

独身27歳の中卒ニートが人生に危機感を覚えながら書くブログ

HTMLタグの書き方と覚えておきたい初歩的なこと

編集モードを利用して「タグ」の使い方を学ぶ

せっかくはてなブログを利用して書いているのですから、これを活用しない手はないでしょう。はてなブログの編集モードを「HTML」に変更するか「Markdown」で書かれている方はそのままで構いません。本文を記述する枠内に「目玉マーク」がありますね。クリックすることでリアルタイムに確認することが出来ます。書いていくうちに重くなることがありますので、その場合は「プレビュー」で確認することをお勧めします。

「タグ」の書き方は「<タグ名>内容</タグ名>」

「内容」の前を「開始タグ」と呼び、「内容」の後を「終了タグ」と呼びます。基本的にセットで使用します。このワンセットを「要素」と称します。終了タグには「スラッシュ(/)」を記述してからタグ名を書くルールがありますので必ず覚えてください。はてなブログで文字を書くと自動的に<p>タグで挟まれます。

<p>本文</p>

ひとつだけで効果を発揮するタグもある

基本的にと書きましたが「改行」を表すタグは<br />を文末に記述することで改行が行われます。文章を挟む必要はありません。<p></p>は「段落」を表すタグとなります。 実際に改行を行って見ましょう。

ここで改行<br />する。

タグ名

HTMLはタグで挟むことにより内容の役割が変化していきます。<b>タグであれば文字を太くすることが可能です。「Bold」の略名がタグの頭文字になっています。HTMLには様々なタグがあり、それぞれに役割があります。正しいタグを使用してください。

タグの中にタグを書く「入れ子構造」

HTMLでは「入れ子構造」が基本となります。初心者にとって訳が分からなくなる要因ですのでしっかり覚えて下さい。入れ子構造とはこのような書き方です。

<div>
<p>本文</p>
</div>

親要素と子要素

タグの中にタグを書くことで「親要素」と「子要素」の関係が発生します。

<親要素>
<子要素>内容</子要素>
</親要素>

HTMLは入れ子構造で土台を作っていく

土台作りには<div>タグを使用します。これはタグとタグをまとめるのに便利です。文字を改行したり太くするような役割は持ちませんのでブログ本文で使うことはありません。

<span>タグも「まとまり」を作る

まとまりを作るという点では<div>タグと同じですが、こちらは文字の装飾によく使われます。意味は同じでも役割が<div>タグと異なります。

<div>タグと<span>タグ

HTMLを書いてみると違いがわかります。内容に変化はありませんが、開始タグと終了タグの前後に変化があるのです。

A<div>B</div>C
A<span>B</span>C
  • <div>タグ

    A

    B
    C

  • <span>タグ

    ABC

<div>タグは前後で改行が行われていて<span>タグで書かれた内容はそのまま表示されています。

ブロック要素

改行が入るタグを「ブロック要素」と呼びます。どうもピンと来ませんね。見出しに使われるタグは<h1>タグです。このタグは<h1>~<h6>まであります。

<h2>見出し</h2>

要素の前後に改行の役割がある<br />タグをいれずとも勝手に改行されます。これがブロック要素です。

インライン要素

逆に改行が入らないタグを「インライン要素」と呼びます。<b>タグはインライン要素だということがわかりますね。改行されず、役割もない<span>タグは文字を装飾するのに重宝されます。

タグに元から組み込まれているCSSプロパティの値

なんとなく察していた方もおられると思いますがHTMLタグには既にCSSプロパティが与えられ、特定の値が指定されています。例えば以下のタグは全く同じ役割を「内容」へ与えます。

<p style="font-weight:700">太字</p>
<b>太字</b>

<div><span>にも「display」という初心者殺しなCSSのプロパティが与えられています。

タグに属性を付与

「<開始タグ 属性="値"></終了タグ>」のように書きます。開始タグと属性の間には「半角スペース」を入れて下さい。タグにCSSを適応する場合は「style」という属性を与え、ダブルクウォーテーションの中にCSSの「プロパティ」と「属性値」を記述します。

属性とセットで使うタグ

<a herf=""></a>というのはリンクを貼ることのできるタグですが、こちらは<a>単体で使用することはできません。「herf=""」のダブルクウォーテーションの中に属性値であるURLを記述しなければ存在意義がなくなるのです。

<a herf="https://www.s13y.com">s13y</a>

このようにs13yのトップページへリンクを貼ることが可能です。

「id」と「class」

前回の講座ではてなブログのソースコードをじっくりみた方は気づいたと思いますが<div id=""></div><div class=""></div>などが大量にありました。これも「属性」のひとつで「管理名」のようなものです。こちらの属性はどのタグにも使うことが出来ます。ただし「id」は1つのHTML文書内で同じid名を使うことができません。「class」は何回でも同じclass名を使うことができます。

タグの「管理名」

タグにつけたidやclassの属性値には任意の文字列を「英数字」で入れることが出来ます。ただし「先頭に数字」は使わないように気をつけて下さい。日本語は不可です。管理名をつけることにより、同じ<div>タグでも様々にカスタマイズしたタグへと変化させることが可能です。

属性値の複数指定
<p class="a b c">内容</p>

属性値を「半角スペース」で区切ることで1つのタグに複数のCSSを適応することが出来ます。私個人としては使い所が難しいと感じます。はてなブログでは「とりあえず設定している」というものがありますので「余地」を残すといった形でしょうか。

メタタグ

<meta charset="utf-8" />

書き方は< meta 属性="属性値" >のように記述します。メタタグはサイトを作る段階で最初に記述してしまうことや、他のタグのように実際に使ったりすることはないので意味だけ把握したらコピー&ペーストが多いです。属性と属性値を正確に覚える必要はありません。役割だけを重要視して適切に使用しましょう。

まとめ

HTMLを記述する上で押さえておきたいポイントをまとめました。はてなブログではHTML構造をいじることは出来ませんので実際に<div>を使って土台作りを行うことは出来ません。しかし「見たまま」モードで記事を作成、編集していてもHTMLタグが自動的に挿入されています。ブログの装飾に使うHTMLタグくらいは覚えておいても良いかも知れません。カスタマイズで必要なことはHTMLで書かれたソースコードを読むことです。「属性」から割り当てられている役割をCSSファイルから探し出して編集するという能力が求められます。そして「入れ子構造」になっている部分の「親要素」と「子要素」が把握できなければ思うようなカスタムが出来ません。