css入門!初心者でもできるスタイルシート基礎講座と使い方

s33
cssでデザインしよう

いよいよcssを使ってwebページのデザインを作っていきます!

cssさえ使えれば、自由にブログやホームページのデザインを変える事ができます。 そして自分でコードを記述するだけで、デザインがどんどん変わっていくので一番面白い所でもあります。 このページでは、「cssを記述する場所」「cssファイルの作り方」「デザインの変え方」「セレクタの使い方」 など、cssの基礎の部分や使い方について紹介してきます。

それとcss入門という事で、できる限り専門用語は使いません。 cssが初めての初心者でも、完全にマスターできるように紹介していきますね。

※このページは「html・css入門!初心者でも見るだけで自由自在に」の続きですので、 最初にそちらを見て頂くと、より分かりやすいかと思います。

目次
cssを書く場所を覚えよう
ボックスモデルについて知ろう
背景の色々な変え方を覚えよう!
表示サイズを設定しよう

cssの書き方の基本をマスターしよう

cssの書き方をマスター

css(カスケーディングスタイルシート)は、webページの見栄えを設定するための言語です。 そのため、css自体はブラウザ(画面)に表示される事はありません。 あくまで「見た目の設定をするためのコード」と考えて下さい。

例えば、「背景の色を黒にしたい」「文字のサイズを変えたい」「枠の幅を変えたい」 などの見栄えに関する部分は全てcssで指定します。

cssは基本的には、下のような書き方をします。

セレクタ{プロパティ:プロパティ値;}
分かりやすくいうと、下のような感じです。 対象のhtmlタグの{何を:どう見せるか;}

例えばh1の色を赤にして、h1の文字サイズを20pxにしたい時は 下のように書きます。

h1{
  color:red;
  font-size:20px;
}

h1の{
  色を:赤にする;
  文字のサイズを:20pxにする;
}
cssは上のように改行して書くことができる。 改行しない場合は下のように書く。 h1{color:red; font-size:20px;}
cssのセレクタ、プロパティ、プロパティ値の解説

セレクタにはh1、p、divやその他のタグなど、「どこの部分を変えたいか」を指定します。

プロパティには、背景色、サイズ、表示位置など、「何を変えたいか」を記述します。

プロパティ値には、「どうみせたいか」を記述します。

セレクタとは

cssで設定したスタイル(見た目)をhtmlに適用する時に、どの要素(h1なら<h1>~</h1>部分)に対して適用するか指定する部分の事をセレクタと呼びます。

セレクタには、h1、p、div、bodyなどのhtmlの要素名を指定しましょう。 <h1>~</h1>{color:red;}と書いても反映されないので注意。

セレクタをh1にした場合、htmlドキュメント内(ファイル)すべてのh1にcssで設定したスタイルが適用されます。

例えばcssでh1{color:red;}と記述した場合は、htmlドキュメント内にあるすべてのh1の文字色が赤になります。

div{color:red;}であれば、すべてのdiv内の文字色が赤になる。

ちなみに、セレクタには独自の名前を付けて、別々にスタイル(見た目)を設定する事ができます。(後ほど説明)

プロパティとプロパティ値とは

スタイル(見た目)を適用する対象の事を「プロパティ(属性)」といいます。 例えば、font-size、colorなどなど。

プロパティに指定する値の事を「プロパティ値(属性値)」と言います。 ちなみにプロパティにプロパティ値を設定する事を宣言と呼びますが、用語は覚えなくて大丈夫です。

宣言の部分
プロパティ:プロパティ値;

cssの書き方の基本というか仕組みは、こんなものです。

あと、プロパティとプロパティ値の間には必ず「:」(コロン)プロパティ値の最後には「;」(セミコロン)を付けましょうね。 これがないとエラーを起こします。

それと、colorやfont-sizeなどのコードは覚えなくて大丈夫です。 まずは、cssの書き方だけ覚えましょう!

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

対象のhtmlタグの{何を:どう見せるか;}

cssを書く場所を覚えよう

cssを記述する場所

cssの意味不明な部分の一つが、記述する場所だと思います。 「なんで違うファイルに書いてるのに反映されるの?」 「どこに記述すればいいの?」 などなど、色々不思議に思っちゃいますよねw

実はcssには3種類の記述する場所があります。

cssが記述できる3種類の場所
HTMLタグに直接書く
HTMLファイル内に書く
CSSファイルに書く

それぞれの書き方については下のページを参考にして下さい。

cssは3つの場所すべてに書く必要はありません。 3つの中のどれか一つに記述すれば適用されます。

「じゃあ、どこに書いてもokだね」 と思うかもしれませんが、okではないんです。

実は記述する場所によって、書いたcssの優先順位が変わってしまいます。 例えば、htmlタグに直接「h1の色を赤にする」というcssを書いたとします。 そしてcssファイルには「h1の色を黒にする」というcssを書きます。

