CSSとはどんな言語?初心者にも分かりやすく書き方・使い方を解説!

アイキャッチ画像

「CSS」と聞いて何をイメージしますか?

「難しそう」「Webサイトで使用する言語」など、人によって様々でしょう。よくHTMLと並列して耳にする方も多いのではないでしょうか。今回はそんなCSSがどんな言語なのか、初心者の方にもわかりやすくご紹介します。この記事では、CSSについて以下のことが分かります。

読み終わる頃には「CSSに詳しくなった!」と思えるように、順を追って説明します。一緒にCSSについて知っていきましょう!

ゼロから3ヶ月でオリジナルアプリを開発!

GeekSalon
  • 受講生数1.2万人突破!満足度は95.5%
  • 継続率約80%!同世代の仲間と学ぶから挫折しない!
  • 大学生向けの安価な料金!
大学生限定プログラミングスクール

CSSとは?

CSS(Cascading Style Sheets)は、ウェブサイトのデザインを担当する言語です。HTMLで構造が作られたウェブページに、スタイルや装飾を加える役割を持っています。具体的には、テキストの色やフォント、要素の配置、背景など、ページのビジュアル面を整えるために使用されます。
では、最近アクセスしたWebサイトを頭にイメージしてみてください。白い背景に黒字のテキストだけが書かれたWebサイトでないことは確かです。
実際には白黒以外の色が加わっていたり、レイアウトが整っていたりと視覚的な工夫がされていることでしょう。そのデザインの部分をCSSが担っているということなのです。

CSSはプログラミング言語ではない!?

HTMLと同様にCSSは、CやJavaのような皆さんがイメージするプログラミング言語ではなく、厳密にはマークアップ言語と呼ばれる言語です。
先ほどもお伝えしましたが、CSSは命令を実行することはなく、ウェブページの要素にスタイルを適用する役割を持っています。これには、文字の色やサイズの調整、要素の配置、間隔の設定などが含まれます。
プログラミング言語がデータ処理やアルゴリズムの実行に使用されるのに対して、CSSはあくまで見た目を整えるための言語です。そのため、条件分岐やループなど、プログラムの流れを制御する機能は持ちません。

HTMLとCSSの役割って?

CSSの説明

HTMLとCSSは手を取り合ってウェブサイトを形作ります。HTMLが骨格や基盤を提供し、CSSがその上に美しい肌や衣服を加えるイメージです。HTMLで「何を表示するか」を定義し、CSSで「どのように表示するか」を指定します。

CSSを書くことでできることは?

CSSの力はデザインの自由度が高いことにあります。以下で、CSSで実現できることのうち5つをみんなさんに紹介します。

レイアウトの設計

一つ目に紹介するのはレイアウト設計です。FlexboxGridなどのプロパティを使用することで、レスポンシブなウェブデザインが可能になります。
今回はGridを使用し、実際にレイアウトを整えていきます。

こちらにCSSが記述されていない要素を6つ用意しました。ではこちらをGridを使用し、3列になるように見た目を整えてみます。

