Webデザインの教科書
CSS 基本編
Scroll
  1. ホーム
  2. CSS 基本編

CSS初心者向けWebデザインとCSSの基本的な書き方

Webサイトをデザインする方法も学んでいきましょう。

デザインを作るには「CSS」と呼ばれる言語使って書いていきます。

もちろん画像も使ったデザインもしますが、基本的には文字でデザインを作っていきます。

CSSってなに？

Webサイトをデザインする言語

CSSはWebサイトをデザインするためのスタイルシートと呼ばれる言語です。

HTMLと一緒に使うので、HTMLの知識が必要になります。

CSSで出来る事

CSSで出来ることは大きく分けて3つの事が出来ます。

色や形をデザインする
C
O
L
O
R

文字の大きさや色を変えたり、三角形や丸などの形を作る事が出来ます。

また、スペースを作って間隔を空けたり、回転や影を付けるなどの細かいデザインも可能です。

  1. 文字や背景の色を変える
  2. 大きさを変える
  3. 形を変える
  4. 余白を作る
  5. 透明にする
  6. 影を作る
  7. グラデーションを入れる
レイアウト(スマホ対応)
CSS

レイアウトを作成して好きなところに配置する事が出来ます。

横に並べたり重ねて表示するなど、さまざまなレイアウトを自由に作成する事が出来ます。

  1. 横並びにする(FlexBox)
  2. 格子状に分割する(Grid)
  3. 好きなところに配置する
  4. 重ねて表示する
  5. 画面に固定して表示する
  6. スマホ対応
アニメーション
A
N
I
M
A
T
E

CSSでアニメーションをする事が出来ます。

色を変えたり動かしたり、回転する事も可能です。

  1. 色を変える
  2. 動かす
  3. 回転する
  4. 大きさを変える
  5. 徐々に表示する

CSSはいろんな事が出来ちゃいます。

その分数えきれないほど、CSSの内容を覚える必要があるので少し大変かもしれません。

まずは、CSSの基本的な書き方からやってみましょう。

HTMLとCSSの関係

まずは、HTMLとCSSの関係についてです。

HTMLはタグと呼ばれるもので囲って、目印を付けていく構造でした。

CSSはそのHTMLのタグを使ってデザインしていきます。

HTMLとCSS

HTMLタグ
<p>文章</p>

CSSはHTMLのタグまたは新しく目印を作ってデザインする対象を絞ってデザインしていきます。

デザイン対象の条件が合った時に、それぞれのスタイルが適用されます。

CSS
p{color: red;}

スタイルする対象を決めて、その中に適用するスタイルを書いていきます。

上記の場合はHTMLの「p」タグをスタイル対象にしています。

HTMLとCSSはタグが重要である事がわかりましたね。

HTMLのタグにクラスやIDを付けて新しい目印を付ける方法もありますが、それは後でお話します。

その前にHTMLについてもう少し知って欲しい事があります。

HTMLと要素

要素とは？
おはよう
margin(マージン)
border(ボーダー)
padding(パディング)
contents(コンテンツ)

HTMLで下記のようにタグで囲った時、ブラウザでは4つの領域が作られます。

その4つの領域をまとめて「要素」と呼びます。

つまり、「タグ」と「要素」は同じものになります。

タグと呼ぶ時

「<p>おはよう</p>」のように、HTMLで書く時に「タグ」と呼びます。

要素と呼ぶ時

タグで囲まれたものをブラウザで表示するときに、4つの領域が作られます。

作られた4つの領域をまとめて「要素」と呼びます。

<p>おはよう</p>
4つの領域
おはよう
margin(マージン)
border(ボーダー)
padding(パディング)
contents(コンテンツ)

要素には4つの領域があり、外側から「margin」「border」「padding」「contents」と呼びます。

それぞれの領域には役割があり、CSSでこれらの領域を変更してデザインしていきます。

contents(コンテンツ)
おはよう

コンテンツ領域は「おはよう」のように文字が入ります。

タグの中に記述された文章がそのまま表示されます。

CSSでは、文字の「色」「大きさ」「太さ」や背景の色などを変更する事が出来ます。

  1. 文字の色を変える
  2. 文字の大きさを変える
  3. 文字の太さを変える
  4. 背景の色を変える
  5. 横幅・高さを変える
border(ボーダー)

コンテンツ領域の周りを線で囲う事が出来ます。

囲まれた線は「ボーダー」と呼ばれ、強調させたい時などで使われます。

CSSでは、ボーダーの「色」「太さ」の変更や角を丸くする事も可能です。

  1. ボーダーの表示
  2. ボーダーの色を変える
  3. ボーダーの太さを変える
  4. ボーダーの角を丸める
padding(パディング)
おはよう

ボーダーの内側にスペースを作る事が出来ます。

ボーダーとコンテンツの間にスペースを作る事で、文字の始まりを右にずらすといった事が出来ます。

  1. 内側にスペースを作る
  2. コンテンツの背景と同じ色
margin(マージン)

ボーダーの外側にスペースを作る事が出来ます。

外側にスペースを作る事で、他の要素との間隔を空ける事が出来ます。

  1. 外側にスペースを作る

いきなりドバーッと説明されても...って感じですよね。

これから1つ1つ丁寧に教えていきますので、今は「ふーん」で大丈夫です。

次は、実際に4つの領域を確認してみましょう。

「ディベロッパーツール」というものを使ってみます。

ディベロッパーツール

ディベロッパーツールで要素を調べてみます。

またダウンロード必要なのか...と思った方！！

