【練習ファイル付き】CSS(スタイルシート)の基本的な書き方と実践練習

CSSの基本的な書き方を練習ファイル付きで紹介しています。
Thanks to our advertisers


今回はCSSの基本的な書き方と実践練習を紹介しています。

誰でも簡単にサイトが作れる、実戦形式のCSS練習ファイルが付いています。まだ「CSSってなに?」という方は、まずこちらの記事を見てから戻って来ることをオススメします。

CSSって何?CSSの基礎知識とファイルの作り方【初級編】

CSSの基本構造を実戦を交えながら覚えていきましょう。

Thanks to our advertisers

CSSの基本書式。

CSSの書き方について照会していきます。

CSSの基本はセレクタ・プロパティ・値の3つ

CSSのはセレクタ・プロパティ・値の順番で書きます。

CSSの基本的な書き方はセレクタ・プロパティ・値の3つから成り立ちます。

  1. 【セレクタ】どのHTMLの要素(タグ)に指定させたくて
  2. 【プロパティ】どんなスタイル(プロパティ)でHTMLを装飾させて
  3. 【値】どの程度のプロパティを指定するか(値)

この順番で指定していきます。

 

「何を(セレクタ)どれで(プロパティ)どのくらい(値)装飾するのか」という形にすると覚えやすいと思います。

 

例えば、基本的な段落を指定するp要素(タグ)の文字色を赤くしたい場合はこのように書きます。

p { color:red; }

そうすると、p要素(タグ)は赤い文字になります。

 

CSSで気をつけるポイントは、セレクタを書いた後に{}で囲み、プロパティと値の間には:(コロン)を、値の最後には;(セミコロン)を書くということです。

このうちのどれか一つでもかけてしまうと、CSSは適用されません。特に;(セミコロン)は忘れがちなので気を付けましょう。

複数のセレクタを指定するとき

複数のプロパティにcssを指定したいときは、プロパティ同士をコンマで区切ります

CSSを使って複数のセレクタに同じプロパティを指定したいときは、セレクタ同士をコンマで区切ることによって同じ内容のプロパティを指定することができます。

 

例えば、cssをこのように書いたとします。

p, h1{ color:red; }

そうすると、「p要素(タグ)とh1要素(タグ)は文字を赤色にする」という意味になります。

 

複数のセレクタをまとめて指定することによって、ファイルサイズが縮小され管理がしやすくなり、サイトに訪れた人のページ読み込み時間が早くなるなどのメリットがあります。

同じスタイルを適用させる場合はできるだけセレクタをまとめて書くのがおすすめです。

複数のプロパティを指定するとき

CSSで複数のプロパティを指定したときの書き方です。

CSSでは複数のセレクタを指定できるように、複数のプロパティも指定することもできます。

 

複数のプロパティを指定したいときはこのように書きます。

p{ color:red; font-size:14px; }

この指定は、p要素(タグ)の文字色を赤にして、文字サイズを14pxにするという意味になります。

複数のセレクタを指定するときとは違い,( コンマ)で区切る必要はありません。;(セミコロン)の後に続けて書くことができます。

 

CSSで指定できるプロパティはプロパティ一覧からご覧下さい。

半角スペース・タブ・改行はCSSを見やすくする

cssのコードに半角スペースや改行・タブを使った例です。

複数のプロパティを指定していると、CSSが見づらくなってきます。

そんなときに半角スペーズやタブ、改行で余白を作ってあげることで、CSSを見やすく整理することができます。

 

こちらは半角スペース・タグ・改行で余白を使わなかったときの例です。

p{color:red;background:white;font-size:14px;}

パッと見たときに、p要素(タグ)にどんな指定がかけられているのかがわかりません。

これではあとからプロパティを変更するときに手間が掛かってしまいます。

 

そこで半角スペースやタブ・改行で余白を使い、CSSを見やすくします。

p{
        color:red;
        background:white;
        font-size:14px;
}

これならどんな指定がかけられているのかを一目で確かめることができます。

