CSS超入門編

CSSとは
CSSの3つの書き方
主なCSSプロパティ
その他のCSSについて

CSSとは

また、Webページのスタイルを整えるため、HTMLとセットでCSS（Cascading Style Sheets）という言語もよく使います。

スタイルを整える？HTMLと何が違うんですか??

たとえば、HTMLが「目が二つ」「鼻が一つ」でといったように人の構造を定義する言語だとすると、CSSは「この人の目は二重にして、鼻の高さは2センチで」といったように人の見た目を調整する言語です。

■人に例えたイメージ

先ほどの例でいうと、具体的には「この見出しは赤文字で」「この文章のフォントは30pxで」「このグループは青線で囲む」などHTMLで定義した内容をどんな見た目に表示させるかを設定していきます。

CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。

HTMLは文書の構造を定義する言語、セットで使うCSSは文書の見た目を調整する言語という点を覚えておきましょう。

CSSの3つの書き方

CSSの書き方ですが、大きく3つの方式があります。

CSSの3つの書き方

インラインスタイルシート←今日実習する書き方
内部スタイルシート
外部スタイルシート

それでは、順番に説明していきます。

インラインスタイルシートでのCSSの書き方

インラインスタイルシート形式でのCSSの書き方

【書き方】 <html要素名 style="プロパティ(設定項目):設定値;">
【例】 <h1 style="color:red;">赤色の見出し</h1>

インラインスタイルシートでは、HTMLの各タグに直接記述します。

後ろのセミコロンは省略可能ですが、複数のプロパティを設定する場合は必須なので付けておく習慣づけをしておくと良いと思います。

■使用例

<h1 style="color:red;">はじめてのCSS</h1>

1	<h1 style="color:red;">はじめてのCSS</h1>

■表示例

■複数のプロパティを設定する場合
「文字は赤色で背景は水色で」といったように複数の設定値を入れる場合は、プロパティとプロパティの間に「;」で区切って何個でも足していくことができます。

■使用例　文字色が白色で背景がライトブルーで枠線がスカイブルー

<h1 style="color:white;background-color:lightblue;border:4px solid skyblue;">はじめてのCSS</h1>

1	<h1 style="color:white;background-color:lightblue;border:4px solid skyblue;">はじめてのCSS</h1>

■表示例

インラインスタイルシート形式の場合、以下の特徴があります。

インラインスタイルシート形式の特徴

各タグにそれぞれ個別に設定できる
「pタグは全て青文字」のように共通で設定できないので、都度設定する手間がかかる

(補足)内部スタイルシートでのCSSの書き方

内部スタイルシート形式でのCSSの書き方

【例】 headタグ内にstyleタグを作って記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <style media="screen">
      h1{
        color:red;
      }
    </style>
  </head>
  <body>
    <h1>はじめてのCSS</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

h1{

color:red;

}

</style>

</head>

<body>

<h1>はじめてのCSS</h1>

</body>

</html>

■表示例

(※)改行や半角スペースあってもなくても構いませんが、見やすさを考慮して改行しています。

内部スタイル形式は、下記のような特徴があります。

内部スタイルシート形式の特徴

1枚のWebページ全体にスタイルを適用できる
複数のWebページ共通で適用できない（各ファイルに同様の記述をしないといけない)

(補足)外部スタイルシートでのCSSの書き方

最後に３つ目の書き方は、外部に作ったCSSファイルを参照する方式です。

任意の名前のCSSファイル(例. style.css)を作成してそこにCSSを記述します。
また、HTMLファイル側では作成したCSSファイルを参照する設定をします。

■HTMLファイルの例 cssフォルダにあるstyle.cssを参照

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>はじめてのCSS</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

<h1>はじめてのCSS</h1>

</body>

</html>

■外部CSSファイル(style.css)

@charset "UTF-8";
h1{
  color:red;
}

@charset "UTF-8";

h1{

color:red;

}

(※)先頭の@charset "UTF-8";は文字コードの設定(おまじないのようなもの)です。それ以外は内部スタイルシートの場合と同じような書き方になります。

