CSSでできることとは？サイトの装飾だけじゃない！

2021/10/19

( 更新日：2021/10/21 )

HTMLについてある程度知識を持つと、「CSSでは何ができるのだろう？」と考える人も多いのではないでしょうか。

実際にHTMLとCSSを使いこなせるようになると、ありとあらゆるデザインをweb上に表現することが可能です。こちらでは、CSSでできることをweb学習初心者に向けてまとめましたので、1つでも参考になれば幸いです。

CSSでHTMLをシンプルに

CSSはHTMLとセットで使うということはweb制作の学習をしている人であれば既に知っているのではないでしょうか。

HTML自体は文章の構造を表す言語として知られていますが、従来はHTML内に<style></style>というタグをつけて見た目を整えるための指示を記述していました。

現在では、HTMLは文章構造のみを、CSSはデザインを整えることがそれぞれの役割となっており、CSSの登場でHTMLの記述はシンプルなものになりました。

CSSはwebサイトの見た目を装飾することができます。実際にできる装飾は多岐にわたりますが、代表的なものを大きく4つに分けてご紹介いたします。

今回ご紹介するのは次の4つとなります。

今はCSSの知識がなくても、見栄えが良いデザインテンプレートがたくさんあります。

しかし、テンプレートを使っていると「もう少しこの部分をずらしたい」など、既存のサービスの機能では対応できないこともあります。

そういった場合に、CSSを知っていれば少しデザインを変更したり、思い通りのサイトを作ることが可能です。WordPressはPHPという言語で作られていますが、追加CSSという機能で細かいデザインまで整えることも可能です。

HTMLのみでレイアウトを決定する場合、原則として縦組みのレイアウトしかできません。

また、CSSでは従来「float」で横並びのレイアウトが作られることもありましたが、ブラウザによっては正常に表示されないといった問題点もありました。

現在レイアウトを組むときには基本的に「グリッドレイアウト」、「フレックスボックス」の2種類のCSS構造を利用します。

特に「フレックスボックス」は複雑な設定も必要なく、簡単に横組みのレイアウトを実現することができます。ただし、特徴として「フレックスボックス」でレイアウトを組むときは縦・横どちらかにしかレイアウトができないので、2段以上のレイアウトが必要な場合は、「グリッドレイアウト」を使います。

文字への装飾そのものは、インターネット黎明期にはHTMLを用いていたこともありましたが、現在では、CSSを用いることで範囲を指定して文字のサイズや背景、色などを指定したり、デバイスごとに表示を最適化することが可能になり、効率的にコーディングができるようになりました。

文字への装飾として可能なのは

などが挙げられます。

CSSを使うと、文字が書かれていない「余白」の大きさを調整することができます。

具体的に言うと、ページの上下左右の空間、テキストの行間を調節することが可能になります。

ページの冒頭から最後まで文字がいっぱいに詰まっているよりは、見出しと本文の間に空間をとったり、段落や文が一区切りしたタイミングで余白があるとより読みやすいです。

余白を自在に操れるようになると、見た目の良いデザインを作れるようになるということです。

従来はHTMLをCSSだけではこれまでご紹介したような静的な装飾しか表現できませんでした。しかし、現在の主流であるCSS3であれば、従来はプログラミングがなければ再現できなかったようなアニメーションも再現することができます。

アニメーションには2種類あり、「animation」といったアニメーションの再生に関して詳細な設定をできるものと、「transition」といったマウスオーバーやクリックなど、特定の動きの元でのみ再生されるものがあります。

今回はCSSでできることについて

という3つを主にご紹介しました。今回紹介したものはほんの一部で、CSSを活用することでweb上であらゆる表現をすることができるようになります。

HTMLを学習するだけでは実際運用できるようなサイトを作れるようにはなりません。CSSも並行して学習を進め、効率的にweb制作をマスターしましょう。