ダウンロード不要です。

ディベロッパーツールとは？

ブラウザに標準搭載されている、「Web開発お助けツール」です。

ダウンロードは不要で、お使いのブラウザにすでにあるツールです。

要素の「margin」「border」「padding」「contents」を色と数字で視覚的に確認する事が出来ます。

ディベロッパーツールを起動する

Google Chromeの場合の動画です。

  1. 調べたい要素にマウスを移動

    調べたい要素があるところまでマウスカーソルを移動します。

  2. メニューを開く

    Windowsは「右クリック」, Macは「トラックパッドを2本指でクリック」でメニューを開きます。

  3. 「検証」をクリック

    メニューの中から「検証」または「要素の詳細を表示」をクリックして、ディベロッパーツールを起動します。

  4. ディベロッパーツール起動

    ディベロッパーツールが起動すると、HTMLのコードとCSSのスタイルを確認する画面が出てきます。

    その画面が表示されていれば、ディベロッパーツールの起動は完了です。

実際に確認してみよう
要素

いきなりですがクイズです。

上の図を調べて4つのクイズをお答え下さい。

  • contentsの横幅と高さは？
    「要素」の文字は入っているところ
  • borderの太さは？
    水色で囲まれている線の太さ
  • paddingの大きさは？
    ボーダーとコンテンツの間のスペースの大きさ
  • marginの大きさは？
    要素の外側のスペースの大きさ

クイズはどうでしたか？

ディベロッパーツールを使えば簡単なクイズに早変わりですね。

ディベロッパーツールはCSSを確認する時にかなり使います。

すこーしずつ慣れていきましょう。

CSSの書くところ

それではCSSを実際に書いてみます。

おそらく疑問に思っていた「どこにCSSを書くの？」について答えていきます。

CSSはどこに書くの？

CSSは大きく分けて２箇所書く方法があります。

「HTMLの中に書く」方法と「CSSファイルに書く」方法の2つあります。

HTMLの中に書く
<style></style>

記事を書く時に作成したHTMLファイルの中にCSSを書いていく方法です。

HTMLはタグ使って記事を書いていくように、CSSを書く時も「style」タグを使います。

「style」タグを書くだけなので、すぐにCSSを書き始められるのが特徴です。

CSSファイルに書く

記事を書くHTMLとデザインするCSSを分けて書く方法です。

記事の「HTMLファイル」とデザインの「CSSファイル」をそれぞれ別で作成して、2つを関連付ける事でスタイルを適用します。

なぜHTMLとCSSを分けるの？

「HTMLファイル」と「CSSファイル」の2つのファイルを作成する手間があるのに、なぜ分けるのでしょうか。

それは管理のしやすさと再利用が出来るの2つの点でメリットがあるからです。

管理のしやすさ
<style>
~
</style>

HTMLの中に「style」タグを使って書く方法の良いところは、すぐに書ける点だと思います。

しかし、量が多くなるとHTMLとCSSが混在したコードの中から、修正するコードを探すのに時間がかかってしまいます。

HTMLとCSSを分けることで「管理しやすい」書き方になります。

再利用が出来る

1つのCSSファイルを、複数のHTMLファイルで共有する事で、CSSの「再利用」が出来ます。

HTML内の「style」タグの中に書く方法では、そのHTMLの中でしか利用が出来ません。

複数のHTMLで同じデザインにする時は、1つのCSSファイルを共有して効率的にデザインする事が出来ます。

多くのサイトではHTMLとCSSは分けて作成しています。

CSSの練習の時はstyleタグを使って書いていく方が、学びやすいかもしれませんね。

ある程度学んだらCSSファイルに書き直すのも良いかもしれませんね。

CSSの書きかた

続いては、CSSの書きかたについてです。

先ほどCSSの書くところで「HTMLの中」と「CSSファイル」の2種類の方法を紹介しました。

「HTMLの中」と「CSSファイル」のそれぞれの書きかたについて、紹介していこうと思います。

HTMLに書く(属性)

<h1 style="color: red;">
ヒツジの日記
</h1>
<p style="color: blue;">
今日は散歩しました。
</p>
<p>
とても良い天気でした。
</p>
ヒツジの日記

今日は散歩しました。

とても良い天気でした。

HTMLの中にCSSを書く(属性)
HTMLタグに直接CSSを書く

HTMLのタグの中にCSSを書きます。

タグの中にスタイル属性を追加して、CSSを書いていく方法です。

style属性
style="color: red;"

style属性とは、タグごとにCSSを書くための属性です。

style属性を追加したタグのみがCSSが適用されるので、style属性がないタグは適用されません。

「color: red;」は文字の色を赤にしています。

複数のスタイルを書く
ヒツジの日記

上記のように「文字の色」や「背景の色」など、２種類以上のCSSスタイルを書きたい事があると思います。

複数のスタイルを書く場合は、セミコロン「;」を必ず後ろに付けて続けて書いていきます。

「color: white;」は文字の色を白にしています。

「background: orange;」は背景をオレンジにしています。

<h1 style="color: white; background: orange;">
ヒツジの日記
</h1>

HTMLに書く(タグ)

<!DOCTYPE html>
<html lang="ja">
<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>ヒツジの日記</h1>
<p>今日は散歩しました。</p>
<p>今日は良い天気でした。</p>
</body>
</html>
ヒツジの日記

今日は散歩しました。

とても良い天気でした。

HTMLの中にCSSを書く(タグ)
styleタグ
<style></style>

styleタグは、CSSを書くためのタグです。

