ブログ

【初心者向け】ブロガー必見!HTMLの書き方入門ガイド! タグの使い方も例を交えて図解【保存版】

【初心者向け】保存版☆HTMLの書き方入門ガイド!タグの使い方も例を交えて図解

プログラミング言語やマークアップ言語と聞くと、どことなく難しい感じがしますよね。

しかし、これからアフィリエイトやブログで報酬を伸ばしたいのであれば、必ずHTMLの基礎を学んでおくことをおすすめします。

HTMLは他の言語に比べても習得しやすい言語なので、基本を理解すればすぐに使いこなせるようになります。

この記事では、初心者でもHTMLが書けるように図解を交えて分かりやすく解説していますので、あなたのアフィリエイトのサイト作成などにも活用してみてください!

HTMLの基本を理解しよう

タグの書き方

タグとは、“< ” (less then)と ”>” (more than) の二つの記号によって挟ま
れたものです。

開始タグと終了タグによって挟まれた範囲に各”要素”があることを示します。

コンピュータは開始タグを用いた箇所から、あなたの記述したい要素が始まっていることを認識し、終了タグまでその範囲とみなします。

基本的に開始タグと終了タグの二つセットで用いるルールになっています。(例外的に終了タグを必要としないタグも存在しますので、詳しくは後述します)

例えば、図中のテキストに何らかの要素を指定したい場合は、両端を開始タグ
と終了タグで挟むようにします。

要素とは

要素とは”段落”や”画像”などのように、ウェブページを構成するものの性質を表すものです。

通常のテキストファイルでは”テキスト”しか表現することができませんがHTMLファイルでは、各要素を指定することで、ブラウザとして表示した時に段落や見出し、画像、動画などといったような私たちが普段見ているウェブページの体裁を表現することができるようになっています。

属性と値

この”要素”の数はそこまで多くありません。

代わりに要素によっては”属性”といって、より詳細な情報を記載して多くのバリエーションを表現できるようになっている場合があります。

その場合は”要素名”の後方に”属性名=属性値”と記述をおこなうことで、補助的に情報を記載するようになっています。

(属性の指定方法に関しても後述します)

HTMLとCSSの違いとは?

HTMLを勉強する時に必ずと言っていいほどセットで登場する言語がCSSです。

CSS(Cascading Style Sheets)はカスケーディング・スタイル・シートと読みます。

色やデザインなどWEBページの”見た目”に関する要素を指定するのが主な役割になっています。

HTMLにも見た目を指定する要素はありますが、基本的には記述したテキストの性格を表現する役割で使用します。

見出しや段落など要素の性格を表す情報(論理的情報)にはHTMLを用いて、色やフォントなど見た目に関する情報(物理的情報)にはCSSを用いて役割を分けて使用して役割を分担するのです。

CSSの基本的な使い方も後述しますが、ここではHTMLには要素の性格を表現する役割があるということを頭に入れておきましょう。

HTMLを書く時に必要なもの

HTML言語がどのような性質の言語なのかを押さえた上で、HTMLを用いてテキストを作成してみましょう。HTMLファイルを作成する際に以下の3つを準備してください。

1.テキストエディタ(メモ帳やTerapadなど)

テキストエディタを用意することができれば、HTMLファイルを作成することができます。

2.ブラウザ(Firefox、Chromeなど)

ブラウザを使用すればHTMLファイルを閲覧できるだけではなく、記述に誤りがないか確認をすることができます。

3.画像や動画などのファイル(埋め込む場合に必要)

画像や音楽データなどの素材です。

HTMLの特性を利用したいのであれば、はじめに素材を手元に置いておくと良いでしょう。

HTMLの書き方の基本

タグではさむ

<要素名>(開始タグ)と</要素名>(終了タグ)で特定の文章をはさむことでその場所に、特定の要素があることを表現することができます。

例えば「<p>~~~</p>」pタグを使って文章をはさむことで、そこに段落があることを表現できるので、ブラウザでHTMLファイルを表示する時に文章として表示されるようになります。

このように、テキストを必要なタグで挟むことでブラウザが”その要素がそこにある”と認識してくれるようになります。

HTMLファイルでは、このように開始タグと終了タグで挟むことで各要素がそこにあることを表現するのです。HTMLで扱われる要素には種類があるので、詳しいタグの種類は後述します。

属性を指定する

色を指定する、フォントサイズを指定する時などは”どんな色なのか”、”どのくらいのサイズなのか”を指定する必要があります。

このようにタグの中には、要素を指定しないと使用できないタグもあります。

このように、同じタグを使用しても属性の指定の仕方により反映のされ方が異なります。

こうした属性指定により、少ないタグ数でも多くの性質を表現できるようになっています。

終了タグを使用しないタグ

タグは基本的に開始タグと終了タグをセットで使用します。

ただし、例外的に終了タグを必要とせず、開始タグだけで完結してしまうタグが存在します。

