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



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

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

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

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

目次
  1. CSSとは
  2. 概要
  3. お手本となるWebページの例
  4. CSSのメリット・デメリット
  5. CSSを専門とする人のお給料
  6. CSSとHTMLとの関係
  7. CSSの記述先
  8. ヘッダー内に
  9. CSSファイル内に
  10. HTMLタグに
  11. WordPressの場合は
  12. ブラウザでCSSを記述
  13. JavaScript内に
  14. 基本的なCSSの書き方
  15. body要素(背景を変更する例)
  16. width要素(入力フォームの例)
  17. class属性の例
  18. id属性の例
  19. table 要素の例
  20. 5つの要素を合わせてみて
  21. CSSの学び処とお役立ちサイト
  22. 今使っているブラウザのCSS対応状況
  23. このCSSの機能は全部のブラウザで動く?
  24. CSSコードのチェック
  25. CSSが冴えるデザインサイト集
  26. 無料のオンライン学習サイト
  27. CSS対応のオンラインスクール
  28. まとめ

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の記述先

image

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コードチェックをした結果 >> image

table 要素の例

HTMLで表を作成する機会は多いと思います。そんな時に使うのが「table」です。 しかし、PCではキレイに見えるものの、スマホでは画面幅をオーバーしていることってありませんか? CSSだけでHTMLのテーブルを簡単にレスポンシブ化することができますよ。

参考記事:レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット

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

5つの要素を合わせてみて

上記でご紹介した5つの要素を組み合わせてパララックス・ページを作成してみました。 ちょっと無理やり!?とも思える表の挿入などありますが、ご参照頂ければ幸いです。

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


CSSの学び処とお役立ちサイト

今使っているブラウザのCSS対応状況

CSSは、ブラウザによって動く機能と動かない機能があります。 今自分の使っているブラウザが、どれだけCSSに対応しているかチェックすることができます。
http://css3test.com/

このCSSの機能は全部のブラウザで動く?

CSSの学習を進めていくと、アニメーション系など様々な要素やプロパティが登場してきます。 事前にどのブラウザで機能するかチェックしておくと、Web開発も捗ります。
http://cssvalues.com/

CSSコードのチェック

自分で書いたCSSコードって不安ですよね。 こちらのサイトで、CSSのコードチェックができます。
http://csslint.net/

CSSが冴えるデザインサイト集

ある程度CSSを理解できたら、ハイレベルなデザインサイトのCSSを見て参考にしましょう。
http://www.csswinner.com/
http://www.cssdesignawards.com/

無料のオンライン学習サイト

CSS対応のオンラインスクール

CodeCampではCSSを現役エンジニアから学べる無料体験を行っています。完全オンラインで学ぶことができるので、スクールに通うまでの移動に時間がかかる方や、「地方だから通えるスクールがない」と学習を諦めている人にはおすすめです。

CSSの学習は最初につまづくと学習を諦めてしまう方が多いため、是非一度人から教わるという体験をしてみてください。


まとめ

今回CSS未体験者でも、CSS学習をスタートできるようにご紹介させて頂きました。うまくいった方もうまくいかなかった方も、長い目で見るとやはり基礎は大事だと思いますので、一度はCSSの基礎学習をオススメします。

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp