STACK DESIGN
Webデザイナーを目指す人の為のお役立ち情報サイト
STACK DESIGN > HTML5+CSS3 > Webデザイナーを目指す人の為のHTML5タグ入門

Webデザイナーを目指す人の為のHTML5タグ入門

Webデザイナーを目指す人の為のHTMLタグ入門

Webデザイナーを目指すなら勉強をスタートする前に、HTMLの基本的なタグの使い方を理解しておく必要があります。

HTMLタグの機能を理解してデザインするのと、機能を理解しないでデザインするのではデザインの仕上がりに大きな差が出てしまうからです。Webは機能的かつユーザーにとって使いやすいものである必要があります。その為にはWebの軸となるHTMLをはじめに習得しましょう。

こちらのページではこれからWebデザイナーを目指すコーディング初心者の方に向けて、よく使用するHTMLタグをご紹介していますのでぜひ参考にして下さい。コーディングで使用するタグは実に限られています。すぐに覚える事が出来ますのでこの機会に基本的なHTMLタグを習得しましょう。

1.HTMLとは?

HTMLとは(ハイパーテキストマークアップランゲージ)の略でホームページを作る為の言語になります。HTMLタグで文章や見出し画像などをマークアップする(HTMLタグで括る)事で、ホームページとして表示する事が出来るようになります。

2.コーディングで多用するHTMLタグ

Webデザイナーを目指す人の為のスキルチェックシート

書店に売っているHTMLタグ辞典などはとてもボリュームが多く、びっくりされた方も多いでしょう。結論からお伝えすると、HTMLタグ辞典の内容をすべて丸暗記する必要はありません。コーディングの際に使用するHTMLタグは数える程しかないからです。

コーディングでよく使用するタグは以下の通りです。

head内でよく使用するタグ

  • link
  • title
  • meta(description)
  • html

body内でよく使用するタグ

  • a
  • div
  • ul
  • ol
  • dl
  • span
  • img
  • p
  • strong
  • table
  • h1〜h6
  • script
  • header
  • footer
  • input
  • textarea
  • blockquote
  • script
  • input
  • textarea

3.HTMLの基本形式を覚えよう

タグの習得を始める前に、HTMLの基本構文を覚えましょう。ホームページを作成する時には、必ずこの基本構文に沿ってコーディングを行っていきます。

4.head内で使用するHTMLタグ4つ

<head></head>内に記述するタグは、ページの情報です。ページタイトル・文字コード・文書宣言・meta情報などです。ここに書いた情報はページに表示される事はありません。検索エンジンやクローラーなどに情報を伝える為のものです。

4-1.<!doctype html>

この一文は、このページはHTML5の文書である事を宣言しています。

4-2.htmlタグ

htmlの文書をこの中に記述していきます。

4-3.headタグ

headタグはページ情報を記述する所です。headタグ内には、meta情報・ページタイトル・CSSの読み込みなどを記述します。headタグ内に書いた情報は、ページには表示されません。検索エンジンにページ内の情報を伝える為のものです。

4-4.titleタグ

ページタイトルを表示する為のタグです。検索エンジンではタイトル部分に表示されるタグでSEOに直接的に影響する重要なタグです。

検索結果のタイトルになる

4-4.metaタグ(description)

meta descriptionは、検索結果の赤枠の部分に表示されます。ここにページの説明を記述します。ユーザーのクリック率が大きくかわりますのでアクセスアップの為にはとても重要な箇所です。

meta description

4-5.metaタグ(charset)

文字コードを宣言する為の記述です。文字コードはUTF-8に設定しましょう。

4-6.bodyタグ

bodyタグの中に内容を記述する事でページが表示されるようになります。

4-7.linkタグ

linkタグは主に外部のCSS(カスケーディングスタイルシート)を読み込む際に使用します。

5.bodyタグ内で使用するHTMLタグ

<body></body>内に記述したHTMLがページとして表示されます。body内で使用するタグは以下の通りです。

5-1.aタグ（リンク）

aタグはリンクを貼る時に使用するタグです。resultをタップしていただくと、ページを確認出来ます。

See the Pen mqKjJM by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-2.divタグ

divは、要素を一括りにする時に使用するボックスのような役割を果たします。divだけを記述しても横幅や縦幅背景色などは反映されませんので、単体では意味をもたない透明の枠となります。

divを使う時は、CSSで横幅、縦幅、マージン、余白などを指定する事が出来ます。

