もう8月半分過ぎちゃいましたね。早いもので…
最近、年月過ぎるのが早いと感じるリンです(老?)
HTMLでつくったWebページは、何の色もデザインも指定しないと味気ないものなのですが
ホームページ丸ごと、CSS(スタイルシート)というものでデザインを一括制御すると、雰囲気がガラッと変わります。
ちょっと簡単な実験をしてみましょう。
これがCSS(スタイルシート)のないとき。
そして、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」などの色番号も使えますので、一度お試しください♪