文具好きなナギさんの覚書き

文具だけじゃなく気になるモノや好きなモノを語る

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

time 2015/07/16

CSS(スタイルシート)とはスタイルシートとは
Cascading Style Sheet(略してcss)というのはホームページの見栄えを良くする技術です。
cssでホームページの見え方を設定することで、簡単にイメージを変えることができるようになります。

スタイルシートの設定を別ファイルにしておけば、それぞれのページに適用することで、一度に修正することができます。

論より証拠ということで、実際どのように変わるのか見てみましょう。

まずは、メモ帳(テキストエディタ)を使って次のようなHTMLファイルを作ります。

ブラウザで見るとこんな感じです。

WS000199

これにCSSでスタイルを設定して装飾を変えてみます。

ブラウザで見ると、こんな感じになりました。

WS000200

ずいぶん見え方が変わりましたね。
cssは各タグに対して設定しました。

今度は別ファイル(外部ファイル)にcssを設定して、装飾を変えてみます。

headタグの間にlinkタグで、使うCSSを指定することで、スタイルシートが有効になります。

ブラウザでみると、こんな感じに変わりました。

WS000202

「main.css」の中身はこうなっています。

CSSを外部ファイルにして指定すれば、気軽にデザインを変えることができるようになります。

 

down

コメントする




*