初心者でも大丈夫CSS超基本講座！

このページをご覧になっているあなたは、ホームページの作り方を調べているのかもしれませんね。

ホームページを作るにはHTMLを書いて、CSSでデザインを作ります。

このぺージをご覧頂ければCSSの基礎はほぼ理解出来ると思います。

CSSを理解するにはHTMLとセットで覚えていくのが一番の近道です。

HTMLが全く解らない方は「HTMLの超基礎編」を参照ください。

CSS　(Cascading Style Sheets)とは

CSS（カスケーティングスタイルシート）とは、文字の装飾を指定する言語です。スタイルシート言語といいます。

HTMLで作った文章に色をつけたり、書式やサイズの変更をし、見栄えのするホームページを作るために使用します。

書き方はHTMLの中に記述する方法と、外部のファイルを読み込む方法の2通りあります。

外部ファイルにすることのメリットは、1枚のCSSファイルで、複数のHTMLに装飾を施すことができること。 HTMLファイルの読み込みが速くなること。ケースバイケースで使い分ける必要があります。

そのため、とても効率が良がよいのです。

CSSのファイルを作成してみましょう。

↓まず、テキストエディタを開いてください。

↓次に名前を付けて保存を選択。（何も書かなくていいです。）

↓ファイル名を「style」として、ファイルの種類を「CSSファイル」を選択。

↓「style.css」というスタイルシートのファイルが出来上がりましたね。

これをテキストエディタにドラッグアンドドロップで開くか、右クリックのプログラムで開くで開いて編集していきましょう。

CSS３つの決まり事

1.外部ファイルにする

外部ファイルとしてCSSを反映させるためにHTML内にCSSを関連付ける必要があります。下記コードをHTMLの<head></head>内に記述してください。

①CSSを外部ファイルにするメリットは全ページに共通のスタイルを持たせることです。そして、CSSでスタイルの管理を行います。HTMLの各ページごとにCSSを書いた場合各ページ全ての修正が必要になってしまいます。それを避け、管理更新を楽にする目的があります。

②もう一つの理由は検索エンジンに好まれることです。HTMLファイル内はすっきりさせた方がいいといわれています。また、外部ファイルにすることで、サイトの表示速度の改善にもつながります。Googleではサイトの表示速度がサイトの価値に反映すると発表しております。

※しかし、HTML内にCSSを記述することは必ずありますので、覚えておくことをお勧めします。

下記コードを<head>内に書きます。コピペしてください。

サンプル全体





CSSの練習

～省略〜

これでCSSに記述した内容が反映されます。

2.HTML内での記述について

CSSをHTML内に書くには、<head>もしくは<body>内に書く。



～


～

このように書くと「p」は赤色に表示されます。
この方法はSEOを考慮するとあまりお勧めできる方法ではありません。なぜなら、HTMLの読み込みが遅くなるからです。

とはいえも、どうしても必要な時がありますので、”このページのここだけ変えたい”とき、つまり他のページには使わないスタイルを特定のページに指定したい時に使用します。

CSSは基本的には外部ファイに書く癖を付けましょう。外部ファイルに書いてとおけば、１カ所の修正で、各ページの同じスタイルを指定してある箇所を変更することが出来ますので、効率的です。

また、スタイルが統一することで、ユーザビリティを考慮した解りやすいホームページになります。

3.優先順位について

上の項で、CSSを外部ファイルにする方法とHTML内に記述する方法を学びましたが、両方に記述した場合どちらが優先的に反映されるのでしょうか。 CSSではホームページに反映する優先順位が決まっています。

bodyタグ内
headタグ内
外部ファイル

と、なります。使い方は複数のファイルに統一したデザインを指定する場合は外部ファイル特定のページ特定個所だけに指定する場合はbodyタグ内もしくはheadタグ内に記述しましょう。
※通常は外部ファイルを使用することが推奨されていますので、head内にlinkして、スタイルシートは出来るだけ外部に出すようにしましょう。

CSSの書き方

基本的な事を理解したら、CSSの記述方法を覚えていきましょう。

↓記述例を見てみましょう

セレクタ{プロパティ：値；}

p{font-size：nomal；}

セレクタ
上の例では「p」を指します。「p」とは段落を表すものです。「p」の装飾をかけていきます。

プロパティ
「font-size」を指します。文字のサイズです。文字サイズをどうするかを決めていきます。

値
「nomal」を指します。「：（コロン）」で区切ります。文字サイズは普通という意味です。最後に「; （セミコロン）」を入力します。

「p」は段落を表すタグですが、「p」内の文字のサイズは普通という指定になります。セミコロンを忘れずに書きましょう。

↓もう少し例題を見てみましょう。

要素{プロパティ：値；プロパティ：値；}

h1,p{
  font-size：nomal；
  color：blue；
}

セレクタ
「h1」と「p」を指します。まとめて指定ができます。

プロパティ
「font-size」と「color」を指します。まとめて指定ができます。

値
「nomal」と「bulu」を指します。

※上記の例は「font-size」と「color」の2つの指定を記述していますが、1つの文が終わったら「；（セミコロン）」を書きましょう。 1つの文の終了を意味します。

記述時の注意点

空白の扱い

CSSでは空白と改行は認識されません。見やすく記述しましょう。
↓記述例です。縦長になりますが、どこに何が書いてあるかすぐにわかります。後で修正する事を考えて書くといいでしょう。

p {
	margin: 0 0 0.3em 0;
	padding: 0.1em;
	color: #000;
	font-size: 1.2em;
	line-height: 1.5;
	text-align: left;
}
ul, dl {
	margin: 0 0 2em;
	padding: 0;
	list-style-position: inside;
	list-style-type: none;
	color: #000
}

目次

CSS (Cascading Style Sheets)とは