スタイルシートについて

Loading

スポンサードリンク

スタイルシートの書き方

スタイルシートとは、HTMLで記述されたページの見栄えに関する制御(簡単にいうとWebページのデザインとレイアウトを定義したもの)です。 一般的にスタイルシートとはCSS(Cascading Style Sheets＝カスケーディング・スタイルシート)の事をいいます。CSSの定義方法は3つありますので紹介しておきます。

まずはCSSの書き方

要素 { プロパティ [ 属性 ]：プロパティ値 [ 値 ]； }

要素とは<div>,<h1>,<p>等の事です。各要素にはブロクレベル要素インラインレベル要素がありますが、この部分については後で説明します。

CSS指定に関するごく簡単な解釈は[要素] の [何]を [どうする]かという事です。例えば見出し<h1>を赤字にしたいのであれば下記のように指定します。

[ 要素 / h1 ] の [ 何を / 文字色 ] を [ どうする / 赤字 ] にする

h1 { color: #ff0000; }

スタイルシートの定義方法

インライン

インラインスタイルとはHTML内のタグに直接指定する方法です。タグの中に設定していきます。

<要素 style=" プロパティ（属性）：プロパティ値（値）； ">

例えば　<p>スタイルシート</p>　という段落タグの文字色を赤く指定する場合

スタイル指定前

<p>スタイルシート</p>

スタイル指定後

<p style="color: red;">スタイルシート</p>

では次に上記設定にプラスしてフォントサイズを90%にしてみましょう

赤字でフォントサイズ90％に指定後

<p style="color: red;font-size: 90%;">スタイルシート</p>

このように個々のタグに対してそれぞれ指定します。

複数指定するときは「；」で区切ります。一番最後の指定には「；」を付ける必要はありませんが、追加指定をした際に忘れる場合がありますから、必ず指定の最後も「；」で終わる癖をつけておきましょう。

<head>内に記述

内部スタイルシートは、HTMLの<head>～</head>内にスタイルシートを記述する方法です。インラインスタイルが個別に指定するのに対し内部CSSは1ページ全体の同一タグについて指定する事が出来ます。

<html>
<head>
<title>**********</title>

<style type="text/css">
<!--
  p{ color: red; }
-->
</style>
</head>
<body>

<p>スタイルシート</p>

</body>
</html>

上記のように、<style type="text/css">・・・・</style>でマークアップし中に<!--要素｛プロパティ（属性）：プロパティ値（値）；｝-->という形で指定していきます。

では、同じくプラスフォントサイズ90%を指定すると

<html>
<head>
<title>**********</title>

<style type="text/css">
<!--
p{
color: red;
font-size: 90%;
}
-->
</style>
</head>
<body>

<p>スタイルシート</p>

</body>
</html>

上記サンプルでは<p>を1つしか付けてませんが、内部CSSを指定してやるとそのHTMLファイル内にあるすべての<p>に適用されます。

因みに下記のように記述しても構いません。好みの問題かな。

<style type="text/css">
<!--
p{ color: red; font-size: 90%; }
-->
</style>

外部CSS

外部スタイルシートとは、HTMLファイルとは別のファイル[拡張子は【.css】]にスタイルシートを記述してリンクさせる方法です。

CSSの保存場所がHTMLファイルと同じ場所の場合は

<link rel="stylesheet" href="ファイル名.css" type="text/css">

保存場所がHTMLファイルとは別の場合は

<link rel="stylesheet" href="保存先フォルダ名/ファイル名.css" type="text/css">

上記ソースをを<head>～</head>内に挿入します。

今まで同様に,,,,,外部CSS指定後（CSSのフォルダを作った場合）

<html>
<head>
<title>**********</title>
<link rel="stylesheet" href="保存先フォルダ名/ファイル名.css" type="text/css">
</head>
<body>
<p>スタイルシート</p>
</body>
</html>

外部CSSファイルの中身

p{
color: red;
font-size: 90%;
}

上記の記述例を見ても分かると思いますが、インラインに記述した場合はページのレイアウトやデザインを変更しようとした場合、一つ一つのページを変更する事になりページ数が多ければ大変な時間と労力を費やしてしまいます。また内部スタイルシートの場合もレイアウトやデザインの設定のみならず、各タグの設定（指定）が増えればおのずとHTML内への記述が増え、インライン同様に変更には時間と労力がかかり、またSEO上もあまりよくありません。（SEO対策に関しては別ページで説明）よって当サイトでは外部CSSを利用します。外部スタイルシートの設定方法については次ページ【はじめに準備するもの：フォルダをつくる】を参考にして下さい。

idセレクタとclassセレクタについて

上記の内部・外部CSSの指定方法はページ全体に適用されますが、【idとclass】はある特定のタグのみに適用する際に使います。そういう意味ではインラインに似ていますね。

また、【idとclass】は自分で任意の名前を付けて各タグに適用します。例として

HTMLの記述 <div id="name"> /　対応するCSSの記述　#name
HTMLの記述 <div class="name"> / 対応するCSSの記述 .name

続いて id と class について説明する前に、boxモデルについて説明します。

スタイルシートでレイアウトする際、基本となるのはボックスと呼ぶ divタグ の組み合わせです。簡単に説明すると、【ヘッダー（header）部分に1つのbox】【コンテンツ（contents）部分に1つのbox】【サイドバー（sidebar）部分に1つのbox】【フッター(footer)部分に1つのbox】を使う、後はそれらの配置を決めるだけ,,,,みたいな感じです。解ります？

boxモデルの配置図
header部分のbox
contents部分のbox sidebar部分のbox
footer部分のbox

idによる指定

idによる指定は、主にレイアウトの際に使用します。(もちろんそれ以外にもしようしますが)サイト全体を通して、基本的にレイアウトはどのページも共通したものを利用します。各ページでレイアウトがバラバラなんて訪問者の立場なら「ちょっと？」ですよね。

idによる指定はページ内の某タグに一度しか使えません。

指定方法は上記【boxモデルの例】を参考にすると、

設定
ブロック名 ID名 幅 高さ
header部分 header 700px 100px
コンテンツ部分 contents 500px 500px
サイドバー部分 sidebar 200px 500px
footer部分 footer 700px 100px

HTML上のidによる指定

<html>
<head>
<title>**********</title>
<link rel="stylesheet" href="保存先フォルダ名/ファイル名.css" type="text/css">
</head>
<body>
<div id="headet">～</div>
<div id="contents">～</div>
<div id="sidebar">～</div>
<div id="footer">～</div>
</body>
</html>

CSSの中身

#header{
width: 700px;
height: 100px;
}