基本的にはheadタグの中にstyleタグを書きます。

まとめてCSSを書く事が出来るため、条件に合うすべてのタグにスタイルが適用されます。

CSSの基本文法
p {
color: blue;
}
セレクタ

スタイルを適用させたい対象を指定します。

「p」のようにHTMLタグを指定することが出来ます。

上記のように「p」をセレクタに指定すると、すべてのpタグにスタイルが適用されます。

プロパティ

変更したいものを決めます。

「color」のように文字の色の変更や、「background」のように背景の色の変更を設定する事が出来ます。

値

どのように変更するか決めます。

「color」の時は「red」や「blue」のように、色を指定する事が出来ます。

この値は、プロパティの種類によって指定する値は変わってきます。

セレクタを組み合わせる

複数のセレクタを組み合わせることで、スタイル対象を細かく指定することが出来ます。

複数のセレクタを指定する
h1, p {
color: blue;
}

共通のCSSスタイルはまとめて指定することが出来ます。

セレクタをカンマ「,」で区切ることで、上記のように「h1」と「p」の両方にスタイルを適用することが出来ます。

上記の場合は、すべての「h1」タグと「p」の文字が青に変わります。

子要素にセレクタを指定する
ul li {
color: blue;
}

子要素にスタイルを指定することが出来ます。

セレクタ同士をスペースを空けることで、上記のように親要素「ul」タグの中にある子要素「li」タグにスタイルを適用することが出来ます。

上記の場合は、「ul」タグの中にある「li」タグの文字が青に変わります。

CSSファイルに書く

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<h1>ヒツジの日記</h1>
<p>今日は散歩しました。</p>
<p>今日は良い天気でした。</p>
</body>
</html>
h1 { color: red; }
p { color: blue; }
ヒツジの日記

今日は散歩しました。

とても良い天気でした。

CSSファイルの作成と読み込み

Visual Studio Codeの場合の動画です。

CSSファイルの作成

編集中のHTMLと同じ階層にCSSファイルを作成します。

Web練習フォルダ/
├index.html
└sample.css

テキストエディターでCSSファイル「sample.css」を新しく作成してスタイルを書きます。

CSSファイルを読み込む

HTMLのheadタグの中にCSSファイルを読み込むように設定します。

「link」タグを使ってCSSファイルの読み込み先を指定します。

linkタグ

ファイルを読み込むためのタグです。

Web練習フォルダ/
├index.html
└sample.css

linkタグでファイルを読み込んで、CSS(スタイルシート)として認識させます。

<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>

以上が基本となる3種類の書き方でした。

CSSファイルを作ると見やすさ抜群なのでおすすめです。

次はセレクタに関係する「クラス」と「ID」についてです。

クラスを利用する

<p class="hello">
やあ、みなさん。
</p>
<p class="hello">
こんにちは。
</p>
<p class="sheep">
ヒツジです。
</p>
<p class="sheep">
このサイトの主人です。
</p>
<p>
よろしくね！！
</p>
.hello {
color: red;
}
.sheep {
color: blue;
}

やあ、みなさん。

こんにちは。

ヒツジです。

このサイトの主人です。

よろしくね！！

クラスとは？
class="sheep"

クラスとは、CSSでスタイルする時にグループ分けするために使います。

HTMLの中に「class」という新しい目印を付け、「class」の名前でCSSスタイルをグループ分けすることが出来ます。

クラスを使ってスタイル

HTMLのタグの中にクラスを追加して、クラスを利用してCSSスタイルを書く事が出来ます。

  1. HTMLタグにクラスを追加

    HTMLのタグの中にクラス属性を追加して、好きな名前を付けます。

    下記では「sheep」というクラス名を付けました。

    <p class="sheep">
    ヒツジだよ。
    </p>
  2. クラス名でスタイルを書く

    HTMLで付けたクラス「sheep」を使ってCSSスタイルを書いていきます。

    CSSでクラスを使う時は必ずドット「.」を最初に付けて、その後にクラス名が来ます。

    下記では「.sheep」をセレクタに指定して、スタイルを適用させています。

    .sheep {
    color: blue;
    }

IDを利用する

<p id="birth">
ヒツジの誕生日は3月です。
</p>
<p id="favorite">
日向ぼっこが好きです。
</p>
<p>
覚えててね！！
</p>
#birth {
color: green;
}
#favorite {
color: blue;
}

ヒツジの誕生日は3月です。

日向ぼっこが好きです。

覚えててね！！

IDとは？
id="birth"

IDとは、HTMLの中に同じ名前が存在しない目印を付けるために使います。

IDの名前は重複が認めれていません。

そのため、影響がとても強い目印になります。

IDを使ってスタイル

HTMLのタグの中にIDを追加して、IDを利用してCSSスタイルを書く事が出来ます。

  1. HTMLタグにIDを追加

    HTMLのタグの中にID属性を追加して、好きな名前を付けます。

    下記では「birth」というID名を付けました

    <p id="birth">
    ヒツジの誕生日は3月です。
    </p>
  2. ID名でスタイルを書く

    HTMLで付けたID「birth」を使ってCSSスタイルを書いていきます。

    CSSでIDを使う時は必ずシャープ「#」を最初に付けて、その後にID名が来ます。

    下記では「#birth」をセレクタに指定して、スタイルを適用させています。

    #birth {
    color: green;
    }

クラスとIDの違い

クラスとIDの考え方
Class
ID

クラスとIDはどちらも目印を付ける点では同じ意味を持っていますが、細かいところで違いがあります。

クラスの考え方
Class

クラスはグループ分けのような使い方が出来ます。

CSSでこれからデザインをしていく上で、共通のデザインや共通のレイアウトが出てくるはずです。

そういった場合に、クラス名でグループ化してデザインを作っていく方法がよく使われます。

<ul>
<li class="family">ヒツジママ</li>
<li class="family"">ヒツジパパ</li>
<li class="family">ヒツジ</li>
<li class="friend">ネコ</li>
<li class="friend">ウマ</li>
</ul>
IDの考え方
ID

IDは特定のものだけに目印を付けるような使い方が出来ます。

主にJavaScript等でプログラムの実行結果を表示する際に、表示する箇所の目印として使われたりします。

例えば、下のコードでは「現在時刻」や「あなたの名前」を自動で書き換えるといった用途で使われます。

もちろん、ID名でCSSのスタイルを当てる使い方も可能です。

ですが、実際はClass名でスタイルを当てる方法が多く、ID名でCSSのスタイルを当てる方法はほぼ使いません。

<p id="time">現在は朝の8時半です。</p>
<p id="name">ヒツジさん</p>
クラスとIDの違い
使える回数の違い

1つのページ(HTMLファイル)につき、同じ名前が使える回数が異なります。

クラス名の使用可能回数

クラス名は同じ名前を何度も使用することが出来ます。

HTMLの中に同じ名前のクラスがある場合、CSSスタイルを共有することが出来ます。

下記のコードの場合、クラス名「hello」でグループ化され、共通のデザインとしてCSSのスタイルが当たるようになります。

<p class="hello">
やあ、みなさん。
</p>
<p class="hello">
こんにちは。
</p>
.hello {
color: red;
}
ID名の使用可能回数

IDは同じ名前を付けることが出来ません。

1つのページ(HTMLファイル)につき、IDの名前は重複がないようにします。

<p id="birth">
ヒツジの誕生日は3月です
</p>
<p class="favorite">
日向ぼっこが好きです。
</p>
#birth {
color: green;
}
#favorite {
color: blue;
}
優先順位の違い
  • Class
  • ID
  • Style属性

クラスとIDには、スタイルを適用する優先順位があります。

CSSでデザインしていく上で、CSSスタイルの重複が発生します。

クラスとIDのCSSが重複

クラスとIDの両方を指定した場合。

この場合はIDが優先されるため、「#green」のスタイルが適用されます。

<p class="red" id="green">
こんにちは。
</p>
.red {
color: red;
}
#green {
color: green;
}
IDのスタイル属性のCSSが重複

IDとStyle属性の両方を指定した場合。

この場合はがStyle属性が優先されるため、文字の色は青になります。

<p style="color: blue;" id="green">
こんにちは。
</p>
#green {
color: green;
}

以上がセレクタに関するクラスにIDの使い方でした。

ほとんどのサイトがクラスを利用してCSSスタイルを書いています。

クラスやIDの違いはこれから使っていくなかで理解が深まるはずです。

色をデザインする

それではCSSで色を変えてみましょう。

今回は文字の色と背景の色を変えてみます。

文字の色を変える

<p class="text">
おはようございます。
</p>
<p class="text2">
良い天気ですね。
</p>
.text {
color: red;
}
.text2 {
color: green;
}

おはようございます。

良い天気ですね。

color

「color」プロパティを使って文字の色を変えることが出来ます。

色を指定する時は、値に色の名前を指定することで変更することが出来ます。

red
orange
yellow
green
blue
white
gray
black

背景の色を変える

<p class="back">
HELLO
</p>
<p class="back2">
GOOD
</p>
.back {
background: orange;
}
.back2 {
background: green;
}

HELLO

GOOD

background

「background」プロパティを使って背景の色を変えることが出来ます。

色を指定する時は、値に色の名前を指定することで変更することが出来ます。

red
orange
yellow
green
blue
white
gray
black

色の変更は簡単でしたね。

色は名前のある色に限らず、細かな色を表現することが出来ます。

「RGB」「カラーコード」という方法で、細かい色を表現することが出来ます。

色の表現の仕方

色の表現

CSSで出来る色の種類は全部で1677万7216色あります。

すべての色に名前がついている訳ではないので、数字や文字で色を表現します。

RGB

RGBは数字で色合いを調節して色を表現します。

赤(Red),緑(Green),青(Blue)のそれぞれの色の濃さを「0〜255」で表現します。

「0」がその色がまったく無い状態(黒)、「255」がその色の一番濃い色ということになります。

赤(Red),緑(Green),青(Blue)の3つの色を混ぜて色を作っていきます。

Red:
Red Green Blue
255 0 0
Orange:
Red Green Blue
255 165 0
DarkOliveGreen:
Red Green Blue
85 107 47
white:
Red Green Blue
255 255 255
black:
Red Green Blue
0 0 0
/* White */
color : rgb(255,255,255);
background : rgb(255,255,255);
/* Black */
color : rgb(0,0,0);
background : rgb(0,0,0);
/* DarkOliveGreen */
color : rgb(85,107,47);
background : rgb(85,107,47);
カラーコード

カラーコードは英数字で色合いを調節して色を表現します。

RGBでは「0〜255」の数字で色を表現していました。

カラーコードでは「0〜9」「a〜f」の16個の英数字で色を表現します。

英数字２桁で赤(Red),緑(Green),青(Blue)のそれぞれの濃さを決めて、6桁の英数字で色を表現します。

Red:
#ff0000
Orange:
#ffa500
DarkOliveGreen:
#556b2f
White:
#ffffff
Black:
#000000

