スタイルシート（CSS）の基本的な書き方【初心者向け】
CSS（カスケーディングスタイルシート）の書き方について初心者向けに解説した記事です。作成したHTMLファイルに対して、CSSをどのように書くかをサンプルコードを使いながら解説しています。デザインの勉強にもなると思うので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。
目次
【動画の解説はこちら】
今回はCSSの基本的な書き方について勉強していこう。
田島メンター！！CSSの構文ではどんなものを使うんですか〜？
まず覚えておきたいのが「セレクタ」「プロパティ」「値」の3つだね。これをおさえておけばだいたいのことはできるようになるよ。一番基本の形を見てみよう。
はい！
CSSでできること
CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。
以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。
CSSを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ピクセルにしたいときは次のように設定します。
ほかのタグに設定したいときも同様です。
例）pタグ
p {color: red; }
最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。
セレクタはスタイルの指定を行う範囲、プロパティは実行する内容、値は具体的な指定となるよ。
この場合段落<p>のcolor、文字色をredの赤にするということですね。
そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。
プロパティを複数指定したいとき
ひとつのセレクタに対して、プロパティは複数指定することができます。
たとえば、フォントサイズを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>
ブラウザ画面ではこのように表示されます。
これを、最終的に次のようなデザインにしたいと思います。
スタイルを設定するやり方はいくつかありますが、ここでは、<head>の部分に書き込んでいく方法で進めていきます。
まず、<head>のなかに、<style>を追加してください。このタグ内が、CSSとして認識されます。
<head> <meta charset=“UFT-8”> <title>CSS</title> <style>...</style> </head>
準備ができたら、次の流れに従い見栄えを調節していきましょう。
《ブラウザ全体のスタイル調整（body）》
《白ボックスのスタイル調整（div）》
- 背景色を変更する【background】
- 幅を変更する【width】
- ボックス内の幅を調整する【padding】
- 文字をボックスの真ん中に寄せる【text-align】
- ボックスのふちに線を入れる【border】
- ボックスの外側に幅を持たせ、真ん中に寄せる【margin】
《ブラウザ全体のスタイル調整（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;
}
すると、ブラウザの幅いっぱい背景色が適応されました。
・幅を変更する【width】
次に、幅を調節するプロパティ「width」を使って、背景の幅を300pxに指定してみます。
div {
background: #ffffff;
width: 300px;
}
このように幅が狭まりました。
・ボックス内の幅を調整する【padding】
プロパティ「padding」を使って、<div>ボックスの内側の幅を10pxに調整します。
div {
background: #ffffff;
width: 300px;
padding: 10px;
}
白いボックスと文字の間に余裕ができました。
・文字をボックスの真ん中に寄せる【text-align】
「text-align」を使って、白ボックス内を真ん中寄せ（center）にします。
div {
background: #ffffff;
width: 300px;
padding: 10px;
text-align: center;
}
「text-right」で右寄せ、「text-left」 で左寄せ になります。
完成形にだんだん近づいてきましたね。
・ボックスのふちに線を入れる【border】
線を引くときには、プロパティ「border」を用います。
「border」では、線の太さ、タイプ（直線や破線など）、色の3つを指定することができます。
ここでは、太さ1px、直線、グレイ色の線にしましょう。
div {
background: #ffffff;
width: 300px;
padding: 10px;
text-align: center;
border: 1px solid #cccccc;
}
・ボックスの外側に幅を持たせ、真ん中に寄せる【margin】
最後は、白ボックス自体をブラウザの真ん中寄せにし、外側に幅を持たせます。
プロパティは「margin」を使います。margin の値は、上下左右それぞれで指定したり、上下・左右にわけて指定したりと、様々なやり方があります。
今回は、「margin: 30px auto;」にしてみましょう。これは、上下に30pxの幅、左右を真ん中寄せ という指定になります。
div {
background: #ffffff;
width: 300px;
padding: 10px;
text-align: center;
border: 1px solid #cccccc;
margin: 30px auto;
}
これで、見本のように表示できました。
CSSの学習方法
初心者向けの学習サイトと書籍をいくつか紹介しています。これからどのプログラミング言語を学ぶにも基礎的な知識としてCSSは理解しておきたいので、ぜひ学習してみてください。
学習サイト
Progate
料金：無料(月980円の有料プランあり)
まず説明を読み、それに関する実践で覚えるという二段階で勉強していく学習サイトです。一番基礎のところから本格的なサイト作りまで順を追って学ぶことができます。
Markup
料金：無料
CSSに特化した学習サイトです。サンプルを見ながら入力し、プレビューを見ながら練習する形になります。実際に画面に反映させながらの勉強なので、それぞれの要素がどのように働いているかを確認することができます。
CODEPREP
料金：無料(月980円の有料プランあり)
「ブック」というひとつのテーマに沿ったコースを選び、順番に学んでいくサイトです。
2017年8/1より大量のブックが追加され、HTMLとCSSについても実際に使えるボタンやフォームの作成方法などを実際のコードを入力しながら学習することができます。
書籍
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
各ディレクトリの構成やレスポンシブデザインのWebサイトを作る方法など、より本格的で実践的な内容を学ぶことができます。ある程度基本ができて、サイトの作成を実際に始める方におすすめの一冊です。
スラスラわかるHTML&CSSのきほん 第2版
CSSの基本の書き方を、よく使う部分から丁寧に解説しています。HTMLもCSSも一番最初から勉強したい場合におすすめの本です。
HTML5 & CSS3ポケットリファレンス
CSSはセレクタ・プロパティ・値といった基本の構成を覚えておくとほとんどのことができますが、プロパティや値の種類は数多くあります。
そのためいざという時にリファレンスが手元にあると、開発効率が大きく変わります。
HTML5&CSS3ポケットリファレンスは持ち運びにも便利な大きさで、HTML5とCSS3で使用する内容がしっかり集約されているので初心者から実践まで幅広く役立ちます。
今回の記事は以上です。
書いたCSSは、ブラウザ上ですぐ確認できるので、思い通りの色・配置になっているか見てみましょう。普段見ているWebサイトも色や枠線、配置などはCSSで調整されているので、意識してサイトを見るとより良いでしょう。
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
CSSの基本的な書き方がわかったら、他にどんな書き方があるのかを知るために、CSSの記述場所の記事も合わせてご覧ください。
ブラウザで見たときの、それぞれの状態を見てみよう。
最初は見出しと文字列が順番に表記されているだけだったのが、中央寄せになったり枠線がついたりしているのが分かりますね。
CSSではたくさんのプロパティとその値によってサイトのデザインを大きく変えることができるんだ。基本を覚えてどんどん利用していこう。
分かりました。ありがとうございます！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
