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

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

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

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

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

 

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

 

目次

 

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

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

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

 

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

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

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

例)pタグ

p {color: red; }

 

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

 

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

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

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

たとえば、フォントサイズを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は、ブラウザ上ですぐ確認できるので、思い通りの色・配置になっているか見てみましょう。普段見ているWebサイトも色や枠線、配置などはCSSで調整されているので、意識してサイトを見るとより良いでしょう。

 

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

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