初心者がはじめに覚えておきたい CSS の基本とプロパティ一覧

 

  1. 1. CSSとは
  2. 2. CSSの書き方
  3. 3. 主なCSSプロパティ
  4. 4. まとめ

 

CSSとは

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

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

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

CSSとは、Cascading Style Sheetsの略で、Webページのスタイル(見た目)を指定する言語です。先ほどのHTMLと一緒に使います。
 

たとえば、
 

「この見出しは赤文字で」
「この文章のフォントは30pxで」
「このグループは青線で囲む」
 

など、HTMLで定義した内容をどんな見た目で表示させるかを設定していきます。
 

HTML入門 基本構造 CSS
 

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

HTML入門 CSS適用 ブラウザ表示時

 
 

2. CSSの書き方と方式

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

CSSの3つの方式 インラインスタイルシート 内部スタイルシート 外部スタイルシート
 

  • 1.インラインスタイルシート
  • 2.内部スタイルシート
  • 3.外部スタイルシート

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

2-1. インラインスタイルシート

インラインスタイルシート形式 例 style="color:red"
 

一つ目の方法が、下記のようにHTMLの各タグに直接記述する方法です。


 

■使用例

 

■表示例
はじめてのCSS 見出しが赤文字に
 

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

インラインの場合は、HTMLタグの中に以下のように記述します。プロパティとプロパティの間は「;」で区切って何個でも足していくことができます。

 

■使用例

 

■表示例
はじめてのCSS 赤色文字 水色背景 横幅50%
 

インライン形式の場合、以下の特徴があります。

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

 
 

2-2.内部スタイルシート

内部スタイルシート形式
2つ目が、htmlのheadタグの中にまとめてスタイルを記述する方法です。
 

具体的には、<head>タグの間に<style>〜〜</style>を作ってその中に下記のようにスタイルを記述します。
 

内部スタイルシート CSS のプロパティの書き方
 

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

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

■使用例

で記述します。
 

■表示例
はじめてのCSS 見出しが赤文字に
 
 

内部スタイルシートの書き方

内部スタイルシートの場合はheadタグ内に下記のように記述します。
 

内部スタイルシート CSS のプロパティの書き方
 

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

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

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

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

 
 

2-3. 外部スタイルシート

外部スタイルシート(CSSファイル)参照
 

最後に、外部に作ったCSSファイルを参照する方式です。
 

下記のようにHTMLファイルのheadタグの中に外部のCSSファイルを参照する設定します。

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

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

 

<link rel=”stylesheet” href=”CSSファイルの格納場所”>
 

格納場所の指定は、通常相対パスという形式で指定します。
(相対パスの参考:初心者がはじめに覚えておきたいHTMLの基本とタグの一覧 | 画像の格納場所の指定方法
 

■使用例
HTMLファイル

 

外部CSSファイル(styles.css)

 

■表示例
はじめてのCSS 見出しが赤文字に
 

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

外部スタイルシートでは、下記のように記載します。
 

@charset “UTF-8”;
セレクタ1{
プロパティ1:値;
プロパティ2:値;

}
セレクタ2{
  …
}
・・・

 

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

外部CSSファイルの場合は、下記のような特徴があります。

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

 

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

(ここでは詳しく説明しませんが、同じ箇所に異なる設定をしている場合は、優先順位があるので、それにしたがってスタイルが適用されます)。
 

2-4. 3つの方式の特徴まとめ

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

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

 
 

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

HTMLにつけるid属性とclass属性
 

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


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

 

idやclassを設定することでCSSでレイアウト装飾する際に
 

「このid名がついているタグは背景を赤色にする」
 

あるいは
 

「このclass名がついているタグは文字色を青色にする」
 

などの指定ができるようになります。
 

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

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

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

 

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

 

■表示例
CSS サンプルid名がtop-hとついているタグの背景が赤色、class名がblue-textと付いているタグが青文字
 
 

3. 主なCSSプロパティ

主要なCSSプロパティ 文字・枠・背景・幅高さ・余白・位置など
 

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

3-1. 文字に関するスタイル

文字に関するスタイルの説明
 

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

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

フォントサイズを60pxにする例
 

文字の大きさ(フォントサイズ)はfont-size:値;で指定します。
 

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

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

 

■表示例
pタグのフォントサイズ 40pxのサンプル
 
 

3-1-2. 文字の色(color)


 

文字の色は「color:値;」で指定します。
 

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

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

参考:ウェブカラー
 

■使用例

 

■表示例
h1タグの文字色が青色のサンプル
 
 

3-1-3. 文字の太さ font-weight

フォントを太文字にする例
 

文字の太さは「font-weight:値;」で指定します。
 

最もよく使うのは「font-weight:bold;」で太文字になります。
 

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

 
 

■表示例
フォントの太さを太文字にする
 
 

3-1-4. 文字の字体 font-family

cssサンプル フォントファミリーをMS 明朝にする例
 

文字の種類(フォント)は「font-family:値;」で指定します。
 

「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合はシングルクォーテーション( ‘ )で囲みます。
 

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

■使用例

 

■表示例

 

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

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

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

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

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

3-2. 枠線 border

枠線の説明
 

枠線はborderで色や種類、太さを指定します。
 

3-2-1. 枠の色・種類・太さ border

borderで枠線の設定
 

枠線は「border:枠線の色の値 枠線の種類の値 枠線の太さの値」で設定します。
 

例) border:red solid 5px;  (※)solidは実線

