ホーム > 記事一覧 > 【初心者向け】CSSの基本を徹底解説｜色・文字・レイアウトの基礎

【初心者向け】CSSの基本を徹底解説｜色・文字・レイアウトの基礎

投稿日：2025/3/14

最終更新日：2025/3/14

　CSSはWebサイトを作る上で必須となる知識です。もしCSSを使わずにWebサイトを作るとしたらとんでもないことになります。非常に淡白としたWebサイトへとなってしまいます。

またこの言語は、初心者にとっても扱いやすい言語となっているため、習得しやすい言語です。

CSSを使いこなせるようになることで、デザイン性の高いスタイリッシュで操作性の高いWebサイトを作ることができるようになります。

ボタンやメニュー、背景、アニメーションなどページの印象を左右するほぼ全ての要素はCSSでコントロールされています。

さらにCSSは直感的に学ぶことができるため、比較的楽に習得が可能な言語となっています。

本日はそんなCSSの基本を徹底解説していきます。

今回の記事では以下の項目について解説します。

CSSファイルの作り方
セレクタとはそもそも何か
基本となる文字装飾の方法

CSSとは？基本概念の説明

CSSとはHTMLで作られたWebページの見た目を装飾・デザインするための言語です。

HTMLがページの構造を設計する役割を持つのに対してCSSはページの見た目を整える役割を持ちます。CSSは「セレクタ」、「プロパティ」、「値」の3つの基本的な要素で構成されています。

では実際のCSSのコードの事例を用いてご紹介いたします。

Yama

私の場合はCSSを覚え始めてからプログラミングを楽しく感じ始めました。
より本格的になってくる感じがワクワクした記憶があります。

                
        body{
          background-color: red;
          }

「body」の部分がセレクタと呼ばれる部分でHTML内のどの要素にスタイルを施すかを指定します。

「background-color」の部分はプロパティと言われます。このプロパティだと背景色をつけることができるという特徴があります。

そして最後の「red」の部分が値の部分です。「background-color」は色を決めるプロパティであるので値の部分で色を選択することができました。

つまり上記のコードでは「body」というHTMLファイル内にある要素に「background-color」というプロパティを使用して、「red」という値を設定したという意味になります。

これがCSSの基本概念です。では実際にもっと色んなものを書いてみましょう。

CSSのファイル作成と書き方

Yama

まずはCSSファイルの作り方です。

[前提]

・VScodeを操作方法をある程度知っている（ファイル作成、Live Server起動方法）

CSSファイルの作り方

CSSのファイル作成と書き方について説明します。CSSはWebページの見た目を整えるためのスタイルシート言語で、通常はHTMLとは別のファイルとして作成します。

まず、拡張子が「.css」のファイルを用意し、例えば「style.css」と名前を付けます。

次に必要な作業が、HTMLファイルとCSSファイルを繋げる作業が必要となってきます。以下のコードのここに入れますのところにlink rel="stylesheet" href="style.css"を配置します。 link rel="stylesheet" href="style.css"についてはこの後にすぐ説明いたします。

その結果、HTMLファイルのコードはこのようになっているはずです。以下のコードのなっていれば完了です。

              
      <!DOCTYPE html>
      <html lang="ja">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="/style.css" type="text/css">←これを配置することでHTMLファイルとCSSファイルを繋げることが可能
      </head>
      <body>
        
      </body>
      </html>

link rel="stylesheet" href="/style.css" type="text/css"について説明します。HTMLとCSSを繋げるためにlinkタグを使用します。次にrel="stylesheet"についてですが、ファイルとの関係性を表しています。この次が1番重要です。hrefは繋げたいファイルの位置を表しています。また自身で使う場合、書く内容が変わってきます。そして最後にtypeについてですが、その接続したいファイルの種類を表しています。

              
      <link rel="stylesheet" href="/style.css" type="text/css">

いくつかの例を用いてhrefについてもう少し深掘りしていきます。今までのファイルはこのような位置関係になっていました。そのためhref = "/style.css"という形になっていました。

別のパターンを見てみましょう。style.cssがフォルダの中にあった場合です。

フォルダの作り方は左上のフォルダマークにプラスマークがついている部分をクリックすることでフォルダを作ることができます。名前をtemplateとしてみましょう。(名前はなんでもいいです。)

作成したらそのフォルダにstyle.cssを移動させてみましょう。(style.cssをドラッグすることで移動することができます。)

最終的にはこのような形になっているはずです。

フォルダをクリックしてみるとちゃんとstyle.cssがあります。

この場合HTMLファイルからこのCSSファイルに接続したい場合のファイルのパス、つまりhrefは/template/style.cssとなります。またhrefについて記述する場合は自動で候補が出てきますので、「このファイルはこのパスである」と覚える必要はありません。以上がCSSファイルの作り方でした。

