IT
キーボードの上に置かれたCSSのブロック

CSSとは?非エンジニアや初心者向けに、CSSの基礎を一から解説します!!

IT関連

CSSはカスケーディング・スタイル・シート(Cascading Style Sheets)の頭文字を取ったもので、ホームページやアプリを作るときに使う、主に見た目(スタイル)をよくするためのコンピューター言語です。

(HTMLってなに?という方は、以前私が書いたこちらの記事をご覧ください)

CSSの役割


HTMLが人間が書いたテキストの意味を、コンピューターに伝えるための言語であるのに対し、CSSは人間が描いたスタイルを、コンピューターに伝えるための言語です。

文字のフォント、色、大きさ、影、背景色、線、スペース、レイアウト、その他、ありとあらゆるスタイルを決めるのがCSSの主な役割です。

また近年では、アニメーションの実装でもCSSが使われるようになり、当サイトのトップページでは、最初の画面の右下にある、下にスクロールを促すアイコンや、自己紹介や作品紹介の文字にポインターを合わせたときに出てくる矢印、ブログの画像にポインターを合わせたときのアニメーションなどは全てCSSで実装しています。
(※後ろの2つはパソコン画面でのみ動作します)

他にも、今までJavaScriptというプログラミング言語で実装されていた(押すとメニューが出てくる)ハンバーガーボタンや画像が次々に変わるスライドショーも、現在ではCSSのみで実装できるようになり、CSSでできることはどんどん増えてきています。

CSSの書き方

CSSには大きく分けると、3種類の書き方があるので、一つずつ紹介していきます。

1.スタイル属性

まずはHTMLを書きます。
<p>CSSは楽しい!!</p>
これをそのままブラウザで表示すると

HTMLがなくなり、文字だけが表示されます。

では、この文字を赤くしてみます。

<p style="color: red;">CSSは楽しい!!</p>

タグの中にstyle="color: red;"を書きました。
これをブラウザで表示すると

となります。
color: red;
これがCSSです。
では各パーツの説明をします。

プロパティ

上の例で言うと、「color」にあたる部分をプロパティと言います。
ここで、どのスタイルを変更するかを決めています。
colorは文字色を変えるプロパティですが、他にも文字の大きさを変えるfont-sizeプロパティ、太さを変えるfont-weightプロパティや、背景色を変えるbackground-colorプロパティなど非常にたくさん(現在249個)のプロパティがあります。

例の「red」にあたる部分を値(あたい)と言います。
各プロパティには定められた値があり、その値を入れることにより、どのようなスタイルにするかを決めます。
colorプロパティの値だと、blue、greenといった英語表記だけでなく、RGBやHSLといったカラーモデルを使用することもでき、たくさんの種類の中から気に入った色を設定することができます。
同じように、先ほど紹介したfont-sizeやfont-weight、background-colorなどのプロパティにも様々な値があります。

属性

style=" "
では、この部分は何かというと、これはHTMLの属性と呼ばれている機能です。
ここではスタイルをつけるための機能である、スタイル属性を使っています。
属性には他にもID属性やclass属性、href属性など様々な種類があり、その用途によって使い分けます。
それぞれの名称をまとめると、以下のようになります。

これがスタイル属性を使ったCSSの記述です。

ただ、このやり方だとプロパティの数が増えたときに管理が大変です。
上の例だと文字色だけですが、ここで文字のサイズや太さ、背景色を変えたいときには以下のような書き方をする必要があります。
<p style="color: red; font-size: 23px; font-weight: bold; background-color: lightgray">
もちろん、これでもスタイルは適応されますが、非常に見づらく、後になって確認したり、変更したりするときに大変です。

しかも、場合によってはプロパティが10個を超えることもあります。
そうなってくるとHTMLがぐちゃぐちゃになり、どこで何をやっているのかわからなくなります。

では、そうならないようにできる2つ目のCSSの書き方を紹介します。

2.スタイルタグ

2つ目のやり方は、スタイルタグの中にCSSをまとめて記述する方法です。
まずは、HTMLです。
<p>CSSは楽しい!!</p>
このスタイルを変えたいときは、以下のようにCSSを記述します。

<style>
 p {
 color: red;
 font-size: 23px;
 font-weight: blod;
 background-color: lightgray;
 }
</style>

かなり見やすくなりましたね。
このスタイルタグ<style></style>はhtmlファイルのheadタグ内に記述する必要があります。

通常、CSSは一箇所だけ記述するというはありません。
いくつもの箇所に、いくつものスタイルを適応させるため、たくさんのコードを書きます。

