公開日: 2017年5月25日

【初心者向け】CSSを概要から書き方のサンプルまで詳しく解説

Webサイトやブログをはじめる時に、CSSを使えるか使えないかでは大きな差がでることを知っていますか？たとえばCSSが使えないと、サイトのデザインやテキストについて思うように色を変更できなかったり、ブログに表示させたいボタンの形を指定できず全体の印象が変わってしまうことがあります。

勉強し始めはつまづきやすいものの、最初のステップさえクリアすれば、プログラミング初心者でもCSSは馴染みやすいので、是非ともこの機会にCSSをはじめてみてはいかがですか？

今回は、CSSの概要説明からCSSのサンプルとデモを交えて書き方について、そして便利な学習サイトまで紹介します。

CSSとは
概要
お手本となるWebページの例
CSSのメリット・デメリット
CSSを専門とする人のお給料
CSSとHTMLとの関係
CSSの記述先
ヘッダー内に
CSSファイル内に
HTMLタグに
WordPressの場合は
ブラウザでCSSを記述
JavaScript内に
基本的なCSSの書き方
body要素（背景を変更する例）
width要素（入力フォームの例）
class属性の例
id属性の例
table 要素の例
5つの要素を合わせてみて
CSSの学び処とお役立ちサイト
今使っているブラウザのCSS対応状況
このCSSの機能は全部のブラウザで動く？
CSSコードのチェック
CSSが冴えるデザインサイト集
無料のオンライン学習サイト
CSS対応のオンラインスクール
まとめ

CSSとは

上記画像もCSSを使っています（コード）

概要

CSSは、正式名称Cascading Style Sheets（カスケーディング・スタイル・シート）といい、プログラミング言語の中でも『スタイルシート言語』の一種です。

1996年に初回版がリリースされて以来、Webページのデザイン要素を一手に引き受けて、ほぼすべてのWebページでCSSが使われているのです。

CSSは、HTML言語と同じで、EdgeやGoogle Chrome、Safariなどのブラウザによってコード処理され、画面に出力されます。尚、CSSの最新バージョンはCSS3で、管理はW3Cという団体が行っています。

お手本となるWebページの例

参考／Herman Scheer

CSSの学習をはじめる前に、CSSでどんなことができるのか、どんな風にするのがイイのか、雰囲気を知っておくことも大事です。たくさんあるWebサイトの中から、今回はアメリカのクリエイティブ集団のホームページをご紹介させて頂きます。

見どころ

メニューバー
矢印のアニメーション
画像の演出
背景画像のアニメーション（ページ後半）
入力枠の文字アニメーション

これらがCSSを使って表現されており、プログラミング言語の中でも簡単と言われるCSSでもここまでできます。

■CSSの活用事例■

Webページの装飾
Webページのレイアウト
Webページへのアニメーション追加
Webページのマテリアル生成（ボタンなど）
スクレイピング（Webサイトから特定のデータを抽出するテクニック）

■CSSの知識対象者■

Web開発者
Webデザイナー
Webディレクター
メディアディレクター
ブロガー
ライター
WordPressユーザー
データ・サイエンティスト（スクレイピングで）

CSSのメリット・デメリット

メリット

ブラウザ上で直ぐにデバッグ（動作チェック）できる
直ぐに効果を確かめられる
PHPやJavaに比べると比較的簡単
開発環境は不要
ハッキングリスクはない（JavaやPHPはハッキングリスクがある）
今後も需要のある言語
アプリ開発にも利用できる

デメリット

ブラウザによって動く機能（CSSコード）と動かない機能がある

CSSを専門とする人のお給料

将来的に仕事としてCSSを検討されている方もいらっしゃると思います。国内におけるCSSプログラマーのお給料は、平均して373万円となっています（Find Job!）。

ところ変わって、アメリカでは平均して、約 $60,000（600万円以上）*となっています。 Java（約$73,000）*などに比べるとお給料は低いものの、今後も継続需要は見込めますので、安定型の言語といえます。

CSSとHTMLとの関係

HTMLのみで作成されたWebページは、無機質なものです。そこにCSSを加えることで、色鮮やかなWebページヘと変身します。

【CSS有りの場合と無しの場合の違い】

HTMLのみの見出し

本日は晴天なり、本日は晴天なり、本日は晴天なり

本日は晴天なり、本日は晴天なり

CSSを加えた見出し

本日は晴天なり、本日は晴天なり、本日は晴天なり