このようなタグのことを空要素タグと呼びます。画像を表示するimgタグや改行を表すbrタグが代表的です。

これらは、開始タグだけを使用すれば各要素を反映させることができます。

基本的に、タグは開始タグ、終了タグ、属性、空要素タグを頭に入れておけば大丈夫です。

これらのタグはHTMLファイル内のbody内部に記述されます。

実は、HTMLファイルはただタグを記述してもブラウザ上に反映されることがありません。

HTMLファイルの記述方法には構造が存在します。

HTMLファイルの基本構造

HTML言語はバージョンアップを繰り返しており、各バージョンによって多少仕様が異なることがあります。

また、コンピュータでは英語や日本語など使用する言語によっても処理の方法が異なります。

HTMLファイルを作成する際には、これらの情報を読み取るコンピュータ側が認識できるように必要な情報を記載しなければいけません。

といっても難しい手続きをおこなう必要はなく、型にそって作成することで、HTMLファイルがブラウザに表示できる形式で認識されるようになります。

HTMLの基本構造は以下のようになっています。

html

はじめに、このファイルがHTML言語で記述されたHTMLファイルであるという宣言をおこないます。

プログラミング言語はHTMLの他にも多数存在ますが、この宣言をおこなうことでコンピュータがHTML言語だと認識できるようになります。

head

“head”には本文を解釈する上で、必要な情報を記載します。

タイトルやメタ情報(このファイルが何に関する情報について書かれているのかを記述するテキスト)、読み込みに関する記述など本文に反映されない情報はこのheadに記述することになっています。

通常はこのhead内に文字コードを記載します。

body

html、headを記載した上で実際に、タグを用いて本文の情報を記載する箇所がbodyになります。

bodyに記述された情報のみがウェブページ上に反映されるので、みなさんが一番注力して作成する必要があるのはこの部分になるでしょう。

これら3つの要素を記述することであなたの作成したテキストファイルは「HTMLファイル」としてコンピュータから認識されるようになります。

それでは、基本的な構文にしたがって記述されたHTMLがブラウザ上でどのように表示されるのかを見ていきましょう。

ブラウザにはどのように反映される?

サンプルをブラウザで開く

実際にサンプルをブラウザ上で開くと、以下のような私たちが普段目にしているウェブページと同じような画面を表示することができます。

HTMLファイル上では、複雑なタグや属性が指定されていますが、実際にブラウザ上で確認すると、私たちが目にするWEBページと同じような見た目で反映されていることがわかりますね。

初心者が知るべきタグ一覧

基本的なタグ(hタグ)

hタグは”見出し”を表すタグです。タグは階層構造になっており、一番上の階層からh1,h2,h3,h4,h5・・・という順番に下位の見出しになっていきます。

h1は一つのページに付き一つ存在します。

本文に表示される一番大きな見出しはh2からになります。

h2の下に小見出しを立てたい場合はh3タグを使用、さらに下に小見出しを立てる場合はh4
を・・・という具合でhタグを使用していきます。

見出しはユーザーにコンテンツを伝えるだけでなく、検索エンジンに内容をアピールする役目も果たしているので重要な役割を果たしています。

pタグで段落を作ろう

pタグは文章があることを示します。

見出しの後に配置される文章をpタグで挟むことでウェブページの本文となる文章を表現することができます。

段落ごとに囲むのが通例になっています。通常は、pタグの中で改行をおこなっても反映されることはありません。

改行や空白を表現したい場合は別のタグを使用します。

titleタグ

titleタグはhead内に書き込みます。文字通りそのウェブページのタイトルをつ
けるタグです。

本文に表示されることはありませんが検索結果に表示される重要なタグになり
ます。

ウェブページを作成する際には、必ず記述するようにしましょう。

文字装飾に使用するタグ

テキストを強調したい場合に使用します。タグで囲った箇所が太文字で表現されるようになります。

次ページで紹介している”強調タグ”と見た目の変化は同じですが、こちらのタグは単純にテキストを強調したい場合に使用されます。

検索エンジンを意識した強調をしない場合はこちらのタグを用いると良いでしょう。

強調タグ

強調タグは、太文字タグと同様に見た目が強調されることに加えて、検索エンジン向けに特定のキーワードをアピールする場合に使用されます。

そのウェブページのテーマに関係しているキーワードに対して使用されることが多いです。

多用することは良くないという意見もありますので、強調箇所が多くなる場合は”太文字タグ”を使用すると良いでしょう。

フォントサイズ変更タグ

フォントサイズを指定する場合に使用します。フォントサイズとは文字の大きさのことです。

見出しの文字サイズは自動で大きくなるようになっていますが、本文中の文章のサイズを変更したい場合はこのタグを使用しましょう。

ブラウザによって異なりますが、特に指定のない場合は16pxになっている場合が多いです。太文字タグなどとの併用も可能です。

文字色変更タグ

文字色を変更する場合に用いられます。ワードやエクセルでは少数の色の中から色を選択したり、色相図から手動で色を選択したりするかと思います。

