スライドショー スライドショー スライドショー

CSSとは?できることや書き方を初心者向けにわかりやすく解説

Web制作にはCSSが必要って聞くけど、CSSって何だろう?

これからWeb制作を学びたい方や学び始めたばかりの方には、このような疑問をもっている方もいるのではないでしょうか。

この記事では、CSSとはそもそも何なのか、HTMLとの違いや記述方法などCSSに関する内容を網羅的に解説していきます。CSSについて理解できれば、オシャレで見栄えのいいWebページが作れるようになりますよ。

CSSとは

CSSとは

画像:CSSとは
CSS(Cascading Style Sheets)とは、Webページのレイアウトやデザインを整えるための言語。基本的にはHTMLと組み合わせて使用されます。

まずはCSSの役割や、HTMLとの役割の違いを見ていきましょう。

CSSの役割

CSSはHTMLで書かれた文書構造に対して、レイアウトを揃えたり装飾を付けたりすることで、見た目を整える役割を担っています。

文字の大きさやフォント、色を変えたり、下線や枠、表を作ったりして見栄えの良いページを作ることが可能です。文字を横並びや中央揃えにしたりなど、配置を変更してレイアウトを整えることもできます。

例えば、HTMLのみで書いた場合は以下のような文字になります。
HTMLのみで書いた場合

画像:HTMLのみで書いた場合
この文字に、CSSで色やサイズ、背景などを指定すると、以下のようなデザインを適用できます。

CSSを利用した場合

画像:CSSを利用した場合
このようにCSSを使えば、HTMLで書いたWebページの見た目を変更できるのです。

HTMLとCSSの違い

HTMLとCSSの違いは、CSSがデザインを決めるのに対してHTMLは文書構造を作る役割を担っているところです。

HTMLにもデザイン用のタグがあるため、HTMLのみでデザインやレイアウトを変更することもできます。しかしHTMLのみでデザインを指定すると、以下のようなデメリットがあるため推奨されていません。

  • コードが長く複雑になる
  • コンピュータが理解しづらい
  • デザインの変更が面倒

そのため、HTMLとCSSのファイルは分けるのが一般的です。ファイルを分けることで、スマホやタブレットなどのデバイスに合わせた表示もしやすくなります。

CSSでできること

CSSで好きなデザインに

画像:CSSで好きなデザインに
CSSを理解すれば、Webページを好きなようにデザインできます。

近年では、ブログやサイトを立ち上げるだけであればCSSの知識は必須ではなくなってきました。しかしCSSが扱えれば、自分好みにカスタマイズできるなどのメリットがあります。

CSSでできることに関しては、以下の記事でも紹介しているので参考にしてみてください。

CSSでできることは何?具体例から役立つスキルまで解説
更新日 : 2021年2月8日

ホームページやブログを自由にカスタマイズできる

画像:ホームページやブログをカスタマイズ
一から見た目を作れるのもそうですが、すでにあるブログなどのカスタマイズにも活用できるのが大きな魅力です。

ホームページ作成も、今はいろんなアプリやサービスがあるため、CSSの知識がなくても作れてしまいます。

しかしアプリやサービスには限界があり、痒いところに手が届かないこともしばしば。思った通りのレイアウトにできなくて、妥協せざるをえないこともあります。

たとえばブログだと「ちょっとここの文字強調させたいな…」なんてときがありませんか?そんなときにもCSSを使うことができるのです。

より自由なレイアウトを求めるなら、CSSは覚えておいて損はありません。

WordPressサイトをカスタマイズできる

WordPressをカスタマイズできる

画像:WordPressをカスタマイズできる
WordPressは、プログラミングの知識がなくてもブログやサイトを作れる人気のシステム。CSSを理解していれば、WordPressで作ったサイトもカスタマイズできます。

WordPressはPHPという言語で作られていますが、PHPがわからなくてもCSSさえわかれば十分にカスタマイズ可能。CSSを書き加えれば、細かいところまでデザインを変えられるのでよりオリジナル性の高いサイトが作れるでしょう。

方法としては、テーマファイルに直接記述するか、追加CSSに記述する方法があります。

WordPressのカスタマイズ方法については、以下の記事で詳しく解説しているので参考にしてみてください。

初心者必見!CSS編集でWordPressを自分好みにカスタマイズする方法
更新日 : 2018年11月8日

CSSの書き方

CSSの書き方

画像:CSSの書き方
ここからは、CSSでデザインやレイアウトを変更するための記述方法を紹介していきます。

CSSを書くのに必要なものは以下の通りです。

  • テキストエディタ
  • ブラウザ
  • HTMLファイル

テキストエディタは、文字を打ち込んで保存できるメモ帳のようなソフトであれば問題ありません。便利な機能がある、プログラミング用のエディタを使うのがおすすめです。

