• HTML/CSS
  • css
  • html

HTML/CSS初心者が最低限覚えるべき必須タグ一覧&プロパティ一覧

HTML/CSS初心者が最低限覚えるべき必須タグ一覧&プロパティ一覧

HTMLタグやCSSプロパティを理解するということは、web制作をはじめて学習する方にとって大きな関門の1つです。

タグやプロパティをすべて覚える必要はなく、手を動かしながら出てきたものを少しずつ覚えていくのは、web制作のみならずプログラミングの世界でも同様です。

しかし、何も知らないところからでは基本的なWEBページを表現することもできませんから、どんなページを作るときでも必ず出てくる、そんな必須タグ&必須プロパティについて分類ごとにまとめました。

初心者が最低限覚えるべきHTMLタグ一覧

web制作をする際に毎回登場するタグを集めました。

  • 文章の基本構造を表すタグ
  • <body>内の構造を表すタグ
  • その他の頻出タグ

また、HTMLで覚えるタグの詳細はhtml学習でまず最初に覚えるべきタグ7選【目的別タグ一覧】にて詳しく解説しています。

文章の基本構造を表すHTMLタグ

基本的な構造を表すタグのため、どんなページをつくるときも必ず登場するタグです。

ブラウザで表示される文字や画像の配置に直接関わっているわけではないので、何度も使っていくうちに慣れましょう。

タグの表示形式意味
<html> </html>HTML文書の開始を表す
<head> </head>文書のヘッダーを表す
<body> </body>ページ本体の領域を表す

<body>内の構造を表すHTMLタグ

<body> </body>の中身は、ブラウザの表示に直接かかわるものになります。

webページはヘッダーやフッター、メインの要素に分かれています。メインの中でもコンテンツが分かれており、それらを効率よく装飾したいときに要素のグループ化などをします。

タグの表示形式意味
<header> </header>セクションのヘッダーを表す
<main> </main>body要素の主要内容を表す
<footer> </footer>セクションのフッターを表す
<div> </div>ブロック要素の範囲指定(グループ化)
<span> </span>インライン要素内の範囲指定

※<main> </main>内のコンテンツのヘッダーやフッターを表すときにも<header> </header>、<footer> </footer>は使用されます。

※<div>と<span>は単体では意味を持ちません。文章中でも離れたところを一括で装飾したいとき(div・span)や、枠組みを作って配置を決めたいとき(div)に活躍します。

その他頻出HTMLタグ

web制作の初心者が学び初めに必ず目にするタグです。これらは直接webブラウザ上に表示されるものなので、既に理解ができている方も多いと思います。

一覧を見ながらタグを打つ人もいるかもしれませんが、慣れてくるとひらがなを書くように打てるようになります。

タグの表示形式意味
<h1> </h1> (h2~h6も同様に)見出しを表す
<p> </p>段落を表す
<img src=” ”>画像を表す
<ul><li> </li>…</ul>番号なしリストを表す
<ol><li> </li>…</ol>番号付きリストを表す
<a href=”http://…”> </a>リンクを表す

初心者が最低限覚えるべきCSSプロパティ一覧

HTMLのタグと同じように抵抗を感じる人が多いのがCSSプロパティです。CSSが分かるとできることの幅がグンと広がりますので、HTMLと同時に学習をしていくことをお勧めします。

CSSについて全く何も分からない状態、もしくは基本を押さえてから学習を勧めたいという方はCSSとは?初心者が押さえたい基本の基本を紹介しますを一度お読みください。

ボックス

プロパティ名意味
width
height高さ
background-color
background-image画像
marginコンテンツ外部の余白
paddingコンテンツ内部の余白
border
display表示の仕方

※marginとpaddingはややこしいですが、実際に表示させ記述してみるの繰り返しで身に付けていきましょう。本や参考書の図解も分かりやすくてお勧めです。

参考記事:初心者がHTMLを習得するためのおすすめの本と選び方、活用法まで解説

テキスト

プロパティ名意味
font-color文字色
font-size文字の大きさ
font-weight文字の太さ
font-familyフォント
text-alignテキストの配置位置

動き

動きをつけるのは初心者にとっては少しハードルが高いかもしれません。

訪問済のサイトのリンクが紫に表示されていたり、リンクをクリックしようとカーソルをリンク上に乗せるとすこし表示が変わったり。

こんなこともCSSを活用するとできるのです。リンクをつける際に少し試してみるのもいいかもしれません。

疑似クラスについて詳しく知りたい方はCSSの擬似クラス:link, :visited, :hover, :active, :focusの使い方が分かりやすいです。

疑似クラス反映
hoverカーソルが触れたとき
activeクリックされたとき

まとめ

今回はHTMLとCSSそれぞれで初心者が必ず覚えたいタグやプロパティについてご紹介しました。

ただし、今回紹介したものだけでweb制作ができるようになるわけではありません。

何度も手を動かし、コードに触れることで昨日まで分からなかったことや理解が浅かったものを少しずつ習得していくことができます。

諦めずに、少しずつでいいのでできることを増やしていきましょう。