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

CSSとは何かがたった5ステップでわかる初心者のための取扱説明書

こんにちは! CSSといえば私、ライターのナナミです。

ホームページ作りにはCSSが必要らしいけど、CSSってなんだろう?

そんな疑問、この記事でバッチリ解決できますよ。

ホームページ作成に欠かせないCSSですが、いきなりCSSが必要と言われてもよくわからないですよね。CSSはホームページのレイアウトを整える、デザインを表現するための言語です。

今回はそんなCSSを5ステップでご紹介!

  • CSSとはなんなのか
  • 知っておくとどんなことができるのか
  • どうやって使うのか
  • 知っておきたい注意点や活用法

などなど、CSSの基礎中の基礎を解説していきます。

CSSを理解して、素敵なホームページを作れるようになっちゃいましょう!

ステップ1:CSSとは何かを知ろう

CSSとは「Cascading Style Sheets」の略で、ホームページの見た目を素敵にしてくれる言語です。プログラミングの言語だと思われがちですが、正しくはスタイルシート言語という種類になります。

まあそんな学術的なことは覚えなくて大丈夫なので、どんなものなのかをサクッとご紹介していきましょう。

【ここでのポイント】

  • CSSはホームページの見た目を決める言語
  • いろんなデザインを表現できる
  • 簡単なアニメーションも作れる

ホームページの見た目を決める

ホームページを作るとなるとまず必要なのはHTMLです。しかしHTMLだけのサイトは色味もなくただ並んでいるだけの味気ないものです。

しかしこれにCSSを組み合わせると、文字に色をつけたり、枠をつけたり、画像の位置を変更したりすることができます。

こんなふうに、ホームページのレイアウトを整え、おしゃれに仕上げることができるのがCSSです。ホームページ作りに必須なのも納得ですね。

例えばこんなものが作れる!

例えばこの項目の見出し、CSSで背景色をつけ、角を丸くすることで表現しています。

他にもこんな横並びのレイアウトもCSSで表現しています。

そう、あなたが今見ているこのブログのレイアウトは、ほぼ全てCSSで作られているんです。それはこのブログに限らず、あらゆるホームページが同じようにCSSを使って作られています。

さらに下記のようなボタン、マウスカーソルを乗せるとちょっと動きますよね。

侍エンジニア塾の
サービス紹介をみる

こういうちょっとしたアニメーションも、CSSで作ることができちゃうんです。

ステップ2:CSSでできることを知ろう

ホームページ作りに必須なCSS。でも最近はCSSを知らなくてもホームページを作るアプリケーションやサービスも増えてきているので、知識としては必須とはいえなくなってきました。

しかしCSSを知っておくことで、より自由なホームページ作成ができるようになるんです。

【ここでのポイント】

  • CSSを知っているとホームページやブログの見た目を自由に作れる
  • スマホ版のサイトも作ることができちゃう
  • 他のプログラミング言語を使う時にも活躍する!

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

いちから見た目を作れるのもそうですが、すでにあるブログなどのカスタマイズにも活用できるのが大きな魅力です。

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

ホームページ作成も今はいろんなアプリやサービスがあるのでCSSの知識が不要なこともあります。でもアプリやサービスには限界があり、痒いところに手が届かないこともしばしば。思った通りのレイアウトにできなくて妥協せざるをえないこともあります。

より自由なレイアウトを求めるなら、CSSは覚えておいて損はないのです

スマホ対応もバッチリできちゃう

CSSはスマホ対応にも大活躍。スマホだけに使うCSSを書くことで、スマホ用の見た目にすることができます

今この記事をスマホで見ている人も多いのではないでしょうか? 最近はパソコンを持っている人よりスマホ持っている人の方が圧倒的に多いので、ブログもホームページもスマホ対応が必須になってきています。

そのためにもCSSを学んでおくと、スマホでのレイアウトも自由に作れてとっても便利なんです。

じつは他のプログラミング言語でも使う

CSSなんてどうせホームページの見た目にしかつかわないんでしょ? と侮るなかれ、アプリの見た目にだってCSSが使われています。

つまりパソコンやスマホに表示されるものであれば、あらゆる場面で出番があるんです

ちょっとややこしい話ですが、プログラミング言語でできるのは見た目を変えたりする処理ではなく、CSSを差し替える処理です。つまり見た目そのものにはCSSが使われています。

他の言語を学びより活用する上でも、CSSは覚えておくべき言語なのです。

ステップ3:CSSの使い方を知ろう

CSSの魅力について理解したら、次は使い方です。いちばん基本のお作法を確認しておきましょう。

