
Webデザイナーを目指すなら勉強をスタートする前に、HTMLの基本的なタグの使い方を理解しておく必要があります。
HTMLタグの機能を理解してデザインするのと、機能を理解しないでデザインするのではデザインの仕上がりに大きな差が出てしまうからです。Webは機能的かつユーザーにとって使いやすいものである必要があります。その為にはWebの軸となるHTMLをはじめに習得しましょう。
こちらのページではこれからWebデザイナーを目指すコーディング初心者の方に向けて、よく使用するHTMLタグをご紹介していますのでぜひ参考にして下さい。コーディングで使用するタグは実に限られています。すぐに覚える事が出来ますのでこの機会に基本的なHTMLタグを習得しましょう。
HTMLとは(ハイパーテキストマークアップランゲージ)の略でホームページを作る為の言語になります。HTMLタグで文章や見出し画像などをマークアップする(HTMLタグで括る)事で、ホームページとして表示する事が出来るようになります。
書店に売っているHTMLタグ辞典などはとてもボリュームが多く、びっくりされた方も多いでしょう。結論からお伝えすると、HTMLタグ辞典の内容をすべて丸暗記する必要はありません。コーディングの際に使用するHTMLタグは数える程しかないからです。
コーディングでよく使用するタグは以下の通りです。
タグの習得を始める前に、HTMLの基本構文を覚えましょう。ホームページを作成する時には、必ずこの基本構文に沿ってコーディングを行っていきます。
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> |
<head></head>内に記述するタグは、ページの情報です。ページタイトル・文字コード・文書宣言・meta情報などです。ここに書いた情報はページに表示される事はありません。検索エンジンやクローラーなどに情報を伝える為のものです。
1 |
<!doctype html> |
この一文は、このページはHTML5の文書である事を宣言しています。
1 |
<html></html> |
htmlの文書をこの中に記述していきます。
1 |
<head></head> |
headタグはページ情報を記述する所です。headタグ内には、meta情報・ページタイトル・CSSの読み込みなどを記述します。headタグ内に書いた情報は、ページには表示されません。検索エンジンにページ内の情報を伝える為のものです。
1 |
<title>ここにページタイトルを入れます。</title> |
ページタイトルを表示する為のタグです。検索エンジンではタイトル部分に表示されるタグでSEOに直接的に影響する重要なタグです。
1 |
<meta name="description" content="未経験から独学でWebデザイナーを目指す人の為お役立ち情報サイトです。Web制作・Photoshopの使い方・独学・勉強方法などあなたに役立つ情報を配信していきます。"> |
meta descriptionは、検索結果の赤枠の部分に表示されます。ここにページの説明を記述します。ユーザーのクリック率が大きくかわりますのでアクセスアップの為にはとても重要な箇所です。
文字コードを宣言する為の記述です。文字コードはUTF-8に設定しましょう。
1 |
<meta charset="UTF-8"> |
1 |
<body></body> |
bodyタグの中に内容を記述する事でページが表示されるようになります。
linkタグは主に外部のCSS(カスケーディングスタイルシート)を読み込む際に使用します。
1 |
<link rel="stylesheet" href="style.css" type="text/css"> |
<body></body>内に記述したHTMLがページとして表示されます。body内で使用するタグは以下の通りです。
aタグはリンクを貼る時に使用するタグです。resultをタップしていただくと、ページを確認出来ます。
See the Pen mqKjJM by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
divは、要素を一括りにする時に使用するボックスのような役割を果たします。divだけを記述しても横幅や縦幅背景色などは反映されませんので、単体では意味をもたない透明の枠となります。
divを使う時は、CSSで横幅、縦幅、マージン、余白などを指定する事が出来ます。
See the Pen XzYYpy by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
ulタグは箇条書きのリスト要素を表示したい時に使います。<li></li>で囲われた箇所がリスト形式で出力されます。
See the Pen qVKyEZ by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
olタグは箇条書きのリスト要素に番号を振る事が出来ます。
See the Pen VrdBvp by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
dlタグは、タイトル付きの箇条書きリストです。
See the Pen bYKKJv by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
spanタグは一部分のみを変更したい時に使用します。spanタグ単体では意味を持ちませんが、CSSで色を変えたりサイズを変えたりする事が出来ます。
See the Pen EbRpyV by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
imgタグは画像を読み込む為のタグです。imgタグを使う時には、width(横幅)・height(高さ)・alt(代替テキスト)を必ず入力します。
See the Pen gXKjme by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
pタグは文章を表示したい場合に使うタグです。
See the Pen xPzJrE by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
strongタグは文字を強調したい場合に使用します。strongタグで囲われた箇所は太字として表示されます。
See the Pen RjJBZx by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
tableタグは表として使いたい時に使用します。
See the Pen LOrBmL by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
見出しタグです。ページ内の見出し要素をh1〜最大h6のタグで括る事ができます。h1が一番重要な見出しで数字が大きくなるに連れて見出しレベルが小さくなります。
See the Pen xPzJJq by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
headerの要素を1つのグループにするタグです。
See the Pen eeKjPJ by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
navタグはナビゲーションメニューを1つのグループする為のタグです。
See the Pen POarzQ by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
footerの要素を1つのグループにする事が出来るタグです。
See the Pen MOXBLa by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
scriptタグはJavaScriptを読み込む為のタグです。jQueryのライブラリファイルを始め、Web制作では様々なJs(JavaScript)ファイルを読み込んでサイトに動きをつける事が出来ます。
Scriptタグは</body>の直前に書くのが主流となっています。
See the Pen yPEqdY by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
blockquoteタグは、引用したものを掲載する時に使用します。
See the Pen Kyexpd by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
inputタグのtype=”text”はお問い合わせフォームを作成する時に使用するタグです。
See the Pen NwzVPd by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
inputタグのtype=”submit”はボタンとして使用出来ます。
See the Pen rYKgav by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
textareaタグはお問い合わせフォームのお問い合わせ内容を入力するエリアとして使用します。
See the Pen QOxRbv by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
コーディングの際にメモとして残しておきたい場合は、コメントアウトを使います。
See the Pen POaroO by Akiyuki Ishihara (@STACK-Inc) on CodePen.27679
いかがでしたでしょうか?
コーディングの際によく使用するHTMLは実際のところ数える程しかなく、HTMLタグ辞典に載っているタグを何百も覚える必要は全くありません。
WebデザイナーもHTMLタグをすべて丸暗記している人はいません。わからない場合は、タグをその都度調べながらコーディングを行っているのです。今回ご紹介させていただいたタグを重点的に勉強していただければ、コーディングで使用するHTMLタグは、カバー出来ます。
HTMLを習得する事は、他の言語に比べて難しくは無いのでこの機会にHTMLタグを身につけましょう。
STACK(当サイト)のソースコードも確認して見てください。このページのタグに集約されているはずです。
コメントを残す