カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • 【CSS初心者向け】CSSの書き方を簡単に解説!おすすめ本・サイトも紹介

【CSS初心者向け】CSSの書き方を簡単に解説!おすすめ本・サイトも紹介

Kredo編集部
Kredo編集部
公開日:2019.12.05
更新日:2019.12.05
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット

CSSをあまり学んだことのない初心者さんのなかには

少年

CSSって何ができるの?

少女

CSSの概要をざっくり知りたい

という方もいらっしゃるのではないでしょうか。 そこで今回は、

  • CSSでできること
  • CSSを書く場所と書き方
  • CSSセレクタの種類
  • CSSの入門練習におすすめの本とサイト

上記4項目について紹介していきます。

なお、「そもそもCSSってなに?」「CSSの基礎知識が知りたい」という方は、あわせて別記事も参考にしてみてください。

記事のもくじ

  • CSSは「WEBサイトの見た目を整える」もの
    • CSSを書く場所と書き方1:HTMLのファイル内に書く
    • CSSを書く場所と書き方2:CSSのファイル内に書く(外部のファイルに書く)
  • 初心者でも必ず覚えておきたい、2つのCSSセレクタ
    • 初心者でも必ず覚えておきたいCSSセレクタ1:id
    • 初心者でも必ず覚えておきたいCSSセレクタ2:class
  • 《初心者さん必見》CSSの入門練習におすすめの3つの本
    • CSSの入門練習におすすめの本1:HTML5&CSS3きちんと入門
    • CSSの入門練習におすすめの本2:HTML5&CSS3デザインブック
    • CSSの入門練習におすすめの本3:HTML5&CSS3デザイン現場の新標準ガイド
  • 《初心者さん必見》CSSの入門練習におすすめの3つのサイト
    • CSSの入門練習におすすめのサイト1:Progate
    • CSSの入門練習におすすめのサイト2:ドットインストール
    • CSSの入門練習におすすめのサイト3:Udemy
  • CSSの勉強はサイトの模写をするのもおすすめ
  • まとめ:思い立ったが吉日!この機会にCSSを勉強しよう!

CSSは「WEBサイトの見た目を整える」もの

CSSでできるのは、簡単に言うと「WEBの見た目を整える」ことです。

例えばこのKredoのブログでは、文字の色は黒色になっていますよね。

このような色の設定・画像の大きさの設定・ボタンの形の設定など、WEBサイトの見た目に関する操作ができるのがCSSです。

また、最近では新しい仕様が加えられ、アニメーションも簡単に作れるようになりました。

WEBサイトのデザインを作る上で欠かせない言語、それがCSSなのです。

CSSはどこに書くものなの?書き方は?

HTMLならHTMLファイル、JavaScriptならHTMLファイル・JavaScriptファイルと、それぞれの言語に対して書く場所が定められていますが、CSSはどこに書くものなのでしょうか。

CSSを書く場所としては、一般的に下記の2箇所があげられます。

  1. CSSのファイル内
  2. HTMLのファイル内

それぞれ詳しく見ていきましょう。

CSSを書く場所と書き方1:HTMLのファイル内に書く

1つ目は、HTMLのファイル内にコードを追加する方法です。

HTMLは、ファイル内に

<style>~</style>

を明記することで、CSSを追加できるような仕組みになっています。

この方法のメリットは、CSSがどのHTMLコードに適用されているのか、一目で判断できることです。

ただし、HTMLコードが大量にある場合にはCSSの修正が必要になったときに、かなり膨大な量のCSSを確認しなければいけないというデメリットがあります。

HTMLの量が少ない簡易的なWEBサイトの作成、もしくはプログラミング初心者さんの練習にはおすすめの方法です。

CSSを書く場所と書き方2:CSSのファイル内に書く(外部のファイルに書く)

2つ目は、CSSのファイル内に書く方法、つまり、HTMLファイルとは別にCSS専用のファイルを作成してそこに記述する方法です。

WEBサイトを作成するときに一般的に使用されるのがこの方法です。

CSSの編集が比較的楽に行えること、複数のHTMLへの使いまわしができる利便性の高さも、この方法ならではの魅力です。

CSS初心者の方も、できるだけ早めにこの方法に慣れるようにするのがおすすめです。

初心者でも必ず覚えておきたい、2つのCSSセレクタ

CSSを書く上で必ず覚えておきたいものの1つに、「セレクタ」と呼ばれるものがあります。

これはCSSを書くときには必ず使用するもので、「どのHTMLにCSSを適用するか」という指示を出す役割を持ちます。

