【入門編】CSSファイルの作成方法と正常な表示の為に必要なポイント

「CSSって何のために必要?」

「CSSの書き方が分からない。」

「CSSファイルを作ってみたけど反映しない」

という、CSSにチャレンジしたいけどHTMLよりもハードルが高いようで手を出しにくい人は多いようです。

この記事では、簡単なCSSの書き方や CSSファイルの作り方をご紹介します。

CSSとは?

CSSとはCascading Style Sheets(カスケーディングスタイルシート)の略で、Webページのスタイルを設定するための言語です。

主にHTMLと組み合わせて使用する言語で、HTMLがWebページの作りや要素を定義するのに対して、CSSではそれらへの装飾(スタイル)の指定をします。

少し難しい説明になってしまいましたが、もしウェブページを作成するのなら、HTMLに直接装飾を書き込むよりも、CSSでスタイルを指定した方が圧倒的に楽で効率的です。

どういう時に必要?

「HTMLだけでも十分装飾出来てるからCSSの必要性が分からない。。」

という方もいると思いますので、CSSの便利さを簡単に説明したいと思います。

例として下記のようなシンプルなページを用意しました。

上記サンプルページを下記のように装飾してみます。

実際こんな激しい色使いをする機会は少ないと思いますが、

今回は例として分かりやすくするために上記で説明していきますね。笑

HTMLだけで書いた場合

上記のページをHTMLのみで表現すると、コードはこのようになります

<body bgcolor="#000066">  
<h1><u><font color="#FFCC33"><font size="10px">
h1タイトル
</font></font></u></h1>
<p><font size="4px"><font color="white">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</font></font></p>
    
<h2><font color="#CCCC33"><font size="6px">
h2タイトル
</font></font></h2>
<p><font size="4px"><font color="white">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</font></font></p>
    
<h3><font color="#99CC33"><font size="6px">
h3タイトル
</font></font></h3>
<p><font size="4px"><font color="white">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</font></font></p>

<h2><font color="#CCCC33"><font size="6px">
h2タイトル
</font></font></h2>
<p><font size="4px"><font color="white">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</font></font></p>
    
<h3><font color="#99CC33"><font size="6px">
h3タイトル
</font></font></h3>
<p><font size="4px"><font color="white">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</font></font></p>    
</body>

長いですねー。笑

今回は、これをCSSを用いた装飾をして行きたいと思います。

CSSの記述方法

CSSを記述する方法(場所)は3パターンあります。

  1. HTMLタグの中に直接書き込む
  2. HTMLファイルにstyleタグを使って書く
  3. CSSファイルを作って読み込む

この3パターンを上記の例を使って説明していきます。

1. HTMLタグの中に直接書き込む

先ほどのHTMLページをCSSの装飾で限りなく近づけて表現しました。

コードはこうなります。

<body style="background:#000066">  
<h1 style="color:#FFCC33;font-size:3em;"><span style="border-bottom:solid 3px #FFCC33;">
h1タイトル
</span></h1>
<p style="color:white;font-size:1em;">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</p>
    
<h2 style="color:#CCCC33;font-size:2em;">
h2タイトル
</h2>
<p style="color:white;font-size:1em;">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</p>
    
<h3 style="color:#99CC33;font-size:2em;">
h3タイトル
</h3>
<p style="color:white;font-size:1em;">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</p>

<h2 style="color:#CCCC33;font-size:2em;">
h2タイトル
</h2>
<p style="color:white;font-size:1em;">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</p>
    
<h3 style="color:#99CC33;font-size:2em;">
h3タイトル
</h3>
<p style="color:white;font-size:1em;">
サンプルテキストサンプルテキストサンプルテキストサンプルテキスト
</p>
</body>

少しコードがまとまりました。

でも、まだ長いですね。。。

2. HTMLファイルにstyleタグを使って書く

CSSの指定は同じなので、

見た目は上記画像と同じになりますが、コードは下記のようになります

