HTMLやCSSを勉強するにあたって意味がわからずに使っているもの、毎回わからなくなってその都度調べているなんてことはありませんでしょうか。
今回はコーディングをしていく中で、頻出するHTMLタグ・CSSプロパティを紹介していきます！
また、HTML,CSSの役割自体がまだあまり理解できていない方はこちらの記事で理解を深めましょう！
現役フロントエンジニアがWebディレクターに知っておいてほしいこと
目次
HTML5タグ
１．レイアウトタグ
ページを構成する基本となるタグを紹介します。
『HTML5から追加されたタグ』と書いてあるものは比較的新しく、
それ以前だと後述する<div>というタグで代用している場合が多いので注意しましょう。
<head>
タイトルや検索で表示される文章などのサイトの基本情報を記入するタグ。
この中に様々なタグで情報を記載する。
<body>
ページとして表示される部分全体を示す。このタグに囲まれたものだけが実際のサイトとして表示されている。
<div>
ひとかたまりのブロック要素であることを示す。
汎用性があるのでHTML5以前はほとんどの要素がこのタグを使用していた。
<header>
HTML5から追加されたタグ。ページのヘッダーであることを示す。
<nav>
HTML5から追加されたタグ。ナビゲーションであることを示す。
<main>
HTML5から追加されたタグ。メインコンテンツであることを示す。
<section>
HTML5から追加されたタグ。1つのセクションであることを示す。
<footer>
HTML5から追加されたタグ。フッターであることを示す。
<article>
HTML5から追加されたタグ。独立した記事のセクション。
<aside>
HTML5から追加されたタグ。本筋から外れるその他の情報を示す。
２．見出しと段落
<h1>
一番大きな見出し。サイトのタイトルになるようなものを示している。
『一番大きな』という意味なので基本的にはサイトに一つしか存在しない。
<h2>
二番目に大きな見出し。
<h3>,<h4>といった具合に『◯番目に大きな見出し』の時に<h◯>の部分に該当する数字をいれて示す。
<h1>とは違い、サイト内にいくつも存在することができる。
<p>
一つの段落を示す。
主に見出しに付随する文章に使用される。
ブロック要素となる。
<span>
一つの範囲を示す。
文章中の特定の範囲などに使用する。
<p>との違いとしてこちらはインライン要素となる。
<br>
改行を示す。
改行をしたいがために段落が同じなのに<p>を分けてしまわないように注意。
——————————————————————
例）
NG
<p>この段落は</p>
<p>ここで改行</p>OK
<p>この段落は<br>ここで改行</p>——————————————————————
３．リスト表示
<ul>
ナビゲーションなど順序のないリストを表示する。Unordered Listの略。
基本的に<li>と共に使用する。
<ol>
順序のあるリストを表示する。Oredered Listの略。
<ul>と同様に<li>共に使用する。
<li>
リストの項目を表示する。
基本的に<ul>,<ol>に囲まれる形で使用する。
４．表を作成する
<table>
表を作成する。
<tr>
表の横方向一行を定義する。
<th>
表の見出しセルを作成する。
<td>
表のデータセルを作成する。
<thead>
<table>内のヘッダーを定義する。
後述する<tbody>,<tfoot>とともに省略することもできるが指定することによってより明示的になる。
<tbody>
<table>内のメインコンテンツを定義する。
<tfoot>
<table>内のフッターを定義する。
CSSプロパティ
１．文字関連プロパティ
主に
font-〇〇
という形で指定する。
font-size
文字のサイズを指定する。
単位はpx,%,rem,emなどで示す。
font-weigth
文字の太さを指定する。
数値の他にnormal,bold,lighter,bolderと表すこともできる。
color：文字色（前景色）を指定する
background-color：背景色を指定する
font-family
使用するフォントを指定する。
color
文字の色を指定する。
これには『font-』とつかないので注意。
2．背景関連
background-〇〇
という形で指定する。
background-color
背景色を指定する。
値は下記のように設定する。
- 『#000000』などの16進数
- 『rgba(0,0,0,0.5)』などのRGBAカラーモデル
- 『red』,『blue』などのあらかじめ設定されている色
background-image
背景画像を指定する。
url(〇〇)の部分に画像のパスを入力する。
３．枠線の指定
border-〇〇
という形で指定する。
border-color
枠線の色を指定する。
border-size
枠線の太さを指定する。
border-style
枠線のスタイルを指定する。
solid→直線
dotted→点線
など。
border-top-color
要素の上部の枠線の色を指定する。
『border-位置–指定する要素』
とそれぞれに対応した値を記入することで他の方向、他の要素を指定することができる。
——————————————————————
例）
border-bottom-size
下部の枠線の太さを指定
border-left-style
左部の枠線のスタイルを指定
——————————————————————
4．空白の指定
空白の指定には
padding
margin
の2種類がある。
枠線が付いている要素で指定して見るとわかりやすいが、
paddingは要素の内側の余白
marginは要素の外側の余白
を表している。
padding-top
要素上部のpaddingを指定する。
『padding-〇〇』の部分に位置を指定することで他の方向にも指定できる。
margin-top
要素上部のmarginを指定する。
前述したpaddingと同じように他の方向にも指定することができる。
5．リストを調整
list-style-〇〇
という形で指定する。
list-style-type
リストの文頭に付いている記号の種類を指定する。
list-style-image
リストの文頭に付いている記号を画像に置き換える。
list-style-position
リストの文頭に付いている記号の位置を指定する。
6．その他頻出プロパティ
text-align
行揃えの配置を指定。
center,leftなど。
width
ブロック要素の横幅を指定。
height
ブロック要素の縦の長さを指定。
line-height
文字の高さを指定。
まとめ
今回はコーディングの際に頻出するHTMLタグ・CSSプロパティを簡単に紹介しました。
Webエンジニアを目指している方は、沢山のHTMLタグ・CSSプロパティを使いこなし、コーディングの幅を広げていきましょう！
HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中！
難易度別に用意してあるサンプルサイトのデザインデータを元に、サイト制作のスキルを磨こう！
