スタイルシートとは

※新規ウインドウで開きます PDF印刷Eメール

スタイルシート(Cascading Style Sheet:CSS)とは、HTML で作ったページの見栄えをもっとよくするための技術です。

今までは文字の色を変えたい時は<font color="">で囲み、大きさを変えたい時は<font size="">で囲んで設定してきました。
例えばサイトの模様替えをする時、これを修正したいとなると、1つ1つのファイルを見直し書き直す必要があります。

しかし、あらかじめスタイルシートで色の設定をしておけば、スタイルシート1つを修正するだけで一気に模様替えする事が可能です。

 

他にも画像の細かい位置設定や余白の設定など、HTMLでページを作るよりもさらに凝ったデザインに出来ます。

HTMLに慣れてきたら、スタイルシート(以下CSS)を使ったページ作りに挑戦してみましょう。


CSSを使う準備


CSSを使うには、使用するCSSファイルを作成し、HTMLファイルから呼び出す必要があります。

CSSファイルの作成

メモ帳などで、拡張子「.css」のファイルを作成します。
ファイル名は半角英数で入力して下さい。
内容は最初はどんなものでもかまいません。

例:style.css

HTMLファイルの設定 <head>〜</head>内の何処でもいいので、
<link rel="stylesheet" href="ファイル名.css" type="text/css">
と入力します。
href="〜"はリンク設定をする時の<a href="〜">や画像の<img src="〜">と同じく、HTMLファイルから見たCSSファイルの位置を入力します。