今回は、エンジニア初級でCSSを使った事がないという人向けに、CSSについて解説します。
これからCSSを勉強したい方はこの記事を見て勉強してみてください。

今回は入門編なので、以下の3つだけ覚えてください
CSS入門のポイント3つ
- CSSって何?
- 前提となる知識は?
- 実際に動かしてみよう!
1.CSSって何?
まずは、CSSとはなんぞや?という概要から学びましょう。
CSSは、Cascading Style Sheets (カスケーディング・スタイルシート)の略です。
Cascading(カスケーディング)は、「同じものがいくつも数珠つなぎに連結された」と言うことを表現してます。初めて聞いた方にとっては意味不明だと思いますが、実際に使ってみるとその意味が分かると思います。
Style Sheets(スタイルシート)は、HTMLのデザイン的な見え方(スタイル)を設定するシートです。
入門者の方は、「WEB画面を綺麗にデザインする時に使う設定ファイル」とだけ覚えておけばOKです。
CSSを作る時には、1つルールがあります。
それは拡張子を「.css」というファイルで保存することです。
2.前提となる知識は?
今回は、入門編なので、何も前提がなくても動かすことができますが、実際に画面をデザインするには以下を覚えておく必要があります。
- HTMLについての知識
- 【エンジニア初級】初心者のためのHTML入門-ポイント3つ
- 【エンジニア初級】HTML入門ー良く使うタグ5選
- 近日公開(HTMLのクラス・IDについて)
- Adobeツールの知識(場合によっては)
- Webブラウザについて
LPコーダーや、Web画面を自分でつくるデザイナー、エンジニアの場合は、CSSを覚える前にHTMLの知識が必要です。
もし、あなたがCSS画面デザインをする際に、デザイナーからPhotoshopや、XDの形式でデザイン案をもらって仕事をする場合は、それらの使い方を覚える必要があります。
また、Webブラウザによって同じCSSの設定でも画面の映り方が変わる場合があります、その違いを理解するためにもどのようなWebブラウザがあるのかは知っておきましょう。
CSSをこれから作ってみるという方は、HTMLについての知識の3つを勉強してもらい、本記事を見てからCSSに挑戦するとスムーズに覚えられるかと思います。
3.実際に動かしてみよう!
お待たせしました。
概念や前提知識ばかりで、退屈に感じたかもしれませんが、これから一緒に動かして、今回はCSSの感覚だけでも味わってみてください。
今回、実際に動かす方法は、私の運営している「hiroエンジニアのNote」のデザインを一緒に変えてみるというテーマでやってみたいと思います。
早速やっていきたいところですが、動かす前に、皆さんに質問です。
皆さんは、何のWebブラウザを使ってますか?
これから試すのはGoogleChromeを前提としてます、もしGoogleChromeがインストールされていればそちらでお試しください。
もしGoogleChrome以外の方でも、ほとんど同じ手順になると思うので、各ブラウザのやり方は適宜調べながら試してみてください。
1.まずは、このページのどこでも良いので右クリックを押してください。

メニューが出てくると思いますが、その中で↑の画像のように「検証」を教えてください。
そうすると、右側にHTMLが書いてある検証画面が出てくると思います。

検証画面を一番上までスクロールしましょう。そうすれば<div id=”page” class=”site”>というタグが出てくると思いますのでそこをクリックしましょう。

すると、少し下の方に、以下のような設定があると思います。
#page {
width: 100%;
background-color: #fff;
}

この「background-color: #fff;」の部分を「background-color: red;」に書き換えてみましょう。
#page {
width: 100%;
background-color: red;
}
すると、画面が赤色になったと思います。

このように、ブラウザの検証機能を使えば、自分でHTMLやCSSを作らなくても、色や文字の大きさなどのデザインを変えて遊ぶことができます。
CSS入門者の方は、自分のお気に入りのサイトで同じように、CSSをいじって遊ぶことでCSSの設定を楽しく覚えていくことができると思います。
===============
以上、CSS入門で覚えるポイント3つについて紹介してみました。
この情報が皆さんの人生のお役に立てれば幸いです。
エンジニアとして日本のITリテラシーを高めていきたいと共感して頂いた人は、是非このブログの拡散とyoutubeの方も見ていただけると嬉しいです。
記事を最後まで見ていただきありがとうございました。
執筆者: hiroエンジニア