Yama

では実際にCSSを書いていきましょう。

CSSの書き方

次にCSSの基本的なものの書き方をご紹介いたします。以下のコードはこのように読みます。

「HTMLのbodyという要素にbackground-colorつまり背景色を赤で設定し、marginを10px分スペースを空けて、paddingを10px分スペースを空ける」というように読むことができます。

              
      body{
        background-color: red;
        margin: 10px;
        padding: 10px;
      }

marginとpaddingについてです。この図をご覧ください。↓

「コンテンツ」とはh1タグなどの要素を表しています。
「padding」はコンテンツの外側の部分を指します。
「border」は枠線のことを指します。つまり枠線はpaddingの外側に配置されます。
「margin」はborderの外側のスペースを表します。

またここで覚えていただきたいイメージがあります。それは要素は全て四角であるということです。全て四角でイメージをするというのを是非覚えていただきたいです。そうするとどのようなサイトを作ろうかというときにイメージしやすくなります。

ここまで来たらあとは、どのようなスタイルをHTMLの要素につけることができるのかをどんどん覚えていくことで自身の思い描いているものを形にすることができます。

セレクタの種類と使い方

CSSにあるセレクタとは様々な種類があります。それぞれを実際のコードを用いて説明いたします。まず「要素セレクタ」です。これはHTMLの要素を指定することを意味します。先ほどのコードがまさに要素セレクタを指定しています。

              
      body{
        background-color: red;
        margin: 10px;
        padding: 10px;
      }

次に「classセレクタ」です。これはHTML内でclassを作成し、それ自体にスタイルを適用するということを意味します。これはHTMLのコード、CSSのコードを使用して説明いたします。

以下のようにHTMLの要素にclassを指定します。class="main-title"のmain-titleの部分は自由に名前を決めることが可能です。
今回はmain-titleとさせていただきました。

そしてCSSで先ほどのmain-titleを指定することでこの要素にスタイルを適用することができます。
「.main-title」のようにそのクラス名の最初に「.」を記述しなければなりません。

HTML

              
      <h1 class="main-title">唐揚げ</h1>

CSS

              
      .main-title{
        background-color: yellow;
        font-size: 10px;
      }

また「擬似要素」というものがあります。これはどういったものかというとユーザーの動作によって変化を起こすことができます。ではhoverというものを紹介いたします。これを指定することでカーソルが要素に触れた時に変化を起こすことができます。今回のコードだとカーソルがmain-titleの要素に触れると背景色が赤になり、font-sizeが5pxになります。

              
      .main-title:hover{
        background-color: yellow;
        font-size: 5px;
      }

先ほど利用した「テスト」のフォルダをVSCodeで開き、Live Serverで実際にどんな動きをするかみてみましょう。

Yama

Webサイト開発において1番楽しい瞬間です。

是非変化をより楽しむためにも値を自分の好きな数字に変えてみてください。

私がCSSを学び始めた時はfont-sizeを1000pxにしたりして色々実験していました。

変化前

変化後

カーソルが文字に触れると文字が5px分に小さくなり、背景色が黄色に変化しました。

文字の装飾の仕方

Webサイト作成で基本となる文字の装飾をご紹介いたします。これができるようになるとWebページの印象が良くなったり、読みやすくなります。

まずはこのコードをご覧ください。これらが代表的なプロパティです。

                
        .main-title{
          color: red;
          font-size: large;
          font-family: 'Courier New', Courier, monospace;
          font-weight: bold;
        }

「color」は文字の色を変えるためのプロパティです。

「font-size」は文字の大きさを変えることができます。

「font-family」は文字の形を変えることが可能です。

「font-weight」は文字の太さを変えることができます。

ちなみに上記のコードをmain-titleに適用するとこのようになります。

文字が小さいので今度は大きくしてみましょう。以下のコードに書き換えてみてください。font-sizeを100pxに変更です。

                
        .main-title{
          color: red;
          font-size: large;
          font-family: 'Courier New', Courier, monospace;
          font-weight: bold;
        }

これらのように文字に色んなスタイルを適用することが可能です。是非色んなスタイルを試してみてください。

実践的なことは中級編で解説をいたします。↓↓↓

まとめ

CSSはWebサイト開発において必要となってくるプログラミング言語です。CSSができるようになるとかっこいいWebサイトであったり、リッチ感を出すことができるサイトであったり、様々な種類のWebサイトを作ることができます。習得を目指すことをお勧めいたします。
次回はCSS中級レベルです。この記事では実際により本格的にコードを書いていき、またデザインをする際にどんな考え方が必要なのかも学んでいきます。