HTMLとCSSの基本をマスターできれば、もう自力でウェブページが作れます。
ここでは、CSS初心者の方向けに、CSSの基本を解説しています。
これからホームページを作りたい方、将来ウェブデザイナーを目指している方、ウェブ業界で働きたい方、そんな方々の参考になれば幸いです。
（HTML講座はこちら）
目次
CSSとは
CSS（Cascading Style Sheets）は、ウェブページのデザイン（見た目）を定義するためのプログラミング言語です。「スタイルシート」または「シーエスエス」などと呼ばれています。
ファイルの拡張子は「.css」になります。
ファイル名は自由ですが「style.css」などが使われることも多いです。
HTMLとCSS
基本的なウェブページは、
- HTML（ウェブページの構造を定義）
- CSS（ウェブページのデザインを定義）
この２つで構成されています。
（ページによってjavascriptなどが加わったりします）
管理面からも２つに分かれていることのメリットは大きいです。
例えば、ウェブページをリニューアルしたいとき、HTMLの構造はそのままで、CSSだけ変更することでデザインを刷新することができます。
CSSのみで、テキストの大きさや色だけでなく、ページのレイアウトなども変えることができます。
CSSの書き方（セレクタ、プロパティ、値）
それでは、CSSの記述方法を解説していきます。
基本的な形はこれです。
/* 基本的な形 */
セレクタ {
プロパティ1: 値1;
プロパティ2: 値2;
}
/* 実際の書き方 */
p {
font-size: 13px;
}- セレクタ（「p」段落要素）に対して、
- プロパティ（「font-size」テキストサイズ）を、
- この値（「13px」）にして！
といったことを記述・指示します。
セレクタ
セレクタは多くの種類があり、要素、クラス、IDなどに基づき指定されます。
一般的なセレクタの例でみていきましょう。
要素セレクタ
特定のHTMLタグ要素に対してスタイルを適用させることができます。
<p>
段落
</p>p {
/* スタイルの定義 */
}このように書くと、スタイルの定義がすべてのp（段落要素）に適用されます。
クラスセレクタ
特定のクラス名に対してスタイルを適用させることができます。
<h2 class="classname">HTML側には、例えば<h2>タグにクラスを追加する場合、<h2 class="classname">と記載します。「classname」の箇所は自由に名前を付けることができます。同じページ内で同じクラス名を使い回すことができます。
.classname {
/* スタイルの定義 */
}CSS側には、クラス名（先頭には「.」を入れます）と、スタイルの定義（プロパティ・値）を記載します。
HTMLの同じクラス名が付いたもの全てにCSSのスタイルが適用されます。
HTMLでは複数個所あるものを、CSSでは1箇所の記述でデザインできるということです。
IDセレクタ
特定のID名に対してスタイルを適用させることができます。
<p id="idname">HTML側には、例えば<p>タグにIDを追加する場合、<p id="idname">と記載します。「idname」の箇所は自由に名前を付けることができます。同じid名を同じページ内で使い回すことはNGです。
#idname {
/* スタイルの定義 */
} CSS側には、ID名（先頭には「#」を入れます）と、スタイルの定義（プロパティ・値）を記載します。
子孫セレクタ
この要素のなかのこのクラスだけなど、子孫に対してスタイルを適用させることができます。
<div>
<p>
<div class="classname">
子孫
</div>
</p>
<div>div p .classname {
/* div要素の子孫に適用 */
} この場合、divのなかの、pのなかの、classnameに対してスタイルが適用されます。半角スペースを間に入れて指定します。
プロパティと値
プロパティと値で、セレクタに対してスタイルや挙動を指定します。セミコロンの後に値を入れます。代表的な例をみていきましょう。
body {
font-family: Georgia, serif;
} font-family:テキストのフォントを指定します。
値には、フォント名（Georgia、serif）などがあります。
div {
color: #ff0000;
font-size: 16px;
font-weight: bold;
text-align: right;
} color:テキストの色を指定します。
値には、red、blue、rgb(255, 0, 0)、#ff0000などが入ります。
font-size:テキストのサイズを指定します。
値には、ピクセル数（16px）、ポイント数（12pt）などがあります。
font-weight:テキストの太さを指定します。
値には、bold（太字）などがあります。
text-align:テキストの水平方向の配置を指定します。
値には、left、center、right、justifyなどがあります。
div {
margin: 10px 0 10px 0; /* 上下が10px 左右は0px */
padding: 20px; /* 上下左右20px */
background-color: #EEEEEE;
border: 2px #ff0000 solid; /* 実線 */
} margin: 要素の外側の余白を指定します。
値には、上下左右の余白サイズ（10px、2em）が入ります。
padding: 要素の内側の余白を指定します。
値はmarginプロパティと同様です。
background-color: 要素の背景色を指定します。
値はcolorプロパティと同様です。
border: 要素の枠線を指定します。
値には、線の太さ（2px）、種類（solid、dashed、dotted）、色（#ff0000）があります。
数多くのプロパティ・値の種類があるので、ある程度覚えないと使いこなしていけません。
ただ、さすがに全ては覚えられないので（忘れますし…）、参考書や「CSSリファレンス – とほほのWWW入門」などで調べながら使っていけば問題はありません。
CSSをHTMLに適用する方法
HTMLから読み込む
HTMLから外部のCSSを読み込む場合、<head>内に、＜link rel="stylesheet" href="style.css">のように記載します。「style.css」の箇所に、CSSファイルのパス・ファイル名を記載します。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLとCSS</title>
<link rel="stylesheet" href="style.css">
</head>HTMLに直接スタイルを記述する
HTML内にCSSのスタイルを記述することもできます。<style>内にCSSのスタイルを記述します。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLとCSS</title>
<style>
body {
font-family: Arial, sans-serif;
}
p {
color: #0000ff;
}
</style>
</head>基本的に外部のCSSを読み込む方がおすすめですが、修正や管理のしやすさなどを考慮し、HTMLに直接書くケースもあります。
レスポンシブデザインの対応
CSSを使用してレスポンシブデザインを実装する方法を解説します。
メディアクエリというものを使います。メディアクエリは、ユーザーが使うデバイスや画面サイズに応じてスタイルを適用するためのCSSの機能です。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLとCSS</title>
</head>まずは<head>内にviewportを記載します。ウェブページの表示領域などを指定するものです。ここの記述の仕方はいろいろありますが、基本形の例ととらえてください。
body {
font-size: 16px;
}
@media screen and (max-width: 600px) {
body {
font-size: 13px;
}
}上記のように書くと、
画面幅は601px以上のときは、テキストサイズが16pxで表示され、
画面幅が600px以下のときは、テキストサイズが13pxで表示されます。
(max-width: 600px)は、画面幅が600px以下の場合にスタイルが適用されることを意味します。
(min-width: 600px)と書くと、600px以上の場合にスタイルが適用されます。
CSSでできること
CSSの記述方法や使い方など、ごくごく基本的なことをご紹介してきました。
CSSは、まだまだたくさんの使い方があります。
レイアウト
float、flexbox、gridなどの機能を使い、複雑なレイアウトを作成できます。
アニメーション・トランジション
ボタンをロールオーバーしたときに色を変える、ウェブページをスクロールをしたときに要素がふわっと現れるようにするなど、各要素に動きや変化を与えることができます。
作画
複雑な絵を描けるわけではないですが。例えば、リンクなどに使われる「＞」の形をCSSだけで描くことができます。これができると、「＞」の画像を作成する必要がなくなります。
色はグラデーションを付けたり、線は斜線デザインにしたりと、けっこうデザインできます。
ブラウザ間の互換性対応
同じウェブページでも、ブラウザやデバイスによってちょっと見た目が変わったりします。CSS上で、ブラウザ別にスタイルを調整することも可能です。
もっとCSSについて知りたい方は。当サイトでは、他にもCSS関連の記事を掲載しています。参考にしてみてください。
