photo
photo
  1. トップ
  2. Webデザイン
  3. CSSとは?初心者でも必ずCSSが書ける方法をわかりやすく解説!

CSSとは?初心者でも必ずCSSが書ける方法をわかりやすく解説!

WEBプログラミングを学習し始めると、HTMLの次にCSSを学習するというのが一般的です。

今回の記事は、HTMLは大体理解できたけど、CSSはまだ全くわからないという人のために、「CSSとは?」「CSSって何なの?」という疑問を解消して頂ける内容となっています。

本記事の特徴は、「プログラミングの学習サイトなどは、専門用語が多く使われていて分かりにくい」と感じている人でも理解できるように専門用語を使わずに解説していることです。

また、最後には自分でCSSを記述して、ブラウザに表示させるというCSS実践の機会もご用意しました。この記事を読み終えた頃には「CSSとは?」という疑問は無くなっているでしょう。ぜひ最後までお読みください。

CSSとは?初心者向けに解説!

CSSとはWebページの文字の色や大きさ、背景、配置といったスタイル(見た目)を設定する言語です。読み方は「シーエスエス」です。

一般的にWebサイトはHTML(エイチティーエムエル)という言語で記述されており、これにスタイルシートを記述する言語であるCSSを適用することで、私達が普段見ているWebサイトが構成されています。

HTMLファイルにスタイル(CSSの記述)を含めることも可能ですが、そうしないのはホームページの文字や背景などを、ページ内で統一するためです。
例えば、ある企業のホームページにトップページと商品ページがあったとします。このとき、それぞれのページでHTMLを記述しますが、同じような見た目にしたい場合、2つのHTMLファイルに、デザインに関する同様の記述をする必要があり、余分な手間がかかります。

そこで見た目に関する共通の記述をCSSファイルとして記述し、それをHTMLに適用することで、複数のHTMLファイルに一貫したデザインを適用できます。

こうすることで、記述したソースコードが読みやすくなりますし、デザインを修正・変更したくなったときに、一括でメンテナンスができるようになります。

HTMLは <title> のように「< >」で囲まれた、「タグ」と呼ばれる部品が集まって構成されています。 <title>のタグはのように「/」を入れたタグとペアとなっており、それぞれ「開始タグ」「終了タグ」といいます。
タグで挟まれた部分を「要素」といい、要素をタグで挟むことで目印をつけています。

HTMLタグの書き方

とすることで、『「HTMLの書き方」というタイトル(title)だ』ということを意味づけています。

※HTMLやタグについては「HTMLとは?初心者向けにタグの種類と使い方の基本を解説! 」をお読みください。

図1はスタイルを記述せずにHTMLだけを記述したもの、図2はCSSでスタイル適用したものです。

[図1]:HTMLだけの場合

HTML反映画面

[図2]:HTMLにCSSを付け加えた場合

CSSを適用した画面

つまり、CSSとは、HTMLに色や大きさや背景などを加えて見た目を良くするものということになります。

 

CSS(スタイルシート)で出来ることは?

CSSWebページに統一のデザインを適用するために記述します。

sample_style1.css」という名前のスタイルシートにCSSを記述した場合、目的のHTMLファイルに「sample_style1.cssを適用する」記述を行うことで、そのデザインを適用できます。

2つ以上のスタイルシートを使いたい場合は、別に「sample_style2.css」というCSSファイルを用意してデザインの記述をしておけば、HTML側で読み込むCSSファイルの記述を書き換えるだけで、「sample_style1.css」と「sample_style2.css」を使い分けることができます。

CSSでは、文字の色や大きさ、フォント、背景色の変更などを記述します。

さらに、

  • 文字や画像を左寄せにするか、中央揃えにするか
  • 2段組みにするか
  • 文字と文字の間隔はどれくらいにするか

等といったレイアウトの調整もCSSで行います。

また、CSSでアニメーションの記述も可能です。本格的に動的なWebサイトを作る場合はJavaScriptというスクリプト言語を使うことになりますが、

  • マウスがボタンの上に置かれたときに、ボタンの色を変更する
  • ラジオボタンやチェックボックスをユーザのクリックにあわせて表示する
  • 数秒ごとに画像を切り替える

といった簡単なアニメーションならCSSの記述で行うことができます。

CSSの記述

