はじめてのCSS講座～CSSの書き方やレスポンシブ対応を完全マスター

HTMLとCSSの基本をマスターできれば、もう自力でウェブページが作れます。
ここでは、CSS初心者の方向けに、CSSの基本を解説しています。

これからホームページを作りたい方、将来ウェブデザイナーを目指している方、ウェブ業界で働きたい方、そんな方々の参考になれば幸いです。

（HTML講座はこちら）

はじめての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関連の記事を掲載しています。参考にしてみてください。

記事の一覧