もう8月半分過ぎちゃいましたね。早いもので…

 

最近、年月過ぎるのが早いと感じるリンです(老?)

 

 

 

HTMLでつくったWebページは、何の色もデザインも指定しないと味気ないものなのですが

 

 

 

ホームページ丸ごと、CSS(スタイルシート)というものでデザインを一括制御すると、雰囲気がガラッと変わります。

 

 

 

ちょっと簡単な実験をしてみましょう。

 

 

 

 

これがCSS(スタイルシート)のないとき。

 

 


無料でホームページつくれます!おカネのかからないPR方法伝授!                -CSS(スタイルシート)のないとき

 

 

そして、CSS(スタイルシート)のあるとき!

 

 


無料でホームページつくれます!おカネのかからないPR方法伝授!                -CSS(スタイルシート)のあるとき

 

ちょっとカワイくなりましたね d(゚-^*) ♪

 

 

 

今回は簡単に、色だけ指定しましたが、もっと細かく、書体・行間の幅・リンクの色…などなど

 

 

 

このCSS(スタイルシート)をとことん駆使することにより、見やすく美しいホームページがつくられていくのです。

 

 

 

参考までに、今回使ったファイルは

 

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" type="text/css" href="ex.css">
</head>
<body>
<h1>ホームページのつくりかた</h1>
<h2>①土台をつくりましょう</h2>
<p>超基本形のタグを丸写しします。</p>
<h2>②ヘッダーを作成</h2>
<p>必要なmetaタグを入力します。</p>
<h2>③見出しを作成</h2>
<p>見出しタグの中に文字を入力します。</p>
<h2>④記事を作成</h2>
<p>段落タグの中に文章を入れていきます。<br>
画像も入れてみましょう。</p>
<p><img src="hana.jpg" alt="花" align="right"></p>
<p>このように文章と画像を配置することができます。</p></body>
</html>

 

 

↑メモ帳にコピー&ペーストじて、ファイル名「ex.html」で保存

 

 

body { background: lavender; }
h1 { background: plum; color: white; font-size: 25px }
h2 { background: white; color: orchid; font-size: 16px }

 

 

 

↑こちらもメモ帳にコピー&ペーストじて、ファイル名「ex.css」で保存

 

 

 

これらを同じフォルダ内、またはどちらもデスクトップ上に保存しておくと、CSSが反映されます。

 

 

 

(離ればなれになっちゃうと、デザインがいうことをきかなくなります…)

 

 

 

CSSの「plum」「white」などの色名のところを、別の色名に変えてみると…どうなるでしょう (o^-^o)

 

 

 

「#ffffff」などの色番号も使えますので、一度お試しください♪