CSSの基礎を初心者向けに徹底解説！元ぼっち大学生のフリーランスエンジニアがおすすめの本を紹介しつつ詳しく説明します
今回はプログラミング初心者のぼっち大学生のみなさんに向けて、大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスエンジニアとして独立した経歴を持つ僕が、CSSの基礎知識について、できるだけ分かりやすく解説していきます。初心者におすすめの本も何冊か紹介しますので、興味のあるぼっち大学生はぜひ一度読んでいってください。
たっちゃん
ぼっちユニバーシティの運営者です。
大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスのWebエンジニアとして独立。
本業はWebアプリケーションやWebサイトの受託開発がメインですが、最近はFlutterにハマっています。
趣味はバックパッカー旅行と立ち飲み屋さん巡り。
現在は都内でひとり法人を経営しながら、現役のぼっち大学生のみなさんへお役立ち情報を発信しています。
0. はじめに
ぼっち大学生のみなさんこんにちは！今日はプログラミングに興味のあるぼっち大学生のみなさん向けに、CSSの基礎的な知識を解説していきます。
Webサイト制作やWebアプリケーションの開発に興味のあるみなさんにとって、CSSに関する知識は、HTMLと同様に必須と言っても過言ではありません。
今回は、初めてCSSを学ぶ人にもできるだけ分かりやすい内容にしていますので、興味のあるぼっち大学生はぜひ読んでいってください。
また、こちらの記事では、HTMLについて解説をしていますので、併せて読んでみていただけたら嬉しいです。
1. CSSって何ですか？
ぼっち大学生のみなさんが、普段インターネットで見るページは、色々な要素で構成されています。
平たくいうと、CSSはそんなWebページの見た目をかっこよくするための仕組みです。
1-1. インターネットのページをかっこよくする仕組み
こちらの記事でも説明した通り、WebページはHTMLという言語で作られています。
HTMLは、Webページにどんな要素があるかを決める役割を担うものです。
例えば、HTMLを使うことによって、Webページに文字や画像を表示することができます。
しかし、HTMLだけで作られたページは、デザインが地味になってしまったり、掲載されている情報が分かりづらくなってしまいがち。
そこで、CSSが活躍します！
CSSは、HTMLで作られたページを装飾するために使われる言語で、文字の色や大きさ、背景の色や画像、ボタンの形など、いろいろなデザインを変えることができます。
下記のサンプルコードを見ていただけますでしょうか。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>こんにちは！</h1>
<p>これはサンプルの文章です。</p>
</body>
</html>
CSS:
h1 { color: blue; font-size: 24px;}p { color: red; font-size: 14px;}このようにして、CSSでHTML要素に色や大きさを指定することが可能になります。
1-2. HTMLとCSSのちがい
HTMLとCSSは、Webページを作るときに使われる2つの言語なのですが、それぞれ役割が違います。
HTMLは、ページの中に何があるかを決める役割があります。
例えば、文章や画像、ボタンなどを表示することができます。
HTMLは、ページの骨組みを作る言語と言えるでしょう。
一方、CSSは、HTMLで作られたページをかっこよく見せる役割があります。
文字の色や大きさ、余白の幅など、デザインに関することを指定することができます。
つまり、CSSは、ページにおしゃれな装飾を加える言語とも言えます。
このように、HTMLとCSSは、それぞれ違う役割を持っているということが、ぼっち大学生のみなさんにも伝わりましたでしょうか？
次の章では、CSSの書き方について解説していきますので、一緒に学んでいきましょう。
2. CSSの書き方を覚えよう
これから、CSSの書き方を一緒に覚えていきましょう。
Webページのどの部分を変えたいかを決める「セレクタ」と、どんな風に変えたいかを決める「プロパティ」と「値」について、わかりやすく説明します。
2-1. どの部分を変えたいかを決める「セレクタ」
まずは、どの部分を変えたいかを決める「セレクタ」について学びましょう。
セレクタは、HTMLの要素を指定して、どこにCSSのスタイルを適用するかを決めます。
このセレクタには、いくつかの種類があります。
2-1-1. タグセレクタ
タグセレクタは、HTMLのタグを使って要素を指定します。
例えば、すべての段落（ <p> タグ）にスタイルを適用するときに使います。
サンプルコード:
p { color: green; font-size: 14px;}この例では、すべての <p> タグに、緑色の文字と14pxの大きさが適用されます。
2-1-2. クラスセレクタ
クラスセレクタは、HTMLの要素につけたクラス名を使って指定します。
クラス名は、自分で決めることができます。同じクラス名を持つ要素に、まとめてスタイルを適用できます。
サンプルコード:
HTML:
<p class="highlight">これはハイライトされた文章です。</p>
<p>これは普通の文章です。</p>CSS:
.highlight { background-color: yellow;}この例では、クラス名「highlight」がついた <p> タグの背景色が黄色になります。
2-1-3. IDセレクタ
IDセレクタは、HTMLの要素につけたID名を使って指定します。
注意点としましては、ID名はページ内で一意（ユニーク）でなければなりません。
IDセレクタは、特定の要素だけにスタイルを適用するときに使います。
サンプルコード:
HTML:
<p id="important">これは大切な文章です。</p>
<p>これは普通の文章です。</p>CSS:
#important { font-weight: bold;}この例では、ID名「important」がついた <p> タグの文字が太字になります。
2-2. どんな風に変えたいかを決める「プロパティ」と「値」
次に、どんな風に変えたいかを決める「プロパティ」と「値」について学びましょう。
プロパティは、どんなスタイルを適用するかを決めるものです。
値は、プロパティにどのような設定をするかを指定します。
2-2-1. プロパティの例
プロパティにはたくさんの種類があります。
例えば、文字の色を変えたり、大きさを変えたり、背景色を設定したりすることができます。
以下に、いくつかのプロパティの例を挙げます。
color: 文字の色font-size: 文字の大きさbackground-color: 背景色border: 枠線padding: 内側の余白
2-2-2. 値の例
値は、プロパティに対してどのような設定をするかを指定します。
値は、プロパティによって異なる形式を持ちます。以下に、いくつかの値の例を挙げます。
- 色:
red（色名）、#FF0000（16進数）、rgb(255, 0, 0)（RGB値） - 大きさ:
12px（ピクセル）、1em（相対単位）、100%（パーセント） - 枠線:
1px solid black（太さ、線の種類、色）
これらのプロパティと値を組み合わせて、セレクタに適用することで、HTMLの要素に様々なスタイルを付けることができます。
3. よく使うCSSのプロパティを知ろう
ぼっち大学生のみなさんが、これから素敵なWebページを作っていくために、よく使うCSSのプロパティを知っておくと便利です。
ここからは、文字の形や色、背景、ページの箱の形、どこに置くか、どのくらいの大きさにするかなど、様々なCSSプロパティを学んでいきましょう。
3-1. 文字の形や色を変える方法
文字の形や色を変える方法について学びましょう。
ここでは、文字の大きさ、色、太さの変更方法を説明します。
3-1-1. 文字の大きさ
文字の大きさは、 font-size プロパティを使って変更できます。
例えば、文字を20pxにするには、以下のように書きます。
p { font-size: 20px;}3-1-2. 文字の色
文字の色は、color プロパティを使って変更できます。
例えば、文字を赤にするには、以下のように書きます。
p { color: red;}3-1-3. 文字の太さ
文字の太さは、 font-weight プロパティを使って変更できます。
例えば、文字を太くするには、以下のように書きます。
p { font-weight: bold;}3-2. 背景に色や絵を入れる方法
背景に色や絵を入れる方法について学びましょう。
ここでは、背景色と背景画像の設定方法を説明します。
3-2-1. 背景色を設定する
背景色は、 background-color プロパティを使って設定できます。
例えば、背景色を青にするには、以下のように書きます。
div { background-color: blue;}3-2-2. 背景画像を設定する
背景画像は、 background-image プロパティを使って設定できます。
例えば、背景に画像を設定するには、以下のように書きます。
div { background-image: url("example.jpg");}3-3. ページの箱の形を整える方法
ページの箱の形を整える方法について学びましょう。ここでは、余白とパディング、枠線のスタイルと太さの変更方法を説明します。
3-3-1. 余白とパディング
余白は、 margin プロパティを使って設定できます。
例えば、上下左右に10pxの余白を設定するには、以下のように書きます。
div { margin: 10px;}パディングは、 padding プロパティを使って設定できます。
例えば、上下左右に20pxのパディングを設定するには、以下のように書きます。
div { padding: 20px;}3-3-2. 枠線のスタイルと太さ
枠線のスタイルと太さは、 border プロパティを使って変更できます。
例えば、太さが2pxで、線が実線で黒色の枠線を設定するには、以下のように書きます。
div { border: 2px solid black;}3-4. どこに置くか、どのくらいの大きさにするかを決める方法
どこに置くか、どのくらいの大きさにするかを決める方法について学びましょう。
ここでは、位置の指定と大きさの指定方法を説明します。
3-4-1. 位置の指定
位置は、 position プロパティと top 、 right 、 bottom 、 left プロパティを使って指定できます。
例えば、要素を絶対位置で、上から50px、左から100pxの位置に置くには、以下のように書きます。
div { position: absolute; top: 50px; left: 100px;}3-4-2. 大きさの指定
大きさは、 width プロパティと height プロパティを使って指定できます。
例えば、幅が200pxで、高さが300pxの要素を作るには、以下のように書きます。
div { width: 200px; height: 300px;}以上が、よく使われるCSSプロパティの解説となります。
4. CSSで大切な「単位」と「色の指定」を学ぼう
この章では、CSSでデザインをするときに大切となる、「単位」と「色の指定」について学んでいきましょう。
長さや大きさを決める単位と、色を決める様々な方法を紹介しますね。
4-1. 長さや大きさを決める単位
長さや大きさを決める単位には、ピクセル( px )、パーセント( % )、 em と rem があります。
それぞれどんなものか説明していきます。
4-1-1. ピクセル(px)
ピクセルは、画面上の点の大きさを表す単位です。
例えば、要素の幅を100ピクセルにするには、以下のように書きます。
div { width: 100px;}4-1-2. パーセント(%)
パーセントは、親要素に対する割合で大きさを決める単位です。
例えば、親要素の幅に対して50%の幅を持つ要素を作るには、以下のように書きます。
div { width: 50%;}4-1-3. emとrem
em と rem は、文字の大きさに基づいて大きさを決める単位です。
em は、その要素の文字の大きさに対する相対的な値で、 rem は、ルート要素の文字の大きさに対する相対的な値です。
例えば、文字の大きさの2倍の幅を持つ要素を作るには、以下のように書きます。
div { width: 2em;}4-2. 色を決めるたくさんの方法
色を決める方法には、カラーコード、カラーネーム、RGBとRGBAがあります。
それぞれどんなものか説明していきます。
4-2-1. カラーコード
カラーコードは、16進数で色を指定する方法です。
例えば、赤色を指定するには、以下のように書きます。
p { color: #FF0000;}4-2-2. カラーネーム
カラーネームは、色の名前で指定する方法です。
例えば、緑色を指定するには、以下のように書きます。
4-2-3. RGBとRGBA
RGBは、赤(Red)、緑(Green)、青(Blue)の3つの色の組み合わせで指定する方法です。
RGBAは、RGBに透明度(Alpha)を加えたもので、色と透明度を一緒に指定できます。
例えば、青色を指定するには、以下のように書きます。
p { color: rgb(0, 0, 255);}透明度を50%にしたい場合は、以下のようにRGBAを使って書きます。
p { color: rgba(0, 0, 255, 0.5);}以上が、CSSにおける「単位」と「色の指定」についての解説になります。
5. セレクタのいろんな種類と使い方
セレクタは、CSSでどの部分を変えるかを決める大切なものです。
このセレクタには色々な種類がありますので、この章でそれぞれの使い方を学んでいきましょう。
5-1. たくさんの部分を一度に変える方法
たくさんの部分を一度に変えるには、グループ化して同じスタイルを適用したり、継承を利用します。
5-1-1. グループ化して同じスタイルを適用する
h1, h2 { color: blue;}複数の要素に同じスタイルを適用するには、セレクタをカンマ( , )で区切って書きます。
例えば、見出しの h1 と h2 に同じ色をつけたい場合は、以下のように書きます。
5-1-2. 継承を利用する
親要素のスタイルが子要素に自動で適用されることを継承といいます。
例えば、以下のように親要素の文字色を変えると、子要素の文字色も変わります。
div { color: red;}5-2. 特定の部分だけ変える方法
特定の部分だけ変えるには、子セレクタ、隣接セレクタ、属性セレクタ、疑似クラスと疑似要素を使います。
5-2-1. 子セレクタ
子セレクタは、親要素の直下にある子要素だけを選択する方法です。
例えば、 ul 要素の直下にある li 要素だけにスタイルを適用するには、以下のように書きます。
ul > li { color: green;}5-2-2. 隣接セレクタ
隣接セレクタは、ある要素のすぐ後ろにある要素だけを選択する方法です。
例えば、 h1 要素のすぐ後ろにある p 要素だけにスタイルを適用するには、以下のように書きます。
h1 + p { color: orange;}5-2-3. 属性セレクタ
属性セレクタは、要素の属性に基づいて選択する方法です。
例えば、 href 属性がある a 要素だけにスタイルを適用するには、以下のように書きます。
a[href] { text-decoration: underline;}5-2-4. 疑似クラスと疑似要素
疑似クラスと疑似要素は、特定の状態や要素の一部を選択する方法です。
疑似クラスはコロン（ : ）で始まり、疑似要素は二つのコロン（ :: ）で始まります。
5-2-4-1. 疑似クラス
疑似クラスは、要素の状態によって選択される方法です。
例えば、マウスカーソルが乗ったときにリンクの色を変えるには、以下のように書きます。
a:hover { color: purple;}5-2-4-2. 疑似要素
疑似要素は、要素の一部を選択する方法です。
例えば、段落の最初の一文字だけを大きくするには、以下のように書きます。
p::first-letter { font-size: 24px;}以上が、CSSセレクタの種類と使い方に関する解説となります。
7. プログラミング初心者のぼっち大学生におすすめのCSS本を紹介します
この章では、これからしっかりCSSを学ぼうというぼっち大学生のみなさんに、ぜひおすすめしたい書籍を紹介していきます！
CSSを取り扱った書籍はたくさん存在しますが、今回は現役のWebエンジニア目線で、初学者のみなさんにピッタリな本を揃えてみましたので、ぜひ参考にしていただけたらと思います。
7-1. 1冊ですべて身につくHTML＆CSSとWebデザイン入門講座
1冊目に紹介するのは、「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」です！
著者のManaさんは、Web制作者の方々は必ずお世話になっているであろう人気Webサイト、Webクリエイターボックスの運営者としても有名なお方。
また、この「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」、発売されたのは2019年の3月なのですが、それから4年連続で売上1位を誇っているというのですから驚きです。
これだけでも、いかに本書の内容が分かりやすいか、そして初心者に優しい内容であるかということが伝わるかと思います。
「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」は、
- これからWebサイトを作り始める初心者
- HTMLとCSSを基本から学びたい人
- 美しいデザインのWebサイトを作りたい人
- Webの最新技術を学びたい人
全てに文句なしでおすすめできる素晴らしい入門書となっておりますので、ぼっち大学生のみなさんも、この機会にぜひチェックしてみてくださいね。
8. まとめ
今回は、プログラミング初心者のぼっち大学生向けに、CSSの基礎知識を解説させていただきました。
今回紹介したCSSは、これからぼっち大学生のみなさんがWebサイト制作やWebアプリケーション開発をしようと考えた場合、絶対に必要となるスキルです。
プログラミングを学ぶぼっち大学生のみなさんは、ぜひこの記事の内容を参考にしていただき、CSSの知識をしっかりと身につけていって欲しいと思います。
最後に、これからCSSについて本格的に学んでみようと考えるぼっち大学生のみなさんに、おすすめのプログラミングスクールを紹介させていただきます。
ぼっち大学生のみなさんは、サブスク型プログラミングスクールのSAMURAI TERAKOYA（侍テラコヤ）であれば、飲み会1回分ほどの費用で、CSSを効率的かつ確実に学ぶことが可能です！
SAMURAI TERAKOYA（侍テラコヤ）の詳細については、こちらの記事で詳しく解説していますが、
- 40種類以上に及ぶ学び放題の教材
- 平均回答スピード30分以内のQ&A掲示板
- 月1回〜の現役エンジニアとのオンラインレッスン
- プログラミング学習を継続できる学習ログ
を、月額2,980円〜という破格の料金で利用することができます。
もちろん、独学でCSSの知識を習得することは不可能ではありません。
しかし、実際に業務でCSSを毎日のように使用するエンジニアのメンターに、CSSについて直接質問ができる環境で学んだほうが、より実践的な知識が身に付きますし、みなさんのCSSを習得するスピードは圧倒的に速くなります。
プログラミングスクールで学ぶことも視野に入れていたが、その費用面がネックとなり、なかなかプログラミングの学習を本格的に始められなかったというぼっち大学生のみなさんは、ぜひ一度SAMURAI TERAKOYA（侍テラコヤ）に無料で相談をしてみてはいかがでしょうか？