また、この図に登場する、CSSを適応したいタグ(上図ではh1)のことを「セレクタ」、変更したい項目を「プロパティ」、そのプロパティを決めるものを「」と呼びます。(下図参照)

CSSの記述

プロパティと値は「{ }」で囲んであげることにだけ注意してください。そこだけ気を付ければ、CSSの書き方は難しくはないでしょう。

CSSの文法についてより詳しく知りたい方は「図解で簡単CSSの書き方4つが初心者でも5分で理解できる!」を合わせてご覧ください

 

CSSセレクタの指定方法

セレクタは、プロパティ(例えば文字の色や大きさ)と値(赤や1インチなどプロパティの具体的な値)を適用する対象を記述するものです。

セレクタには要素名を記述することになります。

例えば、HTMLには見出しを定義するための要素としてh1、h2、…、h6があります。

h1のデザインを指定したい場合は、

h1デザイン指定

のように、プロパティと値を「:」コロンで区切ります。

1つのセレクタに複数のプロパティと値を適用することもでき、

セレクタとプロパティ

のように「;」セミコロンで区切ります。

同様に複数のセレクタに同じプロパティと値を適用することもでき、これをグループ化といいます。

セレクタのグループ化は「,」カンマで区切ります。

セレクタのグループ化
HTMLの記述

以上のようなHTMLがあった場合、<section>の中に<h2>と<ul>要素が含まれています。

このとき<section>を親要素、<h2>と<ul>を子要素といいます。

子要素のスタイルを指定する場合は

スタイルの指定

のように記述します。

スタイルの指定

のように「*」を使用することで、全ての要素をセレクタに指定することもできます。

 

CSSを実際に書いてみよう!

ここまでの解説で、CSSとは何なのかについておおよそ理解できてきたと思います。

ここからは、実際にCSSを記述してもらい、ブラウザに結果を表示させてみるということを体験していただきます。
簡単なのでぜひ以下の手順に沿ってCSSを書いてみてください。

【手順】

1.Windowsに標準搭載されているメモ帳を開きます。(macの場合はsublime textというエディタがオススメです。こちらからダウンロードしてください。)

メモ帳

2.まずは以下のようなHTMLをメモ帳(sublime text)に記述します。

※<head>にある<link rel=”stylesheet”href=”test.css”>は、「test.css」というCSSファイル(後で作成します)をこのHTMLファイルに埋め込みますという宣言です。<link rel=”stylesheet”href=”ファイル名”>の「ファイル名」のところに読み込みたいCSSファイルを記述します。

3.左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。(sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。)

CSSの保存方法

4.すると、以下の画面が出てくるので、

CSSの保存方法

①「デスクトップ」をダブルクリック

②ファイル名を「sample.html」にする(拡張子が「.html」であればファイル名は何でもかまいません。)

③ファイルの種類を「すべてのファイル」にする。(sublime textの場合、ここは無視して大丈夫です。)

④「保存」をクリック

5.すると、保存先であるデスクトップに下の画面が表示されます。(※Google Chromeではなく、Internet Exploreなどブラウザのアイコンで表示される場合もあります。)

アイコン

これをダブルクリックすると…

ブラウザに自分で記述したHTMLが表示されているのが確認できました。

次はいよいよCSSファイルを作成して、このHTMLの見た目を整えていきます。

6.再びメモ帳を開き、先ほど作成したHTMLの見た目を変更するコードを記述してみましょう。

HTML記述

※background-colorプロパティは、文字に背景色を付けるためのプロパティです。

※font-sizeプロパティは文字の大きさを指定するためのプロパティです。

7.先ほどと同様に「ファイル」⇒「名前を付けて保存」を選択します。(sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。) 

HTML保存方法

8.すると、以下の画面が出てくるので、

HTML保存方法

①「デスクトップ」をダブルクリック

②ファイル名を「test.css」にする(拡張子が「.css」であればファイル名は何でもかまいません。)

③ファイルの種類を「すべてのファイル」にする。(sublime textの場合、ここは無視して大丈夫です。)

④「保存」をクリック

9.すると、保存先であるデスクトップに下のようなCSSファイルが作成されます。

アイコン

10.そしてもう一度、HTMLファイルを作成したときにデスクトップに現れたブラウザを表示してみましょう。以下をダブルクリックします。

アイコン

11.すると、先ほど記述したCSSが反映されました。