どちらも同じh1に対して、赤と黒の色指定をしていますよね。 こういう場合、h1が赤と黒のグラデーションになるわけではなく、htmlタグに直接書いた「h1の色を赤にする」というcssが優先されh1が赤になります。 なので、3つの中のどれにcssを書いても大丈夫ですが、優先順位が変わるので使い分けるようにしましょうね。

ちなみに優先順位は下のような順番になっています。

  1. HTMLタグに直接書く(1番優先)
  2. HTMLファイル内に書く(2番目)
  3. CSSファイルに書く(3番目)

「じゃあhtmlタグに直書きがベストだね!」 と思うかもしれませんが、それはできるだけ止めといた方がいいです。

htmlファイル内、タグ内にcssを記述してしまうとhtmlファイルの容量が大きくなってしまいます。 その結果何が起こるかというと、webページの表示速度が遅くなります。

そうなると訪問者にとっても使いづらいし、検索結果も上位に入りづらくなっちゃいます。 なので、できる限りcssはcssファイルに記述するようにしましょうね!

それとcssは下に書いたものほど優先されます。

h1{font-size:20px;}
h1{font-size:21px;}
h1{font-size:24px;}

上のように記述した場合、一番下に書いてあるものが優先され、h1の文字サイズは24pxになります。

記述したのに上手く適用されないという時は、下の方にも同じようなのが書いてある可能性があるので、 まずはこれを疑ってみて下さいね。

セレクタの使い方をマスターしよう

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

対象のhtmlタグの{何を:どう見せるか;}

セレクタにはhtmlの要素名(h1など)を指定するタイプと、自分で付けた名前をセレクタ名として指定できるタイプがあります。

難しく感じるかもしれないですが、思っている以上に簡単なのでご安心を。 では、それぞれのセレクタについて説明していきますね。

タイプセレクタ

タイプセレクタとは、bodyやh1などhtmlタグに使われている要素名を、そのままセレクタとして使う事をいいます。 簡単にいうと、最初に説明したのは「タイプセレクタだよ」ってことです。

例えばh1をタイプセレクタとして設定すると、htmlドキュメント(ファイル)内のすべてのh1にcssで設定したスタイル(見栄え)が適用されます。

h1{background:red;}
h2{color:red;}
p{color:blue;}
<h1>h1要素の部分</h1>
<h2>h2要素の部分</h2>
<h2>h2要素の部分</h2>
<p>p要素の部分</p>
cssタイプセレクタの表示例

上のように書いた場合、htmlドキュメント内のすべてのh1の背景が赤、全てのh2の文字色が赤、全てのpの文字色が青になります。 「webページ全体のh1の文字サイズを設定したい」という時などにタイプセレクタを使いましょう!

クラスセレクタ

クラスセレクタには、自分で付けた名前をセレクタとして使う事ができます。

適用したい要素のclass属性に自分で付けたセレクタ名を設定する事で、cssのスタイルを適用させることができます。

クラスセレクタの解説

といっても、わかりづらいですよね。 なので実践してみましょう!

<p>p要素の部分1</p>
<p>p要素の部分2</p>
<p>p要素の部分3</p>

上のような場合、「p要素の部分2」の文字だけ赤にしたいとします。 ですが、タイプセレクタでp{color:red;}と記述するとすべてのp要素が赤色になってしまいますね。

こういう時にクラスセレクタを使います。

<p>p要素の部分1</p>
<p class="red">p要素の部分2</p>
<p>p要素の部分3</p>
.red{color:red;}
クラスセレクタの表示例

こういうように記述する事で「p要素の部分2」の文字色だけが赤色になります。 またクラスセレクタでは、適用する要素(h1、pなど)を指定する事ができます。

要素名.クラスセレクタ名{}

p.red{color:red;}

/* p要素の「red」の{色を:赤色にする;}という意味*/
<h1 class="red">h1要素の部分</h1>
<p class="red">p要素の部分1</p>
<p>p要素の部分2</p>
クラスセレクタ書き方の解説

上のように書いた場合、p要素の「red」という名前が付いているものにだけ適用されます。

h1にも同じように「red」を付けていますが、適用されていないですね。 これを覚えると細かく指定することができるので、用途によって使い分けましょう!

idセレクタ

idセレクタも、クラスセレクタと同じで「自分の好きな名前」をセレクタとして使う事ができます。

ただしidセレクタを使う場合は、自分で付けたセレクタ名の前に「#」を付けましょう。 それと、idセレクタは1つのページにつき一度までしか利用できません。

例えば<p id=”red”>~</p>と記述した場合は、そのページ内でもう一度<p id=”red”>は使えないという意味。

<p id=”red”>~</p>と記述して、同じページで<p id=”black”>~</p>のように名前を変えれば何回でも使える。

