初心者がはじめに覚えておきたい CSS の基本とプロパティ一覧 | 大阪のホームページ作成とウェブ集客 Webst8のブログ

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

CSSとは

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

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

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

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

たとえば、

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

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

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

2. CSSの書き方と方式

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

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

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

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

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

■使用例

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

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

</body>

</html>

■表示例

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

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

■使用例

<h1 style="color:red;background:aqua;padding:50px;width:50%;">はじめてのCSS</h1>

1	<h1 style="color:red;background:aqua;padding:50px;width:50%;">はじめてのCSS</h1>

■表示例

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

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

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

２つ目が、htmlのheadタグの中にまとめてスタイルを記述する方法です。

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

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

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

■使用例

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

で記述します。

■表示例

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

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

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

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

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

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

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

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

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

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

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

■使用例
HTMLファイル

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

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

</body>

</html>

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

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

@charset "UTF-8";

h1{

color:red;

}

■表示例

外部スタイルシートの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属性というものが設定できます。

例
<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名」
で指定します。

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

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

■表示例

3. 主なCSSプロパティ

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

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

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

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

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

値の単位は簡単な「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>

■表示例

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

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

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

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

参考：ウェブカラー

■使用例

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

■表示例

3-1-3. 文字の太さ 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>

■表示例

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

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

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

（またはダブルクォーテーション（ ” ）で囲むこともできますが、インラインスタイルシート形式で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で指定できるフォント名一覧

3-2. 枠線 border

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

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

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

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

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

■使用例見出しに赤色・実線・太さ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-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の基本

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

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

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

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

■使用例

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

■表示例

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

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

画像の場所は、「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/2017/07/earth.jpg);">
    <h1>背景が宇宙に！！！</h1>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

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

</head>

<h1>背景が宇宙に！！！</h1>

</body>

</html>

■表示例

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の設定と同様に背景設定をまとめて指定できます。

■使用例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <style media="screen">
     .background-earth{
        background:green url(https://webst8.com/blog/wp-content/uploads/2017/07/earth.jpg) no-repeat fixed top left;
     }
    </style>
  </head>
  <body class="background-earth">
    <h1 style="color:white">宇宙に飛び立つ！！！</h1>
    <p style="color:white">
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br><br><br><br><br>
      スクロールしてください。
      <br>      
    </p>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

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

.background-earth{

background:green url(https://webst8.com/blog/wp-content/uploads/2017/07/earth.jpg) no-repeat fixed top left;

}

</style>

</head>

<h1 style="color:white">宇宙に飛び立つ！！！</h1>

スクロールしてください。

スクロールしてください。

スクロールしてください。

スクロールしてください。

スクロールしてください。

スクロールしてください。

スクロールしてください。

スクロールしてください。

スクロールしてください。

スクロールしてください。

<br>

</p>

</body>

</html>

■表示例

背景画像のサイズ 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

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

単位は「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>

■表示例

3-4-2. 高さ 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>

■表示例

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

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

3-5-1. 外部余白 margin

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

値の単位は「px」です。

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

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

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

「margin:値1 値2 値3 値4;」と値を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:値; (下の外部余白)

3-5-2. 内部余白 padding

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

値の単位は「px」です。

外部余白marginと同様に、

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12

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

■表示例

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

padding-left:値; (左の余白)

padding-right:値; (右の余白)

padding-top:値; (上の余白)

padding-bottom:値; (下の余白)

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12

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

■表示例

4. まとめ

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

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

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

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

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

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

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

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

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

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

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

Webst8の詳細はこちら