【ここでのポイント】

  • 必要なのは「パソコン」「テキストエディタ」「ブラウザ」の3つ
  • CSSは「セレクタ」「プロパティ」「値」で構成されている
  • CSSはCSS用のファイルを用意し、それをHTML側で読み込むようにするのがおすすめ

使うために必要なもの

何をするにもまず道具が必要ですね! CSSを使うために必要なのはこちらです。

  • パソコン
  • テキストエディタ
  • GoogleChromeなどのブラウザ


はい、これだけです。見慣れないのはテキストエディタくらいですかね。

テキストエディタとはメモ帳みたいな文字を打てて保存できるソフトです。なのでメモ帳でもOKなのですが、便利機能が色々付いているプログラミング用のテキストエディタを用意するのがおすすめです。

下記の記事でおすすめエディタを紹介しているので、自分が使いやすいものを探してみましょう。

HTML/CSS、JavaScriptで使える超優秀フリーエディタおすすめ5選
更新日 : 2019年8月15日

基本の書き方

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

【CSS】

セレクタ{

	プロパティ:値;

}
セレクタ どのHTML要素にCSSを適用させるのかを指定する。
例)body .class #idなど
プロパティ 線や色など、何を変えるのかを指定する部分。CSSのキモ。
例)background boarder paddingなど
プロパティに対して、どのくらいの変化をさせるのかを指定する部分。プロパティごとに書き方の決まりがある。
例)#000 10px solidなど

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

一つの要素に複数の変更点がある場合は

【CSS】

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

このようにかっこの中に追加していきます。

CSSを書く場所

CSSを書いても、HTMLと連動させなければきちんと適用されません。連動させるための方法は下記の3つがあります。

別ファイルにして読み込む

CSSファイルを作成してその中にCSSを書き、HTMLに読み込ませる方法です。HTMLのheadタグの中に、下記のように書くことで読み込むことができます。

【HTML】

<link rel="stylesheet" href="CSSファイルへのパス">

別のHTMLファイルにも同じように読み込むことで、同じCSSを使いまわすことができます。

 
HTMLファイルに直接書く

HTMLファイルの中に直接CSSを書く方法です。styleタグの中に、下記のようにCSSを書いていきます。

【HTML】

<style type="text/css" media="screen">
	CSSの記述
</style>

直接記入なので、書いてあるファイルにしか適用されません。

 
HTMLタグに直接指定

HTMLファイルの中で、タグに直接CSSを指定する方法です。

【HTML】

ファイルどころかタグに直接記入なので、そのタグにしか適用されません。

 
一番便利なのは「CSSファイルを読み込む」方法です。いろんなファイルに使い回しができるので、基本はこの読み込み方法を使いましょう。

ステップ4:実際に使ってみよう

ここまではずっと見てるだけって感じでしたね。でもCSSを理解するなら手を動かすのが一番。

ということで、20分でできるCSS講座をご用意しました。実際に手を動かしながら、どんな感じで使うのかを体験してみてください。

HTMLファイルを用意する(目安時間5分)

そもそもCSSを適用させたいHTMLがないと始まらないですね。下記をコピペして「test.html」とかで保存しておきましょう。

【HTML】

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>20分でわかるCSSの使い方</title>
</head>
<body>
 <h1>20分でわかるCSSの使い方</h1>
 

初心者でも20分でCSSの使い方はわかります。難しいことは何もありません。まずはサクッと作って、流れをしっかり掴んでいきましょう

解説していたブログはこちら </body> </html>

CSSファイルを用意して読み込ませる(目安時間5分)

次にCSSファイルを用意します。何も書かれていない新しいファイルを用意して、「style.css」とかで保存しましょう。

重要なのは、ファイルの最後に「.css」を入れることです。これでパソコンはこのファイルをCSSファイルだと認識してくれます。

そしたら先ほどのHTMLに読み込ませましょう。下記のソースを「test.html」のheadタグの中ににいれてあげればOKです。

【HTML】

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

これで準備完了です!

CSSを書いていく(目安時間5分)

あとはもうCSSをどんどん書いていくだけです。べしべし書いていきます。今回はお試しなのでCSSも用意しちゃいました。

【CSS】

h1 {
    font-weight: normal;
    padding-bottom: 10px;
    text-align: center;
    position: relative;
    margin: 0 0 30px 0;
    letter-spacing: 5px;
}
 
p {
    line-height: 2;
    display: inline-block;
    background-color: #03A9F4;
    padding: 20px;
    position: relative;
    z-index: 999;
    margin: 50px 0 0;
    color: #fff;
    letter-spacing: 2px;
}
 
