2017.06.16 CSS 松本慶

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

ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう！】初心者向けホームページの作り方まとめ

今回は、これから自分でホームページ作成しようとCSSの勉強を始めた初心者の方向けに、CSSの基本と書き方やよく使うプロパティ一覧を紹介します。

HTMLを勉強したい方は「【初心者向け】知っておきたいHTMLの基本とよく使うタグ一覧」の記事をご参考ください。

前回、HTMLを勉強して簡単なWebページが作れるようになりました。ただ、もっと色をつけたり綺麗なサイトを作成したいんですがどうすれば良いのでしょうか？？

HTMLで作ったページを綺麗に装飾するにはCSSを利用します。ここでは、CSSの基本と書き方を説明していきますね。

【メルマガ登録はこちら！！】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室

1 CSSとは
- 1.1 HTMLのおさらい
- 1.2 HTMLとセットで使う言語CSS
2 CSSの3つの書き方
3 主なCSSプロパティ
4 まとめ

CSSとは

HTMLのおさらい

前回の記事(HTMLの基本とよく使うタグ)では、HTMLを使って「これは見出し」、「これは文章」、「これは画像」、「これはリンク」など定義していきました。

HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語のことです。

HTMLを人に例えると、「頭が一つ」あって、その中に「目が二つ」「鼻が一つ」「口が一つ」といったように人の構造を定義していくのと同じような感じでしたよね！

■人の構造の定義に例えたイメージ

もう少し具体的に言うと、HTMLでは<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って、「これは見出し」「これは文章」「これは画像」「これはリンク」など定義していきます。

HTMLで記述されたファイルをWebブラウザで開くと、ブラウザが上記の記述を解釈して、普段見ているWebページとして見ることができます。

このように、HTMLを使ってページを作成することを「マークアップする」とも言います。

しかし、普段見ているWebページはもっと色や配置が整っていて、綺麗な見た目になっているものが多いかと思います。

HTMLで定義した文書構造を綺麗な見た目にするためには、CSSという言語を利用します。

▲▲目次に戻る▲▲

HTMLとセットで使う言語CSS

HTMLで作成したWebページのスタイルを整えるため、CSS（Cascading Style Sheets）という言語を利用します。

HTMLとCSSは何が違うんですか??

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

■人に例えたイメージ

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

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>タグの中に下記のようにスタイルを記述します。

【例】

<!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>

■表示例

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

(※)media="screen"はあってもなくても構いません。
参考:●media属性を使った媒体別のスタイルシート

(※)セレクタとはスタイルを適用する対象のことです。h1やpなどのhtmlタグのほか後述で説明するid名やclass名などがあります。

■複数のプロパティの設定をする場合
インラインスタイルシート形式と同様にプロパティとプロパティの間に「;」で区切って設定値を何個でも足していくことができます。

■設定例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <style media="screen">
      h1{
        color:white;
        background-color:lightblue;
        border:4px solid skyblue;
      }
    </style>
  </head>
  <body>
    <h1>はじめてのCSS</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

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

h1{

color:white;

background-color:lightblue;

border:4px solid skyblue;

}

</style>

</head>

<body>

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

</body>

</html>

■表示例

■複数のセレクタに対してスタイルを設定する
複数のセレクタに対してスタイルを設定する場合は、下記のようにh1は赤文字でh2はオレンジで、といったように追記していきます。

■設定例

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

<!DOCTYPE html>

<html>

<head>

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

h1{

color:red;

}

h2{

color:orange

}

</style>

</head>

<body>

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

<h2>CSSの書き方</h2>

</body>

</html>

■表示例

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

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

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

▲▲目次に戻る▲▲

外部スタイルシートでのCSSの書き方

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

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

外部スタイルシートの読み込み設定

■CSSファイル側では下記のように記載します。

@charset "UTF-8";
セレクタ1{
プロパティ1:値;
プロパティ2:値;
…
}
セレクタ2{
　 …
}
・・・

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

