CSS入門の手引き：スタイルシートの基本的な書き方【初心者向けに基礎知識をガッツリ解説】

HTMLについてはなんとなくわかったぞ。

さて、ウェブサイトの骨組みを作ったら装飾だ。

CSSを勉強して、サイトをきれいにデザインするぞ。

本記事では、HTMLで作ったサイトの土台をカスタマイズできる『CSS（スタイルシート）』について、ガッツリ解説します。

CSSカスタマイズに必要な基礎知識を全て紹介するので、最後まで読んでいただければ、初心者でもひと通りのウェブデザインができるようになるはずです。

サイトの土台作りに必要なHTMLの勉強を終えていないという方は、「HTML入門の手引き：基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】」からお読みください。

本記事を読むとわかること

CSSの基本情報：CSSでできることがわかる

CSSとHTMLのリンク：どうやってHTMLファイルに反映させるのかがわかる

CSSの下記から：全コード例文付きなので、CSSの基本的なカスタマイズができるようになる

上記の内容を、初心者でもわかるように丁寧に解説します。

スポンサードサーチ

【キホン情報】CSS（スタイルシート）とは

『CSS』とは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略でして、ウェブサイトのデザインを指定するための言語です。

読み方は「シーエスエス」。スタイルシートと呼ぶ人もいます。

「HTML入門の手引き：基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】」の記事内で触れましたが、ウェブサイトを作るときは、①HTMLで骨組みを作り、②CSSで装飾していく、というステップで進めるので、両方を使いこなせるようにならないと、見た目がきちんとしたサイトは作れません。

CSSなしでウェブサイトを作ると…

CSSでカスタマイズをせずに、HTMLだけで作ったウェブサイトは、文字と画像の羅列になってしまいます。

HTMLのみ、CSSなし

こちらはHTMLのみで僕のブログを表示したときの見え方です。

テキストと画像が羅列されているだけで、単調かつ、バランスも悪い見え方になってしまっています。

これじゃ、せっかくブログを訪れてくれた読者がちゃんと記事を読んでくれなさそうですよね…

やっぱりサイト読者のことを考えると、ウェブサイトをきれいにデザインすることは大切だということがわかります。

HTML ＋ CSS

HTMLで作ったサイトの土台に、CSSで装飾を加えるとこのようになります。

CSSを使えば、Webサイトの見栄えを自分の好きなようにカスタマイズできるので、ヘッダーメニューをレイアウトしたり、記事のサムネイル画像を整列させ、美しい見た目にすることができます。

文字の大きさを変えたり、色をつけたり、するのもCSSで対応します。

CSS（スタイルシート）の書き方

CSSがどんな役割を役割を果たすのかを理解したら、さっそく書き方を覚えてきましょう。

この章では下記のポイントを理解できるよう、初心者にもわかりやすくゼロから解説していきます。

本章で解説する内容

CSSを設置する場所：スタイルシートはどこに書けばいいのかがわかります

CSSの書き方：サンプルCSSを書いてみよう

CSSはどこに書けばいいの？

まずはCSSを書く方法を解説します。

HTMLとCSSを結びつけるにはどうしたらいいのか、どこにCSSを書いてファイルを設置すればいいのかを理解しておきましょう。

【CSSを書く方法】3パターンあります

CSSを書く方法は3パターンありまして、それぞれ下記の通りです。

CSSを書く方法：3パターン

その①：CSSファイルを作ってHTMLに読み込ませる

その②：HTMLファイル内に記載して <styleタグ> で囲む

その③：HTMLタグそれぞれの中に追記する

パターン別：CSSの書き方

パターン別CSSの書き方を簡単にまとめます。

本記事では最もシンプルな「②HTMLファイル内に記載して <styleタグ> で囲む」のやり方を詳しく解説しますが、今後、ウェブサイトを作っていくなかで、3つのパターンを使い分けることで効率的な使い分けができるようになるので、それぞれの特徴を頭に入れておきましょう。

CSSファイルを作り、HTMLで読み込む

文字通り、CSSファイルを別に作り、HTMLファイルから読み込む方法でして、この方法で作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれます。