値は半角スペースで区切ります。順番は順不同でどれを先に書いても構いません。
 

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

■表示例
h1に赤色・実線・太さ5pxの枠がついている
 
 

borderで枠の色、種類、太さをまとめて指定しましたが、それぞれ「border-color」、「border-style」、「border-width」で個別に設定することもできます。
 
 

3-2-2. 枠の色 border-color

枠の色は「border-color:値」で指定します。
 

前述の文字の色の指定と同じように、「red」や「blue」のように指定する方法もあれば、「#FF0000」のようにRGB16進数で表記することもできます。
 

3-2-2. border-style 枠の種類

枠線の種類は「border-style:値」で指定します。
 

値には以下のような種類がよく使われます。

  • なし(初期値)「none」
  • 1本の実線「solid」
  • 2本の実線「double」
  • 点線「dotted」
  • 破線「dashed」

 
 

3-2-3. 枠の太さ border-width

枠線の太さは「border-width:値」で指定します。
 

いくつかの指定方法がありますが、値を「px」で指定することが多いです。
 
 

3-3. 背景 backgroundの基本

backgroundの基本 background-color background-image
 

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

3-3-1. 背景の色 background-color

背景background:pinkのサンプル
 

背景の色を設定したい場合は「background-color:値;」で設定します。
 

値の色は、前述と同様に「blue」や「red」などの指定方法と、「#FF0000」などの指定方法がよく使う指定方法です。
 

■使用例

 

■表示例
background-colorがpinkになっている 
 
 

3-3-2. 背景の画像 background-image

背景background-imageが宇宙になるサンプル
 

先ほどは背景に色を設定しましたが、背景に画像を使いたい時は「background-image:url(画像の場所);」で指定します。
 

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

■使用例

 

■表示例
背景が宇宙になるサンプル
 
 

3-3-3. (補足)背景の色々な設定

少々難しくなるためここでは詳しく説明しませんが、背景画像には他にも色々な細かい指定があるので簡単にご紹介します。
 

背景画像のリピート:background-repeat

先ほどのbackground-imageで指定した地球の絵は繰り返されていました。

パターン画像などでは背景の繰り返しするパターンが多いですし、繰り返したくない背景画像の場合もあると思います。

リピートの設定は下記のような指定があります。
 

  • background-repeat:repeat; (縦横に背景画像を繰り返します(初期値))
  • background-repeat:no-repeat; (背景画像を繰り返しません)
  • background-repeat:repeat-x; (横方向に背景画像を繰り返します。)
  • background-repeat:repeat-y; (縦方向に背景画像を繰り返します。)

 

背景画像の表示開始位置:background-position

背景画像の表示開始位置を「background-position」で指定できます。
 

■使用例
background-position:left top;
 

背景画像の固定・移動:background-attachment