idセレクタ書き方

クラスセレクタと同じでidセレクタでも、適用する要素を指定することができます。

要素名#セレクタ名{}

p#red{color:red;}
<h1 id="red">h1要素の部分</h1>
<p id="red">p要素の部分1</p>
<p class="red">p要素の部分2</p>
idセレクタ表示例

こういうように記述した場合クラスセレクタと同じでp要素のid="red"が付いてる部分にのみ適用されます。 これも覚えておくと、細かく設定できるのでとっても便利です。

クラスセレクタとidセレクタを使い分けよう!

「クラス属性なら何回も使えるし、全部クラス属性でよくない?」 って思いますよね。 もちろん、全部class属性を使っても問題ないです。

ですがサイトが大規模になってくるとデザインが複雑になってきます。 そうなると 「このスタイルは、どこで使ってたかな?」 「何でこのスタイルを用意したんだっけ?」 というふうにわかりづらくなっちゃいます。

こういう時にidとclassを使い分けていると、間違ってデザインを崩すことがなくなります。 ソースコードも理解しやすくなりますしね。

そしてid名は1ページに1度しか使えないという制限があります。 という事は、idが使われていれば「ここは特定の部分だけに適用するスタイルなんだな」って事が把握できるようになります。

ようは、以前に使った名前を間違えて関係ない所に使わないように、idとclassを分けようね!という事です。

例えば「.example」で全体の幅や色などを設定していたとします。 ですが、以前「.example」を使った事を忘れて、関係ない部分で「.example」を使って幅や色を設定をしちゃいました。 そうすると、部分的に幅や色を変えたかったのに全体の幅や色も変わっちゃいますよね。

ここで間違った部分に気づければ良いですが、初心者の頃って中々気付けません 部分的には直るのに全体としては崩れるって事があります。

こうならないために、classとidを分けます。

「じゃあ、どこでIDを使うの?」 と思いますよね。

idを使うべき部分は「特定の部分だけにスタイルを適用したい時」です。 例えば「この部分の文字は大きくしたけど、他の部分には必要ないな」という時など。

他にもwebページの枠の設定などに使ったりします。

逆にclassはページ内に何個でも使えるので、頻繁に使いまわしたい部分などで使います。

では実際webページを作る時なら、どういうふうに使い分けるか説明しますね。 例えば下のようなページを作りたいとします。

webページ例

こういう場合なら、それぞれの枠の部分をidで設定します。 枠をidで設定しちゃえば、classで同じ名前を使ってもデザインは崩れる事はないですしね。

idセレクタの例

そしてh2「稼げるスマホ広告をパソコンでチェック!便利なツールご紹介」の部分だけが赤色ですよね。 こういう時にclassを使います。

<!--省略-->

<div id="main_contents">
<h1>「2016年07月」一覧</h1>    
<h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>      
<p>スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
この記事ではスマホ</p>
<h2 class="red">稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
<p>アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
今はパソコンより</p>
<!--省略-->
h2.red{color:red;}

こういうようにすれば、h2「稼げるスマホ広告をパソコンでチェック!便利なツールご紹介」の部分だけが赤になりますよね。

こんな感じにidセレクタclassセレクタを使い分けてみましょう!

といっても最初は中々わかりづらいと思いますので、使いまわす部分は「class」使いまわさない部分は「id」くらいの 認識で最初は大丈夫です!

セレクタは複数記述できる

セレクタは複数記述することができます。

例えばh1とpの色を赤にしたい時、いちいちh1とpについて記述するのは面倒ですよね。 なのでそういう時はまとめて記述しちゃいます。

h1,p{color:red;}
/* 「,」で区切りましょう */
<h1>h1要素の部分</h1>
<p>p要素の部分</p>
複数セレクタ表示例

複数セレクタの他にも子孫セレクタというものがあります。(用語は覚える必要ないですよ)

これを使うと「要素の中に含まれる特定の要素」だけにcssのスタイルを適用することができます。 まずは下を見て下さい。

<h1>h1要素の部分</h1>
<p>p要素の<span>部分</span></p>
<p>p要素の部分2</p>

上のような時、p要素の中のspan要素の部分だけ、赤色にしたいとします。 こういう時は要素(この場合ならpとspan)を半角スペースで区切る事で、適用する要素を指定することができます。

p span{color:red;}
子孫セレクタ解説

記述する要素に制限はありません。 なので2つでも3つでも、何個でも記述することができます。

こういう記述の方法もあるよ!という事なので、覚えておくと便利です。 もちろんspanにclassを使っても大丈夫です。

ボックスモデルについて知ろう

ボックスモデルを知ろう!

cssにはボックスと呼ばれる四角い領域があります。

