スタイルシートを指定することで、ホームページのデザインは大幅に広がります。

ここでは、実際にスタイルシートを使って出来るデザインの方法を解説していきます。

今までのステップで行ったことも含まれていますので、復習の意味も含めて読んで下さい。

Advertisement

1.マウスホバーで文字色や背景を変更する

マウスホバーとは、マウスのアイコンが重なっている状態の事を指します。

例えば、
リンク
をマウスで触ってみて下さい。
アイコンに?マークが付きませんか?

その状況がマウスホバーです。

スタイルシートでは、マウスホバー状態になった時に文字や画像を変化させる事ができるのです。

マウスホバーで文字色や画像を変化させたい場合、セレクタにhoverを追加します。

具体的な書き方としては下図を見てください。

スタイルシートソースコード

p {
color: #000;
}

p:hover {
color: #00F;
}

表示

黒から青へ

この記述はpタグに対して文字を#000(黒色)に指定し、pタグがマウスオーバーされた時に#F00(青色)が反映される様になっています。

この様にセレクタに :hover を追記する事によってマウスオーバーした時の動きを指定する事ができるのです。

2.フォント(書体デザイン)

スタイルシートでフォントを指定することで、表示される書体デザインを変化させる事ができます。

ブラウザや個人のパソコンの状態によってはマイナーなフォントだと対応していない可能性もありますので、メジャーなフォントを指定するのが基本です。

フォントを指定しなければ、デフォルトでブラウザに設定されているフォントで表示されますが、念のためフォントは指定しておいた方が良いでしょう。

まず、フォントはfont-familyで指定します。

index.htmlとstyle.cssにそれぞれ下図のようにソースコードを書き込んで下さい。

index.htmlソースコード

image59

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>フォントを指定する</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="sample1">サンプル1</div>
<div class="sample2">サンプル2</div>
<div class="sample3">サンプル3</div>
</body>
<html>

style.cssソースコード

image60

コピー用

@charset "utf-8";

body {
}

div.sample1 {
font-family: "MS Pゴシック";
}

div.sample2 {
font-family: "メイリオ";
}

div.sample1 {
font-family: "ヒラギノ角ゴ Pro W3";
}

するとブラウザ上では下図の様に表示されるはずです。

ブラウザ

image61

少し分かりづらいですが、それぞれ指定されたフォントになっています。

上記のように個別にフォントを指定する事も出来るのですが、基本的にフォントは一括で指定します。
同じホームページで多数のフォントが使い分けられていたら違和感がありますからね。

基本的に、フォントはbodyタグに指定します。
そうすることで、ブラウザ上で表示されるフォントを一括で指定する事ができるのです。

さらに、ブラウザにフォントが対応していないときの為に、フォントの候補を一括で指定する事ができます。

では、下図のソースコードを見てください。

ソースコード

body {
font-family: "MS Pゴシック","メイリオ","ヒラギノ角ゴ Pro W3",;
}

この様にフォントの種類を並べることによってフォントの候補を指定していることになります。
フォントの候補は左側が優先されています。

つまりこの場合は、「MS Pゴシック」が第一候補、「メイリオ」が第二候補、「ヒラギノ角ゴ Pro W3」が第三候補となります。
第一候補がブラウザに対応していなければ、第二候補、第三候補といった順で下位の候補が適用されるのです。

万が一のことを考えて複数のフォントを指定しておくのが良いでしょう。

フォントの種類は多様にありますので、気に入ったフォントを探してみるのも良いでしょう。

3.サイズを%で指定

画像やフォントなどのサイズを変更する時には、widthとheight属性を使用します。

この時に、pxではなく%を使用する事も出来るのです。

サイズに%を利用する際に注意すべき点としては、比較対象が必要なことです。

下図をみて下さい。

ソースコード

image64

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サイズを%で指定</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="upper">
<p>pxで指定したdiv</p>

<div class="lower">
<p>%で指定したdiv</p>
</div>

</div>
</body>
<html>

スタイルシートソースコード

image65

コピー用

@charset "utf-8";

div.upper {
background-color: #00FF00;
width: 300px;
height: 300px;
}

div.lower {
background-color: #FF0000;
width: 50%;
height: 50%;
}

ブラウザ

image66

まず、ソースコードにはupperのクラス名を与えたdivと、そのdiv内にlowerのクラス名を与えたdivを作成しています。

そして、スタイルシートソースコードで、それぞれ背景色とサイズを指定している事がわかるはずです。

lowerは、upperに囲われていますので、lowerに%を指定した場合は、upperが比較対象となるのです。

つまりこの場合は、lowerのwidthもheightも50%に指定していますので、lowerのwidthとheightはupperのwidthとheightの50%(150px)になるのです。

この様にサイズに%を指定する場合には、親となる要素が比較対象になりますので、親となる要素にサイズを指定していなければ、上手く動作しない場合もあるいので気をつけて下さい。

また、htmlタグとbodyタグ双方のwidthとheightを100%に指定しておくことで、ブラウザを開いているウィンドウを比較対象にする事が可能になります。

4.背景を固定する

画像をスクロールさせても、背景を固定したままにする方法です。

背景を固定したままにするには、background-attachment属性にfixedの値を指定します。

スタイルシートソースコード

body {
background-image: url(sample_bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}

この方法を使用することによって、画面をスクロールしても背景画像が固定される事になりますが、デフォルト(初期値)では背景画像は左上に固定されます。
画像を固定する位置は、background-position属性で指定する事ができます。

スタイルシートソースコード

body {
background-image: url(sample_bg.gif);
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
}

上記のソースコードの場合は、画像を右上に固定する記述です。
top(上)、bottom(下)、right(右)、left(左)を組み合わせることによって、画像を固定する位置を指定できます。

また、
background-position: 10px 20px;
の様に記述することによって、細かな位置を指定することもできます。(この場合は、左から10px上から20pxの位置に固定)

(このページは現在作成途中です)これが最後の項目になります。
ここまで順を追ってやってきたならば簡単なホームページくらいならば作れるようになったのではないでしょうか。

ご意見や質問があれば質問掲示板メールフォームからお願いします。

Big-Sea All rights reserved.2010-2013
当サイト内の文章、画像など、すべての無断使用、転載を禁じます。