CSSとは？何ができるの？HTMLとの違いやできることを解説！

HTMLはWebサイトの骨組みにあたるもので、文章や、見出しといった設定を行いました。ですがHTMLだけだと、ただ文章だけが表示され、サイトを閲覧される方にとってみれば、とても見辛くなってしまいます。

CSSとはCascading Style Sheets（カスケーディング・スタイルシート）の略で、スタイルシート言語とも呼ばれます。

CSSでは、HTMLでは対応できないWebサイトの「装飾」を行います。各設定の紹介を簡単にではございますが、解説いたします！

本記事では以下のような方が対象となります。

本記事にて少しでお悩みが解決できましたら幸いです。

下記の記事にて、HTMLの解説も行っております。HTMLに関して知りたいといった方は、下記の記事も参考にされてみてください。

Webサイト制作に関するノウハウブ…

Web制作 – HTMLファイルの構成について – わかりやすく解説 初めてHTMLを見たときは、何やら英語がずらずらと書かれていて、何だこれは…となった方もいらっしゃるのではないでしょうか？ こんなのわかるようになるのかな？いやもう絶…

Webサイト制作に関するノウハウブ…

【初心者向け】よく使うHTML15選！覚えておきたいタグを紹介！ 　HTMLタグは100個以上ありますが、こんなたくさん覚えられないよ・・・といった方もいらっしゃるかと思います。ですが、実務で実際に使用するタグはそこまで多くなく、す…

CSSでできること

CSSでは、Webサイトを見やすくするための装飾の役割を担うものになります。文字に関していえば、色、サイズ、文字の間隔などの制御も可能です。画像の配置やアニメーションも制御が可能になります。

本記事の目次や、文字の大きさ、色もすべてCSSによって指定されております。

文字の色やサイズを変更

<p class="p-1">この文字は赤色です。</p>
<p class="p-2">この文字は緑色です。</p>
<p class="p-3">この文字は青色です。</p>

.p-1 {
  color: red;
  font-size: 20px;
}
.p-2 {
  color: green;
  font-size: 16px;
}
.p-3 {
  color: blue;
  font-size: 12px;
}

CSSで文字の大きさや、色の変更が可能です。HTMLに「class」を付与することによって、CSSの管理がしやすくなります。

CSSでは「class」に対して、プロパティを指定、プロパティの値を設定します。

この場合、「p-1」というclassを持つHTML要素に対して、colorプロパティとfont-sizeプロパティを指定しております。それぞれ、「red」、「20px」という値を設定し、画面に反映させております。

値の指定方法や単位（この場合はpx）についての詳細は別記事にて解説させていただく予定です。

画像の大きさの調整や、レイアウトを調整

<div class="container">
  <div class="cards">
    <div class="image-box"></div>
    <p>1つ目の画像です</p>
  </div>
  <div class="cards">
    <div class="image-box"></div>
    <p>2つ目の画像です</p>
  </div>
  <div class="cards">
    <div class="image-box"></div>
    <p>3つ目の画像です</p>
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
}

.container .cards {
  width: 20%;
  padding: 2em;
  border: 1px solid #555555;
}

.container .cards .image-box {
  width: 100%;
  aspect-ratio: 1;
  background-color: #c8ffd9;
}

CSSでカードを作成し、横に並べております。文字の装飾だけでなく、カードのようなデザインを再現し、並べることも可能です。Webサイトでよく見かける画像が横に並んでいるデザインも、CSSで制御されています。

アニメーションを設定

文字の装飾と比べるとCSSの記載量が多くなっておりますが、このようにアニメーションを付与することが可能です。
上記例では、2秒間かけて１往復、青のボックスを0.5秒遅らせてスタートさせています。スライドさせていますが、回転させたり、色を変化させたりといったことも可能です。

実際には上記例のようなアニメーションを取り入れることは少ないですが、このような指定ができるようになると、応用して実装できる幅が広がります。

アニメーションを付与できるようになると、コーディングの表現の幅も広がり、楽しくなってきます！

さいごに

今回はCSSでできることを簡単にですが、解説させていただきました。

HTMLと違って、設定できることが多岐に渡るため、すべて覚えるのは非常に大変です。

HTMLと同じように、使用するプロパティはおおよそ決まってきますので、実際にWebサイト制作をしながら、覚えていくのが良いかと思います！

わからなくなったら、その都度調べる！そのくらいでよいと思います！

いろいろなプロパティを試して、勉強していきましょう！