※以前にdivタグとhtmlのブロックレベル要素の使い方まとめで紹介したブロック(領域)を紹介しましたが、それとはちょっと違います。 以前紹介したブロックはボーダーの内側の部分だと思ってください。

ボーダーとは

ボーダーとはボックスの境界線の事。
各要素(h1、pなどなど)は、目に見えない境界線で囲まれた領域に表示されます。 ボーダーを表示するためには、表示するための記述をしなければなりません。

マージンとは
マージンとは、ボックスの外側に存在する余白の事。
パディングとは
パディングとは、ボックスの内側に存在する余白の事。

ボックスモデルについて詳しくは、下のページへ (長くなりすぎるので分割しました)

いきなりボーダーは枠線、パディング・マージンは余白っていっても 「えw余白??」 ってなっちゃいますよね。

別ページで詳しく説明するので、簡単にしか紹介しないですが、p要素を例にして説明したいと思います。

p要素でボックスについて見てみると下のようになっています。(ここでは簡単に説明します)

<p>p要素の部分</p>
ボックスモデル解説 ボックスモデルの実際の例

簡単にいうと、ボーダーは枠線です。 ですが、見えるようにするにはcssで設定が必要です。

で、パディングはボーダーの内側の余白(隙間)です。 上下左右の余白を設定できるので、テキストの位置などを決めれます。

マージンも外側の余白です。 パディングと同じように上下左右の余白を設定できます。 なので、今見てもらっている文章の隙間を開ける時にも使えます。

難しく考えずに、要素の周りにはボーダー、パディング、マージンがあると考えて下さい。

それぞれの使い方と説明は各ページをご覧ください。(なるべく早めにアップします)

背景の色々な変え方を覚えよう!

今までの説明では、ページの背景やテキストの色は、red、black、blueなどのキーワードを使って指定してきました。 でもこれ以外にも「RBG値を指定する方法」「RBGA値を指定する方法」の2種類の方法があります。

これを使う事で色を細かく設定できたり、透過できたりしちゃいます。

詳しくは下記ページで紹介します。

表示サイズを設定しよう

ヘッダーやナビゲーション、メインコンテンツのサイズ(幅)の設定方法です。 というか、各要素の幅の設定方法です。

webページを作るうえで絶対必要となるので、紹介しますね。

詳しくは下のページへ

css入門の基礎はこんな所です。

最初は、難しく感じるかもしれませんが、実際作ってみると「めちゃ簡単w」って思いますよw ということで、次は実際にcssを使って2カラムのページを一緒に作っていきましょう(^^)/

実際に作って見る事で、覚えたくなくても覚えちゃうのですごいレベルアップできますよ! 次回からは、WEBページ全体の構造を作ってみよう!【html入門】で作って頂いたファイルを使って、ページをデザインしていきます。

続きは下のページから

それでは続きのページでお待ちしてますね。

以上「css入門!初心者でもできるスタイルシート基礎講座と使い方」でしたー(^^♪

頂いたコメント

  1. はまぞふ より:

    ゆうさん、こんにちは。
    はまぞふです。

    CSSのことについて、詳しくわかることが出来ました。
    ありがとうございます^^

    CSSは、ちょっと苦手意識がありまして、
    あまり、さわろうとはしませんでした^^;

    それでも、ブログやサイトの変更には必要ですから、
    多少の変更をするくらいですね^^

    CSSでわからなくなったら、
    また、この記事を参考にさせて頂きますね^^

    ありがとうございます^^

    応援完了です^^

    • ゆう。 より:

      はまぞふさん、こんにちわー(^^♪

      先日はどうもー(#^^#)

      サイト運営してるとどうしてもcssって必要ですよね。

      そういって貰えると嬉しいです(*´з`)
      是非参考にして下さいー(^^♪

      応援ありがとうございます!!

  2. まき より:

    ゆう。さん

    この記事、ものすごく分かりやすいです!!

    私もcssはすごく苦手意識があって、
    やりたいことがあって色々なサイトを見ても
    やってること分からなくて、結局できず・・・orz
    ってことが今までに何度もありました。

    でも、ゆう。さんの記事を読んでると、
    cssの基礎知識がスーッと頭に入ってきます。
    学ぶには持って来いですね!

    ぜひ、色々と参考にさせていただきます(*^_^*)

    • ゆう。 より:

      まきさん、こんにちわー(^^♪
      というか、こんばんわーw

      私も昔、色んなサイト見て、学ぼうと思ったんですけど、
      結局、専門用語が盛りだくさんすぎて、やってることがイマイチわからなくなっちゃうんですよねw
      そこで、できる限りわかりやすいのを作って見ようと思ったんですけど、
      「ものすごくわかりやすい」っていって貰えると、すごい嬉しいです(*´з`)

      作ったかいがありましたw

      是非参考にして頂ければ、嬉しいです(^-^)