HTML/CSS
css
html
基本
役割
書き方

【初学者必見】HTML/CSSの基本的な役割と書き方を解説

2021/10/14

( 更新日：2022/06/07 )

Web制作にはHTML/CSSのコーディングができなければいけません。HTML/CSSはWebページを作るための言語です。もし、HTML/CSSのコーディングができなければ、Webページを作ることができません。Webサイトを作る際も、Web上のテンプレートなどを使うことになります。

つまり、自分の思い通りのサイトを作れません。HTML/CSSの役割とコードの書き方を理解することで、Webページを自分の思い通りに作ることができます。本記事ではHTML/CSSの基本的な役割と書き方について解説します。

HTMLとCSSの基本的な役割

HTMLはWebページの構造、CSSは見た目を作るための言語です。HTMLとCSSはWebページを作るために両方の言語を理解する必要があります。CSSのみではWebページはできません。HTMLだけではページを作ることはできますが、見た目が単調かつ見にくいサイトになります。

ユーザーにとって「もっと見たい」「また見たい」と思ってもらうためにはHTML/CSSを使ったページを作ることが必要です。HTMLとCSSの役割は構造と見た目を作ることでユーザーに見やすいWebページを作ることになります。

そのため、Web制作をする人にとってHTMLとCSSの習得は欠かすことができません。

HTMLの書き方の基本

HTMLの書き方

HTMLは拡張子を「html」としたファイルにコードを書くことでページを作ることができます。コードの記述方法は開始タグと終了タグを用意して、タグの中に文章や機能を記述します。HTMLタグとは囲まれた中身の役割をコンピューターに教えるための目印です。

HTMLのタグは開始タグと終了タグに分けられます。開始タグは<>の中にタグ名を書き、終了タグには<>の中に「/タグ名」とします。例えば、

<title>HTML/CSSの基本的な役割</title>

上記のようなコードを書くと、このWebサイトは「HTML/CSSの基本的な役割」というタイトルなのだと認識されます。

HTMLのコードは一番上にHTML5を宣言するための「<!DOCTYPE html>」を書きます。下に<html></html>を用意します。htmlタグは囲まれた文章をhtmlの言語として認識するために必要です。そして、htmlタグの中に<head></head>、<body></body>を書きます。

headタグの中にはページの情報を記述します。例えば、metaタグで文字コードを指定したり、ページタイトルを決めたりします。headタグはページの情報になるので、ページ内に表示されることはありません。

bodyタグはページの中身を作る部分です。つまり、Webページの文章や画像はbodyタグの中に記述します。文章も「見出し」や「段落」、「リンク」などタグを使い分けることで様々な役割を持たせることができます。

よく使うタグ

ここではよく使うタグを表にまとめているので、参考にしてください。

基本構造のタグ	役割
<html>	HTML文書の宣言
<head>	ページの情報
<body>	ページの中身

基本構造を作るタグ

headに使うタグ	役割
meta	文書情報
title	タイトル
isindex	キーワード検査
link	外部ファイルの読み込み　など

head内に使われるタグ

bodyに使うタグ	役割
p	段落
h1～h6	見出し
div	区切り、ブロック
a	リンク
img	画像の挿入
header	ヘッダーの指定
footer	フッターの指定
main	メイン部分
br	改行
span	行内の役割付け
form	フォームの指定
input	入力ボックス
button	ボタンの設置

body内に使われるタグ

CSSの書き方の基本

基本構文

CSSはタグに対して文字色や背景色、配置などを指定することができます。「どのタグ」に対し、「何を」、「どうする」をコードの中に書きます。CSSの基本構文は以下の通りです。

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

セレクタが「どのタグ」、プロパティが「何を」、値が「どうする」になります。それぞれ記述方法があるので、次にそれぞれの書き方を解説します。

セレクタ

セレクタはどのタグに対してCSSを指定するかを決めます。指定の仕方はタグ名だけでなく、id名やclass名に対しても指定することが可能です。タグ名、id名、class名のどの形で指定するかで書き方が変わります。

タグ名の場合はそのままタグ名でOKです。id名の場合にはid名の前に「#」を入れます。例えば、wrapperというid名を指定する場合は「#wrapper」とします。class名の場合は「.（ドット）」を前につけます。つまり、class名がwrapperの場合は「.wrapper」です。

複数のタグを指定したい場合は「,(カンマ）」で区切ることで、二つのタグに同じCSSをつけることができます。例えば、pタグとh2タグに同じCSSをつけたい場合は「p , h2」と指定します。

プロパティと値

プロパティと値については以下の表にまとめます。

プロパティ	役割	値の例
color	文字色	red,#FFF,rgba(235,20,0,0.5)
background-color	背景色	red,#FFF,rgba(235,20,0,0.5)
display	表示形式を変える	block,inline-block,flex
text-align	文字の配置	center, right
margin	余白を作る(border外)	0,15px,1.2rem
padding	余白を作る（border内）	0,15px,1.2rem
position	要素の配置	absolute,relative
width	要素の幅	1200px, 50%, 12rem
height	要素の高さ	200px, 50%, 12rem
font-size	文字の大きさ	15px
font-family	文字の書式	serif