<!DOCTYPE html>
<html>
<head>
    <title>Grid Layout</title>
    <style>
        body {
            display: grid;
            grid-template-columns: repeat(3, 1fr);  /* 3列に分割 */
            grid-template-rows: auto auto;  /* 必要な行数を自動で設定 */
            gap: 10px;  /* グリッド間の隙間を設定 */
            padding: 10px;  /* グリッド全体のパディング */
        }
        div {
            background-color: #f4f4f4;
            border: 1px solid #ccc;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</body>
</html>

するとこのように変化します。これで綺麗な2×3が完成します。

色と背景の管理

CSSを使って、テキストの色や背景色、背景画像を簡単に設定できます。以下の例では、背景色と背景画像を同時に指定しています。
ここではbackground-colorbackground-imageの2つのプロパティを紹介しています。background-colorで背景の色を指定し、background-imageで背景画像を設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        body {
            background-color: #ff6253; /* 背景色を設定 */
            background-image: url('background.jpg'); /* 背景画像を設定 */
            background-position: center; /* 背景画像を中央に配置 */
            background-repeat: no-repeat; /* 背景画像を繰り返し表示しない */
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

すると、上記のコードで以下のような見た目が完成します。

CSS_background.webp

ちなみにff6253はRGBカラーモデルに基づいたカラーコードです。また、background-repeat: no-repeat;は画像が画面いっぱいに複数表示されることを防いでくれています。

フォントスタイルの調整

テキストの字体を変更する場合はfont-familyプロパティを使用します。また、フォントの大きさをfont-sizeで、太字をfont-weight、色をcolorで指定しています。
書き方は基本的に同じなので、分かってきた方も多いのではないでしょうか。

<!DOCTYPE html>
<html>
<head>
    <title>Styled Text</title>
    <style>
        p {
            font-family: 'Brush Script MT';
            font-size: 16px;
            font-weight: bold;
            color: darkblue;
        }
    </style>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

今回は、字体の変化がわかりやすいように筆記体にしてみました。

ホバーエフェクトの設定

インタラクティブなエフェクトとして、今回はよく使用される、ホバーエフェクトを紹介します。ホバーエフェクトとは、ユーザーがマウスカーソルを特定の要素の上に置いたときに、その要素が視覚的に変化する効果のことを指します。
以下はbutton:hoverを使用し、マウスカーソルを当てた時の色を指定しています。

<!DOCTYPE html>
<html>
<head>
    <title>Hover Button and Grid Layout</title>
    <style>
        body {
            display: grid;
            grid-template-columns: repeat(3, 1fr);  /* 3列に分割 */
            grid-template-rows: auto auto;  /* 必要な行数を自動で設定 */
            gap: 10px;  /* グリッド間の隙間を設定 */
            padding: 10px;  /* グリッド全体のパディング */
        }
        div, button {
            background-color: #000000;
            border: 1px solid #000000;
            padding: 20px;
            text-align: center;
        }
        button {
            background-color: rgb(0, 0, 0);
            color: white;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #ff6253;
        }
    </style>
</head>
<body>
    <button>Item 1</button>
    <button>Item 2</button>
    <button>Item 3</button>
    <button>Item 4</button>
    <button>Item 5</button>
    <button>Item 6</button>
</body>
</html>

Item 5にカーソルを当てると、背景の色が000000からff6253に変色しているのがわかるかと思います。

アニメーションの設定

最後に、アニメーションの紹介です。以下は、ページ読み込み時にフェードインするアニメーションをCSSのみで実装したものです。@keyframes を使用することでさまざまなアニメーションを定義することができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Fade In Effect</title>
    <style>
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        div {
            opacity: 0; /* 初期状態では透明 */
            animation: fadeIn 2s forwards; /* 2秒かけてフェードイン */
        }
    </style>
</head>
<body>
    <div>I fade in when the page loads!</div>
</body>
</html>

この例では、fadeIn という名前のアニメーションが定義されており、透明度が 0(完全に透明)から 1(完全に不透明)へと変化します。
from と to はそれぞれ 0% と 100% を表していますが、複数の中間状態を定義することもできます。

CSSってどこに書けばいいの?

CSSは、HTMLファイルに直接書く方法と、別のCSSファイルに書いてリンクする方法があります。通常は、CSSファイルを分けて管理することで、スタイルシートの再利用性と保守性が向上します。

HTMLファイルに直接指定して書く

ここでは、CSSファイルを別に用意するのではなく、HTMLファイル内に直接<style>タグを使ってスタイルを記述しています。この方法は、小規模なプロジェクトや簡単なページでの利用に適しており、CSSを別ファイルとして管理する必要がない場合に便利です。HTMLファイルだけで完結しているため、特定のスタイルを迅速に適用したい時や、特定のページでのみ必要なスタイルを適用する場合に役立ちます。
しかし、ウェブサイトが大きくなるにつれて、スタイルが複雑になったり、複数のページに共通のスタイルを適用したい場合は、CSSを外部ファイルとして分離する方がメンテナンスがしやすくなります。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code Example</title>
<style>
    pre {
        background-color: #f4f4f4;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 5px;
        overflow: auto;
    }
    code {
        color: #c7254e;
        background-color: #f9f2f4;
        font-family: Consolas, "Courier New", monospace;
    }
</style>
</head>
<body>
<h2>Code Example</h2>
<pre><code>function helloWorld() {
    console.log("Hello, world!");
}</code></pre>
</body>
</html>

CSSファイルを用意して書く

ここではCSSファイルを作成して、それをHTMLファイルに適用する方法を説明します。これはウェブ開発でよく使用される方法で、先ほどとは反対に、スタイルの管理を効率化し、メンテナンスを容易にします。
やり方はHTMLファイルとCSSファイルをリンクさせるのですが、ここで重要なのは、<head> セクション内にある <link> タグです。このタグを使って、CSSファイル(この例では style.css)をHTMLファイルにリンクしています。href 属性にはCSSファイルのパスを指定します。これらのファイルを同じディレクトリ(フォルダー)に保存し、ウェブブラウザでHTMLファイルを開きます。正しく設定されていれば、コードブロックがCSSで定義したスタイルで表示されます。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="header">サイトのタイトル</div>
    <p class="highlight">重要な内容がここに含まれます。</p>
    <p>この段落は通常のスタイルです。</p>
</body>
</html>
/* idがheaderの要素のスタイル */
#header {
    background-color: navy;
    color: white;
    padding: 10px;
}

/* classがhighlightの要素のスタイル */
.highlight {
    font-weight: bold;
    color: red;
}

CSSの具体的な書き方とは?

ここでは、CSSの具体的な書き方、そしてクラスとIDを使ったセレクタの指定方法について説明します。

CSSの基本構造

CSSはプロパティ: 値;の形式で記述されます。これをセレクタのブロック内に配置して、特定のHTML要素をスタイリングします。
例えば、以下のCSSコードでは、すべての<p>タグ(段落)に対して文字の色とフォントサイズを設定しています。

CSSの書き方.webp

それでは上の書き方に従って実際にCSSを記述してみます。

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

この例の場合、colorで要素のテキストの色を指定します。また、font-sizeでテキストのサイズを指定します。
ちなみに余談ですが、単位にはpx(ピクセル)以外にもem、remなどがあります。これにより以下の要素(こんにちは)が指定の通りに装飾されるという訳です。

HTMLの説明.webp

参考:https://udemy.benesse.co.jp/design/web-design/what-is-css.html#:~:text=%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%80%81CSS%20%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A8%E3%81%AF%EF%BC%9F

初心者が抑えるべきCSSの5選

  1. color
    テキストの色を指定することができます。また、background-colorとすることで背景の色も変更することができます。
  2. font-family
    フォントの種類を指定することがきます。フォントを変更するだけでWebサイトの統一感が増します。
  3. margin と padding
    外側と内側の余白を制御します。ブロックとブロックの間隔を開けたい時や、ブロックの中の空白を作りたい時に有効です。
  4. border
    境界線のスタイル、幅、色を設定します。また、border-radiusを使用することで角の取れた丸みのある境界線が実現できます。
  5. display
    要素の表示方式を決めます(例:block、inline、flex)。通常、コードは上から下に実行されるため、縦に長い見た目になってしまいます。
    そこで、このdisplayを使用すると、横並びに表示させることができたり、スクロールに左右されず、画面右下に固定することなんかも可能になります。使いこなせるようになれば、レイアウト設定は自由自在に操れるようになります。

CSSのプロパティは無数に存在するため、すべて覚えることは不可能に近いです。そのため、自分のやりたいことに合わせて、随時調べることが必要になります。

CSSをマスターするための学習方法とは?

CSSの学習方法はさまざまです。ここでは、Webサイトでの学習と動画での学習方法の二つに分けてご紹介します。

Webサイトで学習する方法

1.Progate(プロゲート)

ProgateのHTML/CSS画像

プロゲートは全16コースを有しており、モダンなReactからGitまで、多岐にわたる技術を学習することができるプログラミング初学者向けのWebサイトです
ユーザーに見やすいデザインとわかりやすい操作性であることと、インプット後に、こまめにアウトプットの機会が設けられていることが特徴的です。
無料版から開始することができますが、有料版のプラスに変更することで、教材をすべて閲覧できるようになります。料金は月額¥990(税込)/月~で学習することができます。(2024/12時点)
これからCSSを学習するのであれば、HTML&CSSのコースを選択し、受講するのがいいでしょう。

2.ドットインストール

ドットインストールは552レッスンを8,332本の動画で提供しているプログラミングの学習サイトです。ドットインストールは、すべてのレッスンに動画での解説がついており、一緒に手を動かして進めていくことができるのが特徴的です。
プロゲートと同様に無料版から開始することはできますが、提供されるほとんどがプレミアム版で提供されています。また、料金は¥1,280/月(税込)で受講することが可能で、以下の特典を得ることができます。(2024/12時点)

動画で学習する方法

3.Udemy(ユーデミー)

ユーデミーは数十万件の動画を有したオンライン学習プラットフォームです。アメリカの会社が運営を行っているため、英語で解説された動画がありますが、日本語での解説動画も多く存在します。
ジャンルにとらわれず、専門性の高いものから初心者向けのものまで幅広いコンテンツから学習できることが特徴的です。料金は講義ごとに設定されており、1講義あたり1000円から購入することが可能です。「CSS」と検索をかけると8,664件の動画がヒットし、世界的に優秀な講師からわかりやすく学習を進めることができます。

Youtube(ユーチューブ)

最後に紹介するのは、馴染みのあるYoutubeです。Youtubeには、さまざまなジャンルの動画が存在しますが、プログラミングを学習する時にも有効的です。
過去にエンジニアとして活躍していた人やフリーランスとしてエンジニアをされている人などから、興味のある講義を選択し学習することができます。そのほとんどが無料で公開されているため、プログラミングの学習にも十分活用することができます。

しかし、CSSを実務的にマスターするには、単にCSSの構文や仕組みを理解するだけでは不十分です。冒頭でもお伝えしたように、HTMLとCSSは手を取り合ってウェブサイトを形作ります。また、HTMLはWebサイトの制作時に使用されるマークアップ言語です。そのため、実際にウェブサイトを作成するプロセスを通じてCSSを適用し、直面する問題を解決しながら学ぶことが、最も効果的な学習方法です。実践的に学習することで、デザインとプログラミングのスキルを自然に身につけることができます。

Webサイト作成を行うならプログラミングスクール

ウェブサイト作成のスキルを習得するためには、プログラミングスクールが非常に有効です。独学では見逃しがちな最新の技術トレンドや業界標準のプラクティスを学ぶことができ、また、経験豊富な講師から直接フィードバックを受けることが可能です。
これにより、実際のプロジェクトに即したスキルが効率的に身につけられ、より高いレベルのウェブ開発能力を養成することができます。

Webサイト作成はGeekSalonがオススメ!

ウェブデザインのスキルを身につけたいなら、GeekSalonのプログラミングスクールがおすすめです。初心者からプロフェッショナルまでを目指せるカリキュラムで、実践的なプロジェクトを通じてCSSを習得できます。自分のペースで学べるオンラインコースもあり、学生の生活に合わせて学習を進めることが可能です。

GeekSalonのホームページ画像

ゼロから3ヶ月でオリジナルアプリを開発!

GeekSalon
  • 受講生数1.2万人突破!満足度は95.5%
  • 継続率約80%!同世代の仲間と学ぶから挫折しない!
  • 大学生向けの安価な料金!
大学生限定プログラミングスクール
Contact us.

無料説明会実施中!
お気軽にご参加ください

GeekSalonの詳細やプログラミング学習、卒業生の進路などを1対1でお話しします。その他のご質問やご相談も気軽にお聞きください。
コンタクト用イラスト

ゼロから3ヶ月でオリジナルアプリを開発!

大学生限定プログラミングスクール