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