通常ウェブサイトを作る時に最も用いられる方法になります。

HTMLファイル内に書いて <styleタグ> で囲む

そのページのみに特化したCSSを書くことができるので「このページだけデザインを変えたい」というときに適したCSSの書き方です。

①で書いた別ファイルのCSSと合わせて使うことができるので、合わせて使うとおすすめです。

HTMLタグそれぞれの中に追記する

外部CSSを触る必要がないので「本当に1箇所だけのデザインだけ変えたいとき」に非常に楽な方法です。

とはいえ、装飾したい全てのHTMLタグ内に、それぞれCSSを書かないといけないので、修正したくなったときは面倒です。

実戦練習：HTMLの <styleタグ> 内にCSSを書いてみる

先述の通り、本記事では最も基本的な「②HTMLファイル内に記載して <styleタグ> で囲む」の手法に沿って解説します。

とはいえ、コード自体は「①CSSファイルを作ってHTMLに読み込ませる」でもまったく同じなので、本記事で解説するCSSの書き方を学んでおけば、将来的に勉強し直す必要はありません。

HTMLの基礎を勉強したとき同様、テキストエディターを使って実践練習していくので、Sublime Textを手元に用意しておいてください。
> 参考記事：【無料でHTMLとCSSを勉強する】学習に必要なツールを揃えよう【2つだけ】

①：カスタマイズ用のHTMLファイルを作る

まずは、カスタマイズするための土台を作ります。下記のHTMLコードをSulime Textにコピペしてください。

HTMLのサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>CSSの練習をしよう</title>
</head>
<body>
   <div id="headline">
     <h1>CSS入門の手引き</h1>
     <p>これはpタグで囲まれた段落です。HTMLの章で勉強しましたね。</p>
   </div>
   <div class="main">
     <h2>これはh2タグで囲んだ見出しです</h2>
     <p>これはCSS勉強用サンプルです。</p>
     <p><a href="https://ksonoda.com/">ブログトップへ</a>戻ります。</p>
   </div>
</body>
</html>

拡張子を .html にして保存し、ブラウザで表示してみましょう。下記のようになるはずです。

Sublime Textにコピペ

ブラウザにドラッグ

このやり方は「HTML入門の手引き：基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】」で解説した通りですので、忘れてしまった方は再確認しましょう。

②：HTML内にCSSを書いていく

HTMLファイルがちゃんと開けることを確認したら、Sublime Textで上記のファイルを開き直し、CSSを書いていきます。

まずは「HTML入門の手引き：基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】」で解説した内容を思い出してください、

<headタグ> の中は「ページの情報や設定を書く場所」でした。

CSSで装飾を施すための <styleタグ> も、ここに書いていきます。

これでCSSを書く準備はできました。

まずは試しに下記のCSSコードをコピペして、ブラウザで最表示させてみてください。先ほどのテキストに装飾した状態で表示されるはずです。（※<styleタグ> はすでに書かれているはずなので、間の部分をコピペします。）

CSSのサンプルコード

<style>
  p {
    color: blue;
  }
</style>

上記のCSSコードでは <pタグ> 内の文字色を青（color:blue）に変えるように指定しました。

ファイルを上書き保存して、再度ブラウザで読み込んでみると…どうでしょう？文字色が変わりましたよね？

<pタグ>内の指定した文字色が変わった！

このように、HTMLファイル内の <headタグ> 内に <styleタグ> を作り、その中にCSSコードを書くことで、そのHTMLファイルをカスタマイズしていくことができます。

まずは、この感覚をつかんでみてください。

スポンサードサーチ

CSS書き方の基本

CSSの仕組みをひと通り理解したところで、ここから本格的にCSSの書き方の勉強に入ります。

CSSの基本文法を理解しよう

CSSの書き方は決まっていて、どんなときも下記のように書いていきます。

CSSの基本的な書き方

CSSの基本

セレクタ {
プロパティ: 値
}

上記の通りでして、「セレクタ」「プロパティ」「値」をそれぞれ指定することで、HTML上の該当する範囲を装飾する仕組みになっています。

イメージとして、それぞれが「どこの = セレクタ」「何を = プロパティ」「どのように = 値」変えるのか、を指定する役割を担っている感じです。