<style>
 p {
 color: red;
 font-size: 23px;
 font-weight: blod;
 background-color: lightgray;
 }
 h1 {
 font-size: 30px;
 text-align: center;
 border-bottom: 2px solid #3a64f7;
 }
</style>

スタイルタグを使って記述する場合、このようにスタイルをまとめて書けるようになり、管理がしやすくなります。
では続けて3つ目の方法を紹介します。

3.cssファイル

これまで紹介したやり方は、一つのhtmlファイル内に全てを記述する方法ですが、スタイルは専用のファイル(CSSファイル)を別に作って管理した方がいい場合もあります。
では、そのやり方を説明します。

まずはcssファイルの作成です。
ファイル名+拡張子(.css)でcssファイルを作ることができます。
ファイル内のコードの書き方は、先ほど紹介したスタイルタグ内のCSSの書き方と同じです。

書き終わったらファイルを保存し、読み込ませたいhtmlファイルのheadタグの中に以下のようなコードを記述します。
<link rel="stylesheet" href="style.css">
この場合は、htmlファイルと同じフォルダ内にcssファイルを置いています。
これでスタイルは適応されます。

このやり方の場合、ファイルはいくつも作ることができるため、ヘッダーのスタイル用のファイル、ブログ記事のスタイル用のファイルなどと分けることにより、より管理がしやすくなります。

class属性

今まで紹介したスタイルタグやcssファイルを使ったCSSの記述は、HTML要素を直接指定してスタイルを変えるやり方でした。
が、要素を直接指定すると、その要素を使っているすべてのスタイルが変わってしまいます。

本文で使っているpタグのスタイルを変えたら、ヘッダーやフッターに使っているpタグのスタイルまで変わってしまった・・・なんてことになったら嫌ですよね。

ですので、CSSはclass属性を使って記述するのが一般的です。
class属性はHTMLに以下のように記述します。
<p class="happy">CSSは楽しい!!</p>
先ほど説明した属性の箇所にclassが入っています。
これがclass属性です。

そして今回はhappyというクラス名をつけました。
使えない文字、記号などもありますが、基本的にはクラス名は自由につけることができます。

CSSは以下のように書きます。

.happy {
 color: red;
 font-size: 23px;
 font-weight: blod;
 background-color: lightgray;
}                        

ドット「 . 」はクラス属性と紐付けるための記号です。
これで、スタイルは適応されます。

CSSの難しさ

エンジニアの中でもCSSが難しいとか、苦手だと言う人は結構います。
その代表的な理由を4つ挙げます。

1.プロパティと値の多さ

先ほども説明した通り、CSSのプロパティとその値はたくさんあります。
これによって細部までスタイリングできるのですが、使いこなせるようになるまでには、それなりの勉強をする必要があります。
よく使うプロパティなら自然に使いこなせるようになりますが、慣れるまでは時間がかかるので、結構大変です。

2.スタイルが思い通りにならない

一生懸命勉強して、ある程度CSSを書けるようになっても、うまくスタイルが適応されない場合もあります。
スペルが一文字違っただけで、うまくいかなくなるのは当然ですが、CSSが重なることにより、プロパティが打ち消されてしまうこともあります。
また、グーグルクロムではうまくいっても、サファリではうまくいかなかったり、Androidではうまくいっても、iPhoneではうまくいかないなどといったこともあり、その度に検索したり、人に聞いたりして調整をする必要があります。
それですんなりいけばいいのですが、検索してもなかなか答えが見つからないことや、対処法を試してもうまくいかないこともあり、解決するまで時間がかかることもあります。

3.クラス名の命名

先ほどの例ではクラス名を「happy」とつけましたが、実際の現場ではこんな名前をつけることはまずありません。
わかりにくいからです。

CSSは一回書いて終わりではなく、保守や管理のため、後で見返すことも多々あります。
そうなったときに自分で、「あれ?これはどこのスタイルだったっけ?」となると、余計な手間と時間がかかってしまいます。
そうならないように、わかりやすい名前をつけることが重要です。

特にチーム開発をするときには要注意です。
コードを見るのは自分だけではないため、自分だけがわかればいいのではなく、誰が見てもわかるような名前にする必要があるのです。
そのためにCSSの設計規則BEMを使って記述するケースも多くあります。

以下はグローバルメニューのHTMLにBEMを使った例です。

<ul class="global-nav">
 <li class="global-nav__item-home">home</li>
 <li class="global-nav__item-blog">about</li>
 <li class="global-nav__item-works">works</li>
 <li class="global-nav__item-blog">blog</li>