■HTMLファイル側ではCSSファイルを参照する設定をします。headタグ内に以下のような記述をします。
<link rel="stylesheet" href="CSSファイルの格納場所(※)">

格納場所の指定方式は画像の格納場所の指定方法と同じです。
(相対パスの参考：画像の格納場所の指定方法 | HTMLの基本とタグの一覧

■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;

}

■表示例

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

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

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

▲▲目次に戻る▲▲

3つの方式の特徴まとめ

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

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

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

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

詳細は「知っておきたいCSSセレクタの優先順位・詳細度・継承」の記事をご参照ください。

▲▲目次に戻る▲▲

(補足)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>

■表示例

HTMLのタグを書く際に
<HTML要素名 id="任意のid名">
あるいは
<HTML要素名 class="任意のclass名">
と記述します。

CSS側では
id名を「 #id名」
class名を「 .class名」
で指定します。

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

▲▲目次に戻る▲▲

主なCSSプロパティ

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

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

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

▲▲目次に戻る▲▲

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

カテゴリ	プロパティ	意味
文字に関するスタイル	font-size	文字の大きさ(フォントサイズ)
	color	文字の色
	font-weight	文字の太さ
	font-family	文字の字体
	text-decoration	テキストの装飾
枠線に関するスタイル	border	枠線
	border-(※各辺)	枠線の各辺 (上top/下bottom/右right/左left)
	border-radius	枠の丸さ
背景に関するスタイル	background-color	背景の色
	background-image	背景の画像
	background-repeat	背景の画像の繰り返し
	background-position	背景画像の表示開始位置
	background-attachment	背景画像の固定・移動
	background-size	背景画像のサイズ
	background	背景全般
横幅と高さに関するスタイル	width	横幅
横幅と高さに関するスタイル	height	高さ
余白に関するスタイル	margin	外部余白
	margin-(※各辺)	外部余白の各辺 (上top/下bottom/右right/左left)
	padding	内部余白
	padding-(※各辺)	内部余白の各辺 (上top/下bottom/右right/左left)
ボックスサイズの算出方法を指定	box-sizing	枠線(border)や内部余白(padding)の大きさをwidthやheightに含めるかどうか
テキストに関するスタイル	text-align	水平方向の位置
テキストに関するスタイル	line-height	行の高さ
表示に関するスタイル	display	表示
位置に関するスタイル	position	位置
	top	上からの位置
	bottom	下からの位置
	left	左からの位置
	right	右からの位置
	z-index	重なりの順序指定
横並び(浮動)に関するスタイル	float	横並び(浮動)
横並び(浮動)に関するスタイル	clear	横並び(浮動)の解除
影に関するスタイル	box-shadow	ボックスの影
影に関するスタイル	text-shadow	テキストの影

▲▲目次に戻る▲▲

文字に関するスタイル

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

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

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

文字の大きさ(フォントサイズ) 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>

■表示例