用語をひとつずつ解説するので、ひとつずつ理解しましょう。

CSSの用語を覚える：「セレクタ」とは

「セレクタ（= どこの？）」には「デザインを変更する指定先」を書きます。

先ほどのサンプルCSSでは body でしたね。ここに、タグ名やクラス名を書くことでデザイン変更の適用先を指定する仕組みだと覚えておきましょう。

例えばこういう感じ

p{ほにゃらら、ほにゃらら} と書けば、<pタグ> 内の全てを「ほにゃらら」に変えることができますし、h1{いろはにほへと} と書けば、<h1タグ> 内の全てを「いろはにほへと」で指定するデザインに変更することができます。

CSSの用語を覚える：「プロパティ」とは

「プロパティ（= 何を？）」は「セレクタで指定した部分の何を変えるのか」を記載する部分です。

先ほどのサンプルでは「セレクタ = <p>」のなかの「プロパティ = color」を青色に指定しました。

このように、文字色を変えるのか、背景色を変えるのか、フォントサイズを変えるのか、余白を変えるのか、などをプロパティで指定します。

CSSの用語を覚える：「値」とは

「値（= どのように？）」では「プロパティをどのような見た目にするか」を指定します。

先ほどのサンプルではは「セレクタ = <p>」のなかの「プロパティ = color」を「青 = Blue」に指定しました。

CSSの基本的な書き方（もっと詳しく）

上記がCSSの仕組みと各要素の解説です。さらに詳しくCSSを書き方を見ていきましょう。

①：「プロパティ」と「値」は { } で囲む

セレクタを指定したら、プロパティと値を、図のオレンジ部分のように { } で囲みます。

②：「プロパティ」と「値」を ： でつなぐ

{ } 内に記載する「プロパティ」と「値」は、 ：（コロン） で仕切ります。

③：複数の「プロパティ」は ； で仕切ることができる

複数の「プロパティ」をまとめてカスタマイズしたいときは、 ；（セミコロン） を使うことで、いくつもプロパティを追加することができます。

；（セミコロン） を使って区切ることで、文字色も、背景色も、フォントサイズもまとめて変更することができるということですね。とても便利です。

ここまでができるようになれば、HTMLファイルの指定した部分をCSSでカスタマイズできるようになります。

試しに、下記の用件をCSSで指定できるか復習してみましょう。

復習用

①：ボディタグ内の
②：カラーを赤に
③：フォントサイズを15pxに
　　　※フォントサイズのプロパティは font-size です。
　　　※pxとは文字の大きさを表すピクセルという値です。

いかがでしょうか。正解は下記の通りです。

正解のCSS

body {
  color: red;
  font-size: 15px
  }

【補足】CSSを書くときは

CSSを書くときは、コードの途中に半角スペースや改行を入れてもOKでして、それによりエラーになったり、スタイルが変わらないということはありません。

ただし全角スペースはNGなので、半角スペースと改行を用いて、自分が見やすいようにコードを並べて作業しましょう。

セレクタの基本的な書き方

先述の通り、セレクタは「カスタマイズの適用先（どの部分のデザインをカスタマイズするのか）」を指定する部分です。

書き方にはいくつかパターンがあるので、ここからはセレクタの詳しい書き方5つを解説します。

セレクタ：5つの基本的な書き方

①：タグ名で指定

②：id名で指定

③：class名で指定

④：複数の適用先を指定

⑤：絞り込んで指定

①：タグ名で指定

まずはタグ名で指定する方法です。

これまで解説してきたサンプルは全てタグ名で指定していたので、これは改めて解説しなくても大丈夫だと思います。

一応、書き方の例を出しておくと下記の通りです。Sublime Textにコピペして見え方を確認してみてください。

セレクタ：タグ名で指定する

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>CSSの練習をしよう</title>
   <!-- CSSここから -->
   <style>
     p{ color: blue;
        font-size: 20px
      }
   </style>
   <!-- CSSここまで 適用先は赤色の文字で表示しています-->
