カテゴリ一覧から記事を探す

【初心者向けCSS入門】Webデザインのための基本まとめ

【初心者向けCSS入門】Webデザインのための基本まとめ

自分のサイトをもっと見やすく・もっと分かりやすくするために重要なのはデザイン。

そのデザインと深くかかわるのがCSSです。

CSSについて基本を学んでいける記事になっています。

まずはHTMLの基本を押さえてから

HTMLを知らないと訳が分からないということにもなるので、まずはそちらを読んでからにしてください。

1.CSSでできることは?

CSSはデザインを変えるための言語です。
そのため、CSSがないとこのサイトは以下のようになってしまいます。

CSSでできること

なんて見にくいサイトでしょう・・・。

CSSがあれば、色や背景色、それぞれの要素の位置などを決めることができます!

ということで、ウェブデザインを自分でしたい人にとっては必ず学習する必要のある言語になります。

2.CSSの適用方法

では、CSSをどのようにして適用すればいいのでしょうか?

主に以下の3つがあります。

  • HTMLタグに書き込む
  • HTMLファイルにstyleタグを作って書く
  • HTMLファイルとCSSファイルに分ける

それぞれ説明していきます!

HTMLに書き込む方法

HTMLタグに直接書き込む方法です。

HTML
<div style="background-color: #bbdefb; width: 300px; height: 200px;">
  <h1 style="text-align: center">CSSを学ぼう</h1>
  <p style="margin: 0 10px;">このページではCSSを学んでいきます!</p>
  <p style="margin: 10px 10px;">詳細に説明しますので、頑張ってついてきてくださいね!</p>
</div>

このように書けば、以下のように多少デザインを整えることができます。
書き方については後程紹介します。分からなくてもOK
htmlコードにCSSを書く

やり方としては、タグの中にstyle="ここにCSSを書いていく"と書けば適用できます。

複数個のCSSを指定することも可能ですが、一つ一つすべてに書き込んでいくと膨大な量になり、修正するのも困難になるため非推奨です。

HTMLファイルにstyleタグを作って書く

今すぐCSSを書いて試してみたい!と思う方はこの方法で練習するのもアリ。

これが一番簡単な方法です。

HTML
<!--上側の部分は省略-->
<head>
  <title>練習1</title>
<style>
  ここにCSSを書く
</style>
</head>
<body>
<div>
  <h1>CSSを学ぼう</h1>
  <!--下側の部分は省略 -->

</head>の直前に、<style>~</style>を書き、その中にCSSを書き込んでいきます。

CSSの書き方は後程説明します!

HTMLファイルとCSSファイルに分ける

HTMLファイルとCSSファイルに分ける

ファイルを別にして、HTMLファイルの<head>~</head>内にて<link rel="stylesheet" href="ファイル名.css">と書くことで外部からCSSを読み込ませる方法です。

大きなメリットがあり、複数のページ(複数のHTMLファイル)になっていても、共通のCSSを扱うことができます。

サイトは大抵このようになっています。
ですので、CSSファイルの中身を書き換えれば全部のページのデザインが変わります。

やり方としては難しめなので、「複数ページになるとこの方法なんだな~」くらいに捉えてもらえればと思います。

HTML、CSSの練習にはCodePenがおすすめ

CSSの適用方法を3つ紹介しました。

難しいよ~という方でも、CodePenを使えば上記のような設定は必要ないので簡単です!

Create a Penを押し

codepenを使おう

見やすいように設定を変えるだけ。

codepenでhtmlを練習

あとはHTMLの部分にはHTMLを、CSSの部分はCSSをそのまま書いていけばいいです。

私も最初に学習したときはここでいじっていました。

3.CSSの基本

では、本格的にCSSの説明に入ります。

CSSの基本となる部分から紹介していきます。

CSSの基本

CSSは、セレクタ、プロパティ、値の3つで決めていきます。

そして、「セレクタ」の「プロパティ」を「値」にして!
という意味になるように書いていきます。

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

となるように書きます。コロン「:」やセミコロン「;」も忘れないようにしましょう。

 半角スペースやtabならいくらでも入れても構いませんが、全角スペースが入るとエラーの原因になります。修正しようにもわかりにくいので全角スペースは絶対使わないこと。

セレクタやプロパティを複数指定する

セレクタやプロパティを複数指定する場合、例えば「h2の見出しもh3の見出しも同じ文字色にしたいよ~」という場合には、以下のように指定します。

CSS
h2, h3{
  color: red;
}

上記のCSSでは、h2見出しもh3見出しも赤色の文字になります。
このように書くことで何行にも渡って書く必要がなくなるので楽です。

