【HTML/CSS】頻出するタグとプロパティを初心者向けに解説
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つを以下の表にまとめました。
| プロパティの種類 | 意味 |
| font-size | フォントの大きさを決めます。pxやrem、emが単位として使えます。 |
| font-family | フォントの種類を選択します。要素それぞれで指定するのではなく、サイト全体で指定する方法が一般的です。 |
| font-style | 文字を斜体にしたい時に使用します。 |
| font-weight | 文字の太さを調節します。3桁の数字で記述する方法とboldなどの英語で記述する方法があります。 |
フォントを決める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 | 背景に色を設定します。キーワードやrgba、16進数で色を指定します。 |
| background-image | 背景に画像を設定します。url()の中に画像のパスとファイル名を入力します。 |
| background-position | 背景に指定した画像のポジションを指定できます。topなどのキーワードだけでなく、%やpxで指定もできます。 |
| background-repeat | 背景画像の繰り返しを設定します。背景画像の小さい場合、初期値では繰り返し表示されます。 |
| background-attachment | スクロールされた時に、背景画像を固定するために設定します。 |
| background-size | 背景画像の大きさを設定します。 |
| background | 背景の設定を一括で設定できます。 |
background系のプロパティは単体で使うことは少なく、それぞれのプロパティを組み合わせなければなりません。
特に画像を背景に設定する場合には、画像の大きさや場所を細かく指定しなければならないので、今回紹介したプロパティを覚えておきましょう。
color
CSSのcolorプロパティは、文字の色を装飾します。
colorプロパティは、以下の3つの値で指定できます。
| 値 | 記述方法 |
| キーワード | 赤であれば、red。青であればblueなどキーワードで指定します。 |
| rgb | r(red)、g(green)、b(blue)の割合を0~255の値で調節します。 |
| 16進数 | red、green、blueを16進数(0~f)で調節します。 |
どの値を指定しても問題ありませんが、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 | 上下左右を一括で指定します。記述する数字が一つの場合は上下左右、2つの場合は前が上下、後ろが左右、4つの場合は上、右、下、左の時計回りで指定します。 |
| margin-top | 要素の上のみに余白を挿入したい時に使用します。 |
| margin-bottom | 要素の下のみに余白を挿入したい時に使用します。 |
| margin-left | 要素の左のみに余白を挿入したい時に使用します。 |
| margin-right | 要素の右のみに余白を挿入したい時に使用します。 |
さらに、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-width | 境界線の太さをpxで指定します。 |
| border-color | 境界線の色を指定します。 |
| border-style | 境界線の種類を指定します。点線や二重線などの指定ができます。 |
| border | 境界線の種類や色などを一括で指定します。 |
| border-radius | 境界線の四角の丸みを調整できます。 |
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 | |
| タグ名 | 効果 |
| div | ブロックを作成します。装飾目的に記述することが多いです。 |
| h | 見出しを作成します。h1~h6を指定できます。 |
| p | 段落を作成します。文章を書く時に指定します。 |
| a | リンクを作成します。他のサイトや同ページの指定の場所にリンクさせます。 |
| span | 文章などの一部分に装飾を加えたい時に使用します。 |
| img | 画像を挿入する時に使用します。 |
| ul,ol,li | リストを作ります。ulは順序なし、olは順序ありのリストを作成します。 |
| nav | ナビゲーションのブロックを作る時に使用します。 |
| input | ユーザーが入力する入力欄やチェックボックスなどを作成する時に使用します。 |
| style | HTMLファイルにCSSを記述する時に使用します。 |
| header | ヘッダーのブロックを作成する時に使用します。 |
| footer | フッターのブロックを作成する時に使用します。 |
| CSS | |
| プロパティ名 | 効果 |
| font系 | 文字の種類や大きさ、太さなどを装飾する時に使用します。 |
| background系 | 背景を装飾する時に使用します。 |
| color | 文字色を変更する時に使用します。 |
| width | ブロック要素などの横幅を指定します。 |
| height | ブロック要素などの縦幅を指定します。 |
| margin | ブロックの外側の余白を指定します。 |
| padding | ブロックの内側の余白を指定します。 |
| border | ブロックの境界線を表現します。 |
HTMLやCSSには他にもたくさんのタグやプロパティが存在しています。
まずは、頻出するタグやプロパティを覚えつつ、コードを書きながら他のタグやプロパティを覚えていきましょう。
必ず覚えなくても、検索しながらコードを書いても問題ありません。
デザインを正確に再現できることが第一優先であることを忘れないでください。
まとめ
HTMLタグとCSSプロパティの理解は、コーディング習得への第一歩です。
思い通りのレイアウトを組むためにはタグとプロパティの意味を理解し、選択する力が必要です。
本記事で紹介した頻出するHTMLタグとCSSプロパティを思い出しながら、コーディングの理解を進めていきましょう。
どうしても、HTMLやCSSの学習が進まず、今後のキャリアが不安であれば、DMM WEBCAMPの無料カウンセリングを活用してみてください。
悩みを相談するだけでも、今後の目標が明確になり、やるべきことが見えてくるはずです。