</head>
<body>
   <div id="headline">
     <h1>CSS入門の手引き</h1>
     <p>これはpタグで囲まれた段落です。HTMLの章で勉強しましたね。</p>
   </div>
   <div class="main">
     <h2>これはh2タグで囲んだ見出しです</h2>
     <p>これはCSS勉強用サンプルです。</p>
     <p><a href="https://ksonoda.com/">ブログトップへ</a>戻ります。</p>
   </div>
</body>
</html>

ブラウザ表示すると

②：id名で指定

セレクタは「id名」でも指定することができます。

アラサー男子 in L.A.

idの使い方は覚えていますか？？

もし忘れてしまった場合は「HTML入門の手引き：基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】」で再確認しましょう。

「id名」をカスタマイズ先を指定するときは、アタマに「#（シャープ）」をつけます。

例：#headline{ ほにゃらら、ほにゃらら }

サンプルコードは下記の通り。

セレクタ：id名で指定する

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>CSSの練習をしよう</title>
   <!-- CSSここから -->
   <style>
     #headline{ color: blue;
        font-size: 20px
      }
   </style>
   <!-- CSSここまで 適用先は赤色の文字で表示しています-->
</head>
<body>
   <div id="headline">
     <h1>CSS入門の手引き</h1>
     <p>これはpタグで囲まれた段落です。HTMLの章で勉強しましたね。</p>
   </div>
   <div class="main">
     <h2>これはh2タグで囲んだ見出しです</h2>
     <p>これはCSS勉強用サンプルです。</p>
     <p><a href="https://ksonoda.com/">ブログトップへ</a>戻ります。</p>
   </div>
</body>
</html>

ブラウザで表示すると

③：class名で指定

どんどんいきます。続いては「class名」でカスタマイズの適用先を指定する場合です。

class名は同じファイル内で何度も使用することができるので、まとめて見栄えを変えたいときはとても便利です。

「class名」を指定するときは、アタマに「.（ドット）」をつけます。

例：.main{ほにゃらら、ほにゃらら}

セレクタ：class名で指定する

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>CSSの練習をしよう</title>
   <!-- CSSここから -->
   <style>
     .main{ color: blue;
        font-size: 20px
      }
   </style>
   <!-- CSSここまで 適用先は赤色の文字で表示しています-->
</head>
<body>
   <div id="headline">
     <h1>CSS入門の手引き</h1>
     <p>これはpタグで囲まれた段落です。HTMLの章で勉強しましたね。</p>
   </div>
   <div class="main">
     <h2>これはh2タグで囲んだ見出しです</h2>
     <p>これはCSS勉強用サンプルです。</p>
     <p><a href="https://ksonoda.com/">ブログトップへ</a>戻ります。</p>
   </div>
</body>
</html>

ブラウザで表示すると

④：複数の適用先を指定

サイトを制作していると、複数の箇所をまとめて同じデザインに変更したいときも出てきます。

そんなときは下記のように、「,（コンマ）」で仕切り、まとめて複数箇所を指定しましょう。

例：#headline, a{ほにゃらら、ほにゃらら}

複数を指定するときは、数の上限はありませんし、決まった順番もありません。

セレクタ：複数セレクタをまとめて指定する

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>CSSの練習をしよう</title>
   <!-- CSSここから -->
   <style>
     #headline, a{ color: blue;
        font-size: 20px
      }
   </style>
   <!-- CSSここまで 適用先は赤色の文字で表示しています-->
</head>
<body>
   <div id="headline">
     <h1>CSS入門の手引き</h1>
     <p>これはpタグで囲まれた段落です。HTMLの章で勉強しましたね。</p>
   </div>
   <div class="main">
     <h2>これはh2タグで囲んだ見出しです</h2>
     <p>これはCSS勉強用サンプルです。</p>
     <p><a href="https://ksonoda.com/">ブログトップへ</a>戻ります。</p>
   </div>
</body>
</html>

ブラウザで表示すると

⑤：絞り込んで指定

セレクタは「どこどこの中のあそこ」のように、タグの中にある別のタグ部分のみを指定することも可能です。これを子孫セレクタと呼びます。

絞り込みたいときは、セレクタの間を半角スペースで仕切るだけ。簡単ですね。