このタグでは、6桁の文字コードを用いて属性を指定することで色を表現する仕組みになっています。

そのため、色数はおよそ1600万色にもなるため微妙な色表現もできるようになっています。

罫線を引く時に使用するタグです。

罫線とは、文中に引かれる横線のことです。

終了タグを指定しない空要素タグとして使用されます。属性を指定すると様々
な種類の罫線を引くことができます。

その他のタグ

CSSを記述する時に使用されることが多いタグです。

CSSが適用される箇所を指定します。idタグもclassタグもそれ単体では何の役割も持たないタグになっています。

idとclassは似ているのですが、両者には違いがあります。

idはその記事中で1つの場所しか指定することができない特徴があります。

そのためidはCSS以外にも、ページ内リンクや目次で飛び先を指定する際に使用
されることもあります。

これに対してclassは何度でも繰り返し使用できるという特徴があります。

そのためclassは複数の箇所に同様の指定をしたい場合に使用されます。

divとspanで範囲を指定する

こちらもCSSを使用する時に使用されることが多いタグです。

idやclassは”箇所”を指定するタグでしたが、divとspanは”範囲”を指定するタグになります。

この二つもid、classと同様にこれら単体では機能しません。

divもspanもほぼ同じ意味ですが、divはブロック要素と呼ばれ、外見的に、使用した範囲の前後に一つずつ改行が入ります。

これに対して、spanタグはインライン要素と呼ばれ、使用した範囲の前後に改行が入らないようになっています。

divタグの方が汎用性が高くなっており、divタグの中には同じdivタグやspanタグを含むあらゆるタグを使用することができます。

これに対してspanタグの中にはdivタグを使用できないなど、併用できるタグが限定されるのがspanタグの使いにくいポイントと言えます。

brタグで改行する

改行を入れる時に使用されるタグです。

HTMLファイル上では、テキストで改行を打ったとしてもブラウザ上で表示する時には無視されてしまいます。

そのため、文章中に改行を入れようと思ったらbrタグを用いて意図的に改行を挿入しなければなりません。

aタグでリンクを挿入

HTMLファイルで実現できる特徴的な機能として”ハイパーリンク”があります。ハイパーリンクとは別URLにジャンプできる機能のことです。

aタグ(アンカータグ)では、任意のテキストを挟むことで、そのテキストにリンクを作成するという意味になります。

そして、”href属性”でリンク先URLを指定することで該当のURLに飛ぶことができるようになります。

aタグにはhrefタグ以外にも指定できる属性が存在します。

例えばリンク先を別窓で開くか現在のページに開くかを指定できるtarget属性やリンクにカーソルを合わせた時に、文字を表示させることができるtitle属性などが代表的な属性です。

imgタグで画像を挿入

imgタグは画像要素を記述する時に使用するタグです。

imgタグではsrc属性を用いて、画像URLを指定する作業が必須になります。imgタグではこの画像URLの指定が必須になりますが、その他にも複数の属性が存在しimg要素に補足的な性質を付け加えることができます。

例えば、width属性、height属性はそれぞれ横幅と縦幅を指定することができるようになっているので、これらを使用することで画像の縮尺やサイズを変更して画像挿入を行うことができるようになります。

また、alt属性を使用することで代替テキストを指定することができます。

代替テキストとは画像の読み込みが遅い場合や表示エラーが出る場合に画像位置に表示されるテキストです。

その他にもalign属性のように画像の回り込みを指定する属性などimgタグには様々な属性が用意されています。

コメントアウトタグでメモを作る

コメントアウトとは、ウェブページ上に公開されないテキストのことです。

HTMLファイル上では確認できるようになっていますが、ブラウザ上には反映されません。

コメントアウトは自分用のメモや、仲間内の伝達事項を残しておく時に使用することが多くなっています。

ol・ul・liで箇条書きを作る

 

文章の要素として箇条書きを使用する場合にもタグを用います。

箇条書きには”順番のある箇条書き”と”順番のない箇条書き”の二種類が存在します。順番のある箇条書きとは「1,2,3・・・」というような数字が行頭に振られます。

この種類の箇条書きはolタグ(ordered list)で記述され、箇条書きの対象となる要素はliタグを用いて表現されます。

対して順番のない箇条書きとは「・」を行頭に使用する箇条書きのことです。

この種類の箇条書きはulタグ(unordered list)で記述されます。

箇条書きの対象となる要素はulタグと同じようにliタグを用いて表現されます。

おわりに

いかがでしたか?

最初は覚えるまでに何度も見直したり、意味を調べたりしてしまうかもしれませんが、ここに乗せたタグはHTMLでは多く使われるものなのでしっかり理解して覚えていきましょう!

覚えさえすればあとは文字の装飾などの楽しさや見やすさがもっと広がっていくはずです!

それでは!

⇩応援の1クリックお願いします!⇩
ブログランキング・にほんブログ村へ

%d人のブロガーが「いいね」をつけました。