a {
    color: #fff;
    text-decoration: none;
    background-color: #F44336;
    display: block;
    padding: 15px 25px;
    border-radius: 5px;
    box-shadow: 0 4px 0 0 #9e2b23;
    font-weight: bold;
    width: 300px;
    text-align: center;
    margin: 50px auto 30px;
    letter-spacing: 2px;
}
 
h1::after {
    content: "";
    display: block;
    border-bottom: solid 5px #2196F3;
    position: absolute;
    width: 100px;
    right: 0;
    left: 0;
    margin: auto;
    bottom: -5px;
}
 
html {
    background-color: #a8e4ff;
}
 
body {
    background-color: #fff;
    padding: 30px 30px 30px;
    max-width: 700px;
    margin: 20px auto;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    position: relative;
}

これを「style.css」に貼り付けて保存しましょう。

ブラウザで表示してチェック(目安時間5分)

CSSのコードも入れたところで、どんな見た目になっているのか「test.html」をChromeで開いて確認してみましょう。

こんな感じで見た目が整っていれば大成功! CSSがきちんと適用されているのを確認できます。

CSSを書くときの大まかな流れはつかめましたか? OKならば、あとは細かい記述方法を覚えて、いろんな見た目を再現していくのみです。

ステップ5:CSSの勉強方法を知ろう

CSSに限ったことではありませんが、勉強方法を間違えると混乱してしまったり、どうしてもできなくて諦めてしまったり……。そんなちょっとしたところから挫折に繋がってしまうことが多くあります。

皆さんはそんなことにならないよう、最短で挫折せずに勉強するポイントをご紹介しましょう!

【ここでのポイント】

  • CSSは暗記しなくていい
  • サービスや本も活用しよう
  • 何かを作って勉強しよう

CSSは暗記しなくていい

勉強というと英単語のように暗記をしていくイメージを持っている方も多いと思います。しかし、CSSは暗記の必要はありません。むしろしない方がいいです。

CSSが使えるというのは、何も見ないでコードが書けることではなく、このデザインにするにはどこをどのように変えればいいのかを考えられるということです。

そのためにどんな記述が必要なのかは、その都度調べればOKです。ホームページ作成は試験ではないので、調べながらやってもなんの問題もないんです。

大事なのは「デザインを再現するためにどうすればいいかを考える」ことです。これを意識して学習するようにしてくださいね

サービスや本も活用しよう

何も課題がない状態で学習しても、それこそただの暗記になってしまいます。最近は色々な学習サービスや書籍があるので、どんどん活用していきましょう。

特に書籍は「課題となるサイト」を作っていくことで学習できるものも多くあります。具体的なホームページ作成を課題にすると、実際に自分が作るときの流れにも活かせるので超オススメです。

何かを作って勉強しよう

先ほど言ったように、CSSの勉強は実際に何かを作ってみるのが近道。本などの課題でもいいのですが、一番いいのは自分が作りたいホームページを作ってみることです

CSSを学びたいと思ったからには、自分のお店のホームページや趣味のホームページ、勤めている会社のホームページなど、作ってみたいものがあるのではないでしょうか?

それを作るために学ぶのではなく、実際に作りながら学んでいくことで、イチからホームページを作る練習になります。

ただ課題をこなすだけでは得られない深い理解を得ることができるのです。

とはいえそれを一人でやるのは難しい……
せめて誰かが教えてくれるなら……

という方は、スクールに通ってみるのはいかがでしょうか?

侍エンジニア塾はオリジナルカリキュラム。あなたが作りたいホームページに合わせて、ぴったりの学習方法と講師をご用意します。

マンツーマンレッスンなので、わからないところはすぐに質問できるし、誰かのペースに合わせてやる必要もありません。全部あなたの目標や理解度に合わせて指導をしていきます

気になる方は、ぜひサービスの詳細をご覧になってみてください。

侍エンジニア塾の
サービス紹介をみる

基本編はここまで! 次の項目から、CSSの覚えておきたい注意点や裏技についてご紹介していきます。

ステップアップ編1:覚えておきたい注意点

ここからはちょっとステップアップです! 基本をなんとなく理解したみなさんに教えておきたいポイントをまとめてみました。

まずはCSSを書く上で覚えておきたい注意点からです。

ぶっちゃけ、CSSは書くこと自体はそんなに難しくありません。ただ細かいルールが色々あったり、ブラウザによって使えるCSSと使えないCSSがあるなど、気をつけておきたいことがたくさんあります。

今回はその中でも特に気をつけたい3つのポイントをご紹介しましょう。

セレクタに注意

どこの要素にCSSを適用させるのかを指定するセレクタには、色々な指定方法があります。

タグ HTMLタグをそのまま指定する。
例)div p headerなど
ID HTMLタグに付けられたIDで指定する。
例)#ID名 (必ず頭に「#」をつける)
class HTMLタグに付けられたclassで指定する。
 例).class名(必ず頭に「.」をつける)

