HTMLやCSSでコーディングをしていると様々なタグやプロパティを理解しておかなければなりません。

しかし、HTMLタグやCSSプロパティの数は非常に多いため、なかなか覚えることはできません。まずは、頻出するタグやプロパティから理解しておく必要があります。

そこで、本記事ではHTMLやCSSのコーディングをする上で頻出するタグやプロパティを紹介します。

頻繁に使われるタグやプロパティを覚えておけば、コーディングスピードも上がりHTMLやCSSの勉強も捗ること間違いありません。

無理に全部覚える必要はないですが、頻出するHTMLタグやCSSプロパティを理解して、効率的に学習を進めていきましょう。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

HTMLのタグとCSSのプロパティを解説

まずは、HTMLのタグとCSSのプロパティについて解説します。

タグとプロパティの基本的な意味を知っておくと、たくさんあるタグやプロパティの理解も進みやすくなります。

HTMLタグには意味がある

divタグやhタグ、pタグにはそれぞれに役割があります。当然、適当にタグを割り振ってはいけません。

hタグであれば、見出しの役割があり、pタグであれば段落の意味があります。

Webサイトを制作する上では、HTMLタグの役割と意味を理解して、正確にコーディングしなければなりません。

HTMLタグは以下のように記述します。

<div>ブロックを作ります</div>
<p>段落を作ります</p>
<img src="computer.jpg" alt="">

HTMLタグの中には、閉じタグが必要なものと必要でないものがあります。上記のコードでは、imgタグには閉じタグは必要ありません。

CSSのプロパティは装飾名

HTMLタグだけでなく、CSSプロパティの理解も重要です。

CSSにおけるプロパティとは、装飾の種類を意味します。

HTMLタグをセレクタで指定し、CSSプロパティでどのような装飾を実装するかを記述します。

CSSは以下のように記述します。

セレクタ {
  プロパティ:値;
}

プロパティの後にコロンを記述し、値を書きます。

セミコロンで閉じる作業は忘れないようにしましょう。

頻出するHTMLタグとCSSプロパティを紹介

HTMLタグとCSSプロパティの記述方法を理解したところで、Webサイトを制作する上で頻出するタグとプロパティを紹介します。

以下で紹介するタグとプロパティは、ほとんどのサイトで必ずと言っていいほど出てきますので、確実に理解し、使えるようになりましょう。

解説だけでなく、使いどころや記述方法まで紹介しますので最後までご覧ください。

頻出するHTMLタグを解説

まずは、HTMLタグから解説します。

たくさんあるHTMLタグから16個に絞りました。

それぞれの役割と記述方法も一緒に解説していきます。

divタグ

divタグは、最も出てくるHTMLタグの一つです。

Webサイトは、それぞれのブロックと主に呼ばれる固まりを作り、組み合わせて制作します。

divタグは、そのブロックを作るためのHTMLタグです。

divタグ自体には大きな意味はありません。しかし、ブロックを作り、装飾する上で便利なHTMLタグです。

簡単な使用例を紹介します。

<div>
    <h2>divタグとは？</h2>
    <p>divタグは、単体では意味はありませんが、ブロックを作る上でよく使われるタグです。</p>
</div>

div{
  width: 200px;
  background-color: skyblue;
}

上記のコードのように、様々な要素をdivタグ内で記述することでブロック内にまとめることができます。

hタグ

hタグは、見出しを意味しており、「heading」の頭文字を取っています。

h1〜h6まであり、大きい数字ほど大きな見出しとなります。

hタグは見出しとなるため、階層を意識する必要があります。

なるべくh2の次にh3を、h3の次にh4を書くようにできるといいですね。

h2の次に複数のh3を記述することは問題ありません。

通常、hタグは数字が小さいほど、文字が大きく表示されます。使用するブラウザにより大きさは異なるため注意しておきましょう。

<h1>タイトルが入ることが多いです</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
<h5>さらに小さい見出し</h5>
<h6>最も小さい見出し</h6>

pタグ

pタグは段落を作るためのHTMLタグであり、段落を意味する「paragraph」の頭文字を取っています。

pタグは、文章を記述する時に使用します。

pタグがなくても文章を打ち込めますが、段落を付けたり、装飾したい時などはpタグが必要になります。

<p>Webサイトに文章を書くときはpタグを使用しましょう</p>

aタグ

aタグは、他のURLにリンクしたい時や同ページ内に違う場所に移動させたい時に使用します。

aは「anchor」の略であり、錨(いかり)や支えなどの意味があります。

aタグは、さまざまなURLにリンクさせたい画像や文字を囲むことでリンクを作成できます。

