CSSで何ができるの?ざっくりとCSSのイメージをつかもう

どもども

KUMA

カスタマイザーのくま@Bearface見に来てね♪です(*´꒳​`*)

カスタマイズに必要不可欠なCSSですが、はじめて見た人にとってはよくわからないですよね。

そこで今回は、できるだけやさしく「CSSとはどんなものか」を解説していきます。

くまさん

CSSのざっくりしたイメージを図解で解説していきますね


さきに結論
CSSはWEB(インターネット)で「スタイル(かざりつけ)」を担当しています。
MENくん

とりあえずCSSのイメージだけでも掴んでほしいな

ざっくりとCSSをイメージしよう

ざっくりいうと

CSSはWEBで使われる言語(アイテムみたいなもの)のひとつです。

じゃあCSSのWEBでの役割って?

CSSの役割は
スタイル(かざりつけ)」です。見た目を変えるために使われます。

CSSで見た目を変えることで、WEBはぐっと見やすくなります。


CSS(かざりつけ)の有り無しを比較してみると

CSS無しでは、文字の大きさ・色などがすべて一緒ですよね。これだとどこを強調したいのかわからないメリハリのない文章に見えます。

CSSを使うことで、見出しがわかりやすく、強調したい部分もメリハリがでます。

ポイント
WEB(インターネット)でのCSSの役割は「かざりつけ」だよ

CSSで実際になにするの?

基本はこれですね。

  • 色を変える
  • 大きさを変える
  • 形を変える
  • なんかを足す
  • なんかを消す

この5つです。

なんだそんなに多く無いんだね

くまさん

プププ、これだけでも十分できるんだよ

それぞれがどんなイメージなのか見ていきましょう。


色を変える

テキストの色を変えるのはもちろん、他にも背景や表などさまざまな部分の色を変えることができます。


大きさを変える

テキストの大きさを変えることができます。高さや幅といったサイズも変更できます。


形を変える

形を変形することもできます。角丸にするのはよく使いますね。


何かを足す

ちょこっとしたアイコンなどを追加することもできます。


何かを消す

逆にどこかを消すこともできちゃいます。

MENくん

ほいほい、CSSってアイテムを使えば、こんなことができるんやね

くまさん

だいたいはこの5つを組み合わせてWEBをかざりつけていくよ

カスタマイズとCSS

かざりつけ担当のCSSは、ぼくのようにWordPressのテーマをカスタマイズする人が一番使います。

WordPressのテーマ(例えばSANGO)の中には「style.css(スタイルシート)」というものが入っています。

「style.css」がテーマのかざりつけを決めているファイルです。

カスタマイズする際に「CSS」と言われたら「style.css」を編集していきます。

MENくん

まぁ、ざっくり CSS=style.css くらいに思っておきましょう

まーとめ

CSSをいじればどんなことができるのか、ざっくり説明しました。

CSSのカスタマイズで

  • 色を変える
  • 大きさを変える
  • 形を変える
  • なんかを足す
  • なんかを消す

こんな感じの飾り付けができます。

少しでもカスタマイズのイメージを持ってもらえたら幸いです( ˙꒳​˙ᐢ )