【CSS】スタイルシートの基本　～CSSの記述方法～

Content

スタイルシート(CSS)の基本
1. スタイルシートとは？
2. スタイルシートの書き方
「style」属性を使用する方法
<style>タグを使用する方法
別ファイルに記述したスタイルをHTMLから読み込む方法

スタイルシート(CSS)の基本

スタイルシートとは？

前回までのHTMLは見出しや文章、画像などの表示を担当するもので、役割としては決まったものをページに配置するということでした。しかしWebページといえば様々な色が使われていたり、文字のサイズやフォントが変えられていたりして見やすくデザインされていると思います。このデザインの部分を担当するのがスタイルシート(CSS)と呼ばれる言語の役割になります。

スタイルシートの書き方

スタイルシートはHTMLに追加する形で記述しますが、その方法は大きく分けて3つあります。これから1つずつ見ていくのでここではざっと目を通してもらうくらいで大丈夫です。

HTMLのタグに属性として追加する方法。これが一番シンプルで分かりやすいですが、タグ1つ1つに追記していく必要があるため、ページの規模が大きくなると大変です。
ヘッダーの部分(<head>タグの中)に記述する方法。<style>タグを使用してスタイルを指定する方法です。
別ファイルにスタイルを記述し、HTMLからそのファイルを読み込む方法。

スタイルシートではHTMLで構成した文章を様々な方法でデザインすることができますが、ここではわかりやすく色を変更するスタイルを例に上記3つの記述方法を説明します。

「style」属性を使用する方法

はじめにそれぞれのタグに「style」属性を設定する方法を説明します。下に書き方の例を記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
　　<meta charset="UTF-8">
　　<title>Hello!</title>
</head>
<body>
　　<h1 style="color:red;">Hello!</h1>
　　<p style="color:blue;">スタイルシートの利用方法<br>
　　タグに「style」属性を設定します。</p>
</body>
</html>

HTMLで属性を設定する方法について触れましたが、それと同じようにスタイルを追加できます。スタイル属性を追加する場合の基本形は以下の通りです。

<〇〇(タグ) style=”スタイル名1 : 値1 ; スタイル2 : 値2 ; ・・・”>

上のコードでは<h1>タグと<p>タグに「スタイル」属性を追加しています。この属性はほとんどすべてのタグに使用できます。スタイル属性を使用する場合には他の属性と同じようにタグの後ろに「style=」をつけて記述しますが、他の属性と違って属性名の後にスタイル名と値をセットで記述します。上の例ではスタイル名である「color」と値の「red」、「blue」をセットで使用しています。スタイル名と値は「: (コロン)」でつなげます。1つのタグに複数のスタイル属性を追加することもできますが、その場合は「スタイル名1 : 値1; スタイル名2 : 値2 ; …」というように「; (セミコロン)」でつなげます。

この「color」スタイルはテキストの色を表すスタイルです。「color:red」はテキスト色を赤色にするという意味になります。colorの値はこのように色名を指定する以外にRGB値を16進数で表すこともできます。この場合テキスト色を赤色にする場合は「color : #ff0000」、青色にする場合は「color : #0000ff」というように指定します。

「background-color」スタイルは背景色を表すスタイルです。「<body style=”background-color : blue ;」というように記述することでWebページ全体の背景色が青色になります。

<style>タグを使用する方法

1つ目のタグごとにstyle属性を追加する方法ではスタイルを設定したいすべてのタグにstyle属性の記述をしていく必要があるため、長いページになればなるほど大変です。また見出しには同じスタイルを適用したいといった場合に同じスタイルを
各見出しごとに記述していくのは面倒です。同じタグには同じスタイルを一括で適用したいという場合は、次に説明する<style>タグを使用する方法が便利できます。<style>タグは<head>タグにまとめて記述します。下のコードをみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Hello!</title>
 <style>
  body { background-color : #eeffee ; }
  h1 { color : red ; }
  p { color : blue ; }
 </style>
</head>
<body>
 <h1>Hello!</h1>
 <p>スタイルシートの利用方法<br>
 「style」タグを設定します。</p>
</body>
</html>

上のコードでは<body>タグ、<h1>タグ、<p>タグには何も設定されていませんが、ブラウザで表示すると色が変わっています。これは<head>タグの中の<style>タグで記述しているからです。

タグ名にはWebページで使用される「body」や「h1」が入ります。そのあとの{ }の中にスタイルを記述しています。<style>タグ内に記述されたスタイルは<body>タグや<h1>タグが実際に使用される際に適用されます。タグの種類ごとに記述するため、同じタグに同じスタイルを適用することができます。上の例ではWebページ内で使用される<h1>タグはすべて赤文字で表示されるようになります。

別ファイルに記述したスタイルをHTMLから読み込む方法

前述の<style>タグにスタイルを記述する方法は同じタグに一括でスタイルを適用できるため便利ですが、タグが多くなってくると<head>タグの中のスタイルの記述がどんどん長くなっていきます。また別のWebページで同じスタイルを使用したい場合でも新しいべーじで同じようにスタイルを記述していかなければなりません。このような場合はスタイルが記述された別ファイルを用意し、そのファイルをHTMLから読み込むようにします。こうすることで<style>タグの中身が長くなることもなく、別のWebページでも同じスタイルを使いまわすことができます。

まずは「CSSファイル」を作成してみましょう。メモ帳などのテキストエディタで新しいファイルを開いて以下のように書いてみてください。作成したテキストファイルはhtmlを記述しているファイルを同じ場所に拡張子を「.css」として保存します。ここでは例として「style.css」と保存しています。

body { background-color:#eeffee }
h1 { color:white; background-color:red; }
p { color:blue; background-color:white; }

次にhtmlから読み込むためのコードを見ていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
　　<meta charset="UTF-8">
　　<title>Hello!</title>
　　<link rel="stylesheet" href="style.css">
</head>
<body>
　　<h1>Hello!</h1>
　　<p class="s1">スタイルを使用します。</p>
</body>
</html>

左のコード内には<body>タグや<h1>タグに対してスタイルの記述はありませんが、ブラウザで表示すると背景色と文字色が変更されています。これはhtmlから「style.css」に記述されたスタイルを読み込んでいるためです。htmlからファイルを読み込む方法を詳しく見ていきます。

htmlでファイルを使用する場合には<link>タグを使用してファイルを読み込みます。「href=”style.css”」で使用するファイルを指定しています。「rel=”stylesheet”」はそのファイルを読み込むWebページとファイルの間にある関係性を表します。「style.css」はスタイルを記述している「スタイルシート」であることを示しています。

スタイル用のファイルを別で作成することでWebページが複数ある場合でも簡単にすべてのページに同じスタイルを適用できます。

今回はスタイルシートの書き方について整理しました。スタイルの記述方法は、1．1つ1つのタグに属性として記述する方法、2．<style>タグの中に記述する方法、3．スタイル用の別ファイルを作成しそれを読み込む方法、の3つがあります。Webページの規模によって3つを使い分けていくといいと思います。

次回も引き続きCSSについて書いていきます。