Webデザインを始める人が知るべきCSSのキホンのコト【Webデザイン】【超初心者向け】

カッパ子

Webデザイナーを目指したいんだけどCSSって勉強する必要あります？

ユウ

CSSはサイトのデザインに関係する言語だから勉強しておこう！

Webデザイナーを目指したい
ブログを自分好みにデザインしたい
という方は、デザインの勉強をするかHTML、CSSなどのコーディングの勉強をするか迷うと思います。

僕の主観的な意見ですが、コーディングは最低限サクッと身につけてデザインの勉強なりブログ記事を作成する方に時間を割いた方が良いです。

ということで、今回はWebデザインをするために最低限知っておく知識として、CSSの基本についてお話しします。

当記事はWebサイトをデザインしたいという方向けにザックリとお話ししています。

Webコーダーになりたい、キチンと理解したいという方は専門書などでしっかりと学ぶことをオススメします。

CSSって何？

「CSS」はWebサイトの見え方を決めるためのプログラミング言語です。
フォントや色、レイアウトから影をつけるといった装飾までデザインに関するのものは全てCSSが行なっています。

プログラミング言語とはいうものの、簡単な英語が分かれば割と直感的に書けてしまうので初心者でも理解しやすい言語です。

Webデザイナーの場合コーディング担当の人が別でいるなら任せればいいし、「Figma」などデザインするだけでCSSを作ってくれるツールもあるので、基本を知っていればある程度は問題はないと思います。

CSSはあくまでもデザインを決めるものなので、ゼロからサイトを作りだすことはできません。
HTMLで見出しや画像などの要素を書きサイトのベースを作り、CSSで見た目を整えていきましょう。

HTMLが鉛筆（黒）だとしたらCSSは色鉛筆や絵の具みたいなものだと思っておくと良いでしょう。

HTMLの基本について知りたい方は以下の記事をお読みください。

CSSは基本的にデザインを一つしか設定できないのですが、JavaScriptを使うことでクリックしたら違うデザインに変更したりできるようになります。
（HTMLのタグに設定したクラスを変えられます。）

HTML＆CSSをキチンと理解していないと難しいので、中級者向けの言語ですがサイトに動きをつけたい場合は勉強してみてください。

実際にWebサイトをデザインするのであれば

の知識があると十分でしょう。

実際にサイト構築するとなると、作成環境やコーダーの力量によってデザインをどれだけ反映できるかどうかが変わってくるのでデザイナーだとしてもCSSの基礎は知っておいた方が良いでしょう。

簡単なWebサイトを一つ作れるくらいになっておくと、デザインの段階でコーダーに反映できるか相談できてスムーズに作業できるようになるのでとりあえずそこを目指しておくと良いでしょう。

自分でコーディングも行う場合、デザインを見てCSSでどう書くかなんとなくでいいので分かるようになっておくと良いでしょう。

僕はブログを始めて1年くらいしてCSSを自分で書くようになったのですが、最初は自分でやりたい事をどう再現していいのか分からないので、ネットで調べ方が分からず一つの要素に１日かけるなんて効率の悪いことをしていました。

なんとなく書き方が分かればネットで詳しく調べて書けるようになります。

書籍などを読んで日頃から情報収集しておくと効率よく成長できるでしょう。

ということで、デザインするためのCSSの基本的なことを以下に挙げておきます。
覚えるのが嫌いな人でも最低限これは覚えておきましょう。

先ほど話したCSSでどう書くかを考えるポイントがプロパティです。
「CSS プロパティ名」で調べれば「値」の方は詳しい解説サイトがたくさんあるので、プロパティを意識して覚えましょう。

プロパティの例（値は省略）

比較的簡単な言語なので、HTMLとCSSの書籍を一冊読んでみるとよいでしょう。
CSSでデザインがどう変わるか意識して読んでみてください。

初心者向けの書籍なら正直なんでも良いとは思いますが、以下の書籍は読みやすくて理解もしやすいのでオススメです。

リンク

Webデザインをしてみたい方向けにCSSの基本的なことをお話ししました。

やってみると簡単ですが、後からでも見やすいように書いたりSCSSで効率的に書いたりと奥が深いので面白いと思ったらどんどん学んでみて欲しいです。

特にWordPressは追加CSSを使ってサイトをデザインしやすい環境なので、WordPressユーザーならCSSは一番学ぶ価値のある言語だと思います！