【IT初心者向け】CSS入門―3分で分かりやすく解説する

CSS

CSS(Cascading Style Sheet)は、HTMLで記述された文章の体裁やデザインを指定するために用いられる言語です。

このページでは、CSSの基本(役割・処理内容)ととともに、CSSの基本的な書き方を解説しますが、前提知識としてCSSを学ぶ前にHTMLについての基礎知識があると理解がスムーズに進みますので、まずはこちらの記事からご覧ください。

【概要】このページで学べる内容

  • CSSとは?
  • CSSの書き方・基本ルール
  • セレクタ/プロパティの基本知識

Webページ制作に関わる方であれば絶対に知っておきたい内容ばかりですので、是非最後までご覧ください。

スポンサーリンク
スポンサーリンク

CSSとは?わかりやすく言うと・・・

CSSは、HTMLで構成される文章のデザインを指定するための言語です。

つまり・・・

  • HTML ⇒ Webページの文章構造を定義
  • CSS   ⇒ Webページのデザインを定義

と説明できます。具体的なイメージを持てるよう、実際の画面イメージを確認していきたいと思います。

  1. 【CSSなし】HTMLのみで構成される画面
  2.  CSSを適用させた画面

の順番で見ていきます。

HTMLのみで構成される画面

まずは、HTMLのみで構成される画面を見てみましょう。

blank
【ブラウザ表示】HTMLのみで書かれた文章

参考までに、実際のソースを載せておきます。

<h2>HTMLのみで書かれた文章</h2>
<p>これはHTMLのみで書かれた文章です。</p>
<p><a href="https://it-biz.online/">ビズドットオンライン</a>で使われている画像を表示してみます。</p>
<div class="flame"><img src="https://it-biz.online/wp-content/uploads/2019/11/4a64a7e1f57a7e67d6c3b038db1630eb-1.jpg" width="50%" height="50%"></div>

稀にですが、ブラウザorインターネットの調子が悪い時に、このような画面がでてきますよね。いわゆる味気がない画面です。

さて、このHTMLのみで書かれた文章にCSSを適用してみましょう。

CSSを適用した画面

こちらが、CSSを適用した画面です。(非常にシンプルなCSSしか適用していませんので、見た目の美しさは一旦度外視してください・・・。

blank
【ブラウザ表示】CSSを適用した画面

いかがでしょうか?簡単なCSSしか書いておりませんが、見た目の印象(色や枠)が変わっています。CSSでは、文字の大きさやフォント、記事の背景色やレイアウトなどほとんどのデザインを指定することができるのです。

※参考までに上記画面のソースコードを載せておきます。細かい構文ルールは、後ほど解説いたしますので、今は深く知ろうとする必要はありません。

<head>
 <style>
 body{
   background-color:#f5ef42;
 }
 h2{
   border: 2px solid #aaa;
   width: 400px;
   text-align: center;
 } 
 .flame{
   box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
 }
 </style>
</head>
<body>
 <h2>CSSを適用した文章</h2>
 <p>これはCSSを適用した文章です。</p>
 <p><a href="https://it-biz.online/">ビズドットオンライン</a>で使われている画像を表示してみます。</p>
 <div class="flame"><img src="https://it-biz.online/wp-content/uploads/2019/11/4a64a7e1f57a7e67d6c3b038db1630eb-1.jpg" width="50%" height="50%">
</body></div>

CSSを適用することで、HTMLだけでは実現できなかったレイアウトの変更や、文字のフォントの変更、また綺麗な見出しなどをデザインすることができます。

では、CSSはどのように書くのでしょうか?ここからは、具体的なCSSの書き方・構文ルールを解説していきます。

CSSの書き方・構文ルール

CSSの書き方は非常に簡単です。


セレクタ {
プロパティ
}


※改行はしてもしなくてもOKですが、見やすさ重視で改行してコーディングするのが普通です。

CSSの構文は上記の基本形を覚えるだけです。ただし、CSSを本質的にマスターするためには「セレクタ」「プロパティ」「値」の理解が重要です。逆に言えばそれらの理解をしないまま、CSSを書くことは不可能です。ここからは、以下のサンプルコードを基にそれぞれの基本用語について解説します。


blank

CSSの基本①:セレクタ

blank

セレクタ(Selecter)は、デザインを適用する対象を指定するものです。HTMLで構造化された文章の「どの部分のデザインを変えたいのか?」をセレクタで指定します。

タグやclass名 / id名を指定する形で利用します。したがって、セレクタにはhタグのHTMLタグや、divタグで設定したclass名/id名が入ります。上記のサンプルコードでは、bodyタグ全体を指定しています。

CSSの基本②:プロパティ

blank

プロパティは、何を変えるか?を指定します。上記サンプルコードでは、bodyタグの「background-color」すなわち背景色を変えるということを指定しています。

セレクタでは、どこを変えるか? "where"を指定していたのに対して、プロパティでは、何を変えるか?"what"を指定する役割を担います。

上記サンプルコードで示した背景色に加えて、例えばフォントを変えるのか、文字の色を変えるのか、文字の大きさを変えるのか、など様々な指定が可能です。対象のセレクタに応じて利用できるプロパティも微妙に異なるため注意が必要です。

CSSの基本②:プロパティの値

blank

プロパティの値は、どのようにデザインを変えるのか?を決めています。上記「#f5ef42」というのは、色のコード値です。

まとめると・・・

  • セレクタ    ⇒ どこの?(where)
  • プロパティ   ⇒ 何を?(what)
  • プロパティの値 ⇒ どのように?(how)
blank

CSSは基本的にこの3要素を理解し、適切にコーディングしていくことで成り立ちます。セレクタ・プロパティ・プロパティの3要素をここで丁寧に理解しておきましょう。

CSSの基本④:波括弧{}

CSSでは、必ずプロパティと、プロパティの値を波括弧{}で囲む決まりです。

波括弧以外の記号で記述してしまうと、CSSでコーディングした内容が適切にコンピュータに認識されません。

blank

案外、陥りがちな罠ですので「なぜかCSS適用されないんだよな・・・」という時には、波括弧を確認してみることをお勧めします。

CSSの基本⑤:コロン

プロパティとプロパティの値の関連性を示すために、両者の間には必ずコロン「:」を入れてあげる必要があります。

blank

CSSの基本⑥:セミコロンで区切る

プロパティの値を指定した後には、必ずセミコロン「;」で区切りを入れます。

実は、これプロパティを単一で指定していればセミコロンは不要です。複数のプロパティを指定した場合に必要なルールです。

ただし、実践的な目線で言えばプロパティを単独で指定することはあまりありません。そのため、必ず毎回セミコロンで区切りを入れる習慣をつけましょう。

CSSをコーディングしながら学びたい方は

CSSを実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがベストです。各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

タイトルとURLをコピーしました