次に、プロパティを複数指定する方法を見てみましょう。
例えば、「h2見出しの文字色を変えて、h2見出しの大きさを大きくしたいよ~」という場合には、以下のように指定します。

CSS
h2{
  color: red;
  font-size: 20px;
}

上記のCSSでは、h2見出しが赤色になり、文字の大きさが20pxになります。

基本的にCSSをたくさん掛け合わせておしゃれなデザインにしていきます。

特定の要素にだけCSSを適用したいとき

特定の要素にだけCSSを適用できなければ話になりません。

例えば同じ形の枠で、枠Aは赤色で、枠Bは緑色にしたいときには、どのように指定すればいいでしょうか。

この場合、HTMLにidやクラスを指定すればできます。

<タグ名 id="id名"><タグ名 class="class名">とすることでidやclassを指定することができます。

 classは同じHTMLファイルの中に同じ名前をいくつも使えますが、idは同じ名前を1つしか使えません。classを書いた方がいい、idを書いた方がいいというのは書いていくうちに慣れで段々と分かってきます。

今回の例のように枠Aは赤色にして、枠Bは緑色にする場合には、以下のようになります。

idで指定する

classで指定する

HTML
<p id="frame-a">idで指定する</p>
<p class="frame-b">classで指定する</p>
CSS
/*枠A-idで指定する*/
#frame-a{
  border: solid 2px red;
}

/*枠B-classで指定する*/
.frame-b{
  border: solid 2px green;
}

覚えておきたいのは、idならCSSで#id名{ ... }とし、classならCSSで.class名{ ... }とすることです。

idならid名の前にシャープ、classならclass名の前にピリオドを書くという違いですね。

基本的にclass名やid名を指定しつつHTMLもCSSも書いていくことになります。必ず覚えましょう!

子孫セレクタで指定する

最後に、子孫セレクタについても説明します。

例えば、以下のHTMLで、一番上のpタグの文字色を変えたいときにはどうすればいいでしょうか。

HTML
<div class="container">
  <span>
  <p>この文章の文字色を変えたい</p>
  </span>
  <p>この文章の文字色は変えたくない</p>
</div>

こういった場合に、子孫セレクタを使えば簡単にCSSを適用することができます。

CSS
/*子孫セレクタを使って指定する*/
.container span p{
  color: red;
}

やっていることは、containerクラスの中のspanタグの中のpタグの文字色を変えるということです。

絞り込んでいって、CSSを適用させる場合に使います。

4.よく使うプロパティと値の基本

CSSの大まかな部分が分かりましたが、今の状態ではプロパティと値の部分が分からないことだらけです。
(「どこのデザインをどうするか」の「どうするか」にあたる部分です。)

最後にプロパティと値について、見ていきましょう。

文字の大きさを変える

まずは、文字の大きさを変えるところから。

font-size: ...で文字の大きさを変えることができます。

…の部分には、20pxのようなpx単位の値や、80%のような割合、1.5emなどの倍率が入ります。

初期設定20pxの文字

80%の文字1.5emの文字

HTML
<p>初期設定</p>
<p class="px">20pxの文字</p>
<p class="percent">80%の文字</p>
<p class="em">1.5emの文字</p>
CSS
p{
  font-size: 16px;
}

.px{
  font-size: 20px;
}
.percent{
  font-size: 80%;
}

.em{
  font-size: 1.5em;
}

初期設定の文字の大きさは16pxですので、80%だと13pxほど、1.5emだと1.5倍で24pxになっているということですね。

文字の色を変えよう

文字の色を変えるにはcolor: red;とする方法や、color: #f00;とする方法や、color: rgb(255, 0, 0);とする方法などがあります。

今までに出した例でもいくつか文字の色を変えてきましたね。

この色についての説明はCSSで使う色についての見出しに詳細を書きますので、そちらをご覧ください。

背景色を変えよう

背景色を変える場合は、background-color: ...で指定します。

色についての説明はCSSで使う色についての見出しに詳細を書きますので、そちらをご覧ください。

この文字の背景色を変える
HTML
<span class="back">この文字の背景色を変える</span>
CSS
.back{
  background-color: #b3e5fc;
}

文字だけでなくて、divタグなどに指定して、ボックスの背景色に使うことが多いです。

文字を太字にする

文字を太字にするには、font-weight: ...で指定します。

値については、100,200,300,・・・900のほか、normalやboldを使用します。

フォントに数種類の太さが設定されている場合のみ太さが変化するのですが、全種類の太さが用意されているフォントは少ないので、boldで太字にするとだけ覚えておけばOKでしょう。

