HOME > DO（実行） > WEBサイト作成―CSS

実行ウェブサイト作成6css

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

css スタイルシートとは正式名称はCascading Style Sheets（カスケーディングスタイルシート、CSS）といい、HTML文章のレイアウトやデザイン等の「見栄え」を定義するための技術です。

「HTMLで文章の構造化を行い、見た目はスタイルシートで指定する」ことが推奨されています。スタイルシートは、HTMLをわかっている人でも取っ付きにくいかもしれませんが、ルールを覚えてしまえばとても簡単に使うことができます。

文字の背景色を指定したり、リンクカラーを変更したり、スタイルシートを使うと今までのHTMLでは表現出来なかった細かい表示設定が可能になります。

ブログ等でもデザインのカスタマイズにはスタイルシートが使われています。またスタイルシートはホームページのデザイン変更をする場合に、スタイルシート一枚にデザインを指定していれば、ファイル一枚書き換えるだけで全てのページのデザインを変更することが可能です。

役立つことが多いので、ぜひ覚えて利用してみてください。

スタイルシートの指定の仕方

スタイルシートはスタイルシートを記述したファイルを別に用意してリンクを記述して利用する方法と、ファイルにそのまま指定する方法があります。記述方法はそれそれ異なりますがサンプルの実行結果はどちらも同じです。

1. 外部ファイルでリンクする方法。

外部ファイルでリンクする場合は<head>タグ内に
『<link rel="stylesheet" href="ファイル名" type="text/css">』
を記述して、スタイルシートを別ファイルに記述します。

外部ファイルでリンクメリットは、例えば100ページ分の背景を黒から白にかえるとなるとファイルにそのまま記述していては100ページ全部修正しなければいけません。しかし外部ファイルのスタイルシートで指定してあると、外部ファイルの１ケ所を変更するだけで、すべてのページに反映されます。

「1.外部ファイルでリンクする」サンプル

「body1.html」
<html>
<head>
<link rel="stylesheet" href="common.css" type="text/css">
</head>
<body>
スタイルシートを外部ファイルでリンクしています。
</body>
</html>
「common.css」
body {
font-size: 12px;
font-weight: bold;
color: #FFF;
background-color: #5BA1A3;
}

2. ファイルにそのまま指定する。

ファイルにそのまま指定するには<head>タグ内に
『<style type="text/css">スタイルシートの記述</style>』
と記述します。

「2.ファイルにそのまま指定する。」サンプル

<html>
<head>
<style type="text/css">
body {
font-size: 12px;
font-weight: bold;
color: #FFF;
background-color: #5BA1A3;
}
</style>
<body>
ファイルにそのまま指定する。
</body>
</html>