スタイルシート(CSS)の基本的な書き方【初心者向け】

CSS(カスケーディングスタイルシート)の書き方について初心者向けに解説した記事です。作成したHTMLファイルに対して、CSSをどのように書くかをサンプルコードを使いながら解説しています。デザインの勉強にもなると思うので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

本記事ではCSS(カスケーディングスタイルシート)の基本的な書き方について初心者向けに解説します。CSSについてよくわからない方は、まずはCSSとはの記事をお読みいただくことをおすすめします。

プログラミングやデザインの勉強をする上で、HTMLとCSSは最初に理解しておきたい知識なので、ぜひCSSの書き方をマスターしていきましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

20163020-2

 

今回はCSSの基本的な書き方について勉強していこう。

 

20160620

 

田島メンター!!CSSの構文ではどんなものを使うんですか〜?

 

20163020-2

 

まず覚えておきたいのが「セレクタ」「プロパティ」「値」の3つだね。これをおさえておけばだいたいのことはできるようになるよ。一番基本の形を見てみよう。

 

20160620

 

はい!

 

目次

 

CSSでできること

CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。

以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。

CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。

背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

スタイルシートが必要な理由

以前はHTMLのタグによってスタイルの指定も行われていました。

文字の大きさと色をHTMLで変更した場合の例

<font size="20px" color="red">テキスト</font>

現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関するタグは廃止され、CSSで指定するのが基本となっています。

HTMLが文書の内容、CSSが見た目というように役割をはっきり分けてサイトを構成していきます。

同じ内容をHTMLとCSSで指定した場合の例

HTML

<p>テキスト<p>

CSS

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

 

CSSでまず最初に覚えておきたい3つの要素

Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。

  • セレクタ – どのHTMLタグに対して見合えを調整するか
  • プロパティ – どういった内容のデザインを施すか
  • 値 – プロパティはどの程度か

 

簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。
説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。

たとえば、「h1タグ」に対して、文字の大きさを20ピクセルにしたいときは次のように設定します。

3つ
ほかのタグに設定したいときも同様です。

例)pタグ

p {color: red; }

 

最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。

 

20163020-2

 

セレクタはスタイルの指定を行う範囲、プロパティは実行する内容、値は具体的な指定となるよ。

 

20160620

 

この場合段落<p>のcolor、文字色をredの赤にするということですね。

 

20163020-2

 

そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。

 

プロパティを複数指定したいとき

ひとつのセレクタに対して、プロパティは複数指定することができます。

たとえば、フォントサイズを20px・文字の色を青にしたいときには、

h1{font-size: 20px, color: blue;}

のように書きます。
また、コードには空白部分は無視されるという性質があるので、{  }で囲んだ設定を見やすく並列に並べてもいいでしょう。

h1{
  font-size: 20px,
  color: blue;
}

 

プロパティの種類

プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。「CSS リファレンス」などで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。

 

下記の表は、CSSを書く上でよく使われるプロパティをまとめています。プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう。

プロパティ 説明文
color 文字色を指定する
background 背景の指定をする
background-color 背景の色を指定する
font-family フォントの種類を指定する
font-weight フォントの太さを指定する
line-height 行の高さを指定する
text-align 行の揃え位置を指定する
width 幅を指定する
height 高さを指定する
margin マージンの指定をする
padding パディングの指定をする
border ボーダーの色や太さを指定する
position 要素の配置方法を指定する
display 要素の表示形式を指定する
float 左か右に寄せて配置する
z-index 要素の重なりの順序を指定する

 

実践〜スタイルを作ってみよう〜

では実際に、プロパティを駆使して、簡単なスタイルを作ってみましょう。

今回は、次のHTMLコードをもとに進めます。

<!DOCTYPE html>
<html lang=“ja”>
  <head>
    <meta charset=“UFT-8”>
    <title>CSS</title>
  </head>
  <body>
    <h1>CSS入門</h1>
    <p>はじめてのCSS</p>
  </body>
</html>

 

ブラウザ画面ではこのように表示されます。

CSS入門

 

これを、最終的に次のようなデザインにしたいと思います。

div7

スタイルを設定するやり方はいくつかありますが、ここでは、<head>の部分に書き込んでいく方法で進めていきます。

まず、<head>のなかに、<style>を追加してください。このタグ内が、CSSとして認識されます。

 

<head>
  <meta charset=“UFT-8”>
  <title>CSS</title>
  <style>...</style>
</head>

 

準備ができたら、次の流れに従い見栄えを調節していきましょう。

《ブラウザ全体のスタイル調整(body)》

《白ボックスのスタイル調整(div)》

 

《ブラウザ全体のスタイル調整(body)》

ブラウザ全体を調整したいときは、 セレクタで body を指定します。

・背景色を変更する【background】

<style>
  body {
    background: #eeeeee;
  }
</style>

 

まず、背景の色を変えます。プロパティ「background」を使い、値にカラーコードを持ってきて、色を指定します。

カラーコードとは、色を16進数であらわしたもので、「eeeeee」は薄いグレイです。

カラーコード

参考:WEB色見本 原色大辞典

・フォントを指定する【font-family】

フォントを指定するには「font-family」を使います。ここでは、「メイリオ」に設定しましょう。

<style>
  body {
    background: #eeeeee;
    font-family: Meiryo;
  }
</style>

 

ファイルを保存し、ブラウザで開くと、このような画面になっているはずです。

背景グレイフォントメイリオ

 

ここまでできたら、次は表示内容を白色で囲い、ブラウザの中心に寄せていきます。

