この記事ではホームページを作るために必須のHTMLタグを、HTML初心者でも完全に理解できるように徹底的に紹介していきます。
HTMLの基礎を知り自由にホームページを作成できるようになりましょう！
『HTMLタグ』とは？
HTMLを学ぶための足がかりにするため、プログラムマスターがあなたに絶対に覚えておきたいHTMLの基礎とその実装のためのタグを紹介します。
この記事もオススメ
HTMLの準備
まず、HTMLを記述するための準備として実際にコードを書くためのテキストエディタをダウンロード、インストールしましょう。
今回はテキストエディタとしてSublimeText3をインストールしましょう。
以下の手順に従って、SublimeText3をインストールしてください。
１以下のリンクからSublimeText3をダウンロードします。Downloadの一番上にあるOS Xをクリックしてファイルを解凍してください。
２下に表示されたファイル名をクリック後、SublimeText3をアプリケーションフォルダに移動します。１の後、SublimeText3をアプリケーションフォルダにドラッグ&ドロップします。
３SublimeText3を起動します。次のような黒い画面が表示されれば完了です。
HTMLを書く準備が整ったところでまずは基本から学んでいきましょう。
HTMLの基本
そもそもHTMLとはざっくりとどのようなものなのでしょうか？
HTMLとは、webページの「見た目」に直接反映する、文の始まりと終わりに、意味をつけるためのタグというものを使って書かれる「マークアップ言語」の１つです。
※マークアップ言語・・・文字に意味（見出しや段落など）をつけて文章を記述する言語。
実際にタグで書かれた次の例を見てみましょう。
上のコードでは、「見出し」という意味を持つh1タグによってHello world！という文字が意味付けされています。
詳しく説明すると、文である Hello world! の<>の間にタグ名（この場合はh1）を入れた開始タグ<h1>と、タグ名の前に/を入れた閉じタグ</h1>によってマークアップされます。
ブラウザでは以下のように表示されます。
また、終了タグの存在しない以下のようなタグも存在します。
このようにHTMLはタグによってマークアップされていくわけですが、タグには属性という、そのタグに対して更に詳しい意味を持たせるものがあります。
属性＝”値”
で属性を定めます。
上の src=”example.jpg” や alt=”example” がそれにあたります。
この場合、imgタグで画像を添付するという意味を作り、その画像を src 属性で指定し、 alt 属性で画像が表示されなかった際のための代替テキストを表します。
以上のように、属性はタグに対して+@の意味を持たせることができます。属性はタグの紹介でも登場するので、具体的な使い方を覚えていきましょう。
また、それぞれのタグをCSSという言語を使ってその大きさを指定したり、色をつけたり、場所の指定をすることができます。
ここではHTMLタグの説明に重きをおくので詳しいCSSの解説は割愛させていただきますが、例として先ほどの Hello world!に文字を赤くする記述をCSSで記述します。すると以下のようになります。
このように、HTMLで作った要素に対して、CSSで具体的に装飾やレイアウトを決めていく。という流れでWEBページを作っていきます。
では、実際にコードを書いてそれをブラウザに表示させてみましょう！
①ファイルを保存しましょう。
「command+S」を押して保存画面が出てきます。次のGIFのようにデスクトップにsample.htmlを保存しましょう。
②次に、SublimeTextに以下のコードをコピー＆ペーストしてください。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
</head>
<body>
</body>
</html>
以上のコードは覚える必要はありません。記述に関する設定を記述しています。
このコードの
の「〜」の部分に記述していきます。実際に「〜」と記述する必要はありません。あくまで説明にために書いたものです。これから様々なタグを紹介していきます。このコードは消さずに残して、
「〜」
の場所にコードを書いていきましょう。
まず、先ほどの
をbodyタグの間に記述してください。以下のようになりましたか？
上のようになりましたら、このファイルを保存しましょう。
Macの場合、「command + s」で保存できます。
③これをブラウザに表示します。ブラウザの新規ページを開いてください。
Finderを開いて、ブラウザのページに先ほどのファイルをドラッグ&ドロップしてください。
表示されましたか？このように、<body> ~ </body>の中に記述をして保存。これをドラッグ&ドロップ。という流れでブラウザに表示できます。
それでは、実際にコードを書きながらHTMLの基礎タグを学んでいきましょう！
趣味としてwebサイトを作ろうと考えている方は、まずはHTMLから学ぶと始めやすいでしょう。以下の記事では、プログラミングを始める方法について解説しています。『初心者が趣味としてプログラミングを始める方法について解説』
あなたもAIを扱う側になりませんか？
テクノロジースキルが定額で学び放題！
プログラミング、AI、DX、デザイン、副業スキル
そして話題のChatGPTも学ぶことができます。 市場価値を高め、個人でも活躍できる人材を目指しませんか？
目的別HTMLの実装方法
h1~h6タグ(見出し)
h1,h2,h3,h4,h5,h6タグは見出しとして使われます。h1に近いほど文字が大きく、h6に近いほど文字が小さい見出しとなります。
ブラウザで表示してみましょう。
数字によって文字の大きさが変わるのが分かりますね。
aタグ(リンク)
saタグは文中にリンクを挿入したい時に使います。
aタグで囲った文をクリックするとhref属性 によって指定したURLに移ることができます。
上のようなコードを書くと、実際に次のように動きます。
また、target=”_blank” という属性を aタグで指定することによって新しくタブを開き、そこで指定したURLを開くことができます。
imgタグ(画像)
画像を表示するためのタグです。この説明は、上の「HTMLの基本」にあります。
こちらの「【HTML】初心者に捧げるHTML画像入門」もご参考ください。
tableタグ(表)
表を作成するためのタグです。tableタグの他に、thタグ、trタグ、tdタグを使って表を構成していきます。まずはコードとその時にできる表をみてみましょう。
tableタグによって表構造であることを示し、
- trタグ・・・横一列
- thタグ・・・見出し
- tdタグ・・・データ
として表を作成します。
また、tableにたいして border=”2″ などのようにborder属性によって数字を指定すると、その数字に対応する大きさの枠を作ることができます。
この記事もオススメ
divタグ(ブロック)
divタグは今まで学んできたタグとは異なり、意味を持たないタグです。
意味を持たないタグなんてどこで使うのだろうか？と思っている方も多いかもしれません。
divタグはレイアウトを考える上でかなり重要なものです。
divタグによってブロック要素という、ブロックを作ることができます。
CSSで高さと横幅を指定することで自由にブロック要素の形を変えることができます。そのブロック要素を横に並ばせたり、ブロック要素の中にブロック要素を含めたりすることでレイアウトを作ります。
この記事もオススメ
pタグ(段落)
pタグは段落を意味するブロック要素を作ることができる要素です。
spanタグ(文字の装飾)
spanもdivと同様、意味を持たないタグです。ただ、 span タグは div タグと異なり、インライン要素を作ることができます。
インライン要素とは、テキストを装飾するために使う要素です。
文字の一部を指定することで一部分にのみ装飾(太字化、アンダーラインなど)を施すことができます。装飾はCSSで行います。インライン要素を使って以下のようなことができます。
まとめると、spanタグは文字の一部を装飾するためのインライン要素を作ることができます。
以下がspanタグを使ったコードです。
改行タグ
一つの段落内で改行したい時、テキストエディタ上で改行してもブラウザでは改行されずに半角スペースとして認識されてしまいます。
そのため、段落内で改行するときは改行タグを使って改行をします。
改行には br タグを使用します。br タグには閉じタグは必要ありません。
<br>と書くだけで改行してくれます。
とコードを書くと次の通り改行してくれます。
formタグ、inputタグ、textareaタグ…(フォーム)
フォームを作るには複数のタグを組み合わせます。フォームから何か情報を送るにはRuby on Railsなどのフレームワークを使う必要がありますが、この段落では情報を送るのではなくフォームの作り方について勉強します。
まず、フォームであることを示すため、フォームの全てを
で囲みます。
以下、フォームのそれぞれの要素を紹介していきます。
必要に応じて使っていきましょう。
テキストボックス
テキストボックスは文を入力するためのボックスです。以上のように書くことで次のように動くテキストボックスを作成できます。
ここで登場する input タグは入力欄やボタンを作成してくれるタグです。input タグは type 属性によってどのようなフォームを作るのかを決定します。
inputタグには閉じタグは必要ありません。
inputタグはこの後も登場するので覚えておきましょう。
また、フォームは
の ように、formタグの間にコードを書いていきましょう。
チェックボックス
チェックボックスはその名の通りチェックするためのボックスのことです。どのようなものか、GIFで確認しましょう。
チェックボックスは選択肢の中から複数の要素を選ぶことができます。
このようなチェックボックスを作るには先ほどと同様にinputタグを使います。
ラジオボタン
ラジオボタンは複数ある選択肢のうち、一つだけを選ぶことができるボタンです。次のように記述します。
選択肢の中から１つ選択する場合、name 属性として同じ値を指定します。そのようにすることで１つのグループとして認識させることができます。
また、value属性はそれぞれ異なるものを指定して、どのデータが送信されるのかを決める役割を与えます。
メニュー（セレクトボックス）
selectタブを使ってセレクトボックスを作ることができます。
また、その選択肢をoptionタブを用いて定義します。optionはselectタブの中に定義します。
optionタブにはvalue属性を用いて送られるデータを決定します。
実際に次のように機能します。
テキストエリア
textareaタグを用いて複数行のテキスト入力欄を作ることができます。
テキストに文字を表示
テキストボックスやテキストエリアに属性として placeholder=”表示したい文” と書いておくことで初めに文を表示することができます。
テキストに初期値を表示
テキストボックスの場合、属性としてvalue=”aiueo”とすることでテキストボックスに初期値としてaiueoが入力された状態で表示されます。
また、テキストエリアには開始タグと閉じタグの間に文を入力することで初期値を表示できます。
構成部品と項目を関連づけ
labelタグを使うとボタンやその項目を関連づけることができます。
関連づけをすると、その項目名をクリックするとボタンが選択されたりさせることができます。
フォームの構成部品とその項目を<label> ~ </lavel>で囲むことによって関連付けがされます。
送信ボタン
最後に、送信ボタンです。次のような記述によって送信ボタンを作ることができます。
次のような送信ボタンができます。
ul, ol liタグ(箇条書きリスト)
箇条書きリストを作るにはulタグとliタグ、またはolタグとliタグを使います。ulタグは順序づけのされていないリスト(unordered list)を作成できます。
olタグは順序づけのされているリスト(ordered list)を作成できます。
これらは、次のようにliタグをulタグ(olタグ)で囲うようにするとリストを作ることができます。
以下のようなリストが作成されます。
覚えておくと便利！応用タグ
blockquoteタグ(引用)
blockquoteタグを使うと引用してきた内容であることを示すことができます。次のように記述してみましょう。
blockquoteで囲ったテキストは上下左右にスペースが入ることがわかると思います。
以下のように表示されます。
codeタグ(コード)
codeタグを使うとプログラミング言語のコードであることを示すことができます。
また、プログラミングを書くときは改行をたくさんします。改行するたびにbrタグを書くのは面倒臭いですし、コードが読みづらくなります。
そのため、タグで囲んだ文の改行は認識して改行してくれるpreタグでコードを囲みます。
以下のように表示されます。
rubyタグ(ふりがな)
rubyタグを使うとふりがなをふることができます。以下のようにrtタグの中にふりがなを書きます。
以下のようにふりがなを振ることができます。
strongタグ(強調)
strongタグは重要性のある語句に対して強調します。
強調したい語句を
のように囲うことでstrongタグで囲った文のみ強調します。ブラウザでは次のように表示されます。
iタグ(斜め文字)
iタグは通常の文とは区別したい語句、文を斜め文字にすることができます。
斜め文字にしたい語句、文を
のように囲うことでiタグで囲ったもののみ区別します。ブラウザでは次のように表示されます。
オススメの参考書
参考 いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)
またこちらの「【Webデザイン初心者必見】役立つ学習サイト・参考書20選」では、webデザインを学ぶ際に役立つ参考書を紹介しています。
さいごに
今回紹介したものは基礎的なHTMLタグです。すぐに使えるものばかりですので、この記事を参考にしながら、ご自身のwebサイト制作に役立ててくださいね！
この記事もオススメ
最先端のITスキルが学び放題！AI時代で勝ち残る人材になる。
＼テクノロジー時代に活躍できる人材になりませんか？／
あらゆる業界でIT化が進んでいる今、
エンジニアではなくともテクノロジーへの理解が不可欠な時代になりました。
プログラミングを活用して新しい価値を生み出すことで、
あなたの人材価値を高めることができます。
プログラミングを学ぶと、
・キャリアアップ、年収アップを目指せる
・テクノロジーを活用した課題解決ができる
・業務効率化ができるようになる
・自分でサービスを作れるようになる
テックキャンプは、テクノロジースキルが定額で学び放題。
プログラミング、AI、デザイン、DXスキル、
そして、話題のChatGPTも学ぶことができます。
これからの時代で必要とされるスキルを学び、
市場価値を高め、個人で活躍できる人材を一緒に目指しましょう。
