HTML/CSS
css
スタイルシート
入門

【CSS入門】Webページの見た目を整えるための方法を解説

2021/10/11

( 更新日：2022/06/07 )

Webページの見た目はユーザーにサイトに長く滞在してもらうために重要な要素です。特にECサイトなどの販売ページではユーザーの滞在時間が成約率に関係していると言われています。つまり、見た目が整っていないと商品が売れないかもしれません。

Webページの見た目を整えるためにはCSSが必要です。CSSはHTMLで作ったWebページの構造に色や配置を指定することができます。

本記事ではWeb制作入門者向けに見た目を整える言語であるCSSを解説します。

CSSとは

CSSとはWebページの見た目を整えるための言語です。Cascading Style Sheetの略で、「スタイルシート」と呼ばれます。CSSを使えば、ユーザーにとって見やすいサイトやスマホやタブレットに対応したWebページを作ることができます。

CSSなしのHTMLだけのページだと色がなかったり、レイアウトも縦に配置されていくだけです。また、画像があっても全て左に寄っていたり、詰まったサイトになります。

CSSが使えれば文字や背景に色をつけたり、要素と要素の間に余白を設定することが可能です。また、要素を横に配列したり、右寄せ、中央寄せを自由にコントロールすることができます。

入門者がCSSを書くために

CSSの書き方

CSSの基本構文は以下の通りです。

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

セレクタはCSSをつけるための要素を書きます。プロパティは指定したセレクタに「何をしたい」か、値は「どうしたい」かを指定します。プロパティと値は後で一覧を紹介します。

セレクタの指定はタグ自体、class名、id名を指定できます。どのセレクタの種類で指定するかで書き方が変わるので注意が必要です。タグ自体を指定する場合はそのままタグ名を書きます。

class名を指定する場合はclass名の前に「.(ドット）」、id名を指定する場合には「#（シャープ）」をid名の前に書きます。コード例は以下の通りです。

<span>文字色は赤になります</span>
<p class="font-color">文字色は青になります</p>
<p id="font-color">文字色は緑になります</p>

span {
  color: red;
}

.font-color {
  color: blue;
}

#font-color {
  color: green;
}

spanタグの文字色を赤、class名が指定されているpタグは青、id名が指定されているpタグは緑になります。なお、pタグを指定すると、2つのpタグにCSSが付きます。

CSSを書く場所

CSSを書く場所は以下の二つです。

HTMLファイルに直接書く
外部のCSSファイルに書く

HTMLに直接書く場合は<head>内に<style>というタグを作ります。style内にCSSのコードを書きます。HTMLファイルにpタグの文字色を赤色にするCSSを直接書く場合のコード例は以下の通りです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>赤の文字色です。</p>
  </body>
</html>

外部のCSSファイルに書く場合は、CSSのコードを1つのファイルに書きます。その際、ファイル名の拡張子は「.css」です。そして、HTMLファイル内の<head>にCSSファイルを読み込むためのコードを書きます。読み込むコードは以下の通りです。

<link rel="stylesheet" href="style.css">

上のコードは上記コードを書いたファイルと同じフォルダ内にある「style.css」というCSSファイルを読み込むためのコードです。

よく使うプロパティ一覧と値

以下の表によく使うプロパティとその値を示します。

プロパティ	役割	値の例
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