CSSでできることって？一覧からHTMLとの違いまで徹底解説

WEBサイトを作るうえで自由にデザインをすることができるCSS。これから学習をはじめようとする方、始めている方に向けたCSSができる一覧、利用するメリット、HTMLとの違いを徹底解説していきます。

HTMLとCSS

HTMLとCSSは、Webページを作るにあたって、基本となるものです。この2つは役割には明確な違いがあります。この２つの基礎知識を理解し、CSSで出来ることを整理していきたいと思います。

HTMLはWebページの内容を作る骨組みになる言語

WEBページに必要な文章、画像などを作ります。

文字列はテキストだけでなく、「見出し」「改行」「段落」や、「太文字」「リスト」や画像をいれることができます。

CSSはHTMLの表示レイアウトを装飾するための言語

出来たHTMLの装飾や画面のレイアウトを整えたり、背景に色をいれる、アニメーションをいれて画像を動かす等、見栄えの良いWebページを作ることが出来ます。どのように作るか、そして具体的にどのようなことが出来るか見てみましょう。

CSSの基本

CSSの基本文法

CSSは以下の書式を使います。

セレクタ

HTMLの文章の中の、”どこ”を示す部分です。
　例えば、<ｂ>画像を丸くしたい、<ｂ>見出し<ｂ/>の文字を赤にしたい場合、セレクタは 画像の「img」や、見出しの「h1,h2」などを置きます。

プロパティ

プロパティはCSSの種類を伝える部分です。
画像を丸くしたい、文字の大きさを変えたい、色を変えたい、余白をつけたいなど要素に合わせて、必要なプロパティを入力します。プロパティの一覧は「CSS出来ること一覧」に載せていきます。

値

値は”どのように変更する”のかを示す部分です。見出しの文字を”赤色に””１４pxに”、など具体的にどのようにするのかを表します。色やサイズ（単位）、「px」「%」「em」「rem」をつかって表示します。

CSS出来ること一覧

では、よく使うプロパティと例を紹介していきます。

CSSを使用する４つのメリット

CSSを使うことでいろんなことが出来るということを理解していただけましたか。
CSSを使うメリットを４つ紹介していきます。

作業の大幅な効率化

HTMLファイルでは１つ１つ修正、変更しなければいけない箇所も、CSSではまとめて、
見出しの色やサイズ、ページごとの背景の変化などを一括で行うことが出来ます。

効果的なSEO（サーチエンジン最適化）対策

HTMLとCSSでファイルを作ることで、HTMLのソースコードが軽量化します。軽量化することでファイルの、読み込み速度も向上するため評価されやすくなり、上位検索向上につながります。

各メディアに対応

パソコンのディスプレイ以外の、メディア機器（スマホ、タブレット、テレビ）などに対応したWEBページを設定することが出来ます。

CSSの学習方法

CSSを使用することで、効率よいWEBページの作成、SEO対策、そしてデザインの幅が広がりますね。ここではCSSの学習方法について紹介します。

本を活用する

必要な情報を簡潔にまとめられている本。
自身の学習度、知識に合わせて自分にあった本を選択することも一つだと思います。

無料の学習サイトを活用する

無料で学べる学習サイトも多くあります。基本的な文法、構造も学ぶことができます。

スクールに通う

費用は一番高いですが、WEBデザイナーを目指す方、期間を定めて本格的に学びたい方にとってはカリキュラムにそったスクールもありますね。同じ勉強をしている方との交流もうまれるかもしれませんね。

まとめ

この記事ではよく使うCSS一覧、基本、メリット、学習方法について紹介していきました。これからプログラミングを始めてみたい方やWeb制作をしてみたい方は、HTMLと一緒にCSSの学習をしてみてくださいね。