HTML/CSS

Webページの外観には必須!CSSの書き方を解説【初心者必見】

Webページにおいて外観は重要です。外観が悪いとユーザーも見ていることに疲れて、すぐにページを離れてしまいます。例えば、販売サイトで商品がどれだけよくてもページの外観が悪いと購入までいきません。反対に、見やすい外観のWebページを作ればユーザーに見てもらえるサイトになります。

Webページの外観を作るにはCSSを使います。CSSとはHTMLで作成したページの構造に文字色や背景色、文字の配置などの外観やレイアウトを整えるための言語です。

本記事ではWebページを作るための言語であるCSSの書き方を解説します。Web系初心者は必見です。

CSSとは外観を整えるための言語

CSSは文字色や配置の操作をすることで、Webページのレイアウトを整えるための言語です。CSSはCascading style sheetの略で、スタイルシートと呼ばれています。HTMLと一緒に使われます。

HTMLは文書の構造を作る言語に対して、CSSはレイアウトを作ります。HTMLで作った要素に対して、文字色や背景色、配列を操作します。上から無機質に並べられた文書を自分の好きな外観やレイアウトにするための言語がCSSです。

CSSの書き方

基本構文

CSSには基本となる書き方があります。書き方は以下の通りです。

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

セレクタとはHTMLのタグやid名、class名が入ります。プロパティにはどんな操作をするかです。値はどうするかを指定します。例えば、divタグの文字色を赤にしたい場合は、「divタグ= セレクタ」「文字色 = プロパティ」「赤 = 値」です。

基本の書き方と違うとコードが働かずに、Webページの見た目が変わりません。もし、Webページの見た目が変わらないときはコードの書き方が間違っていないか確認してください。

セレクタ

コードのセレクタの書き方にもルールがあります。タグを直接指定する場合とid名やclass名を指定する場合があります。書き方を下の表にまとめました。

セレクタ書き方
タグタグ名div , p , h1
id#id名#title, #text
class.class名.container , .logo

タグを指定する場合はそのままタグ名を書きます。idを指定する場合はid名の前に「#(シャープ)」、classを指定する場合はclass名の前に「.(ドット)」を入れます。id名やclass名を指定する際には#や.を忘れるとコードが働きません。

プロパティと値

プロパティはセレクタに対する操作を指定し、値は操作に対してどうするかを指定します。プロパティは様々な種類があります。全て覚える必要はなく、必要な時に調べるのがおすすめです。よく使うプロパティと値の代表例を下の表にまとめます

プロパティ操作値(代表例)
color文字色をred, blue, #FFFFFF
display表示形式block,none,flex
font-size文字の大きさ〇px, 〇em,〇vw
text-align文字の配置left, center, right
padding余白(borderの中)〇px,〇 %
margin余白(borderの外)〇px,〇 %
border枠線色(blue, red) 太さ(〇px)形式(bold)
position配置relative, absolute

CSSの書く場所

HTMLファイルに直接書く

CSSを記述する場所は2つあります。1つはHTMLファイルに直接書きます。HTMLファイル内に書く場合は<head>の中に<style>を作ります。そして、styleタグの中にCSSのコードを記述します。コード例は以下の通りです。

<head>
    <style>
        h2{
            font-size:24px
        }
    </style>
 </head>

HTMLに直接書く場合はCSSのコードが短いときがおすすめです。同じファイル中にあるとHTMLとCSSを対比しやすいため、おすすめです。しかし、コードが長くなるとファイル内を上下するため、同一ファイルでの対比が面倒になります。

外部ファイルに書く

もう一つは外部ファイルに書きます。HTMLファイルとは別に拡張子を「.css」として、CSSファイルを作ります。そして、HTMLの<head>の中で<link>を用意し、CSSファイルを読み込みます。コード例は以下の通りです。コード例では「style.css」というファイルを読み込みます。

<head>
    <title>タイトル名</title>
    <link rel="stylesheet" href="style.css" >
  </head>

外部ファイルを使うときはCSSのコードが長いときです。長いCSSコードをHTMLファイル内に作ると以下のようなデメリットがあります。

  • ファイルが重くなる
  • メンテナンス性が悪い
  • HTMLとCSSの対比がやりにくい

外部ファイルにするときのコードの長さに明確な基準はありません。あなたがCSSのコード量が多いと感じたら、外部ファイルに書くことをおすすめします。

まとめ

CSSはWebページの外観を作る上で必要なスキルです。見にくいサイトだとユーザーも途中で閲覧を止めてしまう可能性が高いです。ECサイトでは滞在時間と成約率は関係があると言われています。Webページの外観は売上に影響を与えるほど重要です。

CSS自体は難しい言語ではありません。たくさんのコードを書くことで身に付きます。CSSの書き方を身に着けて、自分で自由に外観を作れるようになることをおすすめします。