■表示例

外部スタイルシートの場合は、下記のような特徴があります。

外部スタイルシート形式の特徴

複数のHTMLファイルで同じCSSファイルを利用できる(何か変更したい場合に、一つのCSSファイルの変更で済む)

3つの方式の特徴まとめ

CSSの3つの書き方の特徴のまとめです。

方式	メリット	デメリット
インラインスタイルシート	各タグにそれぞれ個別に設定できる	タグ共通で設定したい場合は、各タグ個別に設定する必要があるので面倒臭い
内部スタイルシート	1枚のWebページ全体にスタイルを適用できる	複数のWebページ共通で適用できない（各ファイルに同様の記述をしないといけない)
外部スタイルシート(CSS)ファイル参照	各ページで共通して一つのcssファイルを読み込める(何か変更したい場合に一つのCSSファイルの変更で済む)	慣れないうちはインライン形式・内部スタイルシートに比べてHTMLタグへの指定方法が少し難しい。

なお、インラインスタイルシート、内部スタイルシート、外部スタイルシートは併用ができます。

競合する設定をしている場合は、優先順位があるのでそれにしたがってスタイルが適用されます。

(補足)HTMLにつけるid属性とclass属性について

さて、htmlの各タグにはid属性やclass属性というものが設定できます。

例
<h1 id="top-h">はじめてのCSS</h1>
<p class="blue-text">この文章は青色になります</p>

idやclassを設定することでCSSでレイアウト装飾する際に「このid名がついているタグは背景を赤色にする」、あるいは「このclass名がついているタグは文字色を青色にする」などの指定ができるようになります。

■記述例 (内部スタイルシート形式で記述)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <style media="screen">
      #top-h{
        background: red;
      }
      .blue-text{
        color:blue;
      }
    </style>
  </head>
  <body>
    <h1 id="top-h">はじめてのCSS</h1>
    
    <p class="blue-text">この文章は青文字になっています</p>
  
    <h2 class="blue-text">この見出しも青文字になっています</h2>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

#top-h{

background: red;

}

.blue-text{

color:blue;

}

</style>

</head>

<body>

<h1 id="top-h">はじめてのCSS</h1>

<p class="blue-text">この文章は青文字になっています</p>

<h2 class="blue-text">この見出しも青文字になっています</h2>

</body>

</html>

■表示例

(※)idはHTMLファイル内で一意である必要があり、classは一意でなくとも構いません。

主なCSSプロパティ

CSSの書き方はわかりました。意味は分かったので覚えればなんとかなりそうです(笑)
つぎは、具体的なCSSの設定項目とかをもっと教えて欲しいです。

ではつぎに実際によく使うCSSの設定項目や設定値について説明していきますね。

ここまでCSSの書き方について説明しました。ここからはよく使う有名なCSSプロパティを説明していきます。

よく使うCSSプロパティ一覧

class=”table table-hover table-bordered”

カテゴリプロパティ意味文字に関するスタイル font-size 文字の大きさ(フォントサイズ) color 文字の色 text-decoration テキストの装飾 font-family 文字の字体枠線に関するスタイル border 枠線背景に関するスタイル background-color 背景の色 background-image 背景の画像横幅と高さに関するスタイル width 横幅 height 高さ余白に関するスタイル margin 外部余白 padding 内部余白

文字に関するスタイル

ここでは、文字に関する代表的なスタイル(文字の大きさ、文字の色、文字の装飾、文字の字体)について説明していきます。

文字に関する代表的なスタイル

文字の大きさ font-size
文字の色 color
文字の装飾 text-decoration
文字の字体 font-family

文字の大きさ(フォントサイズ) font-size

文字の大きさ(フォントサイズ)の指定方法

【書き方】 font-size:値;
【例】 font-size:20px;

値の単位は簡単な「px」をまず覚えましょう。（他にも基準サイズに対して比率で算出する方式でrem、emや%などがあります。）

■使用例　pタグのフォントサイズを40pxにする(インラインスタイルシート形式)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <p style="font-size:40px;">この文章のフォントサイズは40pxです。</p>  
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

<p style="font-size:40px;">この文章のフォントサイズは40pxです。</p>

</body>

</html>

■表示例

■演習
pタグにフォントサイズ40pxで文章を書いてみましょう。

文字の色(color)

文字の色の指定方法

【書き方】 color:値;
【例】 color:red;またはcolor:#ff0000;など

値は「red」「blue」などのように色で指定することもできますし、RGBの16進数表記「例. #FF0000」で指定することもできます。

「red」、「blue」など有名な色は前者で指定できるのに対して、#FF0000などの16進数では合計16,777,216通りの細かい色を設定することができます。

■参考：
ウェブカラーで各色の単語がわかります。
Color wheel | Color schemes – Adobe Color CCで自分の好きな色を調整することができます。

■使用例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <h1 style="color:blue">青色の見出しだ！！</h1>  
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

<h1 style="color:blue">青色の見出しだ！！</h1>

</body>

</html>

■表示例

■演習
h1タグに青色文字で文章を書いてみましょう。

(※)できた方はオレンジ色・赤色・#00ff00などでも試してください。

テキストの装飾(text-decoration)

文字の装飾の指定方法

【書き方】 text-decoration:値;
【例】 text-decoration:line-through; (打ち消し線)

テキストに下線・上線・打ち消し線を付けたりするにはtext-decorationで指定します。

text-decoration:none	初期値。テキストに線などつけない。
text-decoration:underline	下線を付けます。
text-decoration:overline	上線を付けます。
text-decoration:line-through	打ち消し線を付きます。

■text-decorationのサンプル

  <p>
    何もなし。
    <span style="text-decoration:underline">下線</span>
    <span style="text-decoration:overline">上線</span>
    <span style="text-decoration:line-through">打ち消し線</span>
  </p>

<p>

何もなし。

<span style="text-decoration:line-through">打ち消し線</span>

</p>

■表示例

(補足)文字の字体 font-family

文字の種類(フォントファミリー)

【書き方】 font-family:値;
【例】 font-family:'Hiragino Mincho ProN','ＭＳ明朝',serif;

｢ＭＳゴシック｣や｢ＭＳ明朝｣のようにフォント名で指定します。フォント名にスペースが含まれている場合はシングルクォーテーション（ ' ）で囲みます。

（またはダブルクォーテーション（ " ）で囲むこともできますが、インラインスタイルシート形式でstyle=""でくくっている場合は、シングルコーテーション（'）を使用してください。）

■使用例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <h1 style="font-family:'Hiragino Mincho ProN','ＭＳ 明朝',serif">明朝体の見出し</h1>  
    <h1>通常の見出し</h1> 
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

<h1 style="font-family:'Hiragino Mincho ProN','ＭＳ明朝',serif">明朝体の見出し</h1>

<h1>通常の見出し</h1>

</body>

</html>

■表示例

(補足)フォントタイプは少し複雑で、複数の値を記述することができます。値をカンマ（ , ）で区切って複数の候補を並べます。

例えば、MS明朝はWindowsにあるけどもMacにないフォントであるため、Macで明朝体を表示できません。

そこで「’Hiragino Mincho ProN’,’ＭＳ明朝’,serif」のように複数記述することで、「左から順番にフォントが閲覧している端末に適用し、なければ次に書いてあるフォントを適用する」といったような使い方をします。

上記例では、MacではHiragino Mincho ProNが適用されて、WindowsではMＳ明朝が適用されて、どちらもない場合はserifを使うといった形になります。

(※参考)font-familyで指定できるフォント名一覧

水平方向の位置 text-align

行揃えの位置を指定する場合は、「text-align:値;」で設定します。

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

text-align:left; 左寄せにします。
text-align:right;右寄せにします。
text-align:center; 中央揃えにします。

■使用例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <p style="text-align:left;">左寄せになります</p>
    <p style="text-align:center;">中央揃えになります</p>
    <p style="text-align:right;">右寄せになります</p>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

<p style="text-align:left;">左寄せになります</p>

<p style="text-align:center;">中央揃えになります</p>

<p style="text-align:right;">右寄せになります</p>

</body>

</html>

■表示例

■演習
pで左寄せした文章、右寄せした文章、中央揃えした文章をそれぞれ書いてみましょう。

枠線に関するスタイル

枠線 borderの基本的な使い方

枠線 border

【書き方】 borer:枠線の色の値枠線の種類の値枠線の太さの値;
【例】 border:red solid 2px;
(※)値は半角スペースで区切ります。順不同でどれから先に書いても構いません。

項目	内容
色	redなどの色指定、または#ff0000などの16進数表記
種類	なし(初期値)「none」 1本の実線「solid」 2本の実線「double」点線「dotted」破線「dashed」
枠線の太さ	2pxなど　〇〇pxで設定

■使用例見出しに赤色・実線・太さ5pxの枠がついている

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <h1 style="border:red solid 5px;">これは見出し。赤の枠内にあります。</h1>  
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

<h1 style="border:red solid 5px;">これは見出し。赤の枠内にあります。</h1>

</body>

</html>

■表示例

■演習
h1タグに書いた文章に枠線を書いてみましょう。

枠の色、枠の種類、枠の太さなど色々変えて表示の変化を確認して見ましょう。

(補足)色々なborderの使い方

特定の辺だけ枠線をつける

【上辺の枠】 border-top
【底辺の枠】 border-bottom
【左辺の枠】 border-left
【右辺の枠】 border-right

例 border-top:red solid 5px;

例 border-bottom:red solid 5px;

例 border-left:red solid 5px;

例 border-right:red solid 5px;

枠の丸さ border-radius

border-radiusを利用するとborderで作った枠線の角を丸くする事ができ、円も作る事もできます。

border-radius:30px とした場合、すべての角が30pxになります。

border-radius:50%と指定した場合は、50%=円の半径で下記のように円になります。

■例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <h1 style="border:red solid 5px;border-radius:20px;">これは見出し。赤の枠内にあります。</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

<h1 style="border:red solid 5px;border-radius:20px;">これは見出し。赤の枠内にあります。</h1>

</body>

</html>

■表示例

背景に関するスタイル

つぎに、背景に関する基本のスタイルを説明していきます。

背景の色 background-color

【書き方】 background-color:値;
【例】 background-color:pink;

値の色は「blue」や「red」など色を直接指定する方法や16進数表記「#FF0000」、透明度を設定できる「rgba(255,0,0,0.5)」などの指定方法がよく使われます。

■表示例

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body style="background-color:pink;">
    <h1>ピンク色の背景が全体にかかっています。</h1>  
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<h1>ピンク色の背景が全体にかかっています。</h1>

</body>

</html>

■演習
Webページ全体(body)の背景をピンクにしてみましょう。

背景全てをピンクにできたら、背景色を変えたり、他のHTMLタグに背景を設定して見ましょう。

背景画像 background-image

background-image:url(画像の場所);

【書き方】 background-image:値;
【例】 background-image: url(images/sample.jpg);

画像の場所は、「http://xxxxx.com/xxxx/sample.jpg」のように絶対パスで指定する方法と「images/sample.jpg」のように相対パスで指定する方法があります。

■表示例

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body style="background-image: url(https://webst8.com/blog/wp-content/uploads/2018/03/pattern0740.jpg);">
    <h1>背景を設定</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<h1>背景を設定</h1>

</body>

</html>

■演習
Webページ全体(body)の背景に画像を入れてみましょう。
画像は、https://webst8.com/blog/wp-content/uploads/2018/03/pattern0740.jpg を利用して下さい。

背景「background」に関するいろいろな設定

背景「background」については、上記以外にも色々な設定項目があります。

