Brat Creator

CSS入門～WEBサイトに肉付けをしよう～

「CSSって何？新手のAKB系列ですか？」
ってなるくらいCSSの知識が皆無の方の為に、
今回はWEBサイトを製作するのに必須のCSSが
何なのかということや書き方などの基礎を説明していきます。

CSSとは

HTML+CSS
CSSとは、サイトの見栄えを変えることができるコンピューター言語で、
正式名称は「Cascating Style Sheets」と言います。

HTMLではWEBサイトの骨組みを作っていく作業でしたが、
CSSではその作られた骨組みに肉を付けていきます。

HTMLよりも覚える量は少し多いですが、
基礎さえ理解すれば簡単に覚えられます！
というわけで見やすいサイトにするにするためにCSSを覚えていきましょう！

ちなみに、大昔はほとんどCSSを使わないでHTMLだけで作られたサイトも
ありましたが、最近ではほとんどありません。
あるとすれば利益など気にしない「公立学校のホームページ」か、
「阿部寛さんのホームページ」くらいです。

必要なツール

HTMLを書くのと同様に、テキストエディタだけでOKです。
有料にも劣らない！おすすめの無料テキストエディタ（後半で有料のも紹介するよ♪）

CSSを書く場所

CSSを書く方法は3種類あります。

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

CSSファイルを作って読み込む(推奨)

これはCSSファイルと言うファイルをHTMLとは別に作り読み込む方法です。
現在この方法が推奨されています。詳しくはこの後説明します。

HTMLにstyleタグを作り書く

<head>
	<style>
		div{
			color:red;
		}
	</style>
</head>

headタグの中にstyleタグを作り、その中にCSSのコードを書いていく方法です。
CSSファイルからCSSを読み込む方法よりもブラウザの読み込み速度が速くなります。

ただし、複数のページになった場合に共通部分があっても同じ内容を毎回毎回
書いていかないといけなくなるので、非常に管理性が悪くなります。
なので、1ページだけと確定している時ならまだしも基本はおすすめしません。

CSSファイルからCSSを読み込んでいる状態でstyleタグにもCSSを書いた場合、
styleタグの内容の方が優先されます。

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

<div style="color:red;">
</head>

HTMLタグの中にstyle属性をつけ直接書き込む方法です。
CSSファイルからCSSを読み込む方法よりもブラウザの読み込み速度が速くなります。
また、3種類の中で最も内容の優先度が高い書き方です。

この方法はどこに何を書いてあるのか分かりづらくなってしまうのでおすすめしません。
特定のタグにCSSを適用したいときはclassやidを使って指定しましょう。

CSSファイルの作り方

HTMLと同様に拡張子（ファイルの最後の部分 | 例.txtや.exe等）を.cssにしましょう。
その前の名前は好きな名前でいいです。(wordpressのメインCSSに使用する場合はstyle.css)

そして作成したCSSファイルの1行目に

@charset "UTF-8";

と書きましょう。
これをやらないと日本語を書いたときなどにバグったりするので、忘れないように！

CSSファイルの読み込み方

CSSファイルを作ってもHTMLで読み込まなければ、意味がありません。
なのでHTMLファイルで読み込み用のタグを設定しましょう。
下記のようにHTMLの<head>～</head>の中にiinkタグを書いてください。

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

「href=”style.css”」という部分で読み込むCSSファイルを指定し、
「rel=”stylesheet”」という部分で読み込むファイルがスタイルシートだとブラウザに教えています。
ちなみにhrefとrelは必須ですが、順番はどちらが前でもかまいません。

このコードだとCSSファイルをHTMLファイルと同じフォルダ内に入れて、
CSSのファイル名を「style.css」にしないと読み込みません。
もしCSSの名前が違う場合は「href=”obama.css”」や「href=”Trump.css”」等、
そのCSSファイル名に合わせて書き方を変えましょう。

一応同じフォルダ内でなくても読み込めますが、
その為にはまず「絶対パス」と「相対パス」について覚えなければなりません。
絶対パスと相対パスは結構重要なので時間があるときに勉強しておきましょう。
これだけは覚えたい！絶対パスと相対パスの違いとは | TechAcademyマガジン

CSSの書き方

セレクタを指定した後、プロパティと値を「{}(波括弧)」で囲います。
プロパティと値の間を「:(コロン)」で繋ぎます。
値の後「;(セミコロン)」を書きます。
複数プロパティを指定する場合は、その都度改行して次の行に書きましょう。

また、要素に同じプロパティが複数指定されていた場合、下に書いてあるものが優先され、
上に書いてあるプロパティの値が、下のプロパティの値で上書きされます。

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

例
body {
	font-size:16px;
	color:#000;
}

/*
	ちなみにセミコロンは複数行のときに必要なものなので、
	本来1行であればセミコロンはいらないのですが、
	付け忘れ防止の為毎回付けることをおすすめします。
 */

ちなみに上の例は
<body>～</body>の間の文字のサイズを16pxにしろ！あと文字色は黒な!
っていう意味です。
（pxっていうのは1cmみたいな感じのデバイス上の大きさの単位です）

英語が出来る人は結構覚えやすいかもしれません。
「は？じゃあ英語出来ないあたいは無理やないか！」
と思った方、ご安心ください。

出てくる単語は簡単なものばかりですし、
頭文字を覚えておけばエディタが自動で候補を出してくれます。
（候補が出ないエディタもあります。）

私の英語力は壊滅的ですが、覚えられたのできっと大丈夫です。

改行や半角スペースを使う

コードの間などに、「半角スペース」「tab」「改行」を入れることができます。
改行やスペースがなくても問題なく動きますが、
視認性が悪いのでなるべく改行するようにしましょう。
ただし、全角スペースは絶対に使用してはいけません。

↓これだと見づらい
セレクタ{プロパティ:値;プロパティ:値;}

セレクタ

セレクタで、CSSを反映させたい範囲を指定します。
この例だとbodyの部分です。

 body {
    font-size:16px;
}

セレクタの指定方法はいくつかあるので詳しくはこちら。
セレクタの種類－CSSの基本
意外と知らない!?CSSセレクタ20個のおさらい｜Webpark

プロパティ

プロパティには、CSSを設定するための書式が入ります。
文字のサイズを変えたければfont-size、
文字色を変えたければcolorなど様々な種類があります。

この例だとfont-sizeの部分です。

 body {
    font-size:16px;
}

値

値には、各プロパティに応じた英数字の設定値が入ります。
この例だと16pxの部分です。

 body {
    font-size:16px;
}

コメントアウト

CSSコードではない文字をそのまま書くと当然バグります。
コードに何かメモ書きを残しておきたい場合にはコメントアウトします。

コメントアウトというのはこれはコードとは関係ない文字だから
気にしないでねとブラウザに教えてくれるコードのことです。

//と書くとその一行全てがコメントアウトされ、
/**/と書くとその中にある文字全てがコメントアウトされます。
ちゃんとしたCSSコードもコメントアウトすると反映されなくなります。

なので、CSSの表示がおかしくなった時にコードを順番にコメントアウトして、
どこが原因でおかしくなってるのか探す用途でもよく使われます。

HTMLでもコメントアウトはできますが、書き方が異なります。
また、Javascriptという言語のコメントアウトはCSSと同じ書き方です。

//一行の場合はこれ

/*
複数行の場合はこれ
複数行の場合はこれ
複数行の場合はこれ
*/

/*ちゃんとしたCSSコードも囲っちまえば反映されないぜ!
p{
   color:red;
}
*/

まとめ

  • WEBサイト見栄えを変えられる言語
  • HTML同様テキストエディタで書ける
  • 拡張子を「.css」にする
  • CSSの1行目は@charset “UTF-8”;
  • 読み込む時はheadタグ内で「linkタグ」を使う
  • 基本文法は　セレクタ { プロパティ : 値 }
  • 要素に同じプロパティが複数指定されていた場合、下の方に上書きされる
  • 視認性の為、半角スペースや改行を使う
  • CSSにメモを書くときはコメントアウトを使う(HTMLと書き方は異なる)

Comment