余白を開けるポイントは、{の後とプロパティの前です。

CSSのコメントアウトの書き方

cssのコメントアウトを使ったときの例です。/**/を使います。

CSSでコメントアウトをするときは/**/(スラッシュ・アスタリスク・アスタリスク・スラッシュ)を使います。

CSSのコメントアウトを使った例です。

/******************************
     p
******************************/

p{
        /*color:red; 今は使わない */
        background:white;
        font-size:14px;  /* 16pxでもいいかも */
}

コメントアウトでCSSを囲んで指定を外したり、後で変更する箇所をメモのような形で残すことができます。

CSSを実際に書いてサイトを作ってみよう(練習ファイル付き)。

では、実際にCSSを使ってサイトを一つ作ってみましょう。

こちらからCSSの練習用ファイルをダウンロードしてください。

ファイルの中はこのようになっています。

 

  • HTMLファイル(index.html)
  • imgフォルダの中に画像ファイル(css-writing.jpg)
  • CSSフォルダの中にCSSファイル(style.css)

この中のstyle.cssファイルを編集します。

 

練習ファイルの中のサイトは、CSSで何もスタイリングされていない状態です。

まだなにもCSSでが適用されていない状態のサイトです。

CSSが適用されていない完成前のサイトです。

このサイトを、ブログサイトなどでよく見かけるカードデザインに装飾していきます。

CSSの練習ファイルが完成するとこのようなサイトが出来上がります。

CSS練習ファイルを完成させるとこのようなカードデザインが出来上がります。

 

CSSで装飾をするためには、マークアップされているHTMLの構造を知る必要があります。

お好きなブラウザでindex.htmlを開き、style.cssを編集して保存したらいつでも更新できるよう準備をしておいてください。

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSの基本的な書き方練習</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div>
    <a href="https://akiramiyagawa.com/writing-css" target="_blank">
        <img src="img/css-training.jpg" alt="cssの基礎的な書き方">
        <h1>CSSの基礎的な書き方</h1>
        <p>CSSの基本的なCSSの基本的なCSSの基本的なCSSの基本的な</p>
    </a>
</div>

</body>
</html>

このマークアップのポイントは、div要素の中にa要素があり、その中にimg要素とh要素、p要素があるということです。

 

では、実際にstyle.cssを編集していきます。

デフォルトのスタイルを調節するリセットCSS(ユニバーサルセレクタ)

ユニバーサルセレクタはアスタリスクを使います。

CSSはサイトを見ている人のブラウザによって見え方が異なるという特徴があります。

例えば、僕がChromeを通してCSSでスタイリングしたとしても、OperaやFireFoxといった他のブラウザを通すと見え方が違っています。これはブラウザ毎に、それぞれデフォルトでCSSが指定されているためです。

そんなブラウザの違いによるスタイルの違いをなくしてくれるのがリセットCSSです。

 

今回はユニバーサルセレクタを使い、簡易的にサイトの見栄えを調節します。

CSSの先頭に簡単なリセットCSSを記述します。

*{
    margin:0;
    padding:0;
}

 

ユニバーサルセレクタを使ったリセットCSSはデメリットが多く、多くのWebサイトでは使われていません。

多くのWebサイトで使われているリセットCSSはこちらからダウンロードして使うことができます。

normalieze.css

 

CSSの書き始める第一歩は、ブラウザ毎の見え方の違いをなくすリセットCSSを書くことから始まります。

ユニバーサルセレクタとは
ユニバーサルセレクタとは、アスタリスク(*)をセレクタとして記述することで、すべての要素に適用するという意味を持ちます。

body要素でサイト全体をスタイリングする

サイト全体をスタイリングするときには、セレクタでbody要素を指定します。

まずはサイト全体をスタイリングしていきましょう。

フォントを指定する(font-family)

フォントを指定するときは「font-family」プロパティを使います。

今回はセリフ体で指定します。

body{
	font-family:sans-serif;
}

これでこのサイト全体のフォントがセリフ体になりました。

背景色を指定する(background)

次にサイト全体の背景色を設定します。

背景色を変えるには「background」プロパティを使います。

body{
	font-family:sans-serif;
	background:#dfdfdf;       
}

値はカラーコードと呼ばれる16進数で表したコードを入れます。「#dfdfdf」は薄いグレーを表しています。

カラーコードについて詳しくはこちらで紹介されています。

 

ここまでがbody要素に指定するCSSです。現在、サイトがこのように表示されていれば大丈夫です。

CSSでスタイリングしている途中です。

div要素でまとめてスタイリング

次に、画像や文字などが入っているdiv要素を指定します。

横幅を指定する(width)

横幅を指定するときは「width」プロパティを使います。値は主に「px(ピクセル)」という単位で指定します。

まずは先ほどの「background」プロパティで背景色を白に指定したら、横幅を300pxに指定します。

div{
	background:#fff;
	width:300px;
}

これでdiv要素が300pxの幅になり、サイトではこのように表示されているかと思います。

CSSでスタイリングしている途中のサイトです。

div要素の中にあるはずのimg要素が300pxからはみ出してしまっています。

img要素には別で横幅を指定する。

img要素の親要素の幅を指定したときには、必ずimg要素に横幅を指定しなくてはいけません。

親要素の幅より画像幅が大きい場合、今回のようにはみ出してしまいます。

なのでimg要素には別で「width」プロパティを使い指定します。

img{
        width:100%;
}

この「%(パーセント)」という単位は、親要素の幅に対する横幅の割合を表しています。

img要素の親はdiv要素にあたるので、画像は300pxで表示されています。

これでdiv要素の中に画像がおさまったかと思います。

cssのトレーニングの途中です。

 

このままでは全体的に狭いので、余白を開けていきます。

要素の外に余白をつくる(margin)

要素の外側に余白を作るには「margin」プロパティを使います。

「margin」プロパティは「margin-right」や「margin-left」で余白を開ける方向を指定することができますが、値にスペースを空けることによって上下左右の幅をまとめて指定することができます。

margin:上 下 右 左;
margin:上下 左右;
margin:上 左右 下;

となります。

 

今回は全体の余白を20px空けたいと思います。

div{
	background:#fff;
        width:300px;
	margin:20px;
}

すると、このようにdiv要素の外側に余白が空いたと思います。

marginで要素の外側に余白を開けました。

要素の中に余白を作る(padding)

要素の内側に余白を作るには「padding」プロパティを使います。

「margin」プロパティと同じように「padding」プロパティも、値にスペースを空けることでまとめて指定することができます。

要素の内側に10pxの余白を作ります。

div{
	background:#fff;
        width:300px;
        margin:20px;
	padding:10px;
}

これで内側にも余白ができました。

要素の外側に10px分の余白が空きました。

線を引く(border)

次にdiv要素の周りに線をつけます。

線を引くときに使うのが「border」プロパティです。

borderを引くときはこのように指定します。

div{
	background:#fff;
        width:300px;
        margin:20px;
	padding:10px;
        border:1px solid #00C7FF;
}

これでdiv要素の周りに線が引かれました。

cssでborderプロパティを使いボーダーを引きました。

線の角を丸くする(border-radius)

次に、この線の角を丸くします。

要素の角を丸くするときに使うのは「border-radius」プロパティです。

div{
	background:#fff;
        width:300px;
        margin:20px;
	padding:10px;
        border:1px solid #00C7FF;
        border-radius:10px;
}

div要素の角が少し丸くなりました。

cssのborder-radiusプロパティを使って要素の角を丸くしました。

あとは文字のサイズと色を変えていきます。

a要素にスタイリングする

文字の色を変える(color)

次に文字の色を黒(#303030)に変えていきます。文字色を変えるには「color」プロパティを使います。

文字を囲んでいるタグはh1要素とp要素なので、ついついこのように指定してしまいがちです。

h1, p{
        color:#303030;
}

しかし、これだと文字色は適用されません。

 

今回のHTMLでは、h1要素やp要素の外側にa要素があります。なので、h1要素とp要素を囲んでいるa要素をセレクタとして指定してあげます。

a{
        color:#303030;
}

これでh1要素とp要素の文字色が変わります。

cssでa要素を指定することで文字色が変わります。

文字に下線をつける(text-decoration)

どのブラウザでも、a要素にはデフォルトで文字に下線が引かれるようにスタイリングされています。

カードデザインの場合は必要ないので、文字の下線を消します。

下線を消すときには「text-decoration」プロパティを使います。

a{
        color:#303030;
        text-decoration:none;
}

これでカードデザインらしくなってきました。

a要素をtext-decorationを使い下線を消しました。

h1要素をスタイリングする

最後に文字の大きさと余白を調節しましょう。

文字のサイズを変える(font-size)

最後にh1要素の文字の大きさを変えます。

文字の大きさを変えるには「font-size」プロパティを使います。単位は「px(ピクセル)」や「em(エム)」「rem(レム)」で調節することができます。

h1{
        margin:10px 0 20px;
        font-size:14px;

}

これでカードデザインの完成です!

CSSの練習ファイル終了です。
Thanks to our advertisers