CSSとは?初心者が押さえたい基本の基本を紹介します

CSSとは?初心者が押さえたい基本の基本を紹介します
CSSとは?初心者が押さえたい基本の基本を紹介します

webを学習し始めた方がまず着手するのがHTMLとCSSではないでしょうか。CSSを学習することで、自分で簡単なwebサイトを制作したり、既存のデザインにオリジナル要素を加えることが可能になります。

また、制作会社やフリーランスの方にweb制作を依頼するようなときにも、より具体的な依頼をすることができるようになります。

本記事ではCSSの規則を理解し、実際に記述をするための準備について解説しています。まずは基本となる事項をしっかり押さえ、学習中に挫折しないための土台作りをしていきましょう。

CSSとは何か

CSSとは、一言で表現すると「webサイトの見た目を整えるための言語」です。とは言っても、webを学習して間もない方にはよく分からないかもしれません。

CSSは単独で使うことはなく、HTMLという「文章構造を表す言語」とセットで使用します。

WordPressでブログを書いたことがある方は「h2」「h3」と言った、見出しを表すHTMLタグについて聞いたことがあるかもしれません。

タイトルや見出し、段落など文章の中で「どの部分が何を指しているのか」を表す言語がHTMLである一方で、HTMLで表された文章の一部に色を付けたり、背景をつけたりすることができるのがCSSです。CSSでは「どの部分の何をどう飾りつけるのか」を表します。

HTMLのみの白黒で表現されたwebサイトより、CSSを活用して見出しごとに文字の色や形を統一させたり、強調させたい部分には囲み枠を付けたりしたほうが、見たときに分かりやすくなります。

CSSの規則を理解する(セレクタ・プロパティ・値とは?)

CSSがどのような役割を持つ言語であるかが分かったところで、次はcssの規則について理解しましょう。cssは基本的に次のように表現します。(例外や応用もありますが、初心者はまずこの規則を覚えておきましょう。)

セレクタ{ プロパティ;値:}

要素としては

  • セレクタ
  • プロパティ

がありますが、それぞれの間にある記号は覚えるしかありませんので繰り返し記述して覚えましょう。(上記では分かりやすく全角で表記してありますが、エディター内では半角で記述します。)

コードエディターの中には自動で記号が出るものもあります。

 セレクタ

セレクタとは規則の中で最も先頭にくるものです。
「どの部分の何をどう飾りつけるのか」のうち、「どの部分の」を表現するのがセレクタの役割です。

HTMLでは「どの部分が何を指しているのか」を表現しますが、「何を指しているのか」を表すタグをcssのセレクタ部分に記述します。

例えば、見出し2に何らかの装飾を施したい時は、セレクタに見出し2を表すHTMLタグである「h2」を表記する必要があります。

 プロパティ

プロパティはCSS規則のうち{}内で、まず最初に記述するものになります。
プロパティで表現するのは、「どの部分の何をどう飾りつけるのか」のうち、「何を」の部分に当たります。

文字色を変えたい場合は文字色を表す「color」、文字の大きさを変えたい場合は「font-size」などを記述します。
他にも、「padding」「margin」「background-color」というふうに、何を装飾したいかを指すプロパティはたくさんあります。
すべてを覚える必要はありませんが、頻出のものは覚えておくほうがよいでしょう。

{}の中で、プロパティの次にくる値のことです。
「どの部分の何をどう飾りつけるのか」のうち、「どう飾りつけるのか」の部分に当たります。単純に値と言ったり、プロパティ値と言ったりします。

プロパティに対応するように値を記述することで、表現したい見た目をつくることができます。

文字色を緑色にしたい場合はプロパティに「color」、値には「green」を記述します。
また、フォントサイズの変更であれば値は数値になります。数値の単位や記述する値はプロパティによって異なるので、はじめのうちは呼応する値がどんなものなのかを調べながらエディターに打ち込みます。(慣れてくると頻繁に使うものは徐々に覚えていきます。)

CSSを実際に記述するには

HTMLとCSSを実際に組み合わせて実際に次のような見た目のサイトを作ってみます。(画像①)

画像①

まずはHTMLだけの表示を見てみましょう。見にくいですが、CSSでの装飾がなければこれほど見づらいサイトができてしまうということです。(画像②)

画像②

実際にデザインからコードを書く際にも、まずはHTMLを記述、そのあとにCSSで装飾といった方法でweb制作を行うことも可能です。繰り返し学習していくうちに、自分にとってやりやすい方法を見つけることが大切です。

ちなみに今回のhtmlの記述はこちら。今回は文字を中央に表示させるためにdivタグを使用しています。(画像③)

画像③

では、「どの部分の何をどう飾りつけるのか」を分析してみましょう。先ほどの画像①と②の比較より、次のような装飾がされていることが分かります。

  1. 文字の大きさ
  2. 上下の余白
  3. 背景の色が青色
  4. 文字の色が白色

実際にこれらを記述すると次のようになります。色、余白、背景色、文字色の順に指定されているのが分かります。順不同で反映されます。(画像④)

画像④

できました。HTMLのみの場合に比べ、見やすくなったのではないでしょうか。

【補足】CSSをHTMLに連携する方法

実際にはHTMLファイルとcssファイルはリンクさせる必要があります。

HTMLファイルの<head>と</head>の間に

<link rel=”stylesheet” href=”(cssファイル名).css”>

といった文言を挿入することで、簡単に連携させることが可能です。

まとめ:CSSを活用して見やすくサイトを作りましょう

CSSの役割や規則について少しは理解が深まったのではないでしょうか。

今回の記事で紹介したcssの仕組みは今後web制作をする上で基本中の基本となります。

複雑な表現をする場合であってもまずは基本に立ち返り、「どの部分の何をどう飾りつけるのか」を整理してみるとスムーズに作業が進むことも。

少しでも参考になれば幸いです。

SHARE