</ul>  

CSSは以下のようになります。

.global-nav {
 display: flex;
 justify-content: space-between;
 max-width: 300px;
 width: 100%;
}
.global-nav__item-home {
 color: red;
}  
.global-nav__item-about {
 color: orange;
} 
.global-nav__item-works {
 color: green;
} 
.global-nav__item-blog {
 color: blue;
}                 

HTMLを見ても、CSSを見ても、どこの部分をスタイリングしているかすぐにわかりますよね。

この命名が難しかったり、面倒だったりするので、苦手な人も多いのです。

4.おしゃれなスタイルにならない

書き方がわかったところで、おしゃれなスタイルが作れるとは限りません。
格好良くしたい、可愛くしたい、いい感じにしたいと思っていても、それを実現するには、デザインスキルが必要になります。
では、デザインの勉強をすれば、おしゃれなスタイルが作れるようになるのかというと、必ずしもそうとは言い切れません。
勉強してできるようになる人と、ならない人がいるからです。

センスの問題です。

そして、理系のエンジニアは、おしゃれとは無縁な人が多いので、スタイリングを苦手としている人が結構多いのです。

CSSの難しさを解決?

CSSの難しさを解決するために、CSSフレームワークというものがあります。
最近ではTailwind CSSが人気ですが、以前はBootstrapがよく使われていました。
これらを使うことにより、CSSの記述は楽になります。
以下はTailwind CSSの使用例です。

<div class="mt-4 md:mt-0 md:ml-6">
 <h1class="uppercase tracking-wide text-sm text-indigo-600 font-bold">about css</h1>
 <a href="/start" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">CSSを始めよう</a>
 <p class="mt-2 text-gray-600">CSSは難しい部分も多々ありますが、楽しいこともあります。</p>
</div>

このようにHTMLのクラス属性に定められたクラス名を記述することにより、そのスタイルが適応されます。
クラス名を悩む必要はなく、cssファイルを作る必要もありません。
ただ、デメリットとしては、htmlファイルが見づらくなること、Tailwind CSSのクラス名を覚える必要があること、1px単位の調整が難しいことなどが挙げられます。
また、Tailwind CSSではおしゃれ問題を解決することはできません。
Bootstrapを使えば、ある程度おしゃれにはできますが、Bootstrapについて勉強する必要があるほかにも、さまざまなデメリットもあります。

これらを導入する際には、あらかじめその辺りのことも押さえておいた方がいいでしょう。

まとめ

  • CSSはカスケーディング・スタイル・シート(Cascading Style Sheets)の頭文字を取ったもの。
  • ホームページやアプリを作るときに使う、主に見た目(スタイル)をよくするためのコンピューター言語。
  • CSSの書き方は、スタイル属性に記述する方法、スタイルタグに記述する方法、cssファイルに記述する方法の3種類がある。
  • CSSの難しい点は、プロパティと値の多さ、思い通りのスタイルにならない、クラス名の命名、おしゃれなスタイルが作れないことなどが挙げられる。
  • CSSのフレームワークを使えば、ある程度の問題は解決できるが、デメリットもある。

最後に

私の場合、HTML同様にCSSも慣れるまでは結構大変でしたが、いつの間にかスラスラ書けるようになっていました。
とはいうものの、今でもうまくいかないこともあり、その度に検索して勉強しています。

CSSのフレームワークに関しては、個人的には使っていません。
スタイルを1から作るのが好きなので、今のところフレームワークのメリットよりも、デメリットが勝っている状態です。

デザインに関しては、私も自分のセンスに自信があるとは言えません。
が、大事なことは、たくさんのいいデザインに触れることだと思います。

誤解を恐れずに言うなら、今あるホームページのほとんどは大抵誰かのパクリです。

これだけたくさんのホームページがある現代で、本当に自分で一からデザインを考えた完璧なオリジナルのホームページなんていうのは、存在しないのではないでしょうか?
あったとしても、それはかなり見にくいと思います。

もちろん人のデザインを丸々パクるのはダメです。
(たまにそういうサイトもありますが、、、)
ですが、いいサイトのいいところを真似したり、参考にしたりして、自分の作品に生かすというのは、優れたクリエイターの手法だと思います。

今回の記事では、未経験や初心者向けに、CSSの基礎的なことしか書いていませんが、CSSはまだまだ奥の深い、面白い言語です。
時間があれば、その辺りのことも書いていこうと思います。