例：.main p span

上記のように各セレクタの間に半角スペースを入れるだけで、どんどん絞り込んでいくことができます。

セレクタ：絞り込んで指定する

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>CSSの練習をしよう</title>
   <!-- CSSここから -->
   <style>
     .main p span{ color: blue;
        font-size: 20px
      }
   </style>
   <!-- CSSここまで 適用先は赤色の文字で表示しています-->
</head>
<body>
   <div id="headline">
     <h1>CSS入門の手引き</h1>
     <p>これはpタグで囲まれた段落です。HTMLの章で勉強しましたね。</p>
   </div>
   <div class="main">
     <h2>これはh2タグで囲んだ見出しです</h2>
     <p>これは<span>CSS勉強用</span>サンプルです。</p>
     <p><a href="https://ksonoda.com/">ブログトップへ</a>戻ります。</p>
   </div>
</body>
</html>

ブラウザで表示すると

以上、5つのセレクタの書き方さえ覚えておけば、現段階で好きな箇所をカスタマイズ指定ができるようになります。（※さらに細かいセレクタの書き方もありますが、現状はこの5つで大丈夫です。）

スポンサードサーチ

プロパティと値の基本的な書き方

セレクタの書き方を理解したら、次は「プロパティ」と「値」です。

プロパティと値は常にセットで使われ、プロパティが color なら、値は blue や red など、色を指定するもの。プロパティが font-size なら 10px や 20px といったようにフォントサイズを指定するものになります。

プロパティと値はバリエーションが多すぎるので、なかなかわかりづらいと思いますが、ここでは実例を上げて解説するので、ひとつずつ書き方を理解してみてください。

本章で解説する内容

①：フォントサイズを変える

②：文字の色を変える

③：文字を中央/右寄せにする

④：背景色を変える

⑤：背景に画像を挿入する

⑥：ボーダーをつける

⑦：コメントアウトする

CSSでは上記以外にも、もっと細かいカスタマイズができますが、入門編の今回は最も基本的な上記の項目について解説します。

少しずつ練習しながら、できることを増やしていきましょう。

①：フォントサイズを変える

フォントサイズを変えるときは、「プロパティ」を font-size に指定し、「値」には 10px のように、数字+単位を入力します。

単位は2つありまして、単位によって入力方法が違うので、下記を参照してください。

単位その①：px

「px」は、縦のピクセルの大きさで設定するための単位です。

ウェブサイトの本文（pタグ内）に使うフォントサイズは15〜18ピクセルくらいにするのが一般的です。

単位その②：em

「em」は、既存のフォントサイズに対する倍率で設定するための単位です。

例えば、既存のフォントサイズが15pxの場合、2.0emにすると、表示されるフォントサイズは30pxになります。

フォントサイズを変える

[セレクタ]{
   font-size: 〇〇px}

もしくは…

[セレクタ]{
   font-size: 〇〇em}

コードコピペでブラウザ表示してみる

ブラウザ表示してみよう

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>プロパティと値を学ぼう</title>
   <!-- CSSここから -->
   <style>
     .px{ font-size: 40px}
     .em{ font-size: 1.5em}
   </style>
   <!-- CSSここまで -->
</head>
<body>
   <p>これは初期設定のフォントサイズです。</p>
   <p class="px">40pxで設定した場合、このサイズになります。</p>
   <p class="em">1.2emで設定した場合、このサイズになります。</p>
   </body>
</html>

②：文字の色を変える

文字色を変えたいときは、color プロパティを使います。これまでの例で何度も出しているのですでに理解できていますよね。

なお、これまでの例では blue のように、色を指定していましたが、カラーコードと呼ばれる#6桁の英数字でも設定することができます。

文字色の指定方法その①：英語で色名を書く

グレーなら「gray」、赤なら「red」、緑なら「green」といった具合に、英語の色名を書く方法です。

文字色の指定方法その②：カラーコード

「#FFFFFF（白）」のように、カラーコードを指定する方法です。

ブラウザで指定されているカラーコードは星の数ほどあるので、HTMLカラーコードを参照に、好きな色を指定してみましょう。

文字色を変える

[セレクタ]{
   color: red}

