Webサイトを作る際に必要なHTMLやCSS。
聞いたことはあるけれど、実際にどういうものか、どのように使っていくのか分からないという方も多いのではないでしょうか。
現在のWebサイト制作では、文書の意味や構造の設定はHTMLで、見た目のスタイルやデザインの指定はCSSで設定するため、CSSの知識が欠かせません。
この記事ではCSSの基本や書き方を分かりやすく解説していますので、初心者でも簡単にCSSを学ぶことができます。
CSSって何だろう？とこれから学ぼうと思っている方はぜひ参考にしてみてください。
目次
HTMLとは
Webサイトを作る際にCSSとセットで必要なものがHTMLです。
HTMLとはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ウェブサイトのテキストやレイアウトの構造を指定するための言語で下記のようにタグ名で囲んで書いていきます。
<タグ名>※※※※※</タグ名>
例えば、「HTMLとは何か？」という見出しは見出しタグ<h1>を使用し下記のように書きます。
<h1>HTMLとは何か？</h1>
この後に説明するCSSと組み合わせることで、HTMLで指定した文字やレイアウトをもっと見やすく、美しく整えることができるので合わせて覚えておくと良いでしょう。
HTMLの詳細については下記のページで説明しています。
関連記事 : HTMLとは？簡単なHTMLタグの基本からCSSの基礎まで初心者にもわかりやすく解説
CSSとは
CSSとは「Cascading Style Sheets」の略称でスタイルシートと呼ばれることもあります。
HTMLで作られた文章構造に対して、装飾をつけたりレイアウトを調整したりし、Webサイトの見た目を整える役割があります。
HTMLはWebサイトの文章構造を担うもので、CSSはデザインを担うものと覚えておくと良いでしょう。
普段私たちが目にしているWebサイトの多くは、HTMLとCSSの組み合わせで作成されているのです。
CSSの歴史
CSSは1994年にホーコン・ウィウム・リー氏が初めて提唱し、1996年に「CSS1」が誕生しました。
その後、アップデートを重ね「CSS2」「CSS2.1」を経て、現在は「CSS3」が最新のバージョンとなっています。
CSSでできること
ここではCSSでできることをより詳しくみていきましょう。
文字の色・サイズの変更
HTMLで作成した文字の色やサイズの変更、行間の調整などができます。
デフォルトでの文字の色は黒、サイズは16pxなので、CSSを使わずにHTMLだけで作成されたWebサイトは、同じサイズの黒い文字が左詰めで並んでいる単調なページとなります。
重要な部分は赤字でサイズを大きくして目立たせるということもCSSを使えば可能です。
レイアウトの変更
Webサイトを構成している文字や画像、表などの要素の位置を変えてレイアウトを変更することができます。
CSSの代表的なレイアウト構造は「グリッドレイアウト」と「フレックスボックス」の2種類があります。
グリッドレイアウトは縦と横（列と行）の2軸を使ってレイアウトを組むことで、ブロック内の要素のサイズや配置を指定することができます。
フレックスボックス（Flexbox）は横並びのレイアウトを簡単に作れる、名前の通りフレキシブルな（柔軟性のある）レイアウトができる機能です。
要素を横並びにする手法は、これまでfloatやインラインブロックを使うことが多かったかもしれませんが、フレックスボックスは横並びレイアウトの新定番といわれるほど簡単に組むことが可能です。
装飾
文字がズラッと並んでいるよりも、装飾されたメリハリのある読みやすいWebサイトになるようにCSSを使って装飾ができます。
CSSで代表的な装飾機能は下記の通りです。
・ 太字にする
・ 斜体にする
・ 文字の色を指定する
・ 背景色を指定する
・ 表を作る
・ 下線を引く
・ ボタンを配置する
・ フォントを指定する
アニメーション
難しいプログラミングでしか実現できなかったアニメーションも、CSSで実現することができます。
例えば、1文字ずつ時間差で登場するテキストアニメーションや、画像にマウスオーバーすると画像が動くなどがあります。
CSSのアニメーションは2種類あり、1つ目の「animation」はアニメーションの再生についてループさせるなどの細かい設定をすることができます。
2つ目は「transition」で、マウスオーバーなどのアクションを起こした時のみ再生されます。
余白の調整
CSSでは、余白やテキストの行間を自由にコントロールすることができます。
サイトを埋め尽くすようにテキストや画像が配置してあるよりも、余白があることで読みやすくバランスが整っていると感じます。
余白はコンテンツが見やすくなったり、強調されたりする効果がありWebサイトの重要なデザインの一部と考えられているので、覚えておくべきCSSの1つです。
CSSの基本的な書き方
CSSがどういうものか理解できたら、基本的なCSSの書き方を覚えていきます。
CSSは下記の3つの要素で成り立っています。
・ セレクタ
・ プロパティ
・ 値
セレクタ
セレクタはCSSを適用する箇所を表します。
例えば、「h1、h2、p、img」などのタグ名や「class=”属性名”」などのclass名、id名のことを指します。
プロパティ
セレクタで指定した箇所に対して、適用したい装飾（スタイル）のことで、文字の色を変えたい、下線を引きたいなどを指定します。
CSSには数えきれないほどのプロパティの種類がありますが、一部を紹介します。
| プロパティ名 | 内容 |
| font-size | フォントのサイズを指定 |
| font-weight | フォントの太さを指定 |
| text-align | 行の揃え位置・均等割付を指定 |
| color | 文字の色を指定 |
| margin | 余白を指定 |
| border | 枠線を指定 |
| background-color | 背景色を指定 |
| background-image | 背景画像を指定 |
値
セレクタに適用するプロパティをどのように変更するのかを具体的に数値で表します。
例えば文字の色を赤にしたい、文字の大きさを24pxにしたいなどです。
ちなみに、色については#ff0000のように16進数で指定する方法と、rgb(255,0,0)のようにrgb値(red,green,blueの頭文字)で指定する方法があります。
CSSの具体的なコード例
下記はCSSの書き方の基本になります。
セレクタ{
プロパティ：値；
}
CSSの書き方
基本の構造が理解できたら実際に表示したい装飾に合わせてセレクタ・プロパティ・値を入れていきます。
● h1見出しのフォントサイズを20pxにする
h1 {
font-size: 20px;
}
● pタグのフォントサイズを20px、文字は太字で赤色にする
p {
font-size: 20px;
font-weight: bold;
color: #ff0000;
}
● すべてのimgタグの枠線を2pxにし、幅150px、高さ300pxにする
img {
border-width: 2px;
width: 150px;
height: 300px;
}
● ページ全体の背景色を緑にする
ページ全体はセレクタではbodyと書きます。
body {
background-color: #00ff00;
}
CSSを書く場所
CSSの書き方の次はどこに書くのかを見ていきましょう。
CSSは単体では機能せず、HTMLと結びつけて使用します。
CSSを書く場所は3パターンあります。
1. HTMLタグの中に書き込む
2. HTMLファイルにstyleタグを作って書く
3. CSSファイルを作ってHTMLファイルに読みこませる
現在は3つ目のCSSファイルを作って、HTMLファイルに読みこませる方法が多く採られています。
HTMLとCSSが混在している場合、CSSのみの修正であっても間違えてHTMLまで削除や書き換えをしてしまいWebサイトが崩れてしまう恐れがあります。
HTMLファイルとCSSファイルが分離していることで、このようなトラブルを回避することができるというメリットがあります。
CSSを書く時の注意点
CSSは書いた人だけではなく、誰が見ても分かりやすいように書くことが大切です。
修正や更新の際に分かりにくいCSSが書いてあると、その分時間がかかってしまうので気をつけましょう。
全角スペース・全角文字を使わない
コードは半角文字でできているため、全角スペースや全角文字を使用するとエラーの原因となります。
プログラムにおいては半角と全角は違うものと認識されるので注意してください。
プロパティと値は｛｝（波カッコ）で囲む
｛｝の中にはCSSで表示させたい内容を複数書くことができ、｛｝のどちらかが欠けているだけでもCSSは崩れてしまい表示がされなくなります。
特に忘れがちなのは、最後に ｝で閉じる部分ですので注意して書くようにしてください。
値の最後はセミコロン「 ; 」を入れる
｛｝（波カッコ）と土用に値の最後にセミコロン「 ; 」を入れるのも忘れないようにしましょう。
セミコロンは『表示させたい定義はここまで』ということを示す記号なので、入れ忘れてしまうと定義がずっと続いているようにプログラムでは認識され、正しく適用されません。
まとめ
Webサイトの装飾をするために必要なCSSについての基本やコード例を紹介しました。
CSSはHTMLとあわせて習得することで、Webサイトのデザインやレイアウトを整え、ユーザーに情報が伝わりやすく見やすいサイトを制作することが可能になります。
CSSをマスターするにはまず基本文法をしっかりと覚えることです。
基本が曖昧なままでWebサイト制作を進めてしまうと、クオリティや制作スピードに影響します。
基本を覚えたら数百種類もあるといわれるCSSプロパティを少しずつ覚えていき使いこなしていきましょう。