メニューやボタンを作る時に使用されます。

<ul>
    <a href="https://web-camp.io/magazine/"><li>home</li></a>
    <a href="https://web-camp.io/magazine/"><li>menu</li></a>
    <a href="https://web-camp.io/magazine/"><li>contact</li></a>
</ul>

aタグを何も装飾しない状態であれば、下線が付き、色は青になります。

spanタグ

spanタグは、文章や要素の一部の装飾を変更したい時などに使用されます。

spanは期間や短時間などの意味があり、HTMLでは一部分という意味になります。

spanタグは文章の中で一部分だけ赤色や太文字にしたい時に使用されることが多いです。

<p>一部分を<span>赤い太文字</span>に変化させます。</p>

span{
  color: red;
  font-weight: bold;
}

spanタグはインライン要素のため、文章中に記述できます。

imgタグ

imgタグは、画像を挿入するためのタグです。

imgは、画像を表す「image」を短縮したものです。imgタグは、タグ内にsrcとaltを記述します。

簡単な記述例を紹介します。

<img src="computer.jpg" alt="パソコンの画像">

imgタグは閉じタグが必要ありません。

タグ内のsrcに画像が保存している場所とファイル名を記述します。

altは、どのような意味のある画像であるかの説明を記述します。

altは、Webサイト上には表示されませんが、SEOやアクセシビリティの観点などから重要です。できる限り記述するように心がけましょう。

ul,ol,liタグ

ulタグは、「unordered list」の頭文字を取ったもので、順番がないリストという意味があります。

逆に順番があるリストはolタグ(ordered list)を使用します。

liタグは、ulタグ、olタグとセットで使われるタグで、単にリストを作るためのタグです。

liタグは、ulタグかolタグとセットで記述すると覚えておきましょう。

<ul>
    <li>ホーム</li>
    <li>メニュー</li>
    <li>コンタクト</li>
</ul>
<ol>
    <li>見て</li>
    <li>書いて</li>
    <li>覚える</li>
</ol>

作成するリストの意味を考えて、olタグとulタグを使い分けるようにしてください。

navタグ

navタグは、Webサイトの上部に表示されているメニューを作成する時に使うタグで、「navigation」の略です。

基本的には、Webサイトのナビゲーションの役割を果たす、メニューブロックを作るためのタグです。

<nav>
<ul>
    <li>ホーム</li>
    <li>メニュー</li>
    <li>コンタクト</li>
</ul>
</nav>

divタグでも問題ありませんが、役割をはっきりさせるためnavタグを使用しましょう。

inputタグ

inputタグは、お問い合わせページなどでユーザーが情報を入力する欄を作るタグです。

お問い合わせページで名前を書く部分やチェックを付ける部分などをinputタグで作成できます。

他にも、送信するためのボタンが作成できるなど便利です。

<div>
  <label for="name">名前</label>
  <input type="text" name="name">
</div>
<div>
  <label for="gender">性別</label>
  <input type="checkbox" name="gender" value="male">男性
  <input type="checkbox" name="gender" value="female">女性
</div>

他にもパスワードの入力欄や入力した内容を削除するボタンを作成することもできます。

styleタグ

styleタグは、headタグ内でCSSを記述するためのタグです。

一般的には、CSSファイルをlinkタグで読み取りスタイルを当てますが、styleタグを使うことで、HTMLファイル内にCSSを記述できるようになります。

<head>
    <meta charset="UTF-8">
    <title>WebCamp</title>
    <style>
        h2{
            color: blue;
        }
        p{
            color: red;
        }
    </style>
</head>
<body>
     <h2>styleタグ</h2>
     <p>styleタグで装飾しました。</p>
</body>

CSSファイルで装飾したくない部分のみをstyleタグに書き込むこともあるので、覚えておきましょう。

headerタグ

headerタグは、その名のとおりヘッダーを作る際に使用します。

ヘッダーのブロックを作る時にheaderタグで囲んで、その中にロゴやメニューを挿入します。

divタグでも代用できますが、headerタグを使用したほうがコード上でも理解しやすく、Webサイトが評価される上でも理解してもらいやすいです。

<header>
    <div class="logo"><img src="computer.jpg" alt=""></div>
    <ul>
        <li>HOME</li>
        <li>MENU</li>
        <li>CONTACT</li>
    </ul>
</header>

footerタグ

footerタグはフッターを作る際に使用します。

headerタグ同様にフッターのブロックを作る際にfooterタグで囲んで作成します。

フッターブロックであるとコード上で理解しやすくなるため、divタグではなく、footerタグを使用しましょう。