文字を太字にします
HTML
<span class="bold">文字を太字にします</span>
CSS
.bold{
  font-weight: bold;
}

枠線をつける

枠線をつける方法は、border: 種類 線の太さ 色;のように書きます。

順番は関係ありません。

色々な線の種類があるので、よく見ていきましょう。

枠線をつけます
破線をつけます
点線をつけます
HTML
<div class="solid">枠線をつけます</div>
<div class="dashed">破線をつけます</div>
<div class="dotted">点線をつけます</div>
CSS
.solid{
  border: solid 2px #4fc3f7;
}

.dashed{
  border: dashed 2px #81c784;
}

.dotted{
  border: dotted 2px #ffb74d;
}

一気に華やかなデザインにすることも可能です。
このような枠線を駆使しつつ、色々な囲み枠を作ってみました。

widthとheightについて

widthとheightはそれぞれwidth: ...height: ...で指定します。

意味通り、横幅と高さを決めるものです。

ただし、aタグspanタグなど、display:inlineとなっている要素は指定できませんので注意。

文字は自動で折り返されます
HTML
<div class="box">文字は自動で折り返されます</div>
CSS
.box{
  width: 100px;
  height: 80px;
  background-color: #ddd;
}

幅と高さが決まったら、その中の文字などは基本的に折り返されるようになります。

widthの値は割合にすることもでき、80%などにすると親要素の幅の80%の長さになります。

割合指定しておくことでレスポンシブにも対応できる大きさのボタンやデザインが簡単に作れるので覚えておきましょう。

他にも色々値の指定方法があるので、思い通りにできないときは調べてみましょう!

文字を寄せる

先ほど紹介した、幅と高さを指定したブロックの中の文字は自動で折り返されていました。

折り返したときの文字は、左寄せでした。
折り返したときに中央に寄ってほしいときなども出てきます。

そのような場合や、タイトルなどの文字を中央に置きたい!という場合には、文字を左右もしくは中央に寄せる必要があります。
text-align: ...で指定することで、文字を左右または中央に寄せることができます。

中央寄せ
左寄せ
右寄せ
改行されたとしても中央寄せ
HTML
<div class="box">
  <div class="center">中央寄せ</div>
  <div class="left">左寄せ</div>
  <div class="right">右寄せ</div>
  <div class="center">改行されたとしても中央寄せ</div>
</div>
CSS
.box{
  width: 150px;
  height: 130px;
  background-color: #ddd;
}

.center{
  text-align: center;
}

.left{
  text-align: left;
}

.right{
  text-align: right;
}

特に中央寄せは使う機会が多いので覚えておきましょう!

コメントアウトについて

最後にコメントアウトについて紹介します!

HTMLでは、コメントを<!---->の間に挟むと書きました。

CSSでは、/*と*/の間に挟みます。

CSS
h1{
  color: #f44336;/*赤色*/
}

/*h2は青色にする*/
h2{
  color: #2196f3;
}

このコメントは一切反映されることがないので、メモ書きに使いましょう。

5.CSSで使う色について

color: red;などでも文字の色を変更することはできるのですが、これでは扱うことのできる文字の色に限りがあります。

そこで、RGBで表現する方法、RGBAで表現する方法、カラーコードを使用する方法について説明します。

RGBおよびRGBAについて

RGBおよびRGBAを使うと、色を以下のように表現します。

RGBはcolor: rgb(180, 230, 120);のように使用します。
RGBAはcolor: rgba(180, 230, 120, 0.5);のように使用します。

RGBおよびRGBAについて<

RGBではただの色を指定し、RGBAでは透明度を含めて指定します。

 Red、Green、Blueの順で指定するからRGB。順番を覚えておきましょう。

カラーコードについて

カラーコードを使うと、以下のような指定方法になります。

color: #ffb74d;こんな書き方を見かけたことがあるかもしれません。

カラーコードについて

16進数で表記されていたものを、10進数に直してあげればRGBでの表記と同じになります。

とはいえ、良い色にするためには時間がかかるので、カラーコード一覧表が載っているサイトに頼るのが良いです。

Material Design Colorsというサイトが私のお気に入りです。

6.まとめ

今回は、CSSについて基本的な部分をしっかりと解説していきました。

ここで紹介したプロパティは一部です。

ここにあるものだけをマスターしても、まだまだ難しいです。
今後もCSSの基礎となる記事をあげますので、その時はよろしくお願いします。

中にはアッと驚くようなプロパティもあるので、分からないときは調べつつ進めていけるように頑張りましょう!

次のステップ:絶対覚えなければならないプロパティを学ぶ