WEBデザイン

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

  /

CSSって何のために必要？

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

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

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

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

CSSとは？

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

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

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

どういう時に必要？

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

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

例として以下にシンプルなページを用意しました。

See the Pen mdRxRVG by FLD (@freeladay) on CodePen.

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

See the Pen poRLRRg by FLD (@freeladay) on CodePen.

背景や文字色などにHTMLのみで装飾してみました。

HTMLだけで書いた場合

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

HTML
<body bgcolor="#e1d6c8">
<h1><u><font color="#875454">
<font size="10px">h1タイトル</font>
</font></u></h1>
テキストテキストテキスト
 <h2><font color="#545f87">h2タイトル</font></h2>
テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキスト<br>
 <a href="https://freeladay.com/"><b>サイトトップへ</b></a>
<h3>h3タイトル</h3>
  <ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  </ul>
</body>

結構長いですね。笑

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

CSSの記述方法

CSSを記述する方法（場所）は３パターンあります。

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

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

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

See the Pen oNBqBGy by FLD (@freeladay) on CodePen.

先ほどのHTMLページをCSSの装飾でなるべく近づけてみました。

HTML
<body style="background:#e1d6c8;">
<h1 style="color:#875454;font-size:3em;">
<span style="border-bottom:solid 3px #875454;">
h1タイトル
</span>
</h1>
<p style="font-size:1em;">テキストテキストテキスト</p>
<h2 style="color:#545f87;">h2タイトル</h2>
<p style="font-size:1em;">
テキストテキストテキスト<br>
テキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキスト</p>
<a href="https://freeladay.com/"><b>サイトトップへ</b></a>
<h3>h3タイトル</h3>
  <ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  </ul>
</body>

少しコードがまとまりましたが、まだ長いです。

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

CSSの指定は同じなので、見た目は上記画像と同じになりますが、コードの書き方・場所が少し変わります。

HTML
<style>
body{background:#e1d6c8;}
h1{color:#875454;font-size:3em;}
h2{color:#545f87;}
span{border-bottom:solid 3px #875454;}
p{font-size:1em;}
</style>

<body>
<h1>h1タイトル</h1>
テキストテキストテキスト
<h2>h2タイトル</h2>
テキストテキストテキストテキストテキスト<br>
<a href="https://freeladay.com/"><b>サイトトップへ</b></a>
<h3>h3タイトル</h3>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</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>h1タイトル</h1>
テキストテキストテキスト
<h2>h2タイトル</h2>
テキストテキストテキストテキストテキスト<br>
<a href="https://freeladay.com/"><b>サイトトップへ</b></a>
<h3>h3タイトル</h3>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</body>
CSS
body{background:#e1d6c8;}
h1{color:#875454;font-size:3em;}
h2{color:#545f87;}
span{border-bottom:solid 3px #875454;}
p{font-size:1em;}

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

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

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

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

基本的にはこの方法が一番おすすめです。

CSSファイルの作り方

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

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

【HTML＆CSS】これから始める方におすすめの無料コードエディタ５選を紹介 このページを見ている方はウェブデザイナーを目指している人も多いかと思いますが、 ウェブデザイナーを目指していな...

HTMLファイル作成の際にも、以下のようなコードを記述したかと思います。

<!DOCTYPE html>


<meta charset="UTF-8">


このように、CSSにも必要な記述があります。


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


【入門編】HTMLファイルの作成方法と正常な表示の為に必要なポイントHTMLってよく聞くけど、どうゆうもの？
ページを作りたいけど、作り方が分からない。
HTML書いてみたけどページにならない。どう書...


CSSファイルに必要な記述


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


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


@charset "UTF-8";


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


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


style.css


@charset "UTF-8";

body{background:#e1d6c8;}
h1{color:#875454;font-size:3em;}
h2{color:#545f87;}
span{border-bottom:solid 3px #875454;}
p{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が必須と言っても過言ではありません。


HTMLだけでは表現できないこともCSSでは簡単に表現できたり、デザインの幅がぐんっと広がります。


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

									
																		
									
									
 CSS webデザイン
									
									


	
ABOUT ME

	

		

			

		

		

			
freela管理人

			
現役フリーランスによる情報サイト。
WEBの知識•情報•技術をフリーに気楽に配信しています。

		

	

	

				
BLOG：https://freeladay.com/

				

							
													
								

	



									
									



										
				

					
					

						
						


					

					

						
						


					

					

				

						

									
																		

																		
																			

																		
									

															
								

							

						

						
														

				
								
																
								




		

		
RELATED POST