See the Pen XzYYpy by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-3.ulタグ

ulタグは箇条書きのリスト要素を表示したい時に使います。<li></li>で囲われた箇所がリスト形式で出力されます。

See the Pen qVKyEZ by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-4.olタグ

olタグは箇条書きのリスト要素に番号を振る事が出来ます。

See the Pen VrdBvp by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-5.dlタグ

dlタグは、タイトル付きの箇条書きリストです。

See the Pen bYKKJv by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-6.spanタグ

spanタグは一部分のみを変更したい時に使用します。spanタグ単体では意味を持ちませんが、CSSで色を変えたりサイズを変えたりする事が出来ます。

See the Pen EbRpyV by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-7.imgタグ

imgタグは画像を読み込む為のタグです。imgタグを使う時には、width(横幅)・height(高さ)・alt(代替テキスト)を必ず入力します。

See the Pen gXKjme by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-8.pタグ

pタグは文章を表示したい場合に使うタグです。

See the Pen xPzJrE by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-9.strongタグ

strongタグは文字を強調したい場合に使用します。strongタグで囲われた箇所は太字として表示されます。

See the Pen RjJBZx by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-10.tableタグ

tableタグは表として使いたい時に使用します。

See the Pen LOrBmL by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-11.h1〜h6タグ

見出しタグです。ページ内の見出し要素をh1〜最大h6のタグで括る事ができます。h1が一番重要な見出しで数字が大きくなるに連れて見出しレベルが小さくなります。

See the Pen xPzJJq by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-12.headerタグ

headerの要素を1つのグループにするタグです。

See the Pen eeKjPJ by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-13.navタグ

navタグはナビゲーションメニューを１つのグループする為のタグです。

See the Pen POarzQ by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-14.footerタグ

footerの要素を1つのグループにする事が出来るタグです。

See the Pen MOXBLa by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-15.scriptタグ

scriptタグはJavaScriptを読み込む為のタグです。jQueryのライブラリファイルを始め、Web制作では様々なJs(JavaScript)ファイルを読み込んでサイトに動きをつける事が出来ます。

Scriptタグは</body>の直前に書くのが主流となっています。

See the Pen yPEqdY by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-16.blockquoteタグ

blockquoteタグは、引用したものを掲載する時に使用します。

See the Pen Kyexpd by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-17.inputタグ(text)

inputタグのtype=”text”はお問い合わせフォームを作成する時に使用するタグです。

See the Pen NwzVPd by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-18.inputタグ(submit)

inputタグのtype=”submit”はボタンとして使用出来ます。

See the Pen rYKgav by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-19.textareaタグ

textareaタグはお問い合わせフォームのお問い合わせ内容を入力するエリアとして使用します。

See the Pen QOxRbv by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

5-20.コメントアウト

コーディングの際にメモとして残しておきたい場合は、コメントアウトを使います。

See the Pen POaroO by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679

6.まとめ

いかがでしたでしょうか？

コーディングの際によく使用するHTMLは実際のところ数える程しかなく、HTMLタグ辞典に載っているタグを何百も覚える必要は全くありません。

WebデザイナーもHTMLタグをすべて丸暗記している人はいません。わからない場合は、タグをその都度調べながらコーディングを行っているのです。今回ご紹介させていただいたタグを重点的に勉強していただければ、コーディングで使用するHTMLタグは、カバー出来ます。

HTMLを習得する事は、他の言語に比べて難しくは無いのでこの機会にHTMLタグを身につけましょう。
STACK(当サイト)のソースコードも確認して見てください。このページのタグに集約されているはずです。

コメントを残す

Photoshop本で挫折した方必見！！　Webデザイナーに必須のPhotoshop力がたった7日で身につく動画講座

STACK DESIGN

一生涯使える人気のスキル！Photoshopを使ったデザイン力がたったの7日間で身につくオンライン動画講座。すべて無料で受講出来ますので、この機会にぜひご活用下さい。

  • デザイナー歴13年のプロが、デザインする時に使うテクニックのみを厳選してわかりやすくご紹介。無駄なテクニックはすべて排除。
  • デザインにかかる作業時間を10倍スピードアップさせるショートカットキーをご紹介。
  • あなたのわからないを現役デザイナーがすべて解決！解決するまで質問し放題です。
  • PC・スマホ・タブレット対応。学校、カフェ、通勤、通学あなたがどこにいても動画で学習出来ます。

この記事を読んだ方は他にこんな記事を読んでいます