これらを使い分けることで、様々な要素に細かくCSSを適用させることができます。

このセレクタでよくあるのが、classで指定しているのに「.」がついていないなどのケアレスミスです。必要な記号をちゃんとつけていないと、CSSがちゃんと適用されなくなってしまいます。

細かい点ではありますが超重要なので、

  • セレクタには種類があること
  • IDには「#」classには「.」が必須なこと


は覚えておきましょう。

優先順位に注意

CSSには適用される優先順位というものがあります。ケアレスミスもなく正しく書かれているのにCSSがちゃんと適用されない……という時は、この優先順位が原因の可能性があります。

【優先順位のルール】

  • セレクタは「HTMLタグ<class<ID<HTMLタグに直接記入<important」の順に強い
  • 同じ強さのものはCSSファイル内の下にあるものが優先
  • セレクタを繋げて書くと優先順位が上がる
  • importantは何よりも優先される


このルールは正直ややこしいので、覚えるのは後回しでも大丈夫です。ただ「CSSには適用の優先順位がある」ということは今の時点で覚えておくといいでしょう。

ブラウザごとの違いに注意

IE、GoogleChrome、Firefoxなど、ブラウザには色々な種類があります。そしてそれぞれ別々の企業が作っているので、微妙に仕様が違います。

それにより、ブラウザごとで使えるCSSと使えないCSSがあったり、見た目がちょっと違ってしまったりするのです。

なのでホームページを作る際は、一通りの作業が終わった後に色々なブラウザで見た目のチェックをするようにしましょう。特にIEは独自の仕様が多く、見た目の崩れが出やすい厄介なブラウザなので要注意です。

ステップアップ編2:ちょっと便利な裏技紹介

今回この記事を読んでみて、

これいちいち書くの面倒だな。
どうにかもっと楽できないのかな……

と思った方も多いのではないでしょうか?

わかります、わかりますとも。CSS書いたらブラウザで確認してまたCSSファイルに戻って……とか面倒ですよね。

なので最後に、CSSを書くのが楽チンになるちょっとした裏技をご紹介しちゃいましょう

いちいち確認が面倒ならGoogle Chromeを使おう

みんな大好きGoogle Chrome、実はCSSを書く時に大活躍してくれるツールがあります。その名もデベロッパーツール、開発者用のツールということですね。

このツールの何が素晴らしいって、この画面でCSSが書けちゃうんです。

画像の赤枠で囲ったアイコンを有効にして、見た目を変えたい要素を選びます。

その状態で右下のCSSが色々出ているところにある+アイコンをクリックすると…

勝手にセレクタが入った状態に! そしてそのままCSSが書けちゃうんです! ちなみに予測変換までついてます……神機能……。

ここで書いたものはそのまま画面に反映されるので、見た目を確認しながら数値を変更することもできちゃいます。良さげな見た目になったら「inspector-stylesheet」と書いてある部分をクリックすれば…

CSSファイルにコピペする用のソースが出てくるので、あとはコピペしちゃえばOK。ファイルを行ったり来たりしなくても、デベロッパーツールを使えば簡単にCSSを書くことができちゃうんです。

シュミレーターを活用しよう

そもそも希望の見た目にするための試行錯誤がだるい……

そんな方は、CSSのシミュレーター(ジェネレーター)を使っちゃいましょう。

シミュレーターは、「こんな感じの見た目にしたいんだよなー」というイメージを直感的な操作で入力すると、いい感じのCSSコードを生成してくれる超便利なものです。これがあれば面倒な枠線や角丸、ちょっとややこしいグラデーション背景なんかも楽々作れちゃいます!

私がよく使っているのは下記のシュミレーターです。ぜひ使ってみてください。

CSSmatic

参考になるデザインサイトからコピペしちゃおう

「そもそもどんなデザインにするべきか悩む……」という方は、コピペOKなデザイン紹介サイトを活用してみてはいかがでしょうか?

例えばこういうサイトとかですね。

Maromaroスタイルレシピ

使いたいデザインがなくても近いものを選んで調整してあげれば、イチから作るよりもずっと楽にCSSを書くことができます。

CSSは気楽に楽しくやるのが一番

この記事を読む前までは

CSSってすごく難しいのでは……?
覚えることが山ほどあって大変そう……

なんて思っていませんでしたか?

でも調べたってOKだしコピペしてもいいんだと思うと、かなりハードルが下がると思います。

CSSはそのくらい気楽に初めてOK。この記事で少しでもCSSに興味を持っていただけたら幸いです。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

ナナミ

ナナミ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説