本日は晴天なり、本日は晴天なり

つまりHTMLとCSSは、Webページに欠かすことのできないプログラミング言語となっており、あなたが今みているこのページもHTMLとCSSが使用されています。

2つの言語の関係を例えるなら、『夫婦』みたいなものでしょう。

CSSの記述先

CSSの記述先は3つあります。それぞれ詳しく説明していきます。

ヘッダー内に

HTMLコードの <head></head> 内に記述することができます。 CSSのテストやとりあえずCSSを設定する時によく使います。

CSSファイル内に

CSS専用ファイルを作成し、その中にCSSコードを記述することができます。例えば、style.cssというCSSファイルを作成して、これをHTMLのヘッダーで読み込むようにします。

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

HTMLタグに

一部のCSS要素をHTMLタグ内に直接記述することができます。

<h4 style="text-align: center; background-color: #0074bf; color: white;">Tech2GO</h4>

<< 上記コードの結果 >>

Tech2GO

WordPressの場合は

WordPressのCSSをカスタマイズする場合は、ログイン後、画面トップの「カスタマイズ」をクリックして、画面左の「追加CSS」をクリックします。

サンプルを作成しましたので、ご参考下さい。（引用タグのデザイン変更）

ブラウザでCSSを記述

各ブラウザには、Webページの検証機能が付いており、閲覧しているWebページの画面上で右クリックをすると、下の方に「検証」や「要素を調査」という項目があります。

ここから今見ているページのCSSを直接編集・加筆して、ファイルを保存することができます。カラーリングなどのCSSテストは、はかどるはずです。

JavaScript内に

最近のWeb開発現場では、AngularJSやReactJSといったJavaScript系のライブラリが浸透しています。

このAngularJSやReactJSを使った場合、CSSはHTML以外に、JavaScript内にも記述します。ちょっと複雑になりますが、将来的にWebの制作現場で活躍したいと思っている方は、参考程度に知っておきたいですね。

JavaScript内のCSS について／【Qiita 今からはじめるReact.js〜スタイルの適用〜】

基本的なCSSの書き方

それではここから実際に手を動かしてCSSを体験していきましょう。今回は、比較的分かりやすいCSSの記述方法である <head> 内に書き込んでいきます。

【参考ツール】オンライン型 HTML／CSSエディター

http://www.onlinehtmleditor.net/
これから紹介するHTML／CSSコードを画面上部にコピペしてみて下さい。すぐにコードが反映されます。

body要素（背景を変更する例）

Webページのメインであるbody要素をCSSでカスタマイズしてみます。

<!DOCTYPE html>
<html>
<head>
<style>
body  {
    background-image: url("http://bitcoin-with.com/codecamp/pexels-photo-207253.jpeg");
}
</style>
</head>
<body>
<h1>CSS body要素の例</h1>
</body>
</html>

<< 上記コードの結果 >>

See the Pen CSS-1 by Takayuki Oshima (@oshimamasara) on CodePen.

width要素（入力フォームの例）

Webページのレイアウトに欠かせない幅（width）をCSSでいじってみます。すこしコードが長くなりますので、下記のコンテンツでコード確認してください。

See the Pen CSS-width by Takayuki Oshima (@oshimamasara) on CodePen.

class属性の例

先ほどのwidthプロパティの例で、実はclass要素を使っています。 CSSで設定したレイアウトを繰り返し使う時に便利です。

<< widthで紹介したコードのclass部分だけピックアップ >>

.a {
 height:120px;
 width:120px;
 background-color:gray;
}

<p class="a">実はこの文字、120px×120pxの枠に表示されています</p>
<p class="a">実はこの文字、120px×120pxの枠に表示されています</p>

id属性の例

class要素は繰り返し使えるのに対して、idは本来一回だけ使える要素です。

下の例では3回同じidとclassを使っています。出力は問題なく表示されますが、HTMLの文法的にはよろしくない、とHTMLチェッカーはいいます。（HTMLコードチェッカー）

<!DOCTYPE html>
<html>
<head>
<style>
/*idコード*/
div#a {color: red;
}

/*classコード*/
.b {color: blue;
}
</style>
</head>
<body>
<div id="a">こんにちは</div>
<div id="a">こんにちは</div>
<div id="a">こんにちは</div>
<div class="b">こんにちは</div>
<div class="b">こんにちは</div>
<div class="b">こんにちは</div>
</body>
</html>

<< HTMLコードチェックをした結果 >>