ウェブデザインに必須・初心者のためのCSS基礎知識

コンテンツ

1 ホームページの見栄えはCSSで決まる
2 スタイルを指定する方法
3 いざスタイルを指定！　でもその前に・・・
4 CSSでホームページ作りが楽しくなる！

ホームページの見栄えはCSSで決まる

こんにちは、ホームページ制作のオイゾウです！
HTMLに様々なスタイルを指定することで、とてもレイアウトのきれいなホームページを作れるのですが、それはCSSという言語を使うことで実現できます。
CSSとはカスケーディングスタイルシートの略で、HTMLのデザインをとても細かく指定することができるんです。
ですが細かく調整できる分、様々な知識とテクニックが必要になってきますので、ホームページ作成にCSSを活かしていくためにはしっかりと基礎を覚えていかなければなりません。

CSSによって、例えばこんなことができます。

文字に色を付ける
文字に下線を引く
背景色を付ける
外枠を付ける
余白を付ける
色が付いた背景の四隅を丸くする

などなど、CSSで実現できる機能というのはとてもたくさんあります！
ということで、さっそくどうやってCSSでスタイルを指定していくのかを順番に説明していきます。

スタイルを指定する方法

はじめに予備知識として、スタイルを指定する方法は3つあるので覚えましょう。
ただし実際には「3. CSSファイルを作成して読み込ませる」だけを推奨しますので、1と2については何となくこんな方法もあるんだという程度で認識しておいてもらえれば問題ありません。

1. HTMLの各要素に直接記述

「style属性」を使って直接スタイルを指定します。

例
[html]<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>[/html]

このp要素に直接指定するには、

style="background-color: #7d471b; color: #ffffff; font-size: 1.2em;"

↑これを入れます。
↓入れ方は、

[html]<p style="background-color: #7d471b; color: #ffffff; font-size: 1.2em;">素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>[/html]

「style="◯◯◯◯◯"」という属性を、p要素の開始タグ

に、pの後に半角スペースを入れて記述します。

ここでは

background-color: 背景色
color: 文字の色
font-size: 文字の大きさ

この3つのスタイルを指定しています。
詳しい書き方については後述します。

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。

このようになりました。

ただこの方法は、もし同じ内容のスタイル指定であっても、全ての要素にそれぞれ同じように記述しなければならないため、通常はこのような手法を取ることはありません。
つまり、もし以下のように同じスタイルを複数の要素に指定する場合、

[html]<p style="background-color: #7d471b; color: #ffffff; font-size: 1.2em;">素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<p style="background-color: #7d471b; color: #ffffff; font-size: 1.2em;">当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<p style="background-color: #7d471b; color: #ffffff; font-size: 1.2em;">江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html]

このように重複して指定することになってしまいます。
そもそもHTMLでは文書の構造だけを記述し、見た目に関することはスタイルシート（つまりCSS）を使って記述することが推奨されているので、HTMLに直接指定する方法はできる限り避けましょう！

2. HTMLのhead要素内に記述

続きまして、こちらも同じくHTMLファイルに直接スタイルの指定を記述する方法です。
今回はhead要素に「style要素」を書いていきます。

[html]<style type="text/css">◯◯◯◯◯</style>[/html] ◯◯◯◯◯←この部分にスタイルを指定します。