カラーコードを書くときは必ず「#」を前につけてから6桁の英数字を書きます。

/* White */
color : #ffffff;
background: #ffffff;
/* Black */
color : #000000;
background: #000000;
/* DarkOliveGreen */
color : #556b2f;
background: #556b2f;

配色はWebサイトの印象になるので、とても重要です。

好きな色をRGBやカラーコードに変換してくれるツールがあるので、検索して調べてみると良いと思います。

最後に鮮やかなグラデーションをやってみましょう。

グラデーションする

<p class="gradient">
グラデーション
</p>
.gradient {
background: linear-gradient(to right , #38a092 , #fdbf3b);
color: white;
}

グラデーション

グラデーション

グラデーションはいろんな色を鮮やかに変化させることが出来ます。

色の種類に制限はなく、何色でも混ぜることが出来ます。

linear-gradient

クラデーションするにはlinear-gradient関数というもの使います。

変化させたい「方向」と2種類以上の「色」を指定します。

色が変化していく方向はこのように指定します。

to right

左から右に色が変化します。

background: linear-gradient(to right,#38a092,#fdbf3b);
to bottom

上から下に色が変化します。

background: linear-gradient(to bottom,#38a092,#fdbf3b);
to right bottom

左上から右下に色が変化します。

background: linear-gradient(to right bottom,#38a092,#fdbf3b);
30deg

30度の角度で色が変化します。

background: linear-gradient(30deg,#38a092,#fdbf3b);
radial-gradient

中心から外側に向かって円形のグラデーションをすることが出来ます。

円形のグラデーションの場合は、変化させたい「色」を指定します。

background: radial-gradient(#38a092,#fdbf3b);

はい！！これで色に関するデザインの仕方は終わりです。

グラデーションを上手く取り入れると、印象が変わるのでおすすめですよ！！

大きさを変えよう

それではCSSで大きさを変えてみましょう。

大きさと言っても「文字の大きさ」と「要素の大きさ」があります。

「要素の大きさ」とは例えば画像の大きさを変えるといったことが出来ます。

まずは、文字の大きさから行きましょう！！

文字の大きさ

<p class="text-small">
小さなヒツジ
</p>
<p class="text-big">
大きなヒツジ
</p>
.text-small {
font-size: 14px;
}
.text-big {
font-size: 24px;
}

小さなヒツジ

大きなヒツジ

文字の大きさを変える
font-size

文字の大きさの変えるには「font-size」というプロパティを使います。

「font-size」に指定する値は固定値「px」で大きさを指定します。

px (固定値)
A
font-size: 5px

パソコンやスマホの画面はドットと呼ばれる小さなブロックが集まって文字や画像を表示しています。

その小さなブロックが「1px」になります。

「px」で指定された大きさは画面サイズに関わらず、固定値で指定されます。

ドットの大きさはHDや4Kなどの解像度によって大きさが変わります。

rem (可変値)
1rem = 16px

「rem」は比較的新しい単位で、倍率で指定することが出来ます。

font-sizeの初期値は「16px」なので、16pxの1倍の大きさが「1rem」になります。

例えば「0.5rem」と指定した場合は「8px」になり、「1.5rem」と指定した場合は「24px」になります。

「0.5rem」は「.5rem」の書き方でも可能です。

/* 16px */
p {
font-size: 1rem;
}
/* 8px */
p {
font-size: .5rem;
}
/* 24px */
p {
font-size: 1.5rem;
}
どうしてremを使うの？

「1rem」が「16px」と同じなら、最初から「16px」で指定したら良いと思うかもしれません。

remを使う理由は「分かりやすさ」と「編集のしやすさ」があるため、よく使われます。

  1. 分かりやすさ

    font-sizeの初期値が「16px」ということが分かっていれば、その何倍の大きさという感覚で指定することが出来ます。

    例えば、通常の文章が「1rem」の時に、タイトルは2倍の大きさ「2rem」を指定するといった感覚でfont-sizeを調整することが出来ます。

  2. 編集のしやすさ
    1rem = 16px
    1rem = 18px

    文字の大きさを「rem」にすると初期値の「16px」を基準にして倍率で指定されます。

    初期値の「16px」を「18px」に変更したら「rem 」の大きさは「18px」を基準に何倍と自動で再計算が行われます。

    「rem」で指定されていると、初期値の「16px」を変更するだけで全体のfont-sizeが連動して変更されます。

/* 初期値を18pxに上書き */
html {
font-size: 18px;
}
/* 36px */
h1 {
font-size: 2rem;
}
/* 18px */
p {
font-size: 1rem;
}

「rem」はとても便利ですが、最初は理解が難しいと思います。

ヒツジはCSSに慣れるまでは「px」を使って、その後「rem」を使うようになりました。

続いては、要素の大きさを変えてみましょう。

要素の大きさ

<div class="box">
BOX
</div>
.box {
width: 100%;
height: 150px;
color: white;
background: #01558d;
{
BOX
要素の大きさを変える
width
ボックス

要素の横幅を変えるには「width」というプロパティを使います。

「width」の値を「100px」や「100%」を指定して、大きさを調整します。

画像の大きさも変えることが出来ます。

.box {
width: 100px;
}
img {
width: 100%;
}
height
ボックス

要素の高さを変えるには「height」というプロパティを使います。

「height」の値を「150px」や「100%」を指定して、大きさを調整します。

.box {
height: 150px;
}
img {
height: 100%;
}
親要素と子要素

「width: 100%」「height: 100%」はなにが100%なのか疑問に思った方がいると思います。

その答えは「親要素」を基準にした大きさになります。

親要素とは？
<div>
<p></p>
<img>
</div>

「img」タグを基準に見た時に1つ上の階層の「div」タグが親要素になります。

反対に「div」タグを基準に見た時に1つ下の階層の「p」タグと「img」タグは子要素になります。

下記のような場合、親要素の「div」タグの大きさを「width: 150px」「height: 100px」にした時、子要素の「img」タグは親要素の同じ大きさ(100%)になります。

div {
width: 150px;
height: 100px;
}
img {
width: 100%;
height: 100%;
}

要素の大きさはとても重要です。

画面の外にはみ出ないように注意しながら作る必要があります。

レスポンシブデザインにするなら「%」でどの大きさの画面でも収まるようにしましょう。

枠線を作ろう

要素の周りに枠線を作ってみましょう。

文章を目立たせたい時やデザインのワンポイントによく使われます。

知っておくとお得です。

枠線の作成

<h2 class="title">
ヒツジの日記
</h2>
.title {
border: solid 1px black;
}
ヒツジの日記
ボーダーを作る

要素を囲った線は「ボーダー」は文章を強調させたり、デザインのワンポイントによく使われます。

ボーダーの「種類」「太さ」「色」は、自由にデザインすることが出来ます。

枠線の種類

ボーダーの種類は主に4種類あり、すべてCSSでデザインすることは可能です。

Solid - 線
Solid
.title {
border: solid 1px black;
}
double - 2本線
Double
.title {
border: double 4px black;
}
dashed - 破線
Dashed
.title {
border: dashed 1px black;
}
dotted - 点線
Dotted
.title {
border: dotted 1px black;
}
none - 線なし
None
.title {
border: none;
}
線の太さ

線の太さは「px」で指定します。

「px」の値が大きいほど、太い線になります。

.title {
border: solid 2px black;
}
線の色

線の色は「色の名前」「RGB」「カラーコード」の3つで指定することが出来ます。

  1. 色の名前

    赤を指定する時はこのように指定します。

    .title {
    border: solid 1px red;
    {
  2. RGB

    灰色をRGBで指定する時はこのように指定します。

    .title {
    border: solid 1px rgb(128,128,128);
    }
  3. カラーコード

    紺色をカラーコードで指定する時はこのように指定します。

    .title {
    border: solid 1px #223a70;
    }
  4. 色の指定なし

    ボーダーの色の指定がなかった時は文字の色と同じ色になります。

    例えば文字の色を紺色に指定してる時は、ボーダーの色も紺色になります。

    .title {
    color: #223a70;
    border: solid 1px;
    }
別々でボーダーを作る
Border

上下左右のボーダーは別々に作ることが出来ます。

上の線
Top

「border-top」プロパティでボーダーの上の線だけを作成します。

.title {
border-top: solid 2px black;
}
下の線
Bottom

「border-bottom」プロパティでボーダーの下の線だけを作成します。

.title {
border-bottom: solid 2px black;
}
左の線
Left

「border-left」プロパティでボーダーの左の線だけを作成します。

.title {
border-left: solid 2px black;
}
右の線
Right

「border-right」プロパティでボーダーの右の線だけを作成します。

.title {
border-right: solid 2px black;
}

実はボーダーは枠線を引くことだけじゃないですよ。

ボーダーは角を丸めたり、円を作ることも出来ます。

要素を丸める

<div class="corner">
角を丸めるよ！！
</div>
<div class="circle"></div>
.corner {
border: solid 1px black;
border-radius: 10px;
}
.circle {
width: 100px;
height: 100px
background: #01558d;
border-radius: 50%;
}
角を丸めるよ！！
要素の角を丸める
Border Radius

要素の角を丸めて柔らかい印象にしたり、円と作ってCSSでイラストを作ることが出来ます。

border-radius

要素の角も丸くするプロパティです。

値の数値が大きいほど円に近づくように丸くなります。

角を丸くする

「border-radius」に「px」または「%」で値を指定して、角を丸めます。

上記の場合は、値に「10px」を指定して4方向すべての角を「10px」の大きさで丸くします。

.corner {
border-radius: 10px;
}
円を作る

「border-radius」に「50%」の値を指定して、円を作ります。

4方向すべての角を、要素の半分の大きさ「50%」を指定することで円になります。

これでも円になる

円にするには要素の半分以上の大きさを「border-radius」の値に指定すると円になります。

例えばこのように「値」を指定しても円になります。

100%

「border-radius」の値を「100%」にしても円にすることが出来ます。

要素の半分以上の大きさ「50%〜100%」の値すべてが円になります。

.round {
border-radius: 100%;
}
200px

要素の大きさが決まっている場合、半分以上の大きさの値を指定した場合も円になります。

例えば「200px」の正方形を作成した時は、その半分以上の大きさ「100px〜200px」の値を指定すると円になります。

.round {
width: 200px;
height: 200px;
border-radius: 200px;
}

どうでしたか？結構簡単でしたね。

このヒツジが話してる吹き出しも「border-radius」を使っています。

柔らかい・優しい印象にしたい時は角を丸めると良いかもしれませんね。

余白をデザインする

それでは、余白を作っていきましょう。

余白には2種類あるのは覚えてますか？

内側と外側の2つ余白を作ることが出来ます。

余白の種類
おはよう
margin(マージン)
border(ボーダー)
padding(パディング)
contents(コンテンツ)

HTMLの要素(タグ)はすべては四角い箱のようなブロックで構成されています。

要素には4つの領域があり、それぞれ特有の役割があります

その中で「margin(マージン)」「padding(パディング)」が余白を作ることができる領域になります。

padding(パディング)
おはよう

ボーダーの内側にスペースを作る事が出来ます。

ボーダーとコンテンツの間にスペースを作る事で、文字の始まりを右にずらすといった事が出来ます。

margin(マージン)

ボーダーの外側にスペースを作る事が出来ます。

外側にスペースを作る事で、他の要素との間隔を空ける事が出来ます。

まずは「パディング」についてやっていきましょう。

「パディング」はボーダーの内側に余白を作ります。

内側の余白を作る

<div class="box">
BOX
<div>
.box {
border: solid 2px red;
background: #01558d;
color: white;
padding: 20px;
}
BOX
内側の余白を作りかた
padding

borderよりも内側にある余白を作ることが出来るプロパティです。

内側に余白を作ることでborderの枠線との間隔を空けたり、文字の開始位置をずらすことが出来ます。

paddingで作った余白は、「background」プロパティで指定した背景の色と同じ色になります。

上下左右に余白を作る
BOX

ボーダーの内側に上下左右「20px」の大きさの余白を作ります。

.box {
padding: 20px;
}
上下・左右に余白を作る
BOX

上下は「30px」の大きさ、左右は「20px」の大きさの余白を作ります。

値が2つ場合、1つ目は「上下」の大きさ、2つ目は「左右」の大きさが指定されます。

.box {
padding: 30px 20px;
}
上・下・左・右に余白を作る
BOX

上は「10px」右は「20px」下は「30px」左は「40px」の余白を作ります。

値が4つ場合は時計回りに余白は指定されます。

1つ目は「上」の大きさ、2つ目は「右」の大きさ、3つ目は「下」の大きさ、4つ目は「左」の大きさが指定されます。

.box {
padding: 10px 20px 30px 40px;
}
別々にパディングを指定する

パディングの上だけ大きさを変えたい、下だけ大きさを指定したい時があると思います。

そんな時は別々でパディングを指定することが出来ます。

上の余白だけを作る
BOX

「padding-top」プロパティで上に「20px」の余白を作成します。

.box {
padding-top: 20px;
}
下の余白だけを作る
BOX

「padding-bottom」プロパティで下に「20px」の余白を作成します。

.box {
padding-bottom: 20px;
}
左の余白だけを作る
BOX

「padding-left」プロパティで左に「20px」の余白を作成します。

.box {
padding-left: 20px;
}
右の余白だけを作る
BOX

「padding-right」プロパティで右に「20px」の余白を作成します。

.box {
padding-right: 20px;
}

次は「マージン」についてやっていきましょう。

「マージン」はボーダーの外側に余白を作ります。

外側の余白を作る

<div class="box">
要素1
</div>
<div class="box">
要素2
</div>
<div class="box">
要素3
</div>
.box {
background: #026996;
color: white;
border: solid 4px red;
margin: 20px;
}
要素1
要素2
要素3
外側の余白を作りかた
margin

borderよりも外側にある余白を作ることが出来るプロパティです。

外側に余白を作ることで要素同士の間隔を空けたり、要素を中央寄せすることが出来ます。

上下左右に余白を作る
要素

ボーダーの外側に上下左右「20px」の大きさの余白を作ります。

.box {
margin: 20px;
}
上下・左右に余白を作る
要素

上下は「30px」の大きさ、左右は「20px」の大きさの余白を作ります。

値が2つ場合、1つ目は「上下」の大きさ、2つ目は「左右」の大きさが指定されます。

.box {
margin: 30px 20px;
}
上・下・左・右に余白を作る
要素

上は「10px」右は「20px」下は「30px」左は「40px」の余白を作ります。

値が4つ場合は時計回りに余白は指定されます。

1つ目は「上」の大きさ、2つ目は「右」の大きさ、3つ目は「下」の大きさ、4つ目は「左」の大きさが指定されます。

.box {
margin: 10px 20px 30px 40px;
}
要素を中央寄せにする
要素

上下は「20px」の大きさ、左右は「auto」にして自動で余白を作ります。

「auto」は左右均等になるように余白が作られます。

その結果、要素を中心に持ってくることが出来ます。

.box {
margin: 20px auto;
}
別々にマージンを指定する

マージンの上だけ余白を作りたいときや、下だけ余白を作って要素同士の間隔を空けたい時に便利な方法です。

上下左右のマージンを別々に指定することが出来ます。

上の余白だけを作る
BOX

「margin-top」プロパティで上に「20px」の余白を作成します。

.box {
margin-top: 20px;
}
下の余白だけを作る
BOX

「margin-bottom」プロパティで下に「20px」の余白を作成します。

.box {
margin-bottom: 20px;
}
左の余白だけを作る
BOX

「margin-left」プロパティで左に「20px」の余白を作成します。

.box {
margin-left: 20px;
}
右の余白だけを作る
BOX

「margin-right」プロパティで右に「20px」の余白を作成します。

.box {
margin-right: 20px;
}

どうでしたか？

マージンとパディングの違いと使い方はなんとなくわかりましたか？

実際にCSSを書いていろいろ試してみるとよく分かりますよ！！

めげずに頑張っていきましょう。

透明度を変えよう

今度は透明度を変えてみましょう。

スクロールしたらふわっと文字が出てくるサイトを見たことありませんか？

あれは透明から元に戻して表現しています。

要素を透明にする

<div class="transparent">
透明
</div>
<div class="translucent">
半透明
</div>
.transparent , translucent {
margin: 10px 0;
padding-left: 10px;
background: #01558d;
color: white;
}
.transparent {
opacity: 0;
}
.translucent {
opacity: .5;
}
透明
半透明

違いがわかりやすいように透明度を交互に切り替えています。本来は透明・半透明のままです。

要素を透明にする
opacity

要素全体の透明度を変えるプロパティです。

値は「1」が不透明「0」が透明で設定出来ます。

透明度は「1〜0」の間で透け具合を調節することが出来ます。

透明
要素

要素を透明にする時は、opacityの値を「0」にして透明にします。

.transparent {
opacity: 0;
}
半透明
要素

要素を半透明にする時は、opacityの値を「0.9〜0.1」にして透明にします。

「0」に近いほど透明に近くなります。

「0.5」ような小数値は「.5」のように０を省略することが出来ます。

.transparent {
opacity: .5;
}
不透明
要素

要素を不透明にして見えるようにする時は、opacityの値を「1」にして不透明にします。

.translucent {
opacity: 1;
}
こんな時はスタイルが効かない
<div>
<p></p>
<img>
</div>

親要素のdivタグに「opacity」で透明にした時、子要素のpタグとimgタグも透明になります。

この時、子要素のimgタグを不透明に戻そうとしても親要素が優先されるため、画像は透明のままになります。

div {
opacity: 0;
}
img {
opacity: 1;
}

これで要素を透明にすることが出来ました。

要素全体ではなく、一部だけ透明にしたい時はどうすれば良いのでしょうか？

それは色を透明にすれば良いのです。

一部を透明にする

<div class="text">
Text
</div>
<div class="back">
Background
</div>
<div class="border">
Border
</div>
.text {
color: transparent;
}
.back {
background: rgba(255,255,255,0);
}
.border {
border: solid 1px #ffffff00;
}
Text
Background
Border

違いがわかりやすいように透明度を交互に切り替えています。本来は透明のままです。

一部を透明にする方法
透明に出来るもの

「color」「background」「border」など、色の指定が可能なすべてのプロパティで透明にすることが出来ます。

プロパティの値で「赤」や「青」などの色を指定していたところに「透明」の色を指定します。

透明の仕方

透明にする方法は全部で3つの方法があります。

との方法を使っても同じ結果になるので、好きな方法を使ってください。

transparent
red
orange
yellow
green
blue
white
gray
black
transparent

色の指定する時、赤なら「red」青なら「blue」と色の名前を指定しました。

それと同じように透明という意味の「transparent」を指定することで、色を透明にすることが出来ます。

.text {
color: transparent;
}
RGBa
rgba(0,0,0,.5)

RGBaとは、赤(Red),緑(Green),青(Blue)のRGBに透明度(alpha)を加えたものです。

書き方はRGBの時とほとんど変わらず、カンマ「,」で区切って指定します。

RGBaの4つ目の値に「opacity」の時と同様に、「1〜0」の間で透け具合を調節します。

.text {
color: rgba(0,0,0,.5);
}
カラーコード
#ffffff00

カラーコードはRGBを「#」から始まる6桁の英数字で表現する方法でした。

そこに透明度を表す英数字2桁を追加して8桁の英数字で色を表現します。

「ff」の時は不透明、「80」の時はは半透明、「00」の時は透明のように最後の英数字2桁で透明度を指定します。

.text {
color: #ffffff00;
}

以上、部分的に透明にする3つの方法でした。

ヒツジはよくRGBaを使います。

グラデーションと組み合わせると良い感じにおしゃれになりますよ！！

文字の中央寄せ

今度は文字の中央寄せをやってみましょう。

よくタイトルを中心に寄せたり、目立たせたい時にとても便利です。

<h1 class="text">
Text Center
</h1>
.text {
padding: 10px 0;
color: #01558d;
border-top: solid 2px;
border-bottom: solid 2px;
text-align: center;
}
Text Center
文字を寄せる
text-align

テキストを左寄せ・中央寄せ・右寄せに変更できるプロパティです。

なにも指定されていない時は左寄せに設定されています。

左寄せ
Left

文字を左寄せにします。

初期値は指定しなくも左寄せになります。

.text {
text-align: left;
}
中央寄せ
Center

文字を中央寄せにします。

長い文章などで文字の折り返し(改行)が発生した時は、折り返された文字も中央に寄ります。

.text {
text-align: center;
}
右寄せ
Right

文字を右寄せにします。

.text {
text-align: right;
}
効果は子要素に引き継がれる
<div>
<h2></h2>
<p></p>
</div>

「text-align」の効果は指定した要素とその子要素孫要素曽孫要素...と下の階層の要素にも適用されます。

親要素のdivタグに「text-align」で中央寄せした時、子要素のh2タグやpタグも中央寄せされます。

div {
text-align: center;
}

はい！！お疲れ様でした。

これでCSS初級編は終了です。

最後に、これらの復習もかねて実際にページを作ってみましょう。

実際に作ってみよう

制作時間 15分
難易度
使用した
HTMLタグ		 10種類
使用した
CSSプロパティ		 11種類
対応表 パソコン
スマホ

これまで紹介してきたCSS基本編のプロパティだけを使った実践的なWebページを作ってみました。

基本的なCSSだけでもスマホの画面でもレイアウトが崩れないWebページを制作出来ます。

これを作ってみたい方は下のリンクから作り方を紹介しています。

作ってみよう
CSS 中級編