HTML/CSS

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

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のタグは開始タグと終了タグに分けられます。開始タグは<>の中にタグ名を書き、終了タグには<>の中に「/タグ名」とします。例えば、headタグを使う場合には開始タグは<head>、終了タグは</head>です。

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
CSSのプロパティと値

まとめ

HTMLとCSSはWebページを作るための基本の言語となります。タグやプロパティ、値の数が多くて難しいのではないかと感じた人もいると思います。しかし、全てを覚える必要はありません。自分が必要な時にgoogleで調べればすぐに分かります。

HTMLとCSSは初めは自分の思い通りのレイアウトにならないことが多いと思います。タグやプロパティの使い方は練習しながら出なければ身に付きません。たくさんのコードを書けば思い通りにできるようになります。

最後になりますが、もっとHTML/CSSを学びたい人は以下の記事も参考にしてください。