アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

CSSとは?初心者向けに基本を解説

Featured image of the post

Webサイトを作成する際に、HTMLと並んで欠かせないのがCSS(Cascading Style Sheets)です。HTMLがWebページの「骨組み」を作るのに対し、CSSはそのデザインやレイアウトを担当し、より見た目の良いページを作るために使用されます。

この記事では、CSSの基本概念や書き方、具体的な使用例をわかりやすく解説します!


[目次を開く]

1. CSSとは?

CSS(シー・エス・エス)は「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略で、Webページのデザインやレイアウトを指定するための言語です。

例えば、HTMLで作成したページの文字の色や背景色、フォントサイズ、余白の調整などをCSSで設定できます。

🔹 HTMLのみのWebページ

<!DOCTYPE html>
<html>
<head>
    <title>CSSとは?</title>
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは本文の段落です。</p>
</body>
</html>
Image in a image block

⬇️ CSSを適用すると...

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: lightblue; }
        h1 { color: darkblue; font-size: 30px; }
        p { color: gray; }
    </style>
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは本文の段落です。</p>
</body>
</html>

背景色が青くなり、見出しの色やサイズ、本文の色が変わりました!

Image in a image block

2. CSSの書き方

CSSは3つの方法で適用できます。

(1) インラインCSS(HTMLタグ内に直接指定)
<p style="color: red; font-size: 20px;">赤い文字の段落</p>

メリット: すぐに適用できる

デメリット: たくさんの要素に適用すると管理が大変


(2) 内部CSS<style>タグ内に記述)
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

メリット: HTMLファイル内にまとめて記述できる

デメリット: ページごとにCSSを書かないといけない


(3) 外部CSS(別のCSSファイルを作成して読み込む)

style.css(CSSファイル)

p {
    color: green;
    font-size: 16px;
}

HTMLファイルで読み込む:

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

メリット: 複数のHTMLファイルで共通のCSSを使える

デメリット: 別のファイルを用意する手間がある


3. CSSの基本プロパティ

CSSにはさまざまなプロパティ(設定項目)がありますが、代表的なものを紹介します。

プロパティ 説明
color 文字の色を変更 color: red;
font-size 文字の大きさを変更 font-size: 20px;
background-color 背景色を変更 background-color: yellow;
width / height 要素の幅・高さを指定 width: 200px; height: 100px;
margin 外側の余白を設定 margin: 10px;
padding 内側の余白を設定 padding: 10px;
border 枠線を指定 border: 2px solid black;

例: 見出しを青くし、文字サイズを30pxにする

h1 {
    color: blue;
    font-size: 30px;
}

4. CSSとHTMLの関係

HTML → 構造 / CSS → デザイン

[ HTML ]  → ページの骨組み(見出し・文章)
[ CSS ]   → 見た目(色・フォント・レイアウト)

例えば、以下のHTMLページにCSSを適用すると...

<!DOCTYPE html>
<html>
<head>
    <style>
        body { background-color: lightgray; }
        h1 { color: darkblue; text-align: center; }
        p { font-size: 18px; color: gray; }
    </style>
</head>
<body>
    <h1>CSSの例</h1>
    <p>これはCSSを適用した段落です。</p>
</body>
</html>

見出しの色が青になり、文字が中央寄せに!

段落の文字サイズが18pxになり、灰色になった!

Image in a image block

5. CSSを学ぶメリット

(1) Webサイトを自由にデザインできる

CSSを使えば、Webサイトの見た目を自由にカスタマイズ可能!

(2) スマホ対応(レスポンシブデザイン)も簡単

@media を使えば、スマホでも見やすいサイトを作れる!

@media screen and (max-width: 600px) {
    body { background-color: lightgreen; }
}

(画面幅600px以下のとき、背景色を緑にする)

Image in a image block

(3) Web開発の基礎として必須

HTMLだけではシンプルすぎるため、CSSの知識はWeb制作に欠かせません!


まとめ

CSSはWebページのデザインやレイアウトを指定する言語!

HTMLの骨組みにCSSを適用することで、美しいデザインが可能!

外部CSSを使うと、複数のページでスタイルを統一できる!

レスポンシブデザインを取り入れて、スマホ対応も可能!

WebサイトをおしゃれにカスタマイズするにはCSSが必須なので、ぜひ学んでみてください!

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会