WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

よくわかる基本のHTML13個。 最初はこれだけでWEBサイトの基礎を学ぼう

猿でもわかる実践HTML13個

HTMLは最初から全て覚えようとすると時間がいくらあっても足りません。WEBデザインの現場で使われるHTMLタグは思いの外少ないため、それらを集中して覚えてしまい、後々必要になってから参考書などを見る方が実践的です。そこで私のWEBデザイン歴からウェブサイトに必要なHTMLタグ13個をピックアップしました。このタグを使えば基本的なウェブサイトは構築できます。

またここに載せていない膨大な数のHTMLも、基本的にはピックアップしたHTMLの亜流とも呼べるものがいいので、参考書を一読すれば使えるようになるでしょう。

デザイナーLevel:1 「はじめてのWEBデザイン」目次

この記事の内容

HTMLの基本構成

これがHTMLの基本的な文章構造です。これは定型文なのでメモにコピペするくらいの気持ちで十分です。最新のHTML5のルールに基いています。現状のブラウザはすべて対応していますので、コーディングを初めて行う人はこちらの定型文を覚えておくだけで十分です。

ちなみに、この定型文をわざわざ手書きするWEBデザイナーはほとんどいません。DreamweaverならHTMLの新規作成した時点で既に書かれているコードです。

HTMLコードは基本的に<>で1つの塊です。この記述ルールから外れると正確に表示されません。

ブラウザに表示されるのはbodyの中に書かれたHTML

ブラウザに表示させたいものはすべてbodyダグ内に記述します。試しにbodyの中にテキストを入れてみましょう。

確認HTML

ブラウザで文字が確認できたと思います。このようにbodyタグの中にテキストを入れることで表示することが可能です。
これをHTMLタグを用いて様々な形に変化させたものを組み合わせてWEBサイトは作られます。
ではWEBデザインの基本となるHTMLタグを確認してみましょう。

基本となるHTMLタグ

昔から使われていたHTMLタグと、最新のHTML5のタグは別々に分けて考えます。現在のWEBサイトのコーティングでも無理にHTML5のタグを使う必要がありません。難易度が高いと思ったら旧式のタグを用いても問題なく動作します。

WEBデザイナー頻繁に使うHTML5のタグは、旧式のタグをより詳細化してわかりやすくしたものと考えればよいでしょう。まずは基本を理解しないHTML5のタグを理解することは難しいので基礎を覚えましょう。

段落

ただのテキストではなく、文章になっているものはpタグで括ります。代表的なのはブログです。文章の区切りと区切りではかならずpタグが用いられています。
では普通のテキストとどのように違うのか確認してみます。

確認HTML

pタグでは上下に隙間ができています。これはブラウザが【pタグは段落だから上下の隙間(マージンを取る)】と理解したからです。この【pタグだから○○】という定義に変更を加えるのがCSS(カスケーティングスタイルシート)です。これを使用するとpタグの文字の大きさから色・上下の隙間まで自由に変更できます。

CSSはHTMLの基本を覚えてから勉強するべき言語ですのでひとまずは置いておき、次に進みます。

見出し

確認HTML
見出しによってフォントサイズが違うのがわかると思います。CSSの設定でフォントは自由に変更することができますが、何も指定しない場合はブラウザが大きさを独自に解釈して大きさを決定します。

確認HTML

実際にはこのように使用します。このブログも記事名はh1で作り、本文はpタグで構成しています。
初めてウェブサイトを作る人には見出しというのはよくわからないかもしれません。HTMLによる見出しとは「ここから先はこのような内容ですよ」というお知らせです。ブログなどは見出しだけ見て読む記事に値するか決める人がもいるほどです。

h1ほど重要な大見出しで、h6ほど小見出しになっていきます。
見出しhタグには使用ルールがありますので、ルールは必ず守ってください。このhタグの使い方を間違えると検索エンジンからの評価が悪くなります

確認HTML

まずはh1でこのウェブサイトが何であるのかを宣言します。サンプル例だとHTMLについて語ると宣言しています。
次にHTMLの構造について見出しを作りました。これはh2の見出しを使用します。なぜならh1の「HTMLについて」の中に入る内容だかrです。どうように「HTMLタグとは」もh1の内容に紐づくためh2を使用します。

次に「段落pタグ」の見出しです。これはh2見出しである「HTMLタグとは」の中に入るためh3になります。
このように見出しhタグは階層構造になるように使用します。

従来はh1タグは1ページに1つしか使ってはいけないという決まりがありましたが、最新のマークアップ仕様であるhtml5ではh1タグの複数仕様を許可しています。しかし意味として階層構造になっている場合はh1~h6を適切に使い分けた方がユーザーのためになるでしょう。

改行

確認HTML
コードをEnterで改行してもブラウザ表示でテキストは画像は改行されることはありません。

行頭に記号をつけたリスト

確認HTML