セレクタにはいくつか種類がありますが、初心者でも必ず覚えておきたい、超基本のCSSセレクタを2つ紹介します。

【CSSセレクタ】
  1. id
  2. class

ぜひこの記事を読みながら覚えてしまいましょう。

初心者でも必ず覚えておきたいCSSセレクタ1:id

CSSを使う上で覚えておきたいクラスタの1つ目は、「id」です。

HTMLでid名をつけた要素に対して、CSSを適用することができます。

id名の指定は、「id=””」という表記で行います。

●HTML
<div id=”head”>

 IT×英語留学の「Kredo」

</div>


●CSS
#head {

 font-size:12px;

}

HTMLでidの設定を行った場合、CSSでは先頭に「#」を明記します。

idを使用する上で注意しなければいけないのは、1つのページに使うid名は重複しないようにしなければいけないという点です。

どの単語を使用したか覚えておくためにも、id名には分かりやすい単語を使用するのがおすすめです。

id名として定番の単語もあるので、勉強を進めながら感覚を掴んでいきましょう。

初心者でも必ず覚えておきたいCSSセレクタ2:class

CSSを使う上で覚えておきたいクラスタの2つ目は、「class」です。

class名の指定はidのときと同様に、「class=””」という表記で行います。

id名は1つのページに同じ名前を使用することはできませんでしたが、classには1つのページで何度も同じ名前を使用することができるという特徴があります。

classセレクタを使用すれば、複数個所に同じスタイルを適用することができるので、非常に便利です。

●HTML
<div class=”main”>

 セブ島でIT/プログラミングを英語で学べる日系で唯一の政府認定校

</div>

 

●CSS
.main {

 font-size:12px;

}

CSSの先頭は「#」ではなく「.」であることに注意しましょう。

《初心者さん必見》CSSの入門練習におすすめの3つの本

ここまでCSSの基礎知識について紹介しましたが、より詳しく・具体的に独学で勉強をするときに使うものといえば、本ですよね。

そこで、ここからはCSSの入門練習におすすめの本を紹介していきます。

今回紹介するのは、下記3つです。

【CSSの入門練習におすすめの3つの本】
  1. HTML5&CSS3きちんと入門
  2. HTML5&CSS3デザインブック
  3. HTML5&CSS3デザイン現場の新標準ガイド

それぞれ内容の方向性が異なるため、ぜひご自身の興味・勉強方法に合いそうなものを探してみてください。

CSSの入門練習におすすめの本1:HTML5&CSS3きちんと入門

HTML5&CSS3きちんと入門

PCだけでなく、スマホ向けのテクニックもしっかりと記述されているのが、「HTML5&CSS3きちんと入門」です。

概要だけでなく、かなり細かい実践的な内容も記述されているので、1度に幅広い知識を身につけたい方には適した1冊と言えるのではないでしょうか。

図がたくさん盛り込まれているので「文字ばかりの本は読む気がおきない…」という方にもおすすめです。

CSSの入門練習におすすめの本2:HTML5&CSS3デザインブック

HTML5&CSS3デザインブック

「HTML5&CSSデザインブック」は、CSSを勉強する上での定番本の1つです。

どちらかというと実践寄りの本ではありますが、解説が非常に丁寧なので、挫折してしまうこともないでしょう。

「HTMLは勉強したことがある」「CSSは触りだけ知っている」など、ある程度プログラミングの概要を既に知っている方におすすめの1冊です。

CSSの入門練習におすすめの本3:HTML5&CSS3デザイン現場の新標準ガイド

HTML5&CSS3デザイン現場の新標準ガイド

CSSの実践的な制作方法を学んでいける本です。

「HTML5&CSS」というタイトルではあるものの、CSSのことがよく書かれているので、「HTMLはなんとなく知っているから、CSSのことをもっとしっかりと勉強したい」という方には特におすすめです。

基礎知識は既に身に付けられており、実践的なステップを踏んでいきたい方は、ぜひこの本を読んでみてはいかがでしょうか?

WEBデザイナー・フロントエンジニアになっても、長く使用できる1冊です。

《初心者さん必見》CSSの入門練習におすすめの3つのサイト

CSSの勉強には本だけでなく、Webサイトを利用するのもおすすめです。

今回は、たくさんのプログラミング勉強用サイトの中から、下記の3つをピックアップして紹介していきます。

【CSSの入門練習におすすめの3つのサイト】
  1. Progate
  2. ドットインストール
  3. Udemy

CSSの入門練習におすすめのサイト1:Progate

Progate

Progateは「初心者でも、独学でできるレッスンを」をテーマに提供しているサービスです。

スライドで学んだのち、実際に自分でコードを書きながら学んでいくという形式なので、「実際に書きながら覚えたい」という方には特におすすめですよ。

スライドはイラスト中心に作成されており、複雑なコードも分かりやすく解説されています。

アプリも配信されており、通学・通勤中などのスキマ時間も活かして勉強を進めることができるのも、Progateの魅力の1つです。

1つの講座を学習し終わるとレベルがアップするというゲーム要素もあるので、飽きずに楽しんで勉強を進めることができるでしょう。

CSSの入門練習におすすめのサイト2:ドットインストール

ドットインストール

ドットインストールは、3分で学べる動画を提供しているサービスです。

2019年11月27日時点での動画の本数は5,900本以上と、かなりのラインナップが取り揃えられています。

そんなドットインストールならではの魅力と言えば、質問機能がついていることです。

レッスンの内容でわからないところは、現役のエンジニアの方に質問ができるようになっています。

独学での勉強の場合、「分からないところが分からない」「正しい方法を調べるのに時間がかかってしまう」ということが起こりがちなため、効率よく学習を進めたいという方には、特に嬉しいサポート体制と言えるでしょう。

一部無料で視聴できる講座もあるので、いくつかの動画を視聴したのち、自分の学習スタイルにあっているかどうかを判断してみてはいかがでしょうか。

CSSの入門練習におすすめのサイト3:Udemy

Udemy

Udemyは、海外で人気の学習サイトです。

プログラミングはもちろん、ビジネススキル・マーケティングなど様々なジャンルの内容を、世界中のトップ講師から学ぶことができます。

基本的に1つの講座ごとに支払いが必要になりますが、1度購入してしまえば、期限なくいつでも動画を視聴することができるようになっています。

なかには日本語非対応の講座もあるので、プログラミングとともに英語の学習にも取り組みたい方には、適したサイトと言えるでしょう。

すべてのコースに30日間の返金保証がついているので、まずは気軽に受講してみてはいかがでしょうか。

CSSの勉強はサイトの模写をするのもおすすめ

ここまでCSSの勉強に使える本・サイトの紹介をしていきましたが、CSSの勉強にはサイトの模写もおすすめです。

模写をすることで、CSSを書くときの流れや、法則を感覚的に理解することができます。

プロのエンジニアが作ったコードに触れられるため、これまで勉強したことのない組み立て方を学ぶことができるのも、模写ならではのメリットです。

基礎の習得がある程度できた方は、ぜひサイト模写にも取り組んでみてください。

まとめ:思い立ったが吉日!この機会にCSSを勉強しよう!

今回はCSSを勉強したいと考えている初心者さんのために、

  • CSSでできること
  • CSSを書く場所と書き方
  • CSSセレクタの種類
  • CSSの入門練習におすすめの本とサイト

上記についてたっぷりと紹介していきました。

WEBデザイナー・フロントエンジニアなど、一度CSSを身に付けてしまえば役立てられる仕事も複数あります。

興味を持ったこの機会に、ぜひCSSの勉強に取り組んでみてください。

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、 これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか?

\プログラミングと英語が同時に身につく!/
KredoのIT留学について詳しくみる

  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
Kredo編集部
Kredo編集部

Kredo編集部です!Tech、英語学習、キャリア、セブ島留学の情報を発信していきます。

関連記事

  • Web・プログラミング

    初心者必見!Pythonの詳しい導入手順を徹底解説【Windows・Mac別】

    2020.10.19
  • Web・プログラミング

    Rubyで開発?Ruby開発に向いているもの&開発に必要なことまで解説

    2020.09.26
  • 【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!
    Web・プログラミング

    【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!

    2020.09.25
  • 【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!
    Web・プログラミング

    【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!

    2020.09.11
kredo it 英語 留学

よく読まれている記事

  • 2020.12.03

    【1/6&1/7 無料オンラインセミナー】なぜ今、プログラミング × 英語を身につけるべきなのか?

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

  • ショッピングを楽しんでいる男女のイメージ画像
    2019.02.12

    海外就職を成功させたい人へ!経験者が教えるメリットとデメリット

  • 熱心にプログラミングを教えるフィリピン人講師と日本人留学生

    【日本語で学んでいる場合じゃない】“英語”でIT・プログラミングを学ぶメリットとは?

IT留学オンライン
kredo 留学

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.