【完全初心者向け】CSSって何?基礎や学習方法を5分で徹底解説

CSS
この記事は約6分で読めます。

この記事では、WEBページの仕組みである「CSS」について、できる限りわかりやすく基礎や概念をまとめました。

「聞いたことはあるんだけど何か分からない…」

「何をするための言語なの?」

こんな感じの悩みを持つ初心者さん向けです。

この記事を読むとわかること
  • CSSとは何か?基礎と概念がわかる
  • CSSの開発環境について
  • CSSの学習方法

CSSとは?

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略で「WEBページのスタイル(見た目)を作るための言語」です。

もう少し具体的な説明をすると、「HTMLタグで囲んだ範囲の文字色や、大きさ・背景の色や配置などを指定する言語・マウスホバーアニメーションをつけたりする言語(文字やボタンにマウスカーソルを重ねたときに変化を与える)」とも言えます。

HTMLが、見出しなどの文書構造を形作るための言語であるのに対し、CSSはその文書構造にスタイル(見た目)をデザインし、見栄えを整える役割をになっています。

HTMLとCSSなくしてWEBページを作ることは難しいと言えます。(今見ているこのページにも使われています)

HTMLについても同様に基礎概要をまとめています。

CSSでできること

具体的な例を挙げると、以下のことができます。

  1. WEBサイトを美しく装飾し表示することができる
  2. アニメーションを簡単に実装できる
  3. HTMLをシンプルにすることができる

それぞれもう少し深掘りしていきます。

WEBサイトを美しく装飾し表示することができる

CSSを使う1番の理由はWEBサイトの装飾です。

ただ文章がズラーっと並んで表示されているだけのWEBページでは、単純に見た目も悪いし印象を与えることも出来ないですよね。全く目を引くWEBページになりません。

企業サイトだったりサービスのサイトなのに、コンセプトが全く分からず、それといった印象も与えることができません。

スタイル(見た目)を整えることで、レイアウトを整えて文章だけでは伝わらない情報を伝えることができます。

視覚的に情報整理を行うデザインができるのがCSSです。

アニメーションを簡単に実装できる

現在のWEB制作において、UI/UX(ユーザーが操作しやすいデザインのこと)を意識することは必須です。

CSS3(現在のCSSのバージョン)では、今まで難しいプログラミングをしなければ実装できなかったアニメーションの一部を、簡単に実装することができます。

WEBページにアニメーションを施すことで、よりコンテンツの表現を豊かにできます。

他にも色々なアニメーションをつけることができます。

HTMLをシンプルにすることができる

最初の頃は深く考えなくて大丈夫なのですが、HTMLの中にCSSを記述することも可能です(<style> ~ </style>タグで囲みます)。

ですが、1つのファイル内で編集をすると、視認性も悪いしメンテナンス性も悪く、ストレスが溜まります。

HTMLファイルとCSSファイルを別々に管理することで、HTMLとCSS双方の記述をすっきりとさせることができます。

何より、CSSを別ファイルとして管理すると、複数のHTMLファイルから同じCSSを読み込むことができます。

HTMLは情報更新のために書き換えることが多いですが、一度デザインが決まってしまえばCSSはあまり書き換えることがないので、すごく便利になりました。

何故CSSが必要なのか

同じ内容を、HTMLのみ・HTMLとCSSを使用した場合に分けて例を挙げます。

HTMLのみで文字サイズを指定する例

HTML
<p style="font-size: 18px;"> テキスト </p>

現行のHTML5では、HTMLとCSSを分けて指定するのが基本となっています。

同じ内容をHTMLとCSSに分けて指定する例

HTML
<p> テキスト </p>

CSS
p { font-size: 18px; }

上の例の方が分かりやすいと思うかもしれませんが、WEBページを制作する際は1000行を超えるコードを書く場合もあります。その際にメンテナンス性などを考えると、下記の方が管理しやすいですね。

HTMLは文書の内容(文書構成)、CSSは見た目と、役割をはっきりと分けてWEBページを構成していく必要があります。

CSSの開発環境について

「実際にCSSを書くにはどうすれば良いの?」

例えば画像の拡張子は「.jpg」「.png」だったりしますね。CSSは拡張子を「.css」にすることでコンピューターにHTMLファイルだと認識されます。

専用のテキストエディタを使う

プログラミングを書くために開発された専用のテキストエディタがあります。

下記の画像を見てみて下さい。

専用のテキストエディターを使用すると、ぐんと視認性が良くなります。

(画像にはHTMLが書かれています)

また、専用のテキストエディタには高機能な拡張機能が大量に公開されています。

  • スニペット機能(繰り返し書く機会のあるコードを登録し呼び出す)
  • 自動でインデント(段落を見分けやすくする余白)を挿入する
  • ライブプレビュー機能(編集しながら実際に表示を確認できる)

など、拡張機能を追加していくと、さらに自分好みのWEB制作のしやすい環境を作ることができます。

WEB制作を行う際は専用のテキストエディタを使用することをおすすめします。

こちらの記事で初心者さんにおすすめのテキストエディタを紹介しています。

(上記画像で使用しているテキストエディタはVisual Studio Codeです)

CSSの学習方法

CSSはWEBページを制作するための基本の言語です。

WEB上には大量の情報が掲載されています。

正しい情報を手に入れて、効率よく学習を進められるよう、おすすめの学習法を紹介します。

プログラミング学習サービスを使う

一番最初のおすすめは「Progate」「ドットインストール」というサービスを使用した学習方法です。無料会員と有料会員がありますが、触りの学習は無料会員で十分です。

なぜおすすめするのかは以下の通りです。

  • 無料会員の状態でも基礎を学ぶことができる
  • 初心者に向けて細かく説明がされている
  • 何度でも内容を見返すことができる
  • 常に最新の情報に更新されている

それぞれのサービスについて細かくまとめています。

教材本を使用した学習

また、教材を使用した学習もおすすめです。

僕が本当に参考になったと思えるおすすめ学習本をまとめています。

この記事のまとめ

おさらい
  • CSSとは何か?基礎と概念
  • CSSでできること
  • なぜCSSが必要なのか
  • CSSの開発環境について
  • CSSの学習環境について

今回はCSSについて、上記の5点をご紹介しました。

HTML同様、内容が多いので覚えるのは大変です。

CSSはWEB制作の基本中の基本で、WEB製作者やプログラマーを目指す方は是非覚えておきたい言語です。分からなくなったらこの記事を見返して、理解を深めてみて下さい。

タイトルとURLをコピーしました