#contents{
width: 500px;
height: 500px;
}

#sidebar{
width: 200px;
height: 500px;
}

#footer{
width: 700px;
height: 50px;
}

となります。これが基本で、ここに float position プロパティを指定して段組します。

クラス(class)による指定

クラスによる指定は非常に便利です。

例として、CSS内で<p>は全てフォントサイズ90%、フォントカラー青と指定していたと仮定します。しかしページ内のある箇所だけはフォントサイズ120%、フォントカラー赤にしたい時

まず任意の名称を【sample】とすると

<html>
<head>
<title>**********</title>
<link rel="stylesheet" href="保存先フォルダ名/ファイル名.css"type="text/css">
</head>
<body>
<p>スタイルシート</p>
<p class="sample">スタイルシート</p>
</body>
</html>

CSSの中身

p{
font-size: 90%;
color: blue;
}

/* ココから下がclassスタイルの指定 */

.sample{
font-size: 120%;
color: red;
}

以上簡単ではありますが、説明を終わります。

【id】と【class】の名称については任意ですが、なるべく解りやすいものにしましょう。後々レイアウト・デザイン変更等の際に困る事があります。

またこれらのテクニックは【スタイルシートレイアウト】のみならず、テーブルでレイアウトした際の長々とした記述の削減にも使えますよ。

スポンサードリンク