HTML/CSS

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

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を直接書く場合のコード例は以下の通りです。

<html>
  <head>
    <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

入門者向けのCSS学習方法

HTMLと一緒に学習する

CSSを学習する際にはHTMLと一緒に学習することをおすすめします。なぜなら、HTMLの要素に対してCSSをつけるため、HTMLを理解していないとCSSは学習できません。また、HTMLとCSSを同時に学ぶことでWebページを作りながら学ぶこともできます。

多くの学習サイトや入門本はほとんどがHTMLとCSSが学べるようになっています。そのため、始めは学習をして行けば自然とHTMLとCSSは同時に学ぶことになります。

しかし、一通り学習を終えてコーディングの練習をする際には、CSSがうまくいかないから、CSSのみに注目することがほとんどです。この際、HTMLとCSSの関係をよく見ながら練習しなければうまくコーディングをすることができません。

そのため、HTMLとCSSは常に一緒に学習するようにすることがおすすめです。

CSSの入門はProgate

入門者向けのCSS学習方法はProgateというオンライン学習サービスの利用です。Progateは初心者でも分かりやすいスライドとブラウザ上ですぐにアウトプットできる環境があります。独学でいち早く習得するためにはおすすめの学習サービスです。

ProgateはHTML/CSSは初級編のみが無料で利用できます。残りの中級編と上級編、そして実践的なコードを書く「道場コース」は有料です。有料プランは1080円/月です。一通り学習して復習をしても一か月でおつりがくるくらいで学習ができます。

そのため、本一冊買ったつもりで有料プランに申し込むことをおすすめします。

まとめ

CSSはWebページの見た目を整えるために不可欠な言語です。Scssといったスタイルシート言語が増えてきていますが、それでもCSSの方がよく利用されます。Webページの見た目を作るためにはCSSの学習は必須です。

Webページの見た目はユーザーの滞在時間と関係しています。販売サイトであれば滞在時間が長いほど、成約率が上がると言われています。ユーザーに商品やサービスを少しでも利用してもらうために、CSSを使って、ページの見た目を作りこめるようにすることがおすすめです。