CSSをあまり学んだことのない初心者さんのなかには
という方もいらっしゃるのではないでしょうか。 そこで今回は、
- CSSでできること
- CSSを書く場所と書き方
- CSSセレクタの種類
- CSSの入門練習におすすめの本とサイト
上記4項目について紹介していきます。
なお、「そもそもCSSってなに？」「CSSの基礎知識が知りたい」という方は、あわせて別記事も参考にしてみてください。
記事のもくじ
【入門】CSSはWEBサイトの見た目を整えるもの
CSSでできるのは、簡単に言うと「WEBの見た目を整える」ことです。
例えばこのKredoのブログでは、文字の色は黒色になっていますよね。
このような色の設定・画像の大きさの設定・ボタンの形の設定など、WEBサイトの見た目に関する操作ができるのがCSSです。
また、最近では新しい仕様が加えられ、アニメーションも簡単に作れるようになりました。
WEBサイトのデザインを作る上で欠かせない言語、それがCSSなのです。
CSSはどこに書くものなの？書き方は？
HTMLならHTMLファイル、JavaScriptならHTMLファイル・JavaScriptファイルと、それぞれの言語に対して書く場所が定められていますが、CSSはどこに書くものなのでしょうか。
CSSを書く場所としては、一般的に下記の2箇所があげられます。
- CSSのファイル内
- HTMLのファイル内
それぞれ詳しく見ていきましょう。
HTMLのファイル内に書く
１つ目は、HTMLのファイル内にコードを追加する方法です。
HTMLは、ファイル内に
<style>～</style>
を明記することで、CSSを追加できるような仕組みになっています。
この方法のメリットは、CSSがどのHTMLコードに適用されているのか、一目で判断できることです。
ただし、HTMLコードが大量にある場合にはCSSの修正が必要になったときに、かなり膨大な量のCSSを確認しなければいけないというデメリットがあります。
HTMLの量が少ない簡易的なWEBサイトの作成、もしくはプログラミング初心者さんの練習にはおすすめの方法です。
CSSのファイル内に書く（外部のファイルに書く）
２つ目は、CSSのファイル内に書く方法、つまり、HTMLファイルとは別にCSS専用のファイルを作成してそこに記述する方法です。
WEBサイトを作成するときに一般的に使用されるのがこの方法です。
CSSの編集が比較的楽に行えること、複数のHTMLへの使いまわしができる利便性の高さも、この方法ならではの魅力です。
CSS初心者の方も、できるだけ早めにこの方法に慣れるようにするのがおすすめです。
入門者でも必ず覚えておきたいCSSセレクタ
CSSを書く上で必ず覚えておきたいものの1つに、「セレクタ」と呼ばれるものがあります。
これはCSSを書くときには必ず使用するもので、「どのHTMLにCSSを適用するか」という指示を出す役割を持ちます。
セレクタにはいくつか種類がありますが、初心者でも必ず覚えておきたい、超基本のCSSセレクタを2つ紹介します。
- id
- class
ぜひこの記事を読みながら覚えてしまいましょう。
id
CSSを使う上で覚えておきたいクラスタの1つ目は、「id」です。
HTMLでid名をつけた要素に対して、CSSを適用することができます。
id名の指定は、「id=””」という表記で行います。
HTMLでidの設定を行った場合、CSSでは先頭に「#」を明記します。
idを使用する上で注意しなければいけないのは、１つのページに使うid名は重複しないようにしなければいけないという点です。
どの単語を使用したか覚えておくためにも、id名には分かりやすい単語を使用するのがおすすめです。
id名として定番の単語もあるので、勉強を進めながら感覚を掴んでいきましょう。
class
CSSを使う上で覚えておきたいクラスタの2つ目は、「class」です。
class名の指定はidのときと同様に、「class=””」という表記で行います。
id名は１つのページに同じ名前を使用することはできませんでしたが、classには１つのページで何度も同じ名前を使用することができるという特徴があります。
classセレクタを使用すれば、複数個所に同じスタイルを適用することができるので、非常に便利です。
CSSの先頭は「#」ではなく「.」であることに注意しましょう。
CSSの入門におすすめの３つの本
ここまでCSSの基礎知識について紹介しましたが、より詳しく・具体的に独学で勉強をするときに使うものといえば、本ですよね。
そこで、ここからはCSSの入門練習におすすめの本を紹介していきます。
今回紹介するのは、下記３つです。
- HTML5＆CSS3きちんと入門
- HTML5＆CSS3デザインブック
- HTML5&CSS3デザイン現場の新標準ガイド
それぞれ内容の方向性が異なるため、ぜひご自身の興味・勉強方法に合いそうなものを探してみてください。
HTML5＆CSS3きちんと入門
PCだけでなく、スマホ向けのテクニックもしっかりと記述されているのが、「HTML5&CSS3きちんと入門」です。
概要だけでなく、かなり細かい実践的な内容も記述されているので、1度に幅広い知識を身につけたい方には適した1冊と言えるのではないでしょうか。
図がたくさん盛り込まれているので「文字ばかりの本は読む気がおきない…」という方にもおすすめです。
HTML5＆CSS3デザインブック
「HTML5&CSSデザインブック」は、CSSを勉強する上での定番本の1つです。
どちらかというと実践寄りの本ではありますが、解説が非常に丁寧なので、挫折してしまうこともないでしょう。
「HTMLは勉強したことがある」「CSSは触りだけ知っている」など、ある程度プログラミングの概要を既に知っている方におすすめの1冊です。
HTML5&CSS3デザイン現場の新標準ガイド
CSSの実践的な制作方法を学んでいける本です。
「HTML5＆CSS」というタイトルではあるものの、CSSのことがよく書かれているので、「HTMLはなんとなく知っているから、CSSのことをもっとしっかりと勉強したい」という方には特におすすめです。
基礎知識は既に身に付けられており、実践的なステップを踏んでいきたい方は、ぜひこの本を読んでみてはいかがでしょうか？
WEBデザイナー・フロントエンジニアになっても、長く使用できる1冊です。
CSSの入門におすすめの3つのサイト
CSSの勉強には本だけでなく、Webサイトを利用するのもおすすめです。
今回は、たくさんのプログラミング勉強用サイトの中から、下記の３つをピックアップして紹介していきます。
- Progate
- ドットインストール
- Udemy
Progate
Progateは「初心者でも、独学でできるレッスンを」をテーマに提供しているサービスです。
スライドで学んだのち、実際に自分でコードを書きながら学んでいくという形式なので、「実際に書きながら覚えたい」という方には特におすすめですよ。
スライドはイラスト中心に作成されており、複雑なコードも分かりやすく解説されています。
アプリも配信されており、通学・通勤中などのスキマ時間も活かして勉強を進めることができるのも、Progateの魅力の１つです。
1つの講座を学習し終わるとレベルがアップするというゲーム要素もあるので、飽きずに楽しんで勉強を進めることができるでしょう。
ドットインストール
ドットインストールは、3分で学べる動画を提供しているサービスです。
2019年11月27日時点での動画の本数は5,900本以上と、かなりのラインナップが取り揃えられています。
そんなドットインストールならではの魅力と言えば、質問機能がついていることです。
レッスンの内容でわからないところは、現役のエンジニアの方に質問ができるようになっています。
独学での勉強の場合、「分からないところが分からない」「正しい方法を調べるのに時間がかかってしまう」ということが起こりがちなため、効率よく学習を進めたいという方には、特に嬉しいサポート体制と言えるでしょう。
一部無料で視聴できる講座もあるので、いくつかの動画を視聴したのち、自分の学習スタイルにあっているかどうかを判断してみてはいかがでしょうか。
Udemy
Udemyは、海外で人気の学習サイトです。
プログラミングはもちろん、ビジネススキル・マーケティングなど様々なジャンルの内容を、世界中のトップ講師から学ぶことができます。
基本的に1つの講座ごとに支払いが必要になりますが、1度購入してしまえば、期限なくいつでも動画を視聴することができるようになっています。
なかには日本語非対応の講座もあるので、プログラミングとともに英語の学習にも取り組みたい方には、適したサイトと言えるでしょう。
すべてのコースに30日間の返金保証がついているので、まずは気軽に受講してみてはいかがでしょうか。
CSSの入門はサイトの模写もおすすめ
ここまでCSSの勉強に使える本・サイトの紹介をしていきましたが、CSSの勉強にはサイトの模写もおすすめです。
模写をすることで、CSSを書くときの流れや、法則を感覚的に理解することができます。
プロのエンジニアが作ったコードに触れられるため、これまで勉強したことのない組み立て方を学ぶことができるのも、模写ならではのメリットです。
基礎の習得がある程度できた方は、ぜひサイト模写にも取り組んでみてください。
まとめ：CSS入門をしよう！
今回はCSSを勉強したいと考えている初心者さんのために、
- CSSでできること
- CSSを書く場所と書き方
- CSSセレクタの種類
- CSSの入門練習におすすめの本とサイト
上記についてたっぷりと紹介していきました。
WEBデザイナー・フロントエンジニアなど、一度CSSを身に付けてしまえば役立てられる仕事も複数あります。
興味を持ったこの機会に、ぜひCSSの勉強に取り組んでみてください。
英語でプログラミングを学べるKredo
英語×プログラミングのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×プログラミングをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で学ぶ「KredoIT留学」を提供しています。これまでの卒業生は2,000名を超え、卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×プログラミングのスキルを身につけてグローバルに活躍しませんか？