背景画像をスクロールしても固定したい時は「background-attachment:値;」で設定できます。
 

  • background-attachment:scroll; (スクロールすると背景画像も移動する。初期値)
  • background-attachment:fixed; (背景画像をスクロールしても固定させる)

 

背景設定をまとめて設定 background

borderの設定と同様に背景設定をまとめて指定できます。

■使用例

 

■表示例

 
 

背景画像のサイズ background-size

背景画像のサイズをbackground-sizeで指定することができます。
 

よく使う設定値は下記の通りです。

  • background-size:auto; 自動算出(初期値)
  • background-size:contain; 縦横比を保持して背景領域に収まる最大サイズになるよう拡大縮小する
  • background-size:cover; 縦横比は保持して背景領域を完全に覆う最小サイズになるよう背景画像を拡大縮小する

 

なお、「background」でbackground-sizeもまとめて指定する場合は、background-positionの値を指定した後に「/」を入れる必要があるようです。
 

■使用例
background:url(https://webst8.com/blog/wp-content/uploads/2017/07/earth.jpg) center /cover;
 

ややこしいので、まずはbackground-sizeはbackgroundで指定せずに、background-sizeで指定するようにしましょう。
 
 

3-4. 横幅と高さに関するスタイル

高さと横幅に関するスタイルの説明
 

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

3-4-1. 横幅 width

横幅が400pxのサンプル
 

横幅は「width:値;」で設定します。
 

単位は「px」や「%」などがあります。
 

pxの場合は固定値です。
%は親要素に対する割合になります(body直下のHTML要素の場合はブラウザサイズに対する割合)。
 

■使用例

 

■表示例
width 横幅の設定
 
 

3-4-2. 高さ height

divの高さを400pxにするサンプル
 

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

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

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

■使用例

 

■表示例
CSS 高さ400pxの例
 
 

3-5. 余白に関するスタイル

外部余白と内部余白の設定
 

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

3-5-1. 外部余白 margin

divの外部余白を100pxとる
 

外部の余白は「margin:値;」で設定します。
 

値の単位は「px」です。
 

値を1つ指定した場合は、全方向(「上」「下」「左」「右」)でそれぞれ指定した値の余白が設定されます。
 

値は複数設定することもできます。
 

「margin:値1 値2;」と指定した場合、「値1が上下」「値2が左右」の余白が設定されます。
 

「margin:値1 値2 値3 値4;」と値を4つ指定した場合は、
 

記述した順に「上」「右」「下」「左」と余白が設定(時計周り)されます。
 

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

 

■表示例
CSSサンプル 外部余白 100px
 

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

  • margin-left:値; (左の外部余白)
  • margin-right:値; (右の外部余白)
  • margin-top:値; (上の外部余白)
  • margin-bottom:値; (下の外部余白)

 
 

3-5-2. 内部余白 padding

divの内部余白を100pxとる
 

内部余白は「padding:値」で設定します。
 

値の単位は「px」です。
 

外部余白marginと同様に、
 

値を1つ指定した場合は、全方向(「上」「下」「左」「右」)でそれぞれ指定した値の余白が設定されます。
 

値は複数設定することもできます。
 

「padding:値1 値2;」と指定した場合、「値1が上下」「値2が左右」の余白が設定されます。
 

「padding:値1 値2 値3 値4;」と値を4つ指定した場合は、
 
 

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

 

■表示例
CSSサンプル 内部余白100px
 

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

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

 
 

3-6. 水平方向の位置 text-align

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

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

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

 

■使用例

 

■表示例

 
 

4. まとめ

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

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

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

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

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

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

大阪堀江の個人事業主向けWebスクール Webst8 バナー

『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のための月額2万円のWebスクールです。

『これから自分でホームページを作成したい』

『今のホームページを自分で更新できるようにしたい』

『ホームページでブランディング・集客・売上アップしたい』

といった方はぜひ当Webスクールにお問い合わせください。

Webst8の詳細はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

個人事業主向けWeb活用アドバイザー・Webスクール運営 1985年生まれ 立命館大学卒業。某複合機メーカーで約8年間SEとして大阪で勤務後、2016年秋に独立。現在は「一人一人が創意工夫で思い描く未来を!」 という想いもとに、Web制作・コンサルティング、Webスクール「Webst8」を運営開始。 ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。