スタイルシートでデザイン（1） CSS (Cascading Style Sheets) スタイル

Web ページプログラミング
Lecture 4
Oct. 17th 2016
スタイルシートでデザイン（1）
CSS (Cascading Style Sheets)
スタイルシートでデザインを整えよう
今まで制作した Web ページは HTML だけを使用して作った見た目のデザインを省いた簡
素なものでした。そのページにデザインを施すのがスタイルシートの役割です。現状、見た目
のデザイン面では HTML の機能を利用することが多いのも事実ですが、Web ページ制作方法
のトレンドは、HTML とスタイルシートを分離する方向に流れています。
メリット：複数のページを一括で管理できる
スタイルシートの内容を設定しておけば、それを必要な箇所に適用できます。また、スタイ
ルシートを一枚のファイルで管理し、Web サイト内の文書で共有すれば、修正もスタイルシ
ートのファイル 1 枚で済むなど、見た目のデザインと管理作業を大幅に効率化できます。
スタイルシートの記述方法：
HTML のファイルと別にスタイルシートのファイルを用意し、HTML ファイルからスタイ
ルシートのファイルにリンクする方法を学習します。
<head>タグ内の情報として、<link>タグでスタイルシートのファイルを読み込み、HTML フ
ァイル全体に適用させます。
スタイルシートの指定には、href 属性の値として、スタイルシートファイルのパス（場所）
を記述し、スタイルシートファイルへのリンクであることを示すために rel 属性と type 属性
も合わせて記述します。
<head>
...
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<link href=”mynamestyle.css” rel=”stylesheet” type=”text/css”>
</head>
同じスタイルシートを複数ページに対して使う場合には、とても便利な方法です。この方法
1
Web ページプログラミング
Lecture 4
Oct. 17th 2016
だと、後のサイトメンテナンス時においても、スタイルシートファイルを 1 枚修正するだけ
で済むので、作業の手間を省くことができます。
なお、スタイルシートのファイルは、拡張子を「.css」と付けて保存します。
背景の色を変えるには： background-color
スタイルシートファイル (mynamestyle.css)
body { background-color: # FF7F50; }
p { color: brown; }
文字の色を変えるには：
color: 色
mystyle.css スタイルシートファイル:
body { background-color: lightyellow ;
color: #000080; }
h1 { background-color: green;
color: white; }
ここまで、HTML は文章の意味的な役割を記述するもので、表示はブラウザ次第であることを強
調してきました。あるブラウザでの表示方法を前提に、HTML で見た目を制御しようとすると、他
の環境では意味が通じにくい、相互運用性の低い情報となってしまいます。
Web の表現を作者が指定するには、HTML ではなく、スタイルシートという別の機能をもちい
ます。HTML では「意味」だけを記述し、その意味に対してスタイルシートで「表現」を対応づけ
るという分業を行なうのです。
意味と表現を分離することで、HTML の相互運用性が確保されます。また、環境に応じてスタイ
ルシートを取り替えれば、全く同じ HTML を用いつつ、それぞれの特長を生かした表現が可能に
なります。
CSS のスタイルは、HTML 文書の「誰の」「何を」
「どうする」という情報を宣言します。たと
えば h1 要素を赤い文字にするには h1 {color: red}という具合です。ここで誰(h1)の部分を「セレ
クタ」
、何(color)を「プロパティ」
、どうする（red）をその「値」と呼びます。
<head>
…略…
<link href=”mynamestyle.css” rel=”stylesheet” type=”text/css”>
</head>
2
Web ページプログラミング
Lecture 4
Oct. 17th 2016
外部スタイルシートの長所：
１．外部スタイルシートを利用することで、ヘッダー部分に記述する情報が少なくなり、サーチエ
ンジン最適化には効果的となります。検索エンジンでは、キーワードの出現位置がソースの最
初の方であるほど、重要視されると言われているためです。ヘッダー部分のデータが少なくな
れば、必然的に、コンテンツの出現位置が上位になるというわけです。
２．外部スタイルシートは複数のページで共有することが可能です。そのため、外部スタイルシー
トを利用することで、簡単に複数ページのデザインを統一することができます。
同じようにデザインされていることで、ユーザーはどこが重要な見出しで、どこにメニューがある
のかといったことを、すぐに判断することができるためです。
いきなり大きくデザインが変わってしまうと、
「他のサイトにジャンプしたのだろうか？」とユー
ザーを悩ませることにもなるかも知れません。
もう一つのやり方としては、
CSS ルールを直接 HTML ファイルの中に埋め込む方法があります。
スタイルシートを入力し始めるために、head タグの中に style タグを入れます。スタイルシー
トはすべて style タグの中に入力していきます。
<head>
…略…
<style type="text/css">
<!-CSS ルール
-->
</style>
</head>
<head>タグ内に<style>タグを記述し、その中にスタイルシートを記述する方法です。<style>タグ
には「text/css」を値に持った type 属性を記述し、<style>タグの中身がスタイルシートであること
を示します。基本的には、この記述だけで十分なのですが、スタイルシートを認識しないブラウザ
の場合、スタイルシートの文字をブラウザ上に表示してしまうことがあります。これを防ぐため
に、コメントタグ「」でスタイルシートの部分をさらに挟み込みます。
埋め込み方式は、そのページ独自のスタイルを指定したいときによく利用されます。
背景の色を変えるには： background-color
見出し文字の大きさを変えるには：
h1 { background-color: lightseagreen; }
size: 文字の大きさ
文字の色を変えるには：
h1 { font-size: 1.5em; }
color: 色
h2 { background-color: #20B2AA ;
24px;
font-
0.6cm;
18pt;
150%
color: #E0FFFF; }
3

Download Report