CSSの基本的な書き方

CSSは「セレクタ」「プロパティ」「値」の3つで構成されています。

セレクタ{
プロパティ:値;
}

セレクタでどの要素の見た目を変えるのか決め、プロパティでその要素のどこを変えるのか、値でどのくらい変えるのかを指定するという書き方です。

一つの要素に複数の変更点がある場合は、以下のようにカッコの中に追加して書きます。

セレクタ{
プロパティ:値;
別のプロパティ:値;
別のプロパティ:値;
}

プロパティの順番に明確な定義はありませんが、googleではアルファベット順としています。

HTMLファイルの中に直接記述する場合は「styleタグ」か「style属性」を使う、2種類の方法があります。いずれにしろ「プロパティ:値;」の部分の書き方は変わりません。

HTMLファイルに直接書く方法は、こちらの記事で詳しく解説しています。

【HTML入門】styleタグやstyle属性を使って直接CSSを書き込もう!
更新日 : 2019年11月29日

CSSで文字や背景を装飾する書き方

文字や背景を装飾する方法

画像:文字や背景を装飾する方法
まずは基本である、文字の装飾と背景の表示について説明します。

文字に関するプロパティは「font」です。よく使われる文字のプロパティは、以下のようなものがあります。

  • font-family(文字の種類)
  • font-size(文字のサイズ)
  • font-weight(文字の太さ)
  • color(文字の色)

文字の色に関しては、fontが付かず「color」のみで指定できます。

次に背景です。背景には画像や写真を表示する場合や、色を指定する場合がなどがあります。背景に関するプロパティは「background」です。

  • background-color(背景の色)
  • background-image(背景の画像)
  • background-position(背景画像の表示位置)

これらのプロパティを使用した場合、以下のような記述の仕方ができます。

p {
background-color: #F44336;  /* 背景の色を#F44336に設定 */
color: #fff;           /* 文字の色を#fffに設定 */
font-family: sans-serif;       /* 文字のフォントをゴシック体に設定 */
font-size: 10px;          /* 文字のサイズを10pxに設定 */
font-weight: bold;       /* 文字の太さを太く設定 */
}

他にも、文字にラインや枠線を引いたり、背景にグラデーションを付けたりといった、さまざまなデザインができます。

それぞれの詳しい記述方法については、以下の記事で紹介しているので参考にしてください。

CSSで要素の配置を変える書き方

HTMLでは、要素は上から下に並んでいきます。これらの要素は、横並びや任意の位置に配置することが可能。

配置を変える方法はいくつかあり、たとえば要素を横並びにしたい場合は以下のような方法が使えます。

  • displayで表示の仕方を変える
  • floatで要素を回り込ませる
  • Flexboxで並び変える

以前はfloatで並べ替える方法が使われていましたが、現在ではFlexboxで並べ替えるのが主流です。Flexboxを使えば簡単に横並びのレイアウトができます。

たとえば以下のようなHTMLの場合、要素1~4は縦に並んでいます。

【HTML】

<div class="flex_container">
<div class="flex_item">要素1</div>
<div class="flex_item">要素2</div>
<div class="flex_item">要素3</div>
<div class="flex_item">要素4</div>
</div>

要素1~4を横並びにしたい場合、親要素であるflex_containerクラスにdisplay: flex;と指定するだけで、子要素のflex_itemが自動的に横並びになります。

【CSS】

.flex_container {
display: flex;
}

このように、簡単にレイアウトを変えられます。ただし、CSSでWebページのレイアウトを調整していると、思い通りにいかないことも少なくありません。

とくにdisplayプロパティに関しては混乱しやすいので、しっかりと理解しておきましょう。

CSSで動きを付ける書き方

CSSで動きを付ける

画像:CSSで動きを付ける
Webページで動きを付ける場合、JavaScript(jQuery)が必要と思われるかもしれません。しかしCSSだけでも簡単な動きは付けられます

よく見るものだと、ボタンの上にマウスポインタを合わせると色や大きさが変わったり、背景にアニメーションが付いたりといったものがあります。

CSSで動きを付けるには、transitionやanimationというプロパティで実装可能です。

セレクタ {
transition: 変化にかかる時間;
}

たとえばtransitionで動きを付ける場合、動きを付けたい要素に変化にかかる時間をs(秒)やms(ミリ秒)で設定します。

また、マウスポインタが乗ったときに変化させたい場合は「:hover 」を使うのですが、これは疑似クラスと呼ばれるものです。

セレクタ:hover {
プロパティ:値;
}

これらを使用すれば、CSSのみでも簡単に変化を付けられます。

レスポンシブ対応するための書き方