頻出するCSSプロパティを解説

頻出するHTMLタグの次は、CSSプロパティを紹介します。

CSSプロパティはHTMLタグ以上の数があり、表現の幅は広いです。

ここでは、頻出するCSSプロパティ10個を紹介します。

font系

font系のCSSプロパティは、文字の種類や大きさ、太さなどのスタイルを整えます。

よく使うfont系のプロパティ4つを以下の表にまとめました。

フォントを決めるCSSプロパティは最初に理解しておかなければなりません。

Webサイトを作成する上で、文字の読みやすさや装飾は重要になるためです。

font系のプロパティを使用したコード例を紹介します。

<p><span>文字の装飾</span>は、Webサイトを作る上で重要な役割を担います。必ず習得しておきましょう。</p>

html{
  font-family: Arial, Helvetica, sans-serif;
}
p{
  font-size: 16px;
  font-style: italic;
}
span{
  font-size: 20px;
  font-weight: bold;
  color: red;
}

font系のCSSプロパティを組み合わせるだけで、文字の表現の幅が広がります。

まずは、font系のプロパティを理解しましょう。

background系

background系は、背景の装飾を実装するCSSプロパティです。

背景の色を変えたり、画像を設定できたりします。

背景画像の大きさやサイズなども細かく設定も可能です。

まずは、background系のプロパティを以下の表で紹介します。

background系のプロパティは単体で使うことは少なく、それぞれのプロパティを組み合わせなければなりません。

特に画像を背景に設定する場合には、画像の大きさや場所を細かく指定しなければならないので、今回紹介したプロパティを覚えておきましょう。

color

CSSのcolorプロパティは、文字の色を装飾します。

colorプロパティは、以下の3つの値で指定できます。

どの値を指定しても問題ありませんが、rgbや16進数の使用をおすすめします。

キーワードでは細かい色の調整が難しく、指定できる色の種類も少ないためです。

基本的には、rgbか16進数のどちらかを使用し、同じWebサイト内では統一するようにしましょう。

colorプロパティを使用したコード例を紹介します。

<p class="keyword">キーワードで赤色を指定</p>
<p class="rgb">rgbで赤色を指定</p>
<p class="sinsuu">16進数で赤色を指定</p>

.keyword{
  color: red;
}
.rgb{
  color: rgb(255, 0, 0);
}
.sinsuu{
  color: #ff0000;
}

どの記述方法でも同じ赤を指定できています。実際にそれぞれの値を調整しながら、どのように色が変化するかを体験してみてください。

width

widthは英語で「横幅」を意味します。CSSにおいてもwidthプロパティは、要素の横幅を調整します。

どんなWebサイトでもwidthプロパティは使われているので、習得必須のプロパティの一つです。

ユーザーが使う画面幅に合わせてブロックの幅を合わせなければならないためです。

widthプロパティは、pxだけでなく%やvwなどの相対値でも指定が可能です。

widthプロパティを使った簡単なコード例を紹介します。

<body>
  <div class="yokohaba1">pxで指定</div>
  <div class="yokohaba2">％で指定</div>
  <div class="yokohaba3">vwで指定</div>
</body>

// 画面幅1920pxの時

body{
  width: 500px;
}
.yokohaba1{
  background-color: green;
  width: 200px;
  height: 50px;
}
.yokohaba2{
  background-color: grey;
  width: 50%;
  height: 50px;
}
.yokohaba3{
  background-color: hotpink;
  width: 10vw;
  height: 50px;
}

それぞれの値がどの数値を基準として決定するかを把握しておかなければなりません。

height

heightは英語で「高さ」を意味します。CSSにおいてもheightプロパティはブロックの高さを指定します。

widthプロパティと同様にpxや%、vhで値を決めます。

しかし、heightプロパティで高さを指定すると表示が崩れる場合もあるため、使用する際には注意が必要です。

heightプロパティを使用した簡単なコード例を紹介します。

<body>
  <div class="tatehaba1">pxで指定</div>
  <div class="tatehaba2">％で指定</div>
  <div class="tatehaba3">vhで指定</div>
</body>

// 表示されている画面の縦幅が800pxの時

body{
  width: 500px;
  height: 500px;
}
.tatehaba1{
  background-color: green;
  width: 200px;
  height: 50px;
}
.tatehaba2{
  background-color: grey;
  width: 200px;
  height: 5%;
}
.tatehaba3{
  background-color: hotpink;
  width: 200px;
  height: 10vh;
}

vhは画面の縦幅が変わるとそれに合わせて変化するため、使用する際には注意しなければなりません。

それぞれの値がどのような表示になるかを理解しておきましょう。

margin

Webサイトを作成する上では余白は欠かせません。

全てのブロックや要素の間に余白がない場合、非常に見にくい状態になるためです。

それぞれのブロックや要素を上手にレイアウトするためにも余白を挿入する必要があります。

marginプロパティはブロック間や要素間に余白を挿入するために、習得しなければなりません。

marginプロパティを使用した簡単なコード例を紹介します。

<div class="yohaku1">上下左右に10pxの余白</div>
<div class="yohaku2">下を指定して20pxの余白</div>
<div class="yohaku3">marginは相殺される</div>

// わかりやすいようにクラス名をローマ字kanaにしてあります

.yohaku1{
  background-color: green;
  width: 200px;
  height: 50px
  margin: 10px;
}
.yohaku2{
  background-color: grey;
  width: 200px;
  height: 50px;
  margin-bottom: 20px;
}
.yohaku3{
  background-color: hotpink;
  width: 200px;
  height: 50px;
  margin-top: 30px;
}

marginプロパティには、外側の余白を一括で指定する方法と上下左右のそれぞれを指定して余白を挿入する方法があります。

以下の表にmarginプロパティの記述方法を示します。

さらに、marginプロパティは隣の要素のmarginと相殺してしまう特徴があります。

それぞれにmarginプロパティを指定している場合、大きい数値のmarginが適用されるということを覚えておきましょう。marginプロパティを使う時の基本となります。

padding

marginプロパティが要素と要素の間の余白であるのに対して、paddingプロパティは要素の内側に余白を挿入するプロパティです。

要素の中に余白を挿入することで、それぞれの要素の中を整える役割があります。

paddingプロパティを使って、簡単なコード例を紹介します。

<div class="yohaku1">上下左右に10pxの余白</div>
<div class="yohaku2">下を指定して20pxの余白</div>
<div class="yohaku3">paddingに相殺はない</div>

// わかりやすいようにクラス名をローマ字kanaにしてあります

.yohaku1{
  background-color: green;
  width: 200px;
  height: 20px;
  text-align: center;
  padding: 10px;
}
.yohaku2{
  background-color: grey;
  width: 200px;
  height: 20px;
  text-align: center;
  padding-bottom: 20px;
}
.yohaku3{
  background-color: hotpink;
  width: 200px;
  height: 20px;
  text-align: center;
  padding-top: 10px;
}

paddingプロパティもmarginプロパティと同様に上下左右の一方向を指定して内側の余白を挿入できます。記述方法は、marginプロパティと同じです。

border

borderは、境界線を表示するためのプロパティです。

要素の外側を線で囲みたい時や下線を引きたい時に使用します。

borderプロパティに関わるプロパティを表を用いて紹介します。

borderプロパティは、種類や色などを指定することで様々な境界線を表現できます。

さらに、上下左右の境界線をそれぞれ指定したり、一方向のみに境界線を引いたりもできるため、borderプロパティだけでデザインをすることもあります。

borderプロパティを使った簡単なコード例を紹介します。

<div class="kyoukai"></div>
<div class="kyoukai2"></div>
<div class="kyoukai3"></div>

div{
  margin: 30px;
  width: 200px
  height: 30px;
}
.kyoukai{
  border: 1px solid red;
}
.kyoukai2{
  border-width: 2px;
  border-style: dashed;
  border-color: green;
}
.kyoukai3{
  border: 3px double blue;
  border-radius: 10px;
}

今回紹介したHTMLタグとCSSプロパティの一覧

今回は頻出するHTMLタグ12個とCSSプロパティ8個を紹介しました。

それぞれのプロパティと効果の一覧を以下の表に示します。

HTMLやCSSには他にもたくさんのタグやプロパティが存在しています。

まずは、頻出するタグやプロパティを覚えつつ、コードを書きながら他のタグやプロパティを覚えていきましょう。

必ず覚えなくても、検索しながらコードを書いても問題ありません。

デザインを正確に再現できることが第一優先であることを忘れないでください。

まとめ

HTMLタグとCSSプロパティの理解は、コーディング習得への第一歩です。

思い通りのレイアウトを組むためにはタグとプロパティの意味を理解し、選択する力が必要です。

本記事で紹介した頻出するHTMLタグとCSSプロパティを思い出しながら、コーディングの理解を進めていきましょう。

どうしても、HTMLやCSSの学習が進まず、今後のキャリアが不安であれば、DMM WEBCAMPの無料カウンセリングを活用してみてください。

悩みを相談するだけでも、今後の目標が明確になり、やるべきことが見えてくるはずです。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP