前回HTMLファイルの作り方、書き方について解説しました。

今回は、HTMLと同様にWebページ作成において欠かせないCSSの書き方を解説していきます。フォームやボタンの色、形、位置などを変更していきますが、具体的にどう変わっていくのか確認しながら自分でもコーディングしてみてください。

CSSとは

CSS(Cascading Style Sheets)はHTML文書内で定義された要素に対して、文字の色や大きさなど主に外観に関する指定を行います。また音声による読み上げなど、見た目に関するもの以外の設定を行う機能も一部存在します。 
以前は外観に関する設定もHTMLで行うことができましたが、現行のHTML5ではCSSを使用するのが基本となっています。そのためWebサイトを作成するには必須と言えます。

CSSのファイルの作り方

CSSファイルそのものには宣言文などはありません。テキストエディタでファイルを作成し、拡張子「.css」を付けて保存するとそれがCSSファイルとなります。

ここではAtomを使用してCSSファイルを作成してみます。「ファイル」→「新規ファイル」を選択します。

新規ファイルが作成されたら「ファイル」→「別名で保存」を選択します。

拡張子を「.css」にして保存します。ここでは”style.css”としています。以上でCSSファイルの作成は完了です。

CSSの書き方

HTML文書にCSSを適用させる

まず、HTMLにCSSで書いたものを反映させる方法です。

CSSはHTMLファイル内にも記述することができますが、基本的に外部ファイルを用意しそれを読み込むのが便利です。ここでは外部CSSファイルをHTMLに適用する方法を紹介します。

HTMLファイルの<head></head>内に、以下のように入力します。

<link rel="stylesheet" type="text/css" href="style.css">
※ 「style.css」の部分は参照するCSSファイルの名前になります。

これでHTMLの文書に関するスタイルの指定を”style.css”で行うことができるようになりました。

CSSの記述方法

CSSを書くときは、HTML文書内に存在する<p>や<div>のような各要素やクラス名・id名などが重要になります。CSS文書では、まずどの部分にスタイルに関する指定を行うかを記述します。

例えば以下のような状態のHTML文書があるとします。

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="style.css">
  </head>
   <body>
    <h1>大見出し</h1>
    <h2>小見出し1</h2>
    <h2>小見出し2</h2>
  </body>
</html>

この文書では<h1>による見出しがひとつ、<h2>による見出しがふたつあります。この<h2>の部分にスタイルシートを適用させる場合、作成したCSSファイルに以下のように入力します。

h2{color:blue;}

「h2」の部分は「セレクタ」といい、続く{〜}の中の内容を適用させる場所を指定します。<h2>のように要素そのものを指定する場合は、そのまま「h2」とだけ記述します(これを要素型セレクタといいます)。

セレクタの指定方法は対象がクラス名であったり、id名であったりなどそれぞれの場合によって異なった表記の方法になります。

{〜}内の「color」の部分は「プロパティ」といい、実行する内容を表します。「blue」の部分は「値」といい、プロパティに関連した具体的な指示をここで行います。今回の場合は文字色指定を行う「color」のプロパティに対して「blue(青色)」にするように値を入力しています。

これをHTMLファイルで読み込むと、画面ではこのように表示されます。<h2>の見出しの部分だけにスタイルが適用され、文字の色が青に変更されました。

 CSSを実際に書いてみよう

以下のような簡単なテキスト送信フォームのHTMLがあったとします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
   <body>
    <div class="form">
      <form action="result.php" method="post">
        <p>
          <textarea name="text" cols="60" rows="4">
            テキストを入力してください。
          </textarea>
        </p>
        <p>
          <input type="submit" value="送信">
        </p>
      </form>
    </div>
  </body>
</html>

スタイルに関する設定を行っていない状態では、画面ではこのように表示されます。

これをCSSを使うことによって、最終的にこのような形にしたいと思います。

ここでCSSを適用させたいのは<textarea>と<input>です。CSSファイルを新規作成し、それぞれこのように記述して準備します。

textarea{}
input{}

まずはテキスト入力フォームと送信ボタンそれぞれの背景の色を変えてみましょう。

textarea{
background-color: #2885b9;
}
input{
background-color: #2bb035;
}

background-colorは要素の背景の色を変更するプロパティです。値の部分には指定したい色をカラーネーム(「red」など)あるいはカラーコード(「#ff0000」など)で入力します。

適用後画面ではこのように表示されます。テキストを入力するエリアと送信ボタンの色がそれぞれ変更されました。

背景の色を変えたので、今度はそれに合わせてテキストが見やすくなるように文字の色を変更します。

textarea{
background-color: #2885b9;
color:white;
}
input{
background-color: #2bb035;
color:white;
}

colorプロパティでは文字の色を指定することができます。background-colorのときと同じように色コードなどを入力します。

画面ではこのように表示されます。それぞれの文字の色が白になりました。

それぞれの枠線の表示を消してすっきりした感じにしてみましょう。

textarea{
background-color: #2885b9;
color:white;
border:none;
}
input{
background-color: #2bb035;
color:white;
border:none;
}

borderは枠線の太さや色・形を指定するプロパティです。また、値を「none」にすることで表示を消すことができます。

画面ではこのようになります。枠線の表示が消えました。

入力フォームと送信ボタンそれぞれの形を丸くしてみます。

textarea{
background-color: #2885b9;
color:white;
border:none;
border-radius: 10px;
}
input{
background-color: #2bb035;
color:white;
border:none;
border-radius: 5px;
}

border-radiusはボックスの角を丸くすることができます。値に指定した数値が大きいほど、丸くなる範囲が広くなります。

画面ではこのようになります。4つの角の形がそれぞれ変更されました。

最後に、全体の配置を中央寄せにしてみましょう。

ここではテキスト入力エリアと送信ボタン両方に対する指定を一度に行いたいと思います。そのためこのふたつの要素の親要素である、HTMLで「form」と名付けたクラスにCSSを適用します。

クラスを指定する場合は、以下のように「.」(ピリオド)の後ろにクラス名を入力します。

.form{
}
textarea{
background-color: #2885b9;
color:white;
border:none;
border-radius: 10px;
}
input{
background-color: #2bb035;
color:white;
border:none;
border-radius: 5px;
}

ここで指定されたものはテキストエリアと送信ボタン両方に適用されます。以下のように入力します。

.form{
text-align: center;
}
textarea{
background-color: #2885b9;
color:white;
border:none;
border-radius: 10px;
}
input{
background-color: #2bb035;
color:white;
border:none;
border-radius: 5px;
}

text-alignはブロック要素の配置を指定するプロパティです。「center」を指定することで、要素を中央に寄せることができます。

画面では以下のようになります。テキスト入力エリアと送信ボタン、両方にtext-alignが適用され要素が中央に揃えられました。

他にも全体の背景の色やボタンの大きさなど、CSSを使用すれば様々なデザインを指定することができます。

HTMLでは、文字やボタンの表示しかできませんでしたが、CSSを書くことで色や形の変更を行えました。

ぜひ色やサイズの数字を変えてみて、どこが変わったか確認してみてください。

次回は、「プログラミング」についてより詳しく見ていきます。普段使っているあのサービスはどんなプログラミング言語で作られているのか、知るきっかけになるはずです。

著者紹介


TechAcademy　(https://techacademy.jp/)

プログラミングやWebデザイン、アプリ開発が学べるオンラインスクールを運営。

TechAcademyマガジンでは、プログラミングやWebデザインなど技術に関する最新トレンド、ツールの使い方を紹介しています。開発作業や学習に役立つコンテンツがご覧になれます。

なお、本稿はTechAcademy の「はじめてのプログラミングコース」を元に解説しています。