PCだけでなく、スマホやタブレットで表示したときに適切なレイアウトになるように設定が必要です。

レスポンシブ対応させる場合は、まずHTMLの<head>タグ内に、以下のような記述をしてください。

【HTML】

<meta name="viewport" content="width=device-width,initial-scale=1">

CSSにはメディアクエリの設定をします。メディアクエリとは、指定した画面サイズのときに表示されるCSSの設定のことです。

メディアクエリは、@media screen and(画面サイズの指定)と書いて画面サイズを指定します。

【CSS】

@media screen and (max-width:480px) {
/* 画面サイズが480px未満の場合、ここの記述が適用される */
}

上記の場合は、480px未満のデバイスで表示したときに書いた内容が適用されます。つまり、PC表示のCSSに加えて、480px未満用のCSSも追加で書くということです。

その他、レスポンシブ対応させるための細かい説明は、こちらの記事で紹介しているので参考にしてみてください。

CSSでスマホ対応!レスポンシブサイトの作り方と初心者向けQ&A
更新日 : 2021年2月25日

CSSファイルの作り方

CSSファイルの作り方

画像:CSSファイルの作り方
CSSファイルは、テキストファイルの最後に「.css」を付けるだけです。とりあえずstyle.cssのような名前でファイルを保存しましょう。

次にHTMLの<head>タグ内に、CSSファイルを読み込ませるための記述を追加します。

【HTML】

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

これでstyle.cssファイルが読み込めるようになりました。HTMLファイルをブラウザで表示すれば、CSSが適用されているはずです。

CSSの学習方法

CSSの学習方法

画像:CSSの学習方法
最後にCSSを学習するための方法を紹介します。無料で学べるサイトもあるので、まずは気軽に始めてみましょう。ネット環境、ブラウザ、テキストエディタがあれば、すぐに学習をはじめられますよ。

本で学ぶ

本のメリットは、必要な情報が体系的にまとめられているところです。

ネットでも情報は集められますが、プログラミング初心者の方は何から勉強すればいいかわからない方が多いでしょう。レベルに合わせてさまざまな書籍が販売されているので、入門者用の本を選んではじめてみましょう。




あまり古い本だとバージョンが違ったり、現在使われている機能の説明がない場合があるので、なるべく新しい物を購入しましょう。

CSSが学べる本は以下記事でも紹介していますので、併せて読んでみてください。

【最新版】CSSがしっかりわかる!おすすめ書籍まとめ10選
更新日 : 2021年2月8日

学習サイトを利用する

プログラミングを学べる学習サイトもあるので、そこからはじめてみるのもおすすめです。学習サイトであれば、基礎的な部分は無料で学べます

CSSを学べる学習サイトとしては、以下が有名です。

テキストエディタを準備する必要もなく、ブラウザ上に記述して学べるサイトもあります。まずは学習サイトで勉強を始めて、プログラミングが自分に向いていそうか確かめてみてもいいでしょう。

こちらの記事では、コーディングが学べるアプリを紹介しています。

【初心者必見】コーディングがサクッと勉強できるおすすめアプリ5選
更新日 : 2021年2月8日

プログラミングスクールで習う

独学よりもプログラミングスクールの受講がおすすめ

画像:独学よりもプログラミングスクールの受講がおすすめ
独学でもCSSの学習はできますが、質問・相談できる相手がおらず、モチベーションの維持も困難な独学は挫折してしまう人も少なくありません

一人で学習を続けられるか心配な方は、プログラミングスクールの受講を検討してみましょう。

このブログを運営する弊社では「侍エンジニア」というプログラミングスクールを運営しており、現役エンジニアがマンツーマンでしっかり指導するのが特徴。

一人ひとりに合わせたオーダーメイドカリキュラムを作成し、学習ペースの進捗管理も行うため、自分のペースで無駄なく学習を進められ、挫折しづらい環境が整っています。

画像:SAMURAI ENGINEER
また、月額3,000円程度でリーズナブルに学べるサブスク型のコースも用意しています。費用が心配な方や続けられるか不安な方にもおすすめです。

スクールでの学習を考えている方は、まずは気軽にオンラインの無料カウンセリングをご予約ください。

無料カウンセリングの詳細はこちら

まとめ

CSSは、HTMLで書かれた文字を装飾したりレイアウトを整えたりするための言語。CSSが分れば、Webページを見栄えよくオシャレにカスタマイズできます

他のプログラミング言語のように環境構築する必要がなく、ネット環境と無料のテキストエディタがあればすぐに始められます。

手軽に始められるので、これからプログラミングを始めてみたい方やWeb制作をしてみたい方は、HTMLと一緒にCSSの学習をしてみるのがおすすめです。

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら