【初心者向け】CSSとは？？(知識ゼロから学ぶ)

WEB制作について勉強しだしてCSSてよく聞くようになったけど何かわからない。どうやって勉強したらいいかわからない。今回はそんな方に向けた内容になります

本記事ではCSSの基礎を初心者にわかりやすく解説していきますね

見るだけでもいいし、パソコンを使って一緒にやるでもよし

これからWEB制作を学びたくて、CSSをこれから学ぼうと思っている方は参考にしてみてください。

それでは今回の目標です

• CSSとは何か、概要をつかむこと
• CSSの使い方を知ること

HTMLの学習がまだの方はこちらから

あわせて読みたい

【入門編】HTMLの基本を理解しよう WEB制作に憧れて、HTMLの勉強をしたいけど何から始めたらいいのかわからない・・・。 今回はそんな方に必見です この記事では初心者の方にもわかりやすくHTMLについて説...

CSSはHTMLをサラッと理解した方が分かりやすいので、HTMLの学習がまだの方は上記の記事を先に読んでからの方が理解できると思います

CSSとは

CSSとは、Webページのスタイル（見た目）を指定するための言語です

なお、ここでいう見た目とは、HTML要素（文字など）の色や大きさ、背景色、位置などを指します

HTMLがWebページの「構造」を担当するのに対し、CSSはWebページの「見た目」を担当しています

なので、CSSを勉強していくにはHTMLの知識が必要となります

このサイトもそうなのですが、全てのサイトのデザインや見た目はCSSを使って作られておりますので、CSSを学習する事で色々なデザインのウェブページを作れるようになります

本記事では、まずはCSSの基礎中の基礎を解説します

CSSの使い方

CSSの使い方は、以下のように3種類あります

CSSの使い方	どんなときに使うか
CSSファイルを作ってHTMLファイルから読み込む	最も一般的な方法。どんなときにも使われる
HTMLファイルの中にstyleタグを作る	Webページを1ページだけ作るときやHTML/CSSの学習時
HTMLタグの中に直接書く	特定のHTML要素だけに限定してスタイルを適用したいとき

中でも一番使われてどんなときにも使われる「CSSファイルを作ってHTMLファイルから読み込む」方法を詳しく解説していきたいと思います

CSSの環境構築をしよう【CSS用のファイルを作成する】

CSSを書いていく前にまずは、CSSを書くためのファイルを作成する必要があります。まずは、下記のような構造でフォルダを作成しましょう

「style.css」というファイルがCSSのファイルになります

具体的には、HTMLファイルのheadタグ内にコードを1行追加することで、CSSファイルを読み込みます

HTMLファイルのheadタグの以下の位置に配置する

上記のような感じです。ここからは上記のコードを例に解説していきます。

重要なところとしては、head内のlinkタグで「style.css」を読み込んでいます。これが無いとCSSが反映されないので注意が必要です。

CSSは後ほど書きますので空白のままでOKです

CSSの書き方を解説【基本を抑えておけばOK】

WEB制作をする上で、最低限必要な書き方を解説します。

本記事で解説しているもの以外にも書き方はありますが、一度に覚える必要はないので、慣れてきたらググって色々な書き方を学習してみて下さい。

CSSの書き方

1.セレクタ

セレクタとは簡単にいえば、「スタイルを適用する対象」のことです。

2. プロパティ

プロパティとは簡単にいえば、「適用するスタイルの内容」のことです。

代表的なプロパティをご紹介します。なお、すべて覚える必要はありません。「こんなプロパティがあるんだな」程度で十分です

プロパティ	説明
color	文字色を指定する
font-family	フォントの種類を指定する
font-size	フォントの大きさを指定する
font-weight	フォントの太さを指定する
background	背景を指定する
text-align	横方向の揃え方を指定する（左・右・中央）
line-height	行の高さを指定する
width	要素の幅を指定する
height	要素の高さを指定する
padding	要素のパディングを指定する
margin	要素のマージンを指定する
border	要素のボーダーの色や太さを指定する
position	要素の配置方法を指定する
display	要素の表示形式を指定する

3. 値

値とは簡単にいえば、「スタイルの適用の仕方」を定めたものです。

プロパティによって値の指定方法は異なりますが、例えばcolorというプロパティであれば値はredやblue、font-sizeというプロパティであれば値は16pxや24pxになります。

なお、px（ピクセル）はCSSにおける大きさの単位です

実際にコードに書いてみる

style.cssのファイルに上記のようにコードを入力する

上記の例であれば、HTMLファイルのp要素、つまり「段落です」というテキストの文字色が赤色になります

ブラウザで開いて出力結果を確認してみると下記になります

このようにして、HTMLで作ったモノに対してデザインを作っていくのがCSSの役割です。

CSSには多くのプロパティが存在して、自由自在にデザインする事ができます。

代表的なプロパティを紹介させていただいたのですがプロパティは一気に暗記するモノでないので、WEB制作をしていく上で必要なものだけをググって徐々に覚えていきましょう

CSSは基本ググれば何でも解決できる事が多いので、わからない時はグーグル検索するかこの記事の代表的な例を振り返ってみてください

また、セレクタはタグだけではなくてclassやidなどでも指定する事ができます

idを指定する書き方

記がidに対するCSSの書き方です。

idを指定したい時は「＃＋id名」で、そのidを指定する事ができます。この場合は「main」というidに対して、スタイルを指定しています。

classを指定する書き方

上記がclassに対するCSSの書き方です。

idが#（シャープ）だったのに対して、classは.（ドット）を付ける事で指定する事ができます。この場合ですと「sub」というclassに対してスタイルを指定しています

まとめ

今回は以下の2つの点が理解できればOKです

• CSSとは何か、概要をつかむこと
• CSSの使い方を知ること

学べば学ぶほど奥の深いCSSですが、基本的な書き方を覚えるだけで、一通りWEB制作をする事ができますので初めのうちは深く学ぶ必要は無いです

コツコツ頑張っていきましょう＾＾