<body> 
<style>
    body{background:#000066;}
    h1{color:#FFCC33;font-size:3em;}
    h2{color:#CCCC33;font-size:2em;}
    h3{color:#99CC33;font-size:2em;}
    span{border-bottom:solid 3px #FFCC33;}
    p{color:white;font-size:1em;}
</style>
    
<h1><span>h1タイトル</span></h1>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
    
<h2>h2タイトル</h2>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
    
<h3>h3タイトル</h3>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

<h2>h2タイトル</h2>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
    
<h3>h3タイトル</h3>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>  
</body>

<style>~</style>タグの中にCSSの記述をまとめました。

だいぶコードがすっきりしましたね。

このようにまとめるとh2やh3の装飾の指定は<style>タグ内で指定されているので何度も装飾の記述をHTMLタグ内に書く必要がなくなります。

3. CSSファイルを作って読み込む

上記と同様に、CSSの記述は同じなので見た目は先ほどの画像と同じですが、

HTMLファイルとCSSファイルを使用することにより下記のようになります。

HTMLファイル内の記述

<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body> 
<h1><span>h1タイトル</span></h1>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
    
<h2>h2タイトル</h2>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
    
<h3>h3タイトル</h3>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

<h2>h2タイトル</h2>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
    
<h3>h3タイトル</h3>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> 
</body>

CSSファイル内の記述

body{background:#000066;}
h1{color:#FFCC33;font-size:3em;}
h2{color:#CCCC33;font-size:2em;}
h3{color:#99CC33;font-size:2em;}
span{border-bottom:solid 3px #FFCC33;}
p{color:white;font-size:1em;}

HTMLの<head>タグ内にCSSを読み込む記述をしています。

<link href="style.css" rel="stylesheet" type="text/css">

これにより、HTMLファイルにも余計なタグやコードがなくなり、CSSファイルにも『装飾の指定のみ』記述すれば良くなりました。

WEBページが複雑になってくるとコードやタグが長くなってきますが、ファイルを分けることによりコードの複雑化を防ぐことが出来ます。

個人的にはこの方法を一番おすすめします。

CSSファイルの作り方

では実際、CSSファイルはどう作るのか?を説明したいと思います。

エディタはCSS形式で保存できるものなら何でも構いませんが、下記記事にておすすめコードエディタを紹介していますので、せっかくならコードエディタで作成してみてください。

FreeLaDay

カスタマイズしたいけどコードが全く分からない。。。など、HTMLを覚えたい。もしくは、必要にかられて覚えなくては…という…

HTMLファイル作成の際にも、

<!DOCTYPE html>

<meta charset="UTF-8">

のコードを入れているかと思いますがCSSにも必要な記述があります。

HTMLの作成方法については下記記事をご覧ください。上記コードの説明もしています。

FreeLaDay

「HTMLってよく聞くけど、どうゆうもの?」「ページを作りたいけど、作り方が分からない。」「HTML書いてみたけどページ…

CSSファイルに必要な記述

CSSファイルにも必要な記述があります。

それは文字エンコーディングを指定する記述です。

@charset "UTF-8";

この記述をCSSファイルの上部に入れてください。

上記のCSSコードを例とするとCSSファイル内の記述は

@charset "UTF-8";

    body{background:#000066;}
    h1{color:#FFCC33;font-size:3em;}
    h2{color:#CCCC33;font-size:2em;}
    h3{color:#99CC33;font-size:2em;}
    span{border-bottom:solid 3px #FFCC33;}
    p{color:white;font-size:1em;}

このようになります。

この記述をしないとCSS自体が文字化けを起こし、きちんとスタイルが適用されない等の問題が起こります。

上記のようにCSSの記述をしたら、上記ファイルを拡張子『.css』で保存してください。

今回は「style」という名前を付けてCSS形式で保存しました。

すると「style.css」というファイルが出来ているかと思います。これがCSSファイルです。

【注意点】CSSのファイル名は、

半角英数字 / -(ハイフン) / _(アンダースコア)

のみで作成してください。
それ以外のファイル名だとブラウザで正常に認識されない可能性があります。

上記のルールを守った上で自分で分かりやすいファイル名を付けてください。

CSSファイルをHTMLファイルに読み込む

CSSファイルをHTMLファイルに読み込むには下記のような記述が必要です。

<link href="style.css" rel="stylesheet" type="text/css">

上記をHTMLファイルの<head>~</head>内に記述してください。

href=””内の記述方法ですが、

同じディレクトリ(フォルダ)内にstyle.cssがある場合は、上記の記述のままでOKです。

もし、HTMLファイルのあるディレクトリ(フォルダ)の中にさらに別フォルダを作成していた時。

例えば、『css』というフォルダを作りその中にCSSファイルを入れた。という場合は、

<link href="css/style.css" rel="stylesheet" type="text/css">

という記述になりますので、『CSSが読み込まれない』『反映されない』などの場合は、

ファイルの場所があっているかを再度、確認してみてください。

まとめ

Webページを作成するにはCSSが必須と言っても過言ではありません。

ブログ、CMS等のカスタマイズにも上記記述は使えますので是非参考にしてみてください。

FOLLOW ME
>フリーランス をもっと気軽に!

フリーランス をもっと気軽に!

現役フリーランサーによる役立つ情報サイト
主に『Web』に関する知識を掲載。

デザインやライティング術、コラムなどの
フリーランスが充実するような記事も掲載中。

CTR IMG