例えば
[html]<style type="text/css">
h1 {
font-size: 1.4em;
border: solid 2px #6d2e85;
p {
background-color: #7d471b;
font-size: 1.2em;
padding: 20px;
}
</style>[/html]

こんな感じで、h1要素とp要素にそれぞれスタイルを指定しています。

このようにHTMLのhead要素にスタイルシートを記述することも可能ですが、複数のHTMLファイルがある場合に、共通するスタイルであるにもかかわらずそれぞれのHTMLファイルごとに書かなければならないためとても面倒で、これも1同様に実用的ではなく、やはりこの方法もできるだけ避けましょう。

3. CSSファイルを作成して読み込ませる

1、2とさんざん非推奨の方法を紹介してきましたが、初心者の方もプロも関係なく実際にホームページを作る上ではこれから紹介する方法で作ることになりますので、この方法はしっかりと覚えてください！
前述の方法ではHTMLファイルにスタイルを指定しましたが、これはHTMLファイルとは別にCSSファイルを作成し、そのCSSファイルをHTMLで読み込むという方法です。

CSSファイルは前回の記事「無料＆高機能！ HTMLとCSSに必須、おすすめのエディタ」をご参照頂き、これらのエディタを使って作成しましょう！

拡張子は.cssになります。
例えば「style.css」というファイル名にして、HTMLファイルのhead要素内に以下の1行を追加します。

[html]<link rel="stylesheet" href="css/style.css">[/html] これは「link要素」というもので、外部リソースを指定することができます。
「rel属性」には読み込むファイルがスタイルシートであることを指定し、「href属性」にはリンクしているリソース（CSSファイル）のURLを指定します。
この1行によって「style.css」というCSSファイルを読み込んでくれます。

css/style.css

これは、このHTMLファイルと同じ階層にある「css」というディレクトリ（フォルダ）の中にある「style.css」というファイルにリンクしている、ということです。

いざスタイルを指定！　でもその前に・・・

CSSをこれから記述していくにあたり、はじめに最低限知っておくべき決まりと、色や数値に関する予備知識を理解する必要があります。

1. 出だしに文字コードを指定

HTML文書で定義した文字コードを、ここでも指定します。

@charset "UTF-8";

文字コードがUTF-8の場合はこのように記述してください。
最後はセミコロンを忘れずに！

2. CSSの基本書式

CSSは基本的に「セレクタ」と「プロパティ」と「値」の組み合わせでスタイルを指定します。

[html]セレクタ { プロパティ: 値; }[/html]

セレクタとは

スタイルを適用する対象を選択（セレクト）するものです。
例で説明してみます。

HTML
[html]<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？</p>[/html]

CSS
[html]p { font-size: 1.2em; }[/html]

例えばこの場合セレクタはpになりますので、HTMLのp要素に{}内スタイルが適用される（フォントサイズを1.2emにする）ということです。

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？

↑文字の大きさが1.2倍になりました。

プロパティとは

どのようなスタイルを適用するかというもので、上記の例で言えば「font-size」の部分に当たり、この場合はフォントサイズを適用するという意味になります。

値（あたい）とは

そのプロパティの設定値です。

複数のプロパティに値を指定するときは、中括弧{}の中に続けて入れていきます。

例
[html]p { font-size: 1.2em; background-color: #7d471b; color: #ffffff; }[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？

↑文字の大きさが1.2倍に、背景が茶色っぽい色に、文字の色が白になりました。

以下のように改行を入れて書くと読みやすくなるのでおすすめです。
[html]p {
font-size: 1.2em;
background-color: #7d471b;
color: #ffffff;
}[/html]

3. コメント

CSSもHTMLと同様に、ソースにコメントを書くことができますが、HTMLとは記述の仕方が変わります。

[html]/* コメントを書きます */[/html]

複数行にわたって書く場合は
[html]/*
コメントを書きます
コメントを書きます
コメントを書きます
*/[/html]

4. 色はRGBで指定する

光の三原色である赤（RED）、緑（GREEN）、青（BLUE）のこと。
この3色を組み合わせることによって色を表現します。

CSSでのRGBの指定方法はいくつかありますが、よく使われるのは「#rrggbb」という方法です。
最初に#があり、RとGとBのそれぞれの値を00〜ffまでの16進数で指定します。

例
[html]p { color: #7d471b; }[/html]

RGBは赤×緑×青がそれぞれ0から255まで、合計256個の数値を組み合わせて指定するので、256×256×256=17,777,216色という色数を表現できます。
ですが実際には色を指定したいときに、当然のことながら17,777,216通りの数値を把握できてるわけではありませんので、そんなときにとても役立つ便利なウェブサービスを紹介しておきます。
さっそく試しに使ってみましょう！

RGBと16進数カラーコードの相互変換ツール
色の表現法である「RGB」と6桁の16進数で表される「カラーコード」を相互変換するツール。
16進数カラーコードの意味やRGBへ変換する計算式の解説付き！

5. 数値と単位の組み合わせ

サイズは通常「数値+単位」を組み合わせて指定します。
例えば部屋の広さを表すのに坪数や平方メートル、畳数など様々な単位があるように、CSSで文字の大きさや余白、線の太さなどを数値で指定するときには、状況に応じて様々な単位を使い分けます。
全部覚えるのは大変なので、よく使うものを3つピックアップして紹介します。

em

適用要素のfont-size（フォントサイズ）の値を1としたときの倍率になる相対単位。

px

ディスプレイでの1ピクセルが最小となる単位。

%

そのままですがパーセントでの単位です。

この3つ以外にも様々な単位がありますが、基本的にはこの3つを使い分けるだけで初心者の方がホームページを作るには十分事足ります。
ではこの3つをどう使い分けるかということですが、単位についてはもっと詳しい説明が必要ですので、また別の機会に改めて説明させて頂くとして、今の段階ではとりあえずこのようにいくつかの単位があるということだけ覚えておいてもらえればOKです！

CSSでホームページ作りが楽しくなる！

だんだん難しくなってきているかもしれませんが、CSSでいろいろとレイアウトをいじったりデザインにこだわれるようになってくれば、ホームページを作るのがどんどん楽しくなってくると思います。
では次回、いよいよ実際にスタイルを指定していきますのでお楽しみに！