文字の色(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>

■表示例

文字の太さ font-weight

文字の太さ

【書き方】 font-weight:値;
【例】 font-weight:bold;

■使用例 pタグを太文字にする

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <p style="font-weight:bold;">この文章は太文字です</p>  
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<p style="font-weight:bold;">この文章は太文字です</p>

</body>

</html>

■表示例

テキストの装飾 text-decoration

文字の装飾の指定方法

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

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

none	初期値。テキストに線などつけない。
underline	下線を付けます。
overline	上線を付けます。
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で指定できるフォント名一覧

▲▲目次に戻る▲▲

枠線 border

枠線 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>

■表示例

(補足)色々な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-color/種類border-style/太さborder-width

borderの代わりに、「border-color」、「border-style」、「border-width」でそれぞれ設定することもできます。

<h1 style="border-color:red;border-style:solid;border-width:5px">これは見出し</h1>

1	<h1 style="border-color:red;border-style:solid;border-width:5px">これは見出し</h1>

枠の丸さ border-radius

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

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

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

また、border-top-left-radius（左上の箇所）:xxxなどのように場所を指定すると下記のように左上だけ丸くすることもできます。

▲▲目次に戻る▲▲

背景 backgroundの基本

backgroundの基本　background-color background-image

背景「background」の基本的な使い方

背景「background」については、下記のような設定項目があります。

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

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

背景の色 background-color

【書き方】 background-color:値;
【例】 border: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>

背景画像 background-image

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

【書き方】 background-color:値;
【例】 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>

「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>

■表示例

高さ height

高さheight

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

縦の高さは「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>

■表示例

▲▲目次に戻る▲▲

余白に関するスタイル

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

項目	値
外部余白	margin	外部余白
外部余白	margin-(※各辺)	外部余白の各辺 (上top/下bottom/右right/左left)
内部余白	padding	内部余白
内部余白	padding-(※各辺)	内部余白の各辺 (上top/下bottom/右right/左left)

外部余白 margin

外部余白

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

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

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

■使用例 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-left:値; (左の外部余白)
margin-right:値; (右の外部余白)
margin-top:値; (上の外部余白)
margin-bottom:値; (下の外部余白)

marginの相殺

各要素間でmarginで余白を設定している時、外部余白は足し算になるのではなくどちらか大きい方の余白が採用されることに注意してください。

■marginの相殺の例

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSS</title>
    <style media="screen">
      .sample1{
        background-color: skyblue;
        margin-bottom:100px;
      }
      .sample2{
        background-color: pink;
        margin-top:100px;
      }
    </style>
  </head>
  <body>
    <div class="sample1">
      外部余白
      <br>
      下向きに100px;
    </div>
    <div class="sample2">
      外部余白
      <br>
      上向きに100px;
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

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

.sample1{

background-color: skyblue;

margin-bottom:100px;

}

.sample2{

background-color: pink;

margin-top:100px;

}

</style>

</head>

<body>

外部余白

<br>

下向きに100px;

</div>

外部余白

<br>

上向きに100px;

</div>

</body>

</html>

要素を真ん中寄せにする例 margin:autoを利用する

左側余白を自動(margin-left:auto)、右側余白も自動(margin-right:auto)のように、左右のmarginをそれぞれauto にすれば要素が真ん中寄せになります。

margin:〇〇px auto; (margin:autoでも可能)のように記述できます。

(対象の要素にwidthを指定している必要があります。widthはデフォルト100%のため、設定していないと真ん中寄せしていても変化はありません。上下に対するautoは効かないため0になります。)

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <div style="background:pink;width:400px;">
      400px<br>通常配置の<br>左寄せになっているボックス
    </div>

		<div style="background:skyblue;width:400px;margin:10px auto;">
      400px<br>margin:0 autoで<br>真ん中寄せしたボックズ
    </div>

  </body>
</html>

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

400px<br>通常配置の<br>左寄せになっているボックス

</div>

400px<br>margin:0 autoで<br>真ん中寄せしたボックズ

</div>

</body>

</html>

内部余白 padding

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

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

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

■使用例 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>

■表示例

以下のように個々に設定することもできます。

padding-left:値; (左の余白)
padding-right:値; (右の余白)
padding-top:値; (上の余白)
padding-bottom:値; (下の余白)

▲▲目次に戻る▲▲

ボックスの算出方法　border-box

枠線「border」や内部余白「padding」を横幅や高さに含めるかどうか、ボックスの算出方法に「border-box」を利用します。

項目	内容
content-box	枠線「border」や内部余白「padding」を横幅と高さに含めない（初期値）
border-box	枠線「border」や内部余白「padding」を横幅と高さに含める

■表示例

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
    <style media="screen">
      .box1{
        background:skyblue;
        width:400px;
        height:300px;
        padding: 100px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      横幅400 x 高さ300pxのボックス
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

.box1{

background:skyblue;

width:400px;

height:300px;

padding: 100px;

box-sizing: border-box;

}

</style>

</head>

<body>

横幅400 x 高さ300pxのボックス

</div>

</body>

</html>

▲▲目次に戻る▲▲

水平方向の位置 text-align

水平方向の位置 text-align

【書き方】 text-align:値;
【例】 text-align:center;

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

項目	値
text-align:left;	テキストを左揃えにします(初期値)
text-align:center;	テキストを中央揃えにします
text-align:right;	テキストを右揃えにします

■使用例

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

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<p style="text-align:right;border:1px brown solid;">左寄せになります</p>

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

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

</body>

</html>

■表示例

marginの真ん中寄せとtext-alignの中央揃えの違い

marginは自身の要素を真ん中寄せにするのに対して、text-align:centerは文字や画像などの中身を中央揃えにします。

■表示例

■上記のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
  </head>
  <body>
    <div style="background:pink;width:400px;text-align:center;">
      400px<br>通常配置の<br>左寄せになっているボックス
			<br>
			text-align:centerで文字を中央寄せ。
    </div>
		<div style="background:skyblue;width:400px;margin:10px auto;text-align:center;">
      400px<br>margin:0 autoで<br>真ん中寄せしたボックス
			<br>
			text-align:centerで文字を中央寄せ。
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

400px<br>通常配置の<br>左寄せになっているボックス

<br>

text-align:centerで文字を中央寄せ。

</div>

400px<br>margin:0 autoで<br>真ん中寄せしたボックス

<br>

text-align:centerで文字を中央寄せ。

</div>

</body>

</html>

▲▲目次に戻る▲▲

行間 line-height

一行の高さを指定するには、「line-height」を指定します。

指定できる値は「数字(倍率になります)」もしくは「px」です。

例えばフォントサイズが16pxの場合、「line-height:1.5」にすると24px(16*1.5)になります。line-height:24pxでも同じです。

■使用例

<p style="line-height:2">
  ウェブストエイトは大阪のWebスクールです。
  <br>
  本スクールの特徴は個人事業主様・経営者様向けで
  <br>
  自分のビジネス用のHPを自ら作成して、
  <br>
  ビジネスに活用することをコンセプトにしています。
</p>
<hr>
<p style="line-height:32px">
  初心者向けのセミナーや講座も開催しています。
  <br>
  ホームページ作成セミナーで検索順位1位。
  <br>
  自らWeb集客しながら教室を運営しています。
</p>

ウェブストエイトは大阪のWebスクールです。

<br>

本スクールの特徴は個人事業主様・経営者様向けで

<br>

自分のビジネス用のHPを自ら作成して、

<br>

ビジネスに活用することをコンセプトにしています。

</p>

<hr>

初心者向けのセミナーや講座も開催しています。

<br>

ホームページ作成セミナーで検索順位1位。

<br>

自らWeb集客しながら教室を運営しています。

</p>

■表示例

ウェブストエイトは大阪のWebスクールです。

本スクールの特徴は個人事業主様・経営者様向けで

自分のビジネス用のHPを自ら作成して、

ビジネスに活用することをコンセプトにしています。

初心者向けのセミナーや講座も開催しています。

ホームページ作成セミナーで検索順位1位。

自らWeb集客しながら教室を運営しています。

▲▲目次に戻る▲▲

表示に関するスタイル display

要素のブロックレベル・インライン等の表示形式を指定する際に「display」を使用します。

■HTML　ブロックレベル要素とインライン要素の違いと特徴

レイアウトを調整していく中で、インライン要素を使うけど高さと幅を指定したい、ブロックレベル要素を使うけど改行したくないというケースが出てきたときにCSSで「display」を利用できます。

displayプロパティには主に以下のような設定があります。

(他にも設定値はありますがここでは割愛します。)

項目	意味	備考
display:inline	指定した要素をインライン要素にする	改行なくなり横並びにできる。幅・高さ・上下余白を指定できない
display:block	指定した要素をブロックレベル要素にする	改行ができて縦並びになる。幅・高さ・余白を指定できる
display:inline-block	指定した要素をインラインとブロックレベルの中間の性質にする	インライン要素のように改行がつかず横並びになるが、ブロックレベル要素のように幅・高さ・余白を指定できる
display:none	指定した要素を非表示にする
(補足) display:table-cell	テーブルtableタグのtd要素のようにする
(補足) display:flex	最新のレイアウト技法「フレキシブルボックス」。柔軟な横並び・均等な高さを実現できる。	まだWebブラウザの対応状況に注意が必要

インライン要素・ブロックレベル要素の意味と違いおよび「display」について、より詳細な内容を「インライン要素・ブロックレベル要素とCSS「display」の使い方」に紹介していますので、こちらもご参照ください。

▲▲目次に戻る▲▲

位置に関するスタイル position

基準位置を設定してから、要素をpxや%で配置する方法として「position」というスタイルがあります。

positionで配置方法を指定しつつ、位置指定のプロパティ「top(上)、bottom(下)、left(左)、right(右)」と合わせて要素の位置を指定することができます。

■positionを利用した位置指定のサンプル

positionプロパティには主に以下の4つの設定があります。

項目	意味
position:static;	「position: static」は初期値です。通常の位置に配置されます（要素の順番に左上から配置されます)。後述のtop,bottomなどで位置を指定することができません。何も指定しない時はposition:staticになっているので明示的に指定するケースは少ないです。
position:relative;	「position:relative」を設定すると、もともと配置されるはずの場所を基準にtop,leftなどの位置指定ができるようになります。position:relativeは相対位置と言います。
position:absolute;	「position:absolute」を指定すると通常の配置から外れてブラウザ(body)が基準位置になります。親要素にposition:static以外の値を設定している場合は親要素の左上が基準位置になります。
position:fixed;	position:fixedを指定するとabsoluteと同様に、通常の配置から外れて親要素を基準点とした位置に強制的に配置されます。前述のabsoluteとの違いは、スクロールしても位置が固定されたままという点です。

また、positionによる位置指定とともに、具体的な位置(距離)指定に「top(上)、bottom(下)、left(左)、right(右)」を利用します。

positionについてのより詳細な内容を位置指定で使うCSSプロパティ「position」の使い方」に紹介していますので、こちらもご参照ください。

▲▲目次に戻る▲▲

横並び(浮動)に関するスタイル float

divタグなどのブロックレベル要素は基本的に上から下に向かって順番に縦に並んで表示されますが、これを左または右に寄せて横並びで配置したい場合は、「float」を利用して横並びにすることができます。

また、floatとセットで後ろの要素にclearプロパティを利用します。

floatとclearについては、より詳細な内容をCSSのfloatプロパティで要素を横並びにする方法」に紹介していますので、こちらもご参照ください。

▲▲目次に戻る▲▲

まとめ

今回は、ホームページを初めて作ろうとしている方向けに、CSSの書き方とまずはじめに覚えておきたい代表的なスタイルについて説明しました。

HTMLに加えてCSSの使い方を知っていると、ちょっとしたブログカスタマイズや見た目の調整ができるようになり、自分の思ったように作っていくことが可能になります。

他にも以下の記事が参考になるかと思います。

CSSのfloatプロパティで要素を横並びにする方法

CSS 知っておきたいCSS セレクタの優先順位・詳細度・継承

知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について

CSSメディアクエリとViewPortによるレスポンシブデザインの作り方

今回紹介したものは、ほんの一部になりますが、CSS 一覧　などで検索すると、ほかにもたくさんのプロパティがヒットします。

最近では、「CSS3」といって新しい便利なプロパティや使い方も利用できるようになったので、興味のあるかたはぜひいろいろ調べてみてください。

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

今回は以上になります。最後までご覧いただきありがとうございました。

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を！ /

詳しくはこちら

コメントを残すコメントをキャンセル

ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ立命館大学卒業。某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を！」という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」ホームページ