CSS反映画面

 

知っておきたい、CSS の基本プロパティとは?

ここからは、代表的なプロパティをご紹介します。プロパティの値もすべては紹介しきれませんので、詳しくはリファレンスをご参照ください。

プロパティ color 要素で使用される文字の色を設定
カラーネーム red、yellow、greenなど
16進数表示 red、green、blueの明るさを、それぞれ2桁(00~ff)の16進数で表す
例:#0afb12
RGB表示 rgb( r, g, b ) RGBを0~255の10進数で表す
例:rgb( 0, 0, 255 )
サンプルコード h1 { color : red }
h1{ color : #123abc }

 

プロパティ font-size 要素内で使用されるフォントサイズを設定
絶対単位 in:インチ
mm:ミリメートル など
例:120in
相対単位 em:親要素の文字サイズ
px:ピクセル など
例:1em、100px
キーワード smaller:親要素よりも1段階小さい
larger:親要素よりも1段階大きい
サンプルコード h1{ font-size : 10in }
h1{ font-size: smaller }

 

プロパティ text-align 文字列の行揃えを設定
left 左揃え
right 右揃え
center 中央揃え
justify ジャスティファイ
サンプルコード h1{ text-align: left }

 

プロパティ line-height 行の高さを設定する
実数値 例:20px
サンプルコード p{ line-height; 20px }
p{ font-size: 8px; line-height: 2 ; } 
→font-sizeの2倍の値になる

 

詳しくは「CSS line-heightの書き方3つを初心者向けに図で解説」をご覧ください

 

プロパティ background-color 背景色を設定
色コード
カラーネーム
colorを参照
サンプルコード h1{ background-color: lightblue }

 

HTMLではそれぞれの要素がボックスと呼ばれる領域を生成しています。

上の図2で言えば、水色になっている部分はh1の要素が管理するボックス領域です。

ボックスはボーダー、パディング、内部領域で構成されており、ボックスとボックスの間にはマージンが設定されています。

これらの操作をするのが、margin、border、paddingです。

HTMLの要素
プロパティ border ボックスの境界線の設定
プロパティの詳細 border
border-*
ボーダーの設定をする
書式はborder: [線幅] [スタイル] [色];
*部分にtop, bottom, left, rightを入れることで個別に設定可能
border-width
border-*-width
ボーダーの幅を設定する
border-style
border-*-style
ボーダーのスタイルを設定する
none, dotted, solidなどのスタイルがある
border-color
border-*-color
ボーダーの色を設定する
サンプルコード h1{ border: 5px dotted blue }
h1{ border-top-style: solid }

 

プロパティ margin
margin-*
他のボックスとの間隔を設定する
*部分にtop, bottom, left, rightが入れることで個別に設定可能
実数値 例:5px
サンプルコード h1, ul { margin: 20px }
→h1とulのマージンを20pxにする

 

プロパティ padding
padding-*
パディング部分の設定をする
*部分にtop, bottom, left, rightが入れることで個別に設定可能
実数値 例:2px
サンプルコード h1{ padding: 10px }
h1{ padding-bottom: 5px }

 

詳しくは「CSS paddingが初心者でもわかる!+αの知識も紹介」をご覧ください

 

プロパティ width 内部領域の幅を設定する
実数値 例:3px
サンプルコード h1{ width: 100px }

 

プロパティ height 内部領域の高さを設定する
実数値 例:4px
サンプルコード h1{ height: 50px }

 

プロパティ float ボックスの浮動化を設定する
ボックスの配置を設定する
none ボックスの配置を指定しない
left ボックスを左側に配置する
right ボックスを右側に配置する
サンプルコード section img { float: left; }

 

CSSとはWebページのデザインを設定する上で欠かせないものです。HTMLとは別にCSSを記述することで、コードの可読性が向上し、Webページのメンテナンスや修正作業を楽にしてくれます。

本記事で取り上げたのは一例ですが、多くのコードを実際に書いて、 しっかりとしたCSSの知識を身につけましょう!

 

WEBデザイン学習者が学ぶべきスキルセット

Webデザイナーを目指すなら

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。

イラレの基本~実践的なテクニックを学ぶ

【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?

最新のAdobe XDを最短でマスター

【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
実践的な作品制作をしながら、機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!

動画編集をマスターしよう!

業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。