リストの行頭の(●)などの黒丸を使用したリストを作成します。CSSでレイアウトを変更して横並びのメニューとしても頻繁に使われます。
またリストの中にリストを入れる階層化も可能です。

番号付きリスト

確認HTML

番号を付いているリストを作成します。順番建ててテキストを並べていく時に利用します。

定義型のリスト

確認HTML

見出しと説明がワンセットになっているリストを作る際に使用します。用語集やF&Qなどのコーティングで頻繁に使用されます。

特定の範囲を1つのまとまりにする

複数のタグの集まりを1つの要素として扱うときに使用しmす。HTML5以前のコーティングはこのdivタグだらけでした。現在でもWEBデザインによってはほぼすべての要素がdivで括られているといっても過言ではありません。

確認HTML

このように見出しのhタグと段落のpタグを1つの固まりにすることができます。そうするとCSSを使用してhとpの固まりにマージンを指定したり枠線を表示することができます。

サンプルでは分かりやすいようにCSSを書いていますが、初めてコーティングする人はまだ気にする必要はありません。このままどんどんHTMLタグを覚えましょう。

特定の行数を1つのまとまりにする

divタグは複数の様々な要素を一括りにして使用しますが、spanタグは文字列の特定の1部をくくるために使用します。
サンプルのように、文字列の特定の1部分の色を変えたりフォントサイズを変更する場合によく用いられます。ECサイトの価格表示などで多用されます。

確認HTML

区切り線

確認HTML
コンテンツを分けるときに横幅100%の線を入れることで視覚的にわかりやすくします。

太文字

確認HTML

文章中の特定の部分を太文字にしたい時に使用します。ブログで表示されている一部部の黒文字かはほぼすべてのシステムでbタグが使用されています。bタグではできない複雑な処理をするときはspanタグをつかってCSSで書くのが主流です。

他のWEBページにリンクをする

確認HTML

WEBページから別のURLのページにクリックして遷移させるときに使用します。
targetを指定することで幾つかの遷移動作を行えますが、最初はクリックした画面をそのまま切り替えるtarget指定なしのリンク。新規ウィンドウ(最近のブラウザは新規タブ)でページを表示させる【target=”_blank”】の2つを覚えれば問題ありません。実際のWEBデザインのコーティングで大半はこの2つのどちらかを使用します。

画像を表示する

確認HTML

HTML中に画像を読み込む際に使用するタグです。
URLは直接インターネット上にアップロードされているURLを記入しても良いですが、基本的には「HTMLファイルが置かれている場所からどの位置にある画像ファイルか」という相対参照という形式で指定します。

多く使われるのがこの3つのパターンです。ウェブデザインをする上で大量の画像をHTMLと同じ階層に置くことは管理の面でまずありえません。一般的には【images】のようなフォルダを作り、その中に格納しておきます。
widthとheightは指定しない場合は原寸で表示されます。

altにテキストを打ち込んで置くと画像が表示されない場合にその文字が表示されます。WEBデザインの観点では軽視されやすいですがaltにテキストが入っているかいないかで検索のヒット数に影響するためSEOでは最も大事な要素の1つです。

表組み(テーブル)

確認HTML

こう考えるとわかりやすいです。よっていつの行(tr)で3つの列(td)を作ったら、その後に続くすべての列(td)も3つ作らなければいけません。これがテーブルを使用する際のルールです。またテーブルには見出し専用のタグがあります。

確認HTML

【th】タグを使用することで見出しを作ることができます。またExcelと同様に2つの列を1つにまとめることもできます。

確認HTML

colspanという指定をすると複数のtdを一つのセルとして扱うことができるようになります。
テーブルはcolspanを使用してレイアウトを整えてきます。

デフォルトだと表組みの枠が表示されないので、tableにプロパティを追加

確認HTML

デザインの現場ではtableのHTMLタグに直接プロパティを与えることはなく、すべてCSSによって装飾を整えるのが基本です。
しかしHTMLの勉強中にテーブルの枠線が見えないのは不都合なのでborderを追加で記述しておくと勉強がはかどります。

この13個のHTMLとCSSでWEBサイトを作ることができる

WEBサイトで使われているHTMLタグは思いの外少ないです。複雑なデザインをする比重はCSSによるからです。近年のスタンダードであるHTML5のタグを使ったHTMLだと少しだけ複雑になりますがCSSとセットで覚える必要があるため、ひとまずは基本のHTMLをマスターしましょう。この13個のHTMLを覚えれば、あとは必要に応じて検索したり参考書見たりしてコーディングすれば、気がついた時にはHTMLをマスターしています。

初めてWEBデザインでHTMLを使う人はインターネット検索で断片的な知識を得るのではなく、デザインの参考書で体系的にHTMLを覚えた方が後々応用が効くようになります。

WEBデザインにおけるコーディングの骨組みであるHTML、装飾のスタイルシート(CSS)。 WEBデザイナーはこの2つの言語を駆使してウェブサイトのデザインを整えてい


スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST