こんにちは！ CSS大好きライターのナナミです。
Webサイトを作ろうと思って色々調べていると、必ずと言っていいほど出てくるCSSですが、一体何ができるのか根本的なことまで解説していたりしていなかったり……お困りになっているのではないでしょうか？
今回はややこしいコードの説明などはぜーんぶ抜きにして、CSSでできることにガッツリ注目！ CSSの魅力を存分にお伝えしていこうと思います。
Webサイトを作るならば、CSSは必須知識。どんなものが作れるのかなども紹介しているので、CSS学習のモチベーションにしていただけると幸いです！
CSSって何？
CSSは、「Cascading Style Sheets」の略で、HTMLの要素に装飾を付け、見た目を美しくするものです。
プログラミング言語と勘違いされがちですが、実はプログラミング言語ではなく、スタイルシート言語という種類になります。
CSSはとにかくデザインを表現するのに特化した言語です。Webサイトはデザインの美しさが超重要なので、Webサイトを作るならば絶対に知っておかなければなりません。
更にデザインはただの美しさだけではなく、要素の意味を明確にする目的もあります。
例えば下記の2つ、どちらがクリックできそうに見えますか？
実は両方とも同じページにリンクしているのですが、普通のテキストと同じだとそうは思わないですよね。一方ボタンのような見た目になっていると、「これは移動するボタンだ」とぱっと見で判断することができます。このようなデザイン的な使いやすさをUI(ユーザーインターフェース)といいます。
このUIを実現し、より使いやすいWebサイトに仕上げることができるのが、CSSです。
CSSとは一体どんなものなのか、もっと詳しく知りたい方は下記の記事をどうぞ！
CSSでできること
ここからは、CSSでできることを更に詳細に解説していきましょう！
Webサイトを美しく装飾できる
CSSの一番キモとなる部分は、見た目を整えることです。
チラシとかでも、ただ文字がズラーッと並んでいるより、色をつけたり文字にメリハリを付けたほうが目を引きますよね。
そして何より、色や文字のレイアウトは情報の印象にも影響します。カフェのWebサイトならばそのコンセプトに合わせたデザインを、企業サイトならばカッチリとしたデザインにすることで、言葉では伝えきれない情報を伝えることができます。
視覚的に情報補正をしてくれるデザイン、それを実現してくれるのがCSSです。
アニメーションを作れる
2019年現在主流となっているのは、CSS3という種類のCSSです。このCSS3は、今まで難しいプログラミングをしなければ実現できなかったアニメーションの一部を、簡単に実現できるすぐれものです。
Webサイトにアニメーションを付けることで、より表現を豊かにすることができます。例えば、下記のようにボタンにマウスオーバーするとペコっとへこんだり……ちょっとかわいいし、ボタンらしい動きによって更にUIを高めることができます。
他にもいろんな動きをつけることができます。下記の記事で色々紹介しているので、ちょっと覗いてみてください。
HTMLをシンプルにできる
CSSは、必ずHTMLとセットで使います。
HTMLは文字や画像を表示するための言語なのですが、過去はデザインを整えるためにも使われていました。そのため、HTMLのソース自体がとても複雑になってしまっていたのです。
しかし現在は装飾は全てCSSで行なうのが一般的となりました。これによりHTMLには要素を正しくタグ付して整理するという役割に専念できるようになり、ややこしい記述が不要となりました。
結果、HTMLを編集するときに「ぐちゃぐちゃで意味分かんない！」というストレスが無くなり、メンテナンス性が向上しました。
CSSはデザインさえ定まればあんまり書き換えることはないのですが、HTMLは情報更新のために書き換えることが多いので、かなり便利になったと言えますね！
CSSを覚える必要がある職業
Webサイトを作るのに必須となるCSSは、Webに関わるあらゆる職業に必須の知識でもあります。具体的な例を見ていきましょう。
コーダー
コーダーとは、HTML・CSSを駆使して、デザインをもとにWebサイトをコーディングする職業です。
メインの業務がWebサイトのコーディングなので、CSSが必須なのは説明するまでもありませんね。
フロントエンドエンジニア
コーダーの更に上、Webサイトの機能的なところをプログラミングを使って作成するのが、フロントエンドエンジニアです。
基礎的な知識はコーダーと同じくHTML・CSS、更にプログラミングの知識が必要になります。
こちらもWebサイトに関わるので、当然CSSは必須になります。JavaScriptをガッツリ使って、CSSを書き換えたりすることもあります。
ちょっとコーダーとの違いがわかりづらいかもしれませんね。下記の記事で違いを比較しているので、併せて読んでみてください。
Webデザイナー
デザイナーにコードの知識が必要なの？ そう思うかもしれませんが、最近のWebデザイナーはコーディングスキルも必須なので、CSSの知識が必要になります。
特にWebデザインは、チラシのデザインなどのように、デザインをそのまま印刷したりするわけではありません。デザインを元にリンクや動きを入れ、Webサイトとして作る必要があります。そう、コーディングで再現ができるデザインを作る必要があるのです。
となると、コーディングの知識がなければ、再現できるデザインを作ることは難しくなりますよね。Webデザインのレベルを高めるためにも、CSSの知識は重要なのです。
CSSで作れるモノの具体例
最後に、CSSで作れるモノを具体的にご紹介していきましょう。
ボタン
この記事でもちょいちょい紹介していたボタン、全てCSSで作られています。
他にも下記のような丸いボタンも作れるし、マウスオーバーしたときの動きを変えたりもできます。
下記の記事で要素を丸くする方法と一緒にこのボタンのソースも紹介しているので、よかったら使ってみてください。
グラデーション背景
2017年あたりから流行り始めたグラデーションの背景、実はアレもCSSだけで作れちゃいます。
可愛らしいふわっと系デザインから、ミステリアスなカラーリングまで思いのまま！メインビジュアルなどに使えば、インパクトは絶大です。
下記の記事でいろんなパターンを紹介しているので、こっちもぜひ見てみてください。
カードのようなデザイン
最近、下記のようなデザインをよく見かけたりしませんか？カードのようなデザインで素敵ですよね。
これはGoogleが発表したデザインフレームワーク（デザインの決まりごとのようなもの）であるマテリアルデザインのCardという見せ方です。ただ要素が並んでいるよりも、クリックしたら何か動きがありそうに見えませんか？
このように、影の付け方や角丸を組み合わせることで、UIの高いデザインを実現することができるのです。
プラスアルファでできることが増える！
CSSだけでもデザインの再現は十分に可能です。アニメーションも最低限は実現することができるでしょう。
しかしCSSのアニメーションは、要素にマウスオーバーしたときなど一部の条件でしか動かすことができません。更に細かい条件や動きをつけるには、JavaScriptを組み合わせる必要があります。
JavaScriptを組み合わせると、こんな感じの動きを実現することが可能になります！
See the Pen js-scroll1 by 河野七海 (@kouno73) on CodePen.0
最近よく見る、ページTOPに戻るボタンですね。ボタンの見た目は当然CSSで整えており、そこにJavaScriptで動きを付与しています。
こんな感じでJavaScriptを使えるとWebサイトの表現の幅をぐんっと広げることが可能なのです！
JavaScriptでできることは下記の記事で色々紹介しているので、ぜひこちらも読んでみてくださいね。
まとめ
CSSは単体で使うことはありませんが、Webサイト制作においてなくてはならない重要な存在です。
いろんな記述を組み合わせることで、いろんな見た目を実現することができるCSS。ぜひ色々試して、素敵なWebサイトを作ってみてくださいね。