もしくは…

[セレクタ]{
   color: #008080}

コードコピペでブラウザ表示してみる

ブラウザ表示してみよう

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>プロパティと値を学ぼう</title>
   <!-- CSSここから -->
   <style>
     #red{ color: red}
     #colorcode{ color: #008080}
   </style>
   <!-- CSSここまで -->
</head>
<body>
   <p>初期設定のフォントカラーは黒です。</p>
   <p id="red">redに指定すると、文字が赤になります。</p>
   <p id="colorcode">カラーコードで指定すると、文字が指定色になります。</p>
   </body>
</html>

③：文字を中央/右寄せにする

HTMLでは基本的に左寄せで文章が表示されます。真ん中や右に寄せたい場合も、CSSで指定ができます。

プロパティは text-align 、値は left center right のどれかになります。

文字を揃える

[セレクタ]{
   text-align: center}

コードコピペでブラウザ表示してみる

ブラウザ表示してみよう

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>プロパティと値を学ぼう</title>
   <!-- CSSここから -->
   <style>
     .center{ text-align: center}
     .right{ text-align: right}
   </style>
   <!-- CSSここまで -->
</head>
<body>
   <p>初期設定は左寄せです。</p>
   <p class="center">センター揃えで表示。</p>
   <p class="right">右揃えで表示。</p>
   </body>
</html>

④：背景色を変える

ここまでくれば、プロパティと値の仕組みは理解できるようになったと思います。

背景色を変える場合も、基本的なやり方は同じです。

プロパティは background-color で、値は文字色と同じく、色名の英語表記、またはカラーコードです。

背景色を変える

[セレクタ]{
   background-color: #66cdaa}

コードコピペでブラウザ表示してみる

ブラウザ表示してみよう

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>プロパティと値を学ぼう</title>
   <!-- CSSここから -->
   <style>
     .bgcolor{ background-color: #66cdaa}
   </style>
   <!-- CSSここまで -->
</head>
<body>
   <p>初期設定は白です。</p>
   <p class="bgcolor">カラーコードで薄ミドリ色にしました。</p>
   </body>
</html>

⑤：背景に画像を挿入する

「背景に画像を挿入したい！」そんな場合は、background-image プロパティで画像を背景に設置しましょう。値には画像アップロード先のURLを指定します。

背景に画像を挿入する

[セレクタ]{
   background-image: url(https://ksonoda.com/wp-content/uploads/2020/03/EyeCatch-Vector.png)}

コードコピペでブラウザ表示してみる

ブラウザ表示してみよう

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>プロパティと値を学ぼう</title>
   <!-- CSSここから -->
   <style>
     body{ background-image: url(https://ksonoda.com/wp-content/uploads/2020/03/EyeCatch-Vector.png)}
   </style>
   <!-- CSSここまで -->
</head>
<body>
   <p>bodyエリアの背景が、画像になりました。</p>
   </body>
</html>

アラサー男子 in L.A.

画像を背景に設定するときは、前面に表示したり、繰り返しにしたり、様々な設定を細かく指定することができます。

詳しいやり方は別記事で解説しますので、まずは background-image プロパティの存在を知っておいてください。

⑥：ボーダーをつける

文字の周りに枠をつけたいときもCSSで設定可能です。プロパティは border 、値では「ラインの太さ・色・種類」を決めることができます。

枠線で囲む

[セレクタ]{
   border: solid green 2px}

上記の場合、実線・緑色・2pxの太さのラインを引くことができます。

線の種類と太さの指定

線の種類は、①実線（solid）、②点線（dotted）、③破線（dashed）、④二重線（double）の4つから指定することができまして、太さは3pxくらいまでにしておくのがおすすめです。ちなみに、二重線の太さは2本合わせたときのサイズなので、1pxだとほぼ一本線に見えてしまいます。調整しながら感覚をつかみましょう。

※色は、英語の色名かカラーコードなので、ここでは解説を割愛します。

コードコピペでブラウザ表示してみる

ブラウザ表示してみよう

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>プロパティと値を学ぼう</title>
   <!-- CSSここから -->
   <style>
     .solid{ border: solid red 2px
      }
     .dotted{ border: dotted blue 3px
      }
     .dashed{ border: dashed #ff00ff 1px
      }
     .double{ border: double #d3a243 3px
      }
   </style>
   <!-- CSSここまで -->
</head>
<body>
   <p class="solid">実線のサンプル。赤色で太さは2ピクセルです。</p>
   <p class="dotted">点線のサンプル。青色で太さは3ピクセルです。</p>
   <p class="dashed">破線のサンプル。#ff00ff色で太さは1ピクセルです。</p>
   <p class="double">二重線のサンプル。#d3a243色で太さは3ピクセルです。</p>
   </body>
</html>

上下左右どこかだけに線を引きたいとき

上記の場合、ボーダーが上下左右全てに引かれてしまいます。

例えば、左側だけに引きたい、上だけにしたい、下線を引きたいといったケースもあるはずなので、そのときはプロパティを下記のように指定してください。

ボーダーのプロパティを変更する

border-top:　←上だけに線を引く
border-bottom:　←下だけに線を引く
border-left:　←左だけに線を引く
border-right:　←右だけに線を引く

さらに、複数のプロパティを組み合わせることで、左と下にボーダーを表示させたりすることも可能です。

ボーダーをカスタマイズする

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>プロパティと値を学ぼう</title>
   <!-- CSSここから -->
   <style>
     .top{ border-top: solid red 2px
      }
     .lefttop{ border-top: dotted blue 3px;
               border-left: dotted blue 3px
      }
   </style>
   <!-- CSSここまで -->
</head>
<body>
   <p class="top">トップのみに実線を引いたサンプルです。</p>
   <p class="lefttop">トップと左側のみに点線を引いたサンプルです。</p>
   </body>
</html>

⑦：コメントアウトする

「HTML入門の手引き：基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】」ではHTML内に自分用のメモ（コメントアウト）を書く方法を解説しましたが、CSSにもコメントアウトを残すことができます。

HTMLのコメントアウト（<!– メモ –>）とは書き方が違うので、こちらも覚えておきましょう。

CSSのコメントアウトは /* ここにメモを書く */ というように書きます。

コメントアウトの例

body{ color: blue;
      text-align: center:
/*ここにコメントアウトが書ける*/
      border-top: dotted red 3px
      }

HTMLのコメントアウト同様、ウェブブラウザでは表示されないので、自分用のメモはコメントアウトして残しておくと便利です。

スポンサードサーチ

【まとめ】CSSができるとサイトデザインができる

本記事は以上になります。

HTMLと合わせて、今回も長めの解説になりましたが、ここまでできれば基本的なウェブデザインは可能になりますので、ゆっくり練習していきましょう。

最後に、本記事内で解説したCSSを使用して、サンプルHTMLをカスタマイズしてみてください。

サンプルのコードを下記に貼っておくので、参考にしながら自分なりにアレンジなどしてみてください。

HTML同様、CSSもまずはコツを掴むことが大切です。

CSS練習用

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>CSSの練習をしよう</title>
   <style>
      body {
         /*ページの背景をみず色に*/
         background-color: #C8E4FF;
         /*文字をセンター揃えに*/
         text-align: center;
      }
      h1 {
         /* h1タグの文字色を変える */
         color: #738BFF;
      }
      #headline {
         /* ヘッドラインの下に点線を引く */
         border-bottom: dotted #738BFF 3px
      }
      h2 {
         /* h2タグの文字色を白に */
         color: white;
      }
      .main p {
         /* class名 mainの中の段落の文字を1.2倍に */
         font-size: 1.2em;
      }
      .main a {
         /* リンクを赤に */
         color: red;
      }
   </style>
</head>
<body>
   <div id="headline">
     <h1>CSS入門の手引き</h1>
     <p>これはpタグで囲まれた段落です。HTMLの章で勉強しましたね。</p>
   </div>
   <div class="main">
     <h2>これはh2タグで囲んだ見出しです</h2>
     <p>これはCSS勉強用サンプルです。</p>
     <p><a href="https://ksonoda.com/">ブログトップへ</a>戻ります。</p>
   </div>
</body>
</html>