スタイルシートでデザインする

ホームページ制作

スタイルシートでデザインする


　スタイルシート(CSS )とは？

簡単に言うとページのデザインを変えるタグの事、ページのデザインを変えるタグ？
基本の文字のサイズ・色とリンクの色・強調等をページ事で変えられるタグなのです。

当サイトは、スタイルシートを使い基本の文字サイズを少し小さくしたり・Hタグの大きさ
を変える・リンクの表示等に使用しています。

スタイルシートの記述方法を紹介します。

スタイルシートの内容はHEAD内に記述します！ブラウンの部分がタグです。

<head>
<Style Type="text/css">
<!--
A{ text-decoration:none;}
A:link { text-decoration:none; color:#0000ff; }
A:visited { text-decoration:none; color:#009999; }
A:active { text-decoration:underline; color:#990000; }
A:hover{ text-decoration:underline; color:#ff0000; }
A:hover { background-color:#cccccc; }
body {font-size: 10pt;}
h1 { font-size: 13pt;}
h2 { font-size: 12pt;}
//-->
</Style>
</head>

A:link リンクの最初の色
A:visited リンクが一度押された後の色
A:active リンクを押した時の色
A:hover マウスが乗った時のリンク色
A:hover { background・・・ マウスが乗った時の背景色


A{ text-decoration:none;}　←リンクの下線を消したい場合に使います。

body {font-size: 10pt;}　←基本の文字サイズで値を変えると大きさが変わります。

h1 { font-size: 13pt;}　H1タグのサイズを変えるタグで値を変えると変わります。


　外部のスタールシートを使用する場合の方法を紹介

A{ text-decoration:none;}
A:link { text-decoration:none; color:#0000ff; }
A:visited { text-decoration:none; color:#009999; }
A:active { text-decoration:underline; color:#990000; }
A:hover{ text-decoration:underline; color:#ff0000; }
A:hover { background-color:#cccccc; }
tbody {font-size: 10pt;}
h1 { font-size: 13pt;}
h2 { font-size: 12pt;}

上記の内容をテキストエディタ等で作り、○○.cssとして作ります。
○○の部分は適当にファイル名を付けて下さい。

そしてスタイルシートを使いたいホームページのHEAD内に、下記の様に記述すれば設定完了です。

<LINK rel="stylesheet" type="text/css" href="../○○.css">

外部のスタイルシートを使う事により、簡単に文字サイズ・リンク色等をいっぺんに変える事が出来ますので便利です。

Webの情報で被った損害については、一切の責任を負いかねますのでご了承した上でご利用下さい。
SEO-webに掲載されている記事・写真・図表などの無断転載を禁じます。