まず、「CSS入門」と「はじめてのCSS」をまとめて調整するために、上のように、<h1>と<p> を <div>で囲います。

<body>
  <div>
    <h1>CSS入門</h1>
    <p>はじめてのCSS</p>
  </div>
</body>

 

※ <div> は単独では意味を持ちませんが、囲った部分をひとつのブロック要素としてグループ化することができます。便利なタグなので、同様の意味を持つ <span> とともにぜひ覚えましょう。

 

《白ボックスのスタイル調整(div)》

そして、<div>に対してスタイルを指定します。

・背景色を変更する【background】

 

まず、背景を白色(カラーコード:ffffff)にします。

div {
  background: #ffffff;
}

div1すると、ブラウザの幅いっぱい背景色が適応されました。

・幅を変更する【width】

次に、幅を調節するプロパティ「width」を使って、背景の幅を300pxに指定してみます。

 

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

 

このように幅が狭まりました。

div2

・ボックス内の幅を調整する【padding】

プロパティ「padding」を使って、<div>ボックスの内側の幅を10pxに調整します。

div {
  background: #ffffff;
  width: 300px;
  padding: 10px;
}

div3

白いボックスと文字の間に余裕ができました。

・文字をボックスの真ん中に寄せる【text-align】

「text-align」を使って、白ボックス内を真ん中寄せ(center)にします。

div {
  background: #ffffff;
  width: 300px;
  padding: 10px;
  text-align: center;
}

div4

 

「text-right」で右寄せ「text-left」 で左寄せ になります。

完成形にだんだん近づいてきましたね。

 

・ボックスのふちに線を入れる【border】

線を引くときには、プロパティ「border」を用います。

「border」では、線の太さタイプ(直線や破線など)の3つを指定することができます。

ここでは、太さ1px、直線、グレイ色の線にしましょう。

div {
  background: #ffffff;
  width: 300px;
  padding: 10px;
  text-align: center;
  border: 1px solid #cccccc;
}

div5

 

・ボックスの外側に幅を持たせ、真ん中に寄せる【margin】

最後は、白ボックス自体をブラウザの真ん中寄せにし、外側に幅を持たせます。

プロパティは「margin」を使います。margin の値は、上下左右それぞれで指定したり、上下・左右にわけて指定したりと、様々なやり方があります。

今回は、「margin: 30px auto;」にしてみましょう。これは、上下に30pxの幅、左右を真ん中寄せ という指定になります。 

div {
  background: #ffffff;
  width: 300px;
  padding: 10px;
  text-align: center;
  border: 1px solid #cccccc;
  margin: 30px auto;
}

div7

これで、見本のように表示できました。

 

CSSの学習方法

初心者向けの学習サイトと書籍をいくつか紹介しています。これからどのプログラミング言語を学ぶにも基礎的な知識としてCSSは理解しておきたいので、ぜひ学習してみてください。

学習サイト

Progate

料金:無料(月980円の有料プランあり)

まず説明を読み、それに関する実践で覚えるという二段階で勉強していく学習サイトです。一番基礎のところから本格的なサイト作りまで順を追って学ぶことができます。

Progate

 

Markup

料金:無料

CSSに特化した学習サイトです。サンプルを見ながら入力し、プレビューを見ながら練習する形になります。実際に画面に反映させながらの勉強なので、それぞれの要素がどのように働いているかを確認することができます。

Markup

 

CODEPREP

料金:無料(月980円の有料プランあり)

「ブック」というひとつのテーマに沿ったコースを選び、順番に学んでいくサイトです。

2017年8/1より大量のブックが追加され、HTMLとCSSについても実際に使えるボタンやフォームの作成方法などを実際のコードを入力しながら学習することができます。

CODEPREP

 

書籍

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

各ディレクトリの構成やレスポンシブデザインのWebサイトを作る方法など、より本格的で実践的な内容を学ぶことができます。ある程度基本ができて、サイトの作成を実際に始める方におすすめの一冊です。

 

スラスラわかるCSSデザインのきほん

CSSの基本の書き方を、よく使う部分から丁寧に解説しています。HTMLもCSSも一番最初から勉強したい場合におすすめの本です。

 

HTML5&CSS3ポケットリファレンス

CSSはセレクタ・プロパティ・値といった基本の構成を覚えておくとほとんどのことができますが、プロパティや値の種類は数多くあります。

そのためいざという時にリファレンスが手元にあると、開発効率が大きく変わります。

HTML5&CSS3ポケットリファレンスは持ち運びにも便利な大きさで、HTML5とCSS3で使用する内容がしっかり集約されているので初心者から実践まで幅広く役立ちます。

 

今回の記事は以上です。

書いたCSSは、ブラウザ上ですぐ確認できるので、思い通りの色・配置になっているか見てみましょう。普段見ているWebサイトも色や枠線、配置などはCSSで調整されているので、意識してサイトを見るとより良いでしょう。

 

CSSの基本的な書き方がわかったら、他にどんな書き方があるのかを知るために、CSSの記述場所の記事も合わせてご覧ください。

 

20163020-2

 

ブラウザで見たときの、それぞれの状態を見てみよう。

 

20160620

 

最初は見出しと文字列が順番に表記されているだけだったのが、中央寄せになったり枠線がついたりしているのが分かりますね。

 

20163020-2

 

CSSではたくさんのプロパティとその値によってサイトのデザインを大きく変えることができるんだ。基本を覚えてどんどん利用していこう。

 

20160620

 

分かりました。ありがとうございます!

 

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。