CSS

公開日時：2022.05.01

最終更新日:2022/08/18

【初心者向け】CSSの書き方をマスターしよう！

パソコンイラスト

こんにちは！Global Web Designの福田です。

Web制作を勉強中の方、Web制作をはじめられた方で
「CSSってどう書くの？どこに書いたら良いの？」
という方も多いと思います。

今回はそんな方のためにCSSの基本的な書き方、 CSSを書く場所、CSSの優先順位、CSSのサイズ指定、よく使うCSSをご紹介します。

CSSとは？

CSSは「Cascading Style Sheets(カスケーディングスタイルシート)」を略してCSSといいます。

HTMLでWebの土台を作り、CSSで装飾をしていきます。

CSSでできること

CSSでできることはさまざまなありますが、大まかにできることは

  • 文字の色、文字の大きさ、行間、行揃えの指定
  • 背景色、背景画像、線を引く、角丸などの指定
  • 余白の調整、レイアウト
  • アニメーション

CSSの基本的な書き方

CSSの基本的な書き方は

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

のようになります。
この書き方を使ってCSSの装飾をしていきます。

セレクタ

セレクタはHTMLのどの部分に適用するかを選択する役割を持っています。

「h1, p ,a, img」などの要素や「id=”属性名”」「class=”属性名”」などのidやclassを指定した属性名のことを指します。

 <div>
    <h1>CSSを書いてみよう！</h1>
    <p>文章</p>
    <a href="#">リンク</a>
    <p>文章２</p>
</div>

このようなHTMLがあるとします。CSSで

p{
  font-size: 20px;
}

と書くと

<div>
    <h1>CSSを書いてみよう！</h1>
    <p>文章</p><!-- ここのフォントサイズが変わる -->
    <a href="#">リンク</a>
    <p>文章２</p><!-- ここのフォントサイズが変わる -->
</div>

pタグすべてに「font-size: 20px;」が適用されます。

次にクラス名をつけて指定します。

<div>
    <h1>CSSを書いてみよう！</h1>
    <p class="text">文章</p>
    <a href="#">リンク</a>
    <p>文章２</p>
</div>
.text{
  font-size: 20px;
}

このようなHTMLとCSSがある場合、

<div>
    <h1>CSSを書いてみよう！</h1>
    <p class="text">文章</p><!-- ここのフォントサイズが変わる -->
    <a href="#">リンク</a>
    <p>文章２</p>
</div>

クラス名をつけた箇所のみフォントサイズが変わります。

また ,(カンマ)で複数指定することもできます。

CSSをこのように書き直します。

.text, a{
  font-size: 20px;
}

このように書くと

 <div>
    <h1>CSSを書いてみよう！</h1>
    <p class="text">文章</p><!-- ここのフォントサイズが変わる -->
    <a href="#">リンク</a><!-- ここのフォントサイズが変わる -->
    <p>文章２</p>
  </div>

クラス名をつけたpタグとaタグのフォントサイズが20pxになります。

プロパティ

プロパティは、セレクタで選択されて部分の何を変えるのかを決めます。

例えば文字の大きさですと「font-size」、幅を変えるときは「width」、文字の色だと「color」と指定します。

値

値はどのような見た目に変わるのかを書きます。

プロパティが「color」の場合「color: red;」と書くと、セレクタで選んだ文字の色が赤くなります。

実際に書いてみよう

<p>CSSを書いてみよう！</p>

このHTMLをブラウザで表示すると

html

テキストが表示されています。

ここにCSSを書いてみましょう。

p{
  color: gray;
  font-size: 30px;
}

ブラウザで見ると

css

文字が大きくなり、色が灰色に変わっていますね。
上記の「font-size」を「30px」に、「color」を「gray」にしてするためのCSSになります。

CSSの書き方は

  1. まずセレクタを書きます。今回はpタグをしていしているので「p」と書きました。
  2. {}(波括弧)を書きます。
  3. {}(波括弧)の中に、プロパティを書き、:(コロン)のあとに値を書きます。
  4. 値の最後の;(セミコロン)を書きます。上の記述は「font-size」と「color」を複数指定しています。

CSSを書く場所

CSSを書く場所は3つあります。

  1. 外部にCSSファイルをつくって読みこむ
  2. headタグ内にstyleタグを使って書く
  3. HTMLタグの中に直接書きこむ

1. 外部にCSSファイルを作って読みこむ

HTMLとは別にCSSファイルを作成し、CSSファイルに書いたCSSをHTMLに読みこみます。

まずテキストエディタでCSSファイルを作成します。(今回はVisual Studio Codeを使用していますが他のテキストエディタでも手順は変わりません)

今回はファイル名を「style.css」としました。

次に作ったファイルに文字化け回避のコードを先頭に書きます。

@charset "UTF-8";

次にHTMLにCSSを読み込みます。

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

外部のCSSを読み込むメリット

CSSを外部ファイルとして HTMLに読みこむ方法はHTMLファイルと別々に管理ができるため、保守性も高く、もっとも一般的な方法です。

メリットはスタイルの追加や修正をしたときに、CSSファイルを更新すればリンクしているすべてのページに反映されるので、更新する際の効率がいい点です。

外部のCSSを読みこむメリット

デメリットは、外部のCSSを使用するとWebサイトの表示速度が遅くなる可能性があります。

headタグ内にstyleタグを使って書く

2つ目の書き方は、HTMLのheadタグ内にstyleタグを使って書く方法です。ヘッダー埋め込み形式と呼ばれています。

headタグ内にstyleタグを使って書くメリット

styleタグを使って書くので、HTMLとCSSを分けて書ける点です。

headタグ内にstyleタグを使って書くデメリット

styleタグを使ってCSSを書いた場合、書いたHTMLのページだけにしか反映されない点です。共通のスタイルを適用するのであれば外部ファイルで読み込んだ方が効率はいいです。

特定のページにのみCSSを適用するときにstyleタグを使ってCSSを書きます。

HTMLタグの中に直接書き込む

3つ目はHTMLタグの中に直接書きこむ方法です。
インライン形式と呼ばれています。

HTMLタグの中に直接書きこむと、直接書いたCSSが最優先されるため。外部のCSSの内容に影響受けないと言う特徴があります。

HTMLタグの中に直接書き込むメリット

HTMLタグの中に直接書き込むメリットは、変更したい要素にスタイルを直接書きこめるという点です。

HTMLタグの中に直接書き込むデメリット

HTMLの中に直接書き込むデメリットは、直接書きこんだCSSが最優先されるため外部CSSで変更してもスタイルが変わらない点です。 HTML内に直接書きこむ方法はあくまでも応急措置であり基本的には使用する事はありません。

CSSの優先順位

CSSは同じ要素に別のCSSスタイルを上書きできると言う特徴があります。

同じ要素のプロパティーが重複で指定された場合。

優先順位の4つのルールに基づいて適用されます。

後に書いたCSSスタイルが優先

CSSスタイルが重複した場合、後から書き込まれたスタイルが優先されます。

p{
  font-size: 10px;
}
p{
  font-size: 20px;
}

CSSの場合下の「font-size: 20px」が適用されます。

HTMLの中に直接書き込まれたCSSスタイルが最優先

先述の通りCSSを書く場所は、外部CSS、埋め込み型、インライン形式の3つのパターンがありますが、CSSの重複があった場合はインライン形式で書いた内容が最優先されます。

詳細度

CSSは他の書き方によって詳細度の高いものが優先されます。 優先される順は

  1. idセレクタ
  2. classセレクタ
  3. 要素セレクタ
<p id="id" class="class">idの色になる</p>

このようなHTMLがあった場合、CSSを

#id{
  color: blue;
}
.class{
  color: green;
}
p{
  color: red;
}

このように書きました。この場合idセレクターが優先されるためカラーはブルーとなります。

.class{
  color: green;
}
p{
  color: red;
}

CSSをこのように書くとclassセレクターが優先されるためカラーはグリーンになります。

!important

値の部分に「!important」を書くと、 書いたCSSを強制的に最優先にできます。

#id{
  color: blue;
}
.class{
  color: green;
}
p{
  color: red!important;
}

このCSSの場合「!important」を書いたカラーレッドが適用されます。

このように「!important」を指定されたスタイルが優先されますが、絶対に必要な場合を除いてあまり使用しないことが推奨されています。

あまりにもインポータントを使いすぎることで、どれが本当に「!important」なのか分からなくなってしまうからです。

CSSのサイズ指定

CSSでは文字の大きさ、幅、高さなどを指定するときに4つの形式で書くことが多いです。

  1. px
  2. %
  3. em
  4. rem

の4つが挙げられます。私は「vw」を使うことが多いですが、「vw」については後日ブログを書きたいと思っています。

px

pxはサイズを絶対値指定します。

絶対値とは画面幅や他の要素に左右されることのない値のことを言います。

p{
  font-size: 30px;
}

と書くと必ず30pxになります。

%

%、em、remは相対値指定になります。

相対値は、他の要素によって数値が決まる値のことを言います。

このようなHTMLを書きます

<div>
  <p>CSSを書いてみよう！</p>
</div>

次にこのようにCSSを書きます

div{
  font-size: 15px;
}
p{
  font-size: 200%;
}

divに「font-size: 15px」を書きました。
pに「font-size: 200%;」を指定しています。

%の場合は親の要素(今回はdiv)のサイズを200%(2倍)することでpのfont-sizeは30pxになります。

em

emはフォントやCSSで指定している文字の大きさによってサイズを相対的に変えることができます。
1emは親要素のfont-size値を基準として相対的な値となります。

<div>
  <p>CSSを書いてみよう！</p>
</div>
div{
  font-size: 15px;
}
p{
  font-size: 1.5em;
}

この場合、親要素のdivに「font-size: 15px;」と書かれているため、1emは15pxとなります。1.5emと書くことで 15px × 1.5倍のフォントサイズになります。

rem

remはemと違う点はルート要素を参照します。
ルート要素とはhtmlセレクタのことです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div>
    <p>CSSを書いてみよう！</p>
  </div>
</body>
</html>
html{
  font-size: 20px;
}
div{
  font-size: 15px;
}
p{
  font-size: 2rem;
}

このようなHTML、CSSが書いてある場合、1remは20pxとなります。2remと書くことによって20px × 2倍のフォントサイズになります。

よく使うCSS

font-size

文字の大きさを変えるときに使用します。

値の単位は

  • px
  • %
  • em
  • rem

などが使用できます。

color

文字の色を変えることができます。

  • 色名を書く(red、blue など)
  • カラーコード(#+6ケタの英数字)
  • rgb (色の表現法)

で書くことができます。

googleでカラーピッカーと入力するとカラーピッカーが表示されます。(カラーピッカーはこちら)

赤い部分がカラーコード、青い部分はRGBとなります。CSSで書くと

a{
  color: red;
  color: #ff0000;
  color: rgb(255, 0, 0);
}

このようになります。
上記の書き方はすべて同じ赤を指定しています。

background-color

background-colorは背景色の色を変えることができます。

色の指定はcolorと同じです。

p{
  background-color: #1100ff;
  color: #fff;
}

このように書くと背景が青色になりました。

border

borderはHTMLに線を書いたり線で囲ったりできます。

p{
  border: solid 1px blue;
}

このように書くと青い線で囲うことができます。

ボーダーの後には3つの値を指定します

  • 線の種類
  • 線の太さ
  • 線の色

この3つを半角スペースを開けて並べて書きます。
上記のCSSの例だと、実践(solid)で、太さは1px,色は青(blue)と言う指定になります。

線の種類

線の種類は実践(solid)以外にも選ぶことができます。

  • 実線(solid)
  • 破線(dashed)
  • 点線(dotted)
  • 二重線(double)
<p>solid</p>
<p>dashed</p>
<p>dotted</p>
<p>double</p>
p:first-of-type{
  border: solid 2px blue;
}
p:nth-of-type(2){
  border: dashed 2px blue;
}
p:nth-of-type(3){
  border: dotted 2px blue;
}
p:nth-of-type(4){
  border: double 5px blue;
}

またボーダーは上下左右に線を書くことができます。

<p>border-top</p>
<p>border-right</p>
<p>border-bottom</p>
<p>border-left</p>
p:first-of-type{
  border-top: solid 2px blue;
}
p:nth-of-type(2){
  border-right: solid 2px blue;
}
p:nth-of-type(3){
  border-bottom: solid 2px blue;
}
p:nth-of-type(4){
  border-left: solid 2px blue;
}

まとめ

いかがでしたでしょうか。
今回はCSSの基本的な書き方、 CSSを記述する場所、CSSの優先順位、CSSのサイズ指定よく使うCSSなどをご紹介しました。

CSSプロパティは他にもたくさんあります。
全てを覚える必要はありませんが、 少しずつ使える種類を増やしていきWebサイトの制作に活かしてください。

この記事を書いた人
福田　弦

福田 弦

2020年にGlobal Web Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。趣味はドラム。

あわせて読みたい

アイキャッチ
ワイヤー
イラスト
フリーランス
img
レイアウト

SNSでシェア

Web制作に関するお悩みがある方はお気軽にご連絡下さい。

ご相談・お問い合わせ

メールでWeb制作に関して
相談や見積もり依頼をされたい方に、
お問い合わせフォームより
お問い合わせを承っております。
フォームからお問い合わせ下さい。

お問い合わせフォームへ