カテゴリ	プロパティ	意味
背景に関するスタイル	background-color	背景の色
	background-image	背景の画像
	background-repeat	背景の画像の繰り返し
	background-position	背景画像の表示開始位置
	background-attachment	背景画像の固定・移動
	background-size	背景画像のサイズ
	background	背景全般

「background」関連プロパティについてのより詳細な内容を「https://webst8.com/blog/css-background/」に紹介していますので、こちらもご参照ください。

横幅widthと高さheight

つぎに、横幅と高さに関するスタイルを説明していきます。

横幅 width

横幅width

【書き方】 width:値;
【例】 width:300px;

横幅の単位は「px」や「%」があります。pxの場合は固定値です。%は親要素に対する割合(body直下のHTML要素の場合はブラウザサイズに対する割合)です。

■使用例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <div style="width:400px;background:yellow;">
      横幅400pxの黄色のdiv
    </div>
    <br>
    <div style="width:90%;background:yellow;">
      横幅400pxの黄色のdiv
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

横幅400pxの黄色のdiv

</div>

<br>

横幅400pxの黄色のdiv

</div>

</body>

</html>

■表示例

■演習
divタグに横幅400pxで設定して、中に文章を書いて見ましょう。
わかりやすくするためにdivタグの背景を黄色にしてみましょう。

確認ができたら、横幅サイズを変えてみて動きを確認してください。

高さ height

縦の高さは「height:値;」で設定します。

横幅と同様に単位は「px」や「%」などがあります。

(注)heightの%利用は難しく、親要素の%を明示していないとうまく表示されないためご注意ください。
分かりにくいCSS height のパーセント設定のまとめ

■使用例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <div class="height:400px;background:yellow;">
      高さ400pxの黄色のdiv
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

高さ400pxの黄色のdiv

</div>

</body>

</html>

■表示例

■演習
divタグに高さ400pxで設定して、中に文章を書いて見ましょう。
わかりやすくするためにdivタグの背景を黄色にしてみましょう。

確認ができたら、縦幅サイズを変えたり、追加で横幅サイズ(width)も設定して動きを確認してみてください。

余白に関するスタイル

外部余白 margin

余白には要素外部に設定する外部余白(margin)と要素内部に設定する内部余白(padding)の2つがあります。

外部余白

【書き方】 margin:値;
【例】 margin:200px;

■使用例 divタグの外部余白を100pxとる

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <div style="margin:100px;border:5px green solid;">
      外部余白100pxになっています。
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

外部余白100pxになっています。

</div>

</body>

</html>

■表示例

各要素に適用されているmarginはChromeの検証ツールを利用して、視覚的に確認することができます。

marginの値の基本は「px」です。「%」を使うこともできます。値は半角スペースで区切って複数設定することができます。

項目	内容
margin:値;	上下左右で指定した値の余白が設定されます。例 margin:100px → 上下左右に100pxの外部余白
margin:値1 値2;	「値1が上下」「値2が左右」の余白が設定されます。例 margin:100px 50px → 上下に100px・左右に50pxの外部余白
margin:値1 値2 値3;	「値1が上」「値2が左右」「値3が下」の余白が設定されます。例 margin:100px 150px 200px → 上に100px・左右に150px・下に200px
margin:値1 値2 値3 値4;	記述順に上右下左と余白が設定（時計周り）されます。例 margin:100px 150px 200px 250px → 上に100px・右に150px・下に200px・左に250px

なお、marginは、以下のように方向を指定して個々に設定することもできます。

項目	内容
margin-left:値;	要素の左側の外部余白を指定します。例 margin-left:100px → 左側に100pxの外部余白
margin-right:値;	要素の右側の外部余白を指定します。例 margin-right:100px → 右側に100pxの外部余白
margin-top:値;	要素の上側の外部余白を指定します。例 margin-top:100px → 上側に100pxの外部余白
margin-bottom:値;	要素の下側の外部余白を指定します。例 margin-bottom:100px → 下側に100pxの外部余白

■演習
divタグに外部余白100pxで設定して、中に文章を書いて見ましょう。
わかりやすくするためにdivタグに緑色の枠線をつけて見ましょう。
確認ができたら、marginに値を複数設定(2つ、4つ)して動きを確認してみてください。

参考サイト)https://webst8.com/blog/css-margin/

内部余白 padding

【書き方】 padding:値;
【例】 padding:200px;

■使用例 divタグの内部余白を100pxとる

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <div style="padding:100px;border:5px green solid;">
      内部余白100pxになっています。
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

</head>

<body>

内部余白100pxになっています。

</div>

</body>

</html>

■表示例

値の単位は「px」です。外部余白marginと同様に複数の値を設定することができます。

項目	内容
padding:値;	上下左右で指定した値の余白が設定されます。例. padding:100px;
padding:値1 値2;	「値1が上下」「値2が左右」の余白が設定されます。例. padding:100px 200px;
padding:値1 値2 値3 値4;	記述順に上右下左と余白が設定（時計周り）されます。例. padding:100px 150px 200px 250px;

なお、各要素に適用されているmarginはChromeの検証ツールを利用して、視覚的に確認することができます。

paddingはHTML要素の内側に余白を取るから、「内部余白」っていうんですね。

paddingの値の基本は「px」です。値は半角スペースで区切って複数設定することができます。

項目	内容
padding:値;	上下左右で指定した値の余白が設定されます。例 padding:100px → 上下左右に100pxの外部余白
padding:値1 値2;	「値1が上下」「値2が左右」の余白が設定されます。例 padding:100px 50px → 上下に100px・左右に50pxの外部余白
padding:値1 値2 値3;	「値1が上」「値2が左右」「値3が下」の余白が設定されます。例 padding:100px 150px 200px → 上に100px・左右に150px・下に200px
padding:値1 値2 値3 値4;	記述順に上右下左と余白が設定（時計周り）されます。例 padding:100px 150px 200px 250px → 上に100px・右に150px・下に200px・左に250px

なお、paddingは、以下のように方向を指定して個々に設定することもできます。

項目	内容
padding-left:値;	要素の左側の外部余白を指定します。例 margin-left:100px → 左側に100pxの外部余白
padding-right:値;	要素の右側の外部余白を指定します。例 padding-right:100px → 右側に100pxの外部余白
padding-top:値;	要素の上側の外部余白を指定します。例 padding-top:100px → 上側に100pxの外部余白
padding-bottom:値;	要素の下側の外部余白を指定します。例 padding-bottom:100px → 下側に100pxの外部余白

■演習
divタグに内部余白100pxで設定して、中に文章を書いて見ましょう。
わかりやすくするためにdivタグに緑色の枠線をつけて見ましょう。
確認ができたら、paddingに値を複数設定(2つ、4つ)して動きを確認してみてください。

参考)https://webst8.com/blog/css-padding/

その他のCSSについて

ここでは割愛しますが、そのほかのCSSについては下記に詳しく載せています。またお時間のある時に確認してみて下さい。

【CSSの基本】CSSの基本とプロパティ一覧

レッスン一覧

CSSとは

CSSの3つの書き方

インラインスタイルシートでのCSSの書き方

(補足)内部スタイルシートでのCSSの書き方

(補足)外部スタイルシートでのCSSの書き方

3つの方式の特徴まとめ

(補足)HTMLにつけるid属性とclass属性について

主なCSSプロパティ

よく使うCSSプロパティ一覧

文字に関するスタイル

文字の大きさ(フォントサイズ) font-size

文字の色(color)

テキストの装飾(text-decoration)

(補足)文字の字体 font-family

水平方向の位置 text-align

枠線に関するスタイル

枠線 borderの基本的な使い方

(補足)色々なborderの使い方

枠の丸さ border-radius

背景に関するスタイル

背景の色 background-color

背景画像 background-image

背景「background」に関するいろいろな設定

横幅widthと高さheight

横幅 width

高さ height

余白に関するスタイル